How to change the textures of each instance dynamically?

Questions
1

I’m creating a game which is full of characters that are just a basic spheres. Each sphere has it’s own color, and a texture applied. Since there will be 100s of “characters” with around 20 textures that need to dynamically change, I wish to instance them.

How can this be accomplished, if possible? Would I need to create a separate instance for each texture?

Using mesh.setColorAt( i, color ); works for color, but is there an offset option for the texture, or something similar?

Creating the characters as a separate object, I achieve this via offsetting the texture

// my object
this.face = Math.floor( Math.random( ) * 16 );
this.texture = textures['faces-atlas'].clone( ); // 2048x2048 texture atlas comprised of 512x512 textures (4x4)
this.texture.center.x = 0;
this.texture.center.y = 0;
this.texture.offset.x = 0.25 * ( this.face % 4 );
this.texture.offset.y = 0.25 * Math.floor( this.face/4 );
this.geometry = new THREE.SphereGeometry( this.size/2, 32, 16 );
this.material = new THREE.MeshToonMaterial( {
	color: this.color,
	map: this.texture,
	gradientMap: this.toonTexture
} );
	
this.material.onBeforeCompile = ( shader ) => {
	const custom_map_fragment = THREE.ShaderChunk.map_fragment.replace(
		`diffuseColor *= sampledDiffuseColor;`,
		`diffuseColor = vec4( mix( diffuse, sampledDiffuseColor.rgb, sampledDiffuseColor.a ), opacity );`
	);
		
	shader.fragmentShader = shader.fragmentShader.replace( '#include <map_fragment>', custom_map_fragment );
};

this.object = new THREE.Mesh( this.geometry, this.material ); // need this 'object' instanced & change each texture dynamically
2

The point of InstancedMeshes is to have duplicates of exactly the same material-geometry combinations - you cannot swap material parameters between the instances (InstancedMesh does allow for some customization in terms of color passed independently, but that won’t help much for textures.)

If that’s a viable option, you can create a texture atlas (ie. all character texture options bundled up into a single image), and then pass that as the texture for instanced meshes - but you’ll need a custom shader for that, so that you can pick specific subregion of that texture atlas based on gl_InstanceID.

3 Likes
3

Hi mjurczyk, thanks for the reply!

Yep I’m using a single image for all the textures, I got that far reading upon it, I just don’t know the method used of picking the specific subregion

4

You can use an instanced buffer attribute with an indices of texture chunks, or with pre-computed UVs per instance.

For example, I used the first approach (with texture chunk indices)

изображение
изображение854×853 78.6 KB

Demo: JSFiddle

5 Likes
5

Hey prisoner, perfect thank you!

1 Like
6

Hi, thank you very much for this post which greatly helps !
Then, how do you update dynamically the index ? I’m brand new to shaders and InstancedMeshes and struggle with this…
thank you for your reply !

7

Thank you very much for this solution !
I struggle to have a different texture per face of each box… Do you know how to manage this ?

9

Instanced buffer attributes will help :thinking:

изображение
изображение853×807 142 KB

Demo: Log in - JSFiddle - Code Playground

4 Likes
10

Hi @prisoner849 ,
Fantastic ! You’re the best…
Thank you very much for your invaluable help, it saves my project !
Your working demo helps me understand better how textured shaders work, and it’s a must have to work with three.js
have a nice day and nice weekend !

1 Like
11

FYI: this link is not public

12

Ha, true. You have to be logged in. Funny :thinking:
I don’t know why JSFiddle behaves this way nowadays.

1 Like