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

出于性能原因，我需要在场景中显示数百个移动的四面体。在这里，我使用instancedbuffergeometry，它需要一个自定义着色器

场景还包含具有规则几何体（非缓冲区）的对象和一些灯光（我准备了一个简化的片段：）

我的问题是，四面体没有着色，因此它们的照明似乎适合场景的其余部分。原因可能是我构建的基本体着色器：

属性向量3偏移量；
属性向量4颜色；
可变vec4颜色；
可变vec3 vNormal；
void main（）{
vColor=颜色；
vNormal=法线矩阵*vec3（法线）；
gl_位置=投影矩阵*
模型视图矩阵*
vec4（位置*1.0+偏移量，1.0）；
}
可变vec4颜色；
可变vec3 vNormal；
void main（）{
浮点di=0.4*点（vNormal，normalize（vec3（1,1,0.））+0.4*点（vNormal，normalize（vec3（1,0,1.））；
di=di+0.2；
vec4 vColor2=vColor*vec4（1.0,1,1,0.2）*di；
gl_FragColor=vColor2；//调整alpha
}

适用于自r83起的Three.js MeshPhongMaterial着色器

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

上述要点是通过安装生成的，转到具有MeshPhongMaterial的Three.js示例页面，并使用着色器编辑器检查正在运行的着色器程序的完整源代码：

Three.js将所有默认制服（如照明数据）传递给所有着色器程序，因此，如果使用上述要点代码创建自定义着色器，灯光、骨骼等都将自动工作

我将获取完整的源代码并手动添加您的逻辑，将您的计算结果添加到现有的

gl\u FragColor=…

---

将来，我的工具将允许您自动向任何自定义着色器添加任何Three.js着色器功能（灯光、骨骼、变形目标等）。ShaderFrog已经可以自动将任何着色器组合在一起，但我还没有完成完全支持三个功能所需的手动工作。

Three.js有InstancedMesh模块。它允许在不使用着色器材质的情况下进行网格实例化。它将修补现有材质。