Отображение текстуры UV для каждого экземпляра в Three.js InstancedBufferGeometry

Question

У меня есть InstancedBufferGeometry, состоящая из одной плоскости:

const plane = new THREE.PlaneBufferGeometry(100, 100, 1, 1);
const geometry = new THREE.InstancedBufferGeometry();
geometry.maxInstancedCount = 100;
geometry.attributes.position = plane.attributes.position;

geometry.index = plane.index;
geometry.attributes.uv = plane.attributes.uv;

geometry.addAttribute( 'offset', new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 ) ); // an offset position

Я применяю текстуру к каждой плоскости, которая работает, как и ожидалось, однако я хочу применить различные области текстуры к каждому экземпляру, и я не уверен в правильном подходе.

На данный момент я попытался создать ультрафиолетовый фильтр для каждого экземпляра, основываясь на структуре ультрафиолетового излучения для одной плоскости:

let uvs = [];

for (let i = 0; i < 100; i++) {
    const tl = [0, 1];
    const tr = [1, 1];
    const bl = [0, 0];
    const br = [1, 0];
    uvs = uvs.concat(tl, tr, bl, br);
}

...

geometry.addAttribute( 'uv', new THREE.InstancedBufferAttribute( new Float32Array( uvs ), 2) );

Когда я делаю это, у меня не возникает никаких ошибок, но каждый экземпляр - только один цвет (все экземпляры одного цвета). Я попытался изменить размер экземпляра, а также сетки для каждого атрибута (что я не до конца понимаю, пытаясь найти хорошее объяснение в документации).

Я чувствую, что я близко, но я что-то упускаю, поэтому точка в правильном направлении была бы фантастической!

(Для справки вот мои шейдеры):

const vertexShader = `
    precision mediump float;

    uniform vec3 color;
    uniform sampler2D tPositions;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    attribute vec2 uv;
    attribute vec2 dataUv;
    attribute vec3 position;
    attribute vec3 offset;
    attribute vec3 particlePosition;
    attribute vec4 orientationStart;
    attribute vec4 orientationEnd;

    varying vec3 vPosition;
    varying vec3 vColor;
    varying vec2 vUv;

    void main(){
        vPosition = position;
        vec4 orientation = normalize( orientationStart );
        vec3 vcV = cross( orientation.xyz, vPosition );
        vPosition = vcV * ( 2.0 * orientation.w ) + ( cross( orientation.xyz, vcV ) * 2.0 + vPosition );

        vec4 data = texture2D( tPositions, vec2(dataUv.x, 0.0));
        vec3 particlePosition = (data.xyz - 0.5) * 1000.0;
        vUv = uv;

        vColor = data.xyz;

        gl_Position = projectionMatrix * modelViewMatrix * vec4(  position + particlePosition + offset, 1.0 );
    }
`;

const fragmentShader = `
    precision mediump float;

    uniform sampler2D map;

    varying vec3 vPosition;
    varying vec3 vColor;
    varying vec2 vUv;

    void main() {
        vec3 color = texture2D(map, vUv).xyz;

        gl_FragColor = vec4(color, 1.0);
    }
`;

Answer 1

Поскольку все мои экземпляры должны занимать прямоугольную область одинакового размера, но со смещением (как у спрайтового листа), я добавил атрибут UV offset и UV scale для каждого экземпляра и использую его, чтобы определить, какую область карты использовать:

const uvOffsets = [];
for (let i = 0; i < INSTANCES; i++) {
    const u = i % textureWidthHeight;
    const v = ~~ (i / textureWidthHeight);
    uvOffsets.push(u, v);
}

...

geometry.attributes.uv = plane.attributes.uv;
geometry.addAttribute( 'uvOffsets', new THREE.InstancedBufferAttribute( new Float32Array( uvOffsets ), 2 ) );

uniforms: {
    ...
    uUvScale: { value: 1 / textureWidthHeight }
}

И во фрагментном шейдере:

void main() {
    vec4 color = texture2D(map, (vUv * uUvScale) + (vUvOffsets * uUvScale));
    gl_FragColor = vec4(1.0, 1.0, 1.0, color.a);
}

\ О /