Three.js InstancedMesh：更新实例矩阵后不改变着色器答案

【问题标题】：Three.js InstancedMesh: Shader is NOT changed after updating instance matrixThree.js InstancedMesh：更新实例矩阵后不改变着色器
【发布时间】：2021-07-07 17:15:25
【问题描述】：

我正在使用带有自定义轮廓着色器的 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>

然后，我创建了着色器材质：

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。但是，当我更新实例矩阵时，着色器似乎没有受到影响。

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

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

谢谢。

【问题讨论】：

提示：您需要在顶点着色器中使用instanceMatrix。此外，three.js 中的制服不再需要 type 属性。
嗨@WestLangley，谢谢你的提示。我现在可以解决这个问题。还有一个官方文档提到了这种技术：threejs.org/docs/#api/en/renderers/webgl/WebGLProgram
您现在可以回答自己的问题并接受它！

标签： three.js shader

【解决方案1】：

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

【讨论】：