Threejs：如何使自定义着色器与标准渲染匹配

Question

为了提高性能，我需要在场景中显示数百个移动的四面体。因此，我使用instancedbuffergeometry，这需要一个自定义着色器。

场景还包含具有常规几何形状（非缓冲）和一些灯光的对象（我准备了简化的代码片段：https://jsfiddle.net/negan/xs3k1yz4/）。

我的问题是，四面体的着色不符合场景的光照效果。原因可能是我构建的基本着色器。

<script id="vertexShader" type="x-shader/x-vertex">
attribute vec3 offset;
attribute vec4 color;
varying vec4 vColor;
varying vec3 vNormal;
void main() {
 vColor = color;
 vNormal = normalMatrix * vec3(normal);
 gl_Position = projectionMatrix *
    modelViewMatrix *
    vec4(position*1.0+offset,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 varying vec4 vColor;
    varying vec3 vNormal;

 void main() {  
  float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.)));
  di = di+0.2;
  vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di;
  gl_FragColor = vColor2;// adjust the alpha
 }
</script>

有没有办法使自定义着色器适应我在场景中定义的灯光？该着色器还以一种不显示定向光的方式呈现面。我宁愿让单个面均匀照亮，而不是从顶点插值颜色，但我无法实现这一点。任何指针或帮助都将不胜感激。

- Barden

Answer 1

这里是r83版本的Three.js MeshPhongMaterial着色器的完整片段和顶点着色器源代码。

Three.js使用字符串拼接系统构建着色器，因此从Three.js源代码中找到着色器的源代码几乎是不可能的。

上述Gist是通过安装着色器编辑器Chrome扩展程序，进入一个包含类似于这个的MeshPhongMaterial的Three.js示例页面，并使用着色器编辑器检查运行的着色器程序的完整源代码来生成的：

Three.js将所有默认uniform变量，如光照数据，传递给所有着色器程序，因此，如果您使用上面的Gist代码创建自定义着色器，则灯光、骨骼等都会自动工作。

我会取得完整的源代码，并手动添加您的逻辑，将计算结果直接添加到现有的gl_FragColor = ...中。

在未来，我的工具ShaderFrog将使您能够自动将任何Three.js着色器特性（灯光、骨骼、变形目标等）添加到任何自定义着色器中。ShaderFrog已经可以自动组合任何着色器，但我还没有完成所需的手动工作以完全支持Three特性。

- Andy Ray

Answer 2

three.js 中有 InstancedMesh 模块。它允许进行网格实例化而无需使用着色器材质，并可对现有材质进行补丁。 https://github.com/pailhead/three-instanced-mesh

- Pawel