Reusable repeating textures: natural height/width

[dhasenan]

I have a repeating texture -- brick wall -- that I want to apply to a large number of objects -- different sized walls. I want the texture to appear at the same scale every time. Three doesn't make this easy.

Right now, three allows me to specify the number of times the texture repeats on any surface it's applied to. This means I need to load the image, configure its natural scale (one repeat == 4.0 units vertical and 2.0 units horizontal, for instance), and stash that away in my own code. Then, when it's time to apply that to a wall, I look at the dimensions of the wall I'm applying it to, create a Texture and a MeshBasicMaterial from that, create a new array of materials to apply to that BoxGeometry, and then throw all that away because I can't reuse it on the next wall.

That's about eight allocations per BoxGeometry and a couple dozen lines of code. Or it's a lot of data that I have to precalculate and store somewhere. Fortunately, I only have to do this when the scene geometry changes, but still, that's not happy-making.

The natural way of specifying a repeat would be to say what surface area a texture takes up. My brick wall texture is 2m == 4.0 units tall and 1m == 2.0 units wide. Tile it the appropriate number of times for this surface and don't bug me for every little detail.

[WestLangley]

What API would you suggest we use, in lieu of texture.repeat.set( 4, 2 )?

[titansoftime]

A solution to this would be nice. Currently instead of caching one texture and using it on multiple walls (or whatever) with different repeat requirements, I have to cache a texture at it's repeat value which cannot be used on a surface with a different repeat requirement. If I have a bunch of walls with different lengths (requiring different repeat values) my memory usage gets a little out of control (even with compressed textures).

Is it possible to reuse a texture with different repeats or would it be preferable to alter the geometries uv's to accommodate?

[WestLangley]

Is it possible to reuse a texture with different repeats

Yes. http://threejs.org/examples/misc_ubiquity_test2.html shows you how to do that by cloning the texture. The cloned textures share the same loaded image.

or would it be preferable to alter the geometries uv's to accommodate

Yes. That would be more efficient.

[titansoftime]

Excellent, thank you =]

[titansoftime]

I am using this solution thanks to WestLangley: http://stackoverflow.com/questions/27097884/three-js-efficiently-mapping-uvs-to-plane

I can't imagine a more efficient way to do it.

[MEBoo]

@mrdoob any news/alternative about?
@titansoftime this solution is good for simple geometries, but what about for imported ones?

I have many materials each one with its own measure, to be applied tiled to many imported geometries with 10000 faces each.
Better explanation: the user can choose/change the material of an imported OBJ mesh, and each material has its own tile size while each OBJ has many faces with different sizes.

So I think this topic marked as suggestion is the only way to do that

[Mugen87]

The cloned textures share the same loaded image.

Yes, but with the current code the engine uploads the texture multiple times to the GPU not just once, see #5821.

However, cloning textures in order to configure different texture transform settings is the intended workflow. I hope it can properly be supported when #17766 is solved.

this solution is good for simple geometries, but what about for imported ones?

There will be no solution by the engine that can automatically handle all possible geometries. It's best to author proper uv-coordinates at design time when possible. Otherwise you need a manual task like mentioned in #5674 (comment) although this gets complicated for more complex geometries.