Different textures from InstancedMesh

Questions
, ,
1

I’m trying to solve the problem of mapping different textures in InstancedMesh using a texture atlas by shifting uv. But for some reason I don’t have any image displayed. What is the problem? I have 1 row and 6 columns in my sprite. The pictures are 48x48 each.

const materials = new ShaderMaterial({
                    uniforms: {
                        textureAtlas: { value: imageLoader.load('sprite.png'), (texture) => {
                            texture.wrapS = RepeatWrapping;
                            texture.wrapT = RepeatWrapping;
                            texture.needsUpdate = true;
                        }) },
                        atlasSize: { value: new Vector2(6, 1) } 
                    },
                    vertexShader: `
                        attribute vec2 offset;
                        varying vec2 vUv;
                
                        void main() {
                            vUv = uv / atlasSize + offset / atlasSize;
                            gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
                        }
                    `,
                    fragmentShader: `
                        uniform sampler2D textureAtlas;
                        varying vec2 vUv;
                
                        void main() {
                            gl_FragColor = texture2D(textureAtlas, vUv);
                        }
                    `,
                });
const mesh = new InstancedMesh(imageVO.geometry, materials, item.length);
                      const offsets = [];
                      for (let i = 0; i < item.length; i++) {
                        const col = i % 6; 
                        offsets.push(col / 6, 1);
                    }
                        const offsetAttribute = new InstancedBufferAttribute(new Float32Array(offsets), 1);
                        mesh.geometry.setAttribute('offset', offsetAttribute);
                    scene.add(mesh)
2

Maybe, the second parameter of InstancedBufferAttribute needs to be 2, instead of 1? :thinking:

3

Tried it, it doesn’t work

4

Any chance to provide a minimal live code working example, that demonstrates the issue? jsfiddle, codepen etc.

5

By the way, why is it 1 instead of 0 for the second coord in the offset?
And it seems you don’t need to divide col by 6, thus it will be simply offset.push(col, 0);

And in the vertex shader, vUv will be something like this:

vUv = (uv + offset) / atlasSize;

изображение
изображение966×853 57.1 KB

I wrote a small example, for you: Edit fiddle - JSFiddle - Code Playground

3 Likes
6

Okay, I’ll try it and let you know if it works. I don’t know if it’s forbidden by the forum rules, if not, send me a private message, if it’s forbidden, I’ll just answer you here.

7

It’s not :slight_smile:
Feel free to write here.

2 Likes
8

Nice! Work it! I have the following question. I tried to search for it now, but no luck. Can you tell me how to dynamically update positions and quaternion of objects in InstancedMesh?

9

There are several examples with InstancedMesh, have a look at their source code: three.js examples

10

Ok thanks. Another question. How do I delete a certain object in InstancedMesh?

11

Don’t hesitate to use forum’s search :slight_smile:
You can find the stuff you’re interested in.
For example: How to show and hide an instance in instance mesh