我正在编写一个着色器来从高度图渲染地形，一切都很顺利，除了在我有了着色器之后我失去了灯光和阴影。这就是地狱痛苦开始的时候。我应该用来THREE.ShaderChunk添加默认着色器块，但不仅仅是添加 - 弄乱我的着色器。
所以经过长时间的谷歌搜索我得出了这个建议
您只需在自定义 ShaderMaterial 的适当位置添加一些片段即可：
// 制服
THREE.UniformsLib[ "shadowmap" ],
// 片段着色器
三.ShaderChunk[ "shadowmap_pars_fragment" ], 三.ShaderChunk[ "shadowmap_fragment" ],
// 顶点着色器
三.ShaderChunk[ "shadowmap_pars_vertex" ], 三.ShaderChunk[ "shadowmap_vertex" ],
但对我来说，这并没有添加灯光和阴影。那么我能想到的最好的办法就是查看ShaderLib.js并尝试使用默认着色器之一的设置。所以我进行了设置lambert并最终得到了以下代码：
@tileMaterial = new THREE.ShaderMaterial
uniforms: THREE.UniformsUtils.merge [
THREE.UniformsLib[ "common" ],
THREE.UniformsLib[ "fog" ],
THREE.UniformsLib[ "lights" ],
THREE.UniformsLib[ "shadowmap" ],
{
"emissive" : { type: "c", value: new THREE.Color( 0x000000 ) },
"wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }
}
]
vertexShader: [
"#define LAMBERT",
"varying vec3 vLightFront;",
"#ifdef DOUBLE_SIDED",
" varying vec3 vLightBack;",
"#endif",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "map_pars_vertex" ],
THREE.ShaderChunk[ "lightmap_pars_vertex" ],
THREE.ShaderChunk[ "envmap_pars_vertex" ],
THREE.ShaderChunk[ "lights_lambert_pars_vertex" ],
THREE.ShaderChunk[ "color_pars_vertex" ],
THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
THREE.ShaderChunk[ "skinning_pars_vertex" ],
THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
THREE.ShaderChunk[ "logdepthbuf_pars_vertex" ],
"void main() {",
THREE.ShaderChunk[ "map_vertex" ],
THREE.ShaderChunk[ "lightmap_vertex" ],
THREE.ShaderChunk[ "color_vertex" ],
THREE.ShaderChunk[ "morphnormal_vertex" ],
THREE.ShaderChunk[ "skinbase_vertex" ],
THREE.ShaderChunk[ "skinnormal_vertex" ],
THREE.ShaderChunk[ "defaultnormal_vertex" ],
THREE.ShaderChunk[ "morphtarget_vertex" ],
THREE.ShaderChunk[ "skinning_vertex" ],
THREE.ShaderChunk[ "default_vertex" ],
THREE.ShaderChunk[ "logdepthbuf_vertex" ],
THREE.ShaderChunk[ "worldpos_vertex" ],
THREE.ShaderChunk[ "envmap_vertex" ],
THREE.ShaderChunk[ "lights_lambert_vertex" ],
THREE.ShaderChunk[ "shadowmap_vertex" ],
"}"
].join "\n"
fragmentShader: [
"uniform vec3 diffuse;",
"uniform vec3 emissive;",
"uniform float opacity;",
"varying vec3 vLightFront;",
"#ifdef DOUBLE_SIDED",
" varying vec3 vLightBack;",
"#endif",
THREE.ShaderChunk[ "common" ],
THREE.ShaderChunk[ "color_pars_fragment" ],
THREE.ShaderChunk[ "map_pars_fragment" ],
THREE.ShaderChunk[ "alphamap_pars_fragment" ],
THREE.ShaderChunk[ "lightmap_pars_fragment" ],
THREE.ShaderChunk[ "envmap_pars_fragment" ],
THREE.ShaderChunk[ "fog_pars_fragment" ],
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "specularmap_pars_fragment" ],
THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
"void main() {",
" vec3 outgoingLight = vec3( 0.0 );",
" vec4 diffuseColor = vec4( diffuse, opacity );",
THREE.ShaderChunk[ "logdepthbuf_fragment" ],
THREE.ShaderChunk[ "map_fragment" ],
THREE.ShaderChunk[ "color_fragment" ],
THREE.ShaderChunk[ "alphamap_fragment" ],
THREE.ShaderChunk[ "alphatest_fragment" ],
THREE.ShaderChunk[ "specularmap_fragment" ],
" #ifdef DOUBLE_SIDED",
" if ( gl_FrontFacing )",
" outgoingLight += diffuseColor.rgb * vLightFront + emissive;",
" else",
" outgoingLight += diffuseColor.rgb * vLightBack + emissive;",
" #else",
" outgoingLight += diffuseColor.rgb * vLightFront + emissive;",
" #endif",
THREE.ShaderChunk[ "lightmap_fragment" ],
THREE.ShaderChunk[ "envmap_fragment" ],
THREE.ShaderChunk[ "shadowmap_fragment" ],
THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
THREE.ShaderChunk[ "fog_fragment" ],
" gl_FragColor = vec4( outgoingLight, diffuseColor.a );",
"}"
].join "\n"
attributes:
height:
type: "f"
value: heightData
wireframe: no
这仍然不添加灯光和阴影并且还会引发错误：
three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array
three.js:22804 WebGL: INVALID_VALUE: uniform3fv: no array
所以问题是 - 将灯光和阴影添加到自定义着色器（如 r71）的步骤是什么？
jsfiddle - http://jsfiddle.net/SET001/0wzqemks/2/