Basically I have a rather sizeable array of wooden panels, that I am generating via code (from a base file) I would like to offset the texture so the wood texture is different on each one. However, using the offset parameter on the texture applies it to every model like that which does not do anything for my problem. How can I apply a different part of the texture to a model, without having to make a bunch of separate models?
Instanced rendering means all instanced meshes share the same material and thus the same texture coordinate transformation. So using the default uvTransform of three.js won’t work here.
However, you can try to use a separate instanced attribute and use it to hold the data for texture offsets per instance (similar to position offsets).
2 Likes
That should work, I can probably even use the position as the parameter so that I can guarantee that it is different. Do you happen to have any example / documentation that I can read up on that would point me to the desired effect?
Well, it might be helpful to study how the following example is implemented:
https://threejs.org/examples/webgl_buffergeometry_instancing
Introducing a new instance of InstancedBufferAttribute representing the texture offsets could do the trick.
1 Like