javascript - 如何为 Threejs 着色器组装合适的制服？

Question

我正在尝试弄清楚如何正确使用 Three.js 内置的 ShaderChunk 来进行照明和雾等，我认为一个好的第一步就是复制其中一个 ShaderLib 着色器的设置。首先我使用:

customMaterial = new ShaderMaterial({
    lights: true,
    uniforms: UniformsUtils.merge( [
      UniformsLib.common,
      UniformsLib.specularmap,
      UniformsLib.envmap,
      UniformsLib.aomap,
      UniformsLib.lightmap,
      UniformsLib.emissivemap,
      UniformsLib.fog,
      UniformsLib.lights,
      {
        emissive: { value: new Color( 0x000000 ) },
        diffuse: { value: new Color( 1,1,1 ) }
      }
    ]),
    vertexShader: document.getElementById("vertexShader").textContent,
    fragmentShader: document.getElementById("fragmentShader").textContent
  })

着色器代码直接从meshlambert_vert.glsl复制而来和meshlambert_frag.glsl ，该部分基于 this entry in the ShaderLib

但是，我同时从两个不同的摄像机/渲染器渲染测试场景，我立即注意到一个问题。对于应用了此 customMaterial 的对象，更改一个摄像头的视角会更改第二个摄像头的照明 Angular 。

我认为这是由于这些 UniformLib 对象在其他地方引用所致？

我不确定我应该在这里传递什么，也不知道为什么这不起作用但标准 Material 可以。我想我跳过了一个步骤，但我不明白它可能是什么。

这是一个代码笔，我在其中尽可能地隔离了问题。现在它几乎是 ShaderLib 源代码的直接副本。此时，我认为这是一个引用传递，它应该是一个副本，位于 WebGLRenderer 内部的某个位置。 https://codepen.io/cl4ws0n/pen/dVewdZ

无论其值(value)如何，我还尝试添加第二个场景，并在它们之间移动对象。但这并没有解决这个问题，不同场景中共享 Material 的不同对象也没有解决这个问题。

Answer 1

WebGLRenderer 对于某些 Material 有一些硬编码逻辑。在本例中，它正在寻找名为 isMeshLambertMaterial 的标志: https://github.com/mrdoob/three.js/blob/r87/src/renderers/WebGLRenderer.js#L1780

因此，请尝试在 Material 中设置 isMeshLambertMaterial: true, isMeshBasicMaterial: false。