时间戳

首页 > 解决方案 > Three.js InstancedMesh：更新实例矩阵后不改变着色器

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

问题描述

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

请检查下面的小提琴链接：我更新了实例旋转和缩放，但着色器没有改变。

小提琴链接

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

谢谢。

标签： three.jsshader

解决方案

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

推荐阅读