Three.js InstancedMesh：更新实例矩阵后未更改着色器

Question

我正在使用带有自定义轮廓着色器的 InstancedMesh：

<script type="x-shader/x-vertex" id="vertexShader">
    uniform float offset;

    void main() {
        vec4 pos = modelViewMatrix * vec4( position + normal * offset, 1.0 );
        gl_Position = projectionMatrix * pos;
    }
</script>

<script type="x-shader/x-fragment" id="fragmentShader">
    uniform vec3 color;
    uniform float intensity;

    void main() {
        gl_FragColor = vec4( color, intensity );
    }
</script>

然后，我创建了着色器material:

var uniforms = {
        offset: { type: 'f', value: 0.001 },
      color: { type: 'c', value: new THREE.Color(0x6B6B6B) },
      intensity: { type: 'f', value: 1.0 },
};

var outlineMaterial = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

然后我创建了一个带有长方体几何体的 InstancedMesh 和这个 material。但是，当我更新实例矩阵时，着色器似乎没有受到影响。

var dummy = new THREE.Object3D();
var outlineGometry = new THREE.BoxGeometry(1, 1, 1);
var outline = new THREE.InstancedMesh(outlineGometry, outlineMaterial, 1);
    
dummy.position.set(0, 0, 0);
dummy.rotation.set(0, Math.PI/4, 0);
dummy.scale.set(0.1, 0.1, 0.1);
dummy.updateMatrix();
outline.setMatrixAt( 0, dummy.matrix );
outline.instanceMatrix.needsUpdate = true;

请检查下面的 fiddle link：我更新了实例旋转和缩放，但着色器未更改。

Fiddle Link

你知道如何解决这个问题吗？

谢谢。

Answer 1

根据Westlangley的建议，我可以根据文档在vertex shader中使用instanceMatrix来解决问题https://threejs.org/docs/#api/en/renderers/webgl/WebGLProgram

Three.js InstancedMesh：更新实例矩阵后未更改着色器

Three.js InstancedMesh: Shader is NOT changed after updating instance matrix

shader

three.js