如何为Threejs着色器组装适当的制服？

我想弄清楚如何正确使用Three.js'内置的ShaderChunk s用于照明和雾等，我想好的第一步是复制其中一个ShaderLib着色器的设置。因此，要开始我用：如何为Threejs着色器组装适当的制服？

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

不过，我使我的测试场景从两个不同照相机/渲染器，我马上注意到了一个问题。对于此应用的对象，更改一个摄像机的透视图会更改第二个摄像机的照明角度。

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

我不知道我应该通过这里，而不是为什么这不起作用，但标准材料。我想我正在跳过一步，但我不明白它可能是什么。

这里是一个codepen，我尽可能地隔离了问题。现在它几乎是ShaderLib来源的直接副本。在这一点上，我认为这是一个通过参考，它应该是一个副本，在WebGLRenderer内的某处。 https://codepen.io/cl4ws0n/pen/dVewdZ

无论它的价值如何，我也尝试添加第二个场景，并在它们之间移动对象。这并没有解决它，也没有单独的对象在单独的场景共享材料。

来源

2017-10-06 Danie Clawson

请删除与您的问题无关的活动示例中的_everything_并解释我们应该看到的内容。 – WestLangley

@WestLangley好吧，我做到了，更新了我的链接。只是现在的必需品。请注意，当右侧的摄像机角度发生变化时，左侧图像中心立方体的照明是否错误。 –

第二个盒子和LambertMaterial可以被移除。制服应该被克隆，以保证它们是唯一的：“制服：UniformsUtils.clone（shader.uniforms），'，但这不是问题，因为你只用了一次材质。需要两个渲染器来复制问题吗？ – WestLangley

正如Matjaz Drolc在评论中指出的那样，这是三个r87中的一个bug。 needsUpdate标志在ShaderMaterials下无法正常工作。您可以在我的codepen链接中的每个渲染过程之前强制进行更新，并且它将正确渲染。看到叉https://codepen.io/cl4ws0n/pen/qPYwzp

我已经对回购做了一个问题，如果有人想跟踪它的进展，它可以找到here。

来源

2017-10-10 18:36:27

WebGLRenderer对某些材质有一些硬编码逻辑。在这种情况下，它正在寻找一个名为isMeshLambertMaterial的标志：https://github.com/mrdoob/three.js/blob/r87/src/renderers/WebGLRenderer.js#L1780

因此请尝试在您的材料中设置isMeshLambertMaterial: true, isMeshBasicMaterial: false。

来源

2017-10-07 19:12:54

我认为你在正确的轨道上，但我现在收到一个错误，在SingleUniform.setValue3fv“无法读取未定义的属性'x'... –

也许你需要设置大部分这些属性：https： //github.com/mrdoob/three.js/blob/r87/src/materials/MeshLambertMaterial.js#L44 –

那也不是。我不认为这是问题了。我认为它与ShaderMaterials制服没有在渲染器之间正确更新 –

如何为Threejs着色器组装适当的制服？

回答

相关问题