Threejs：使自定义着色器匹配标准渲染答案

【问题标题】：Threejs: make custom shader match the standard renderingThreejs：使自定义着色器匹配标准渲染
【发布时间】：2017-05-03 21:48:27
【问题描述】：

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

场景还包含具有规则几何体（非缓冲区）和一些灯光的对象（我准备了简化的 sn-p：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>

有没有办法让自定义着色器适合我在场景中定义的灯光？着色器还以不会产生定向光印象的方式渲染面。我宁愿让单个面均匀照明，而不是从顶点插入颜色，但我无法实现。

任何指针或帮助表示赞赏。

【问题讨论】：

标签： javascript three.js glsl fragment-shader buffer-geometry

【解决方案1】：

Here's a gist of the full fragment and vertex shader source 用于 Three.js MeshPhongMaterial 着色器，从 r83 开始。

Three.js 使用字符串连接系统构建着色器，因此几乎不可能通过查看 Three.js 源来找出着色器的来源。

以上 Gist 是通过安装 shader editor Chrome extension 生成的，转到具有 MeshPhongMaterial like this one 的 Three.js 示例页面并使用着色器编辑器检查正在运行的着色器程序的完整源代码：

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

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

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

【讨论】：

【解决方案2】：

three.js 有 InstancedMesh 模块。它允许在不使用着色器材质的情况下进行网格实例化。它修补现有材料。 https://github.com/pailhead/three-instanced-mesh

【讨论】：