How to set different textures on each InstancedMesh?

Questions
, , ,
1

I have two cubes made with InstancedMesh:

const boxGeometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshStandardMaterial();
const mesh = new THREE.InstancedMesh( boxGeometry, material, 2 );

How can I set different textures(images) on each of these two cubes?

My goal is to set different textures while keeping the number of draw calls low for many cubes.

If it’s not possible, let me know if you know a different approach to have a different texture with low draw calls.

2

This isn’t really possible given how instancing works in hardware APIs. An instanced mesh must use a single material, and each material can only use a certain number of texture samplers, often ~16. Array textures and custom shaders could be one way to work around this, but I don’t know of examples for it. Creating a texture atlas and using a UV offset (again, needs a custom shader) for each instance is probably the more common way.

Perhaps helpful: three.js - InstancedMesh with unique texture per instance - Stack Overflow

3 Likes
3

Here random colors. maybe textures can be implemented same:
https://threejs.org/examples/webgl_instancing_raycast.html
Or use InstancedBufferGeometry with custom shader

image
image814×307 37 KB

4

Always thank you for your help and advice.

Creating a texture atlas and using a UV offset (again, needs a custom shader) for each instance

I will look into this approach.
Thank you so much.