Three.js 为自制的材质添加阴影

一、阴影的由来

Three.js 中使用 Shadow Map 的技术来产生阴影。

Shadow Map（阴影贴图）是一种使用深度纹理来为渲染阴影提供解决方案的多通道计算，用投射光源代替最终视口来观察场景。通过移动视口到光源位置，可以观察到这个位置每个东西都是明亮的，因为从光的角度来看是没有阴影的。

从光源的角度将场景的深度渲染到一张深度缓冲区中，我们可以在场景中获得一张阴影或者无阴影的贴图。

因此在使用Three.js中的光源时可以设置其 shadow map 的分辨率，分辨率越高，阴影质量越好，但代价也越高。

light.shadow.mapSize.x = 1024;
light.shadow.mapSize.y = 1024;

---

二、为自制材质添加阴影

THREE.ShaderMaterial 允许用户定义自己的材质，同时也可以使用Three.js内置的着色器片段ShaderChunk。

ShaderChunk本质上是一种常见的着色器代码库，可以混合和匹配，以创建自己的着色器，避免创建着色器通用的东西，如光照计算。可以通过以下方式进行访问：

THREE.ShaderChunk["name_of_ShaderChunk"]

或者使用点表示法：

THREE.ShaderChunk.name_of_ShaderChunk

对于顶点着色器，要用到 shadowmap_pars_vertex 和 shadowmap_vertex：

const vertexShader = [
	THREE.ShaderChunk[ "common" ],
	THREE.ShaderChunk[ "bsdfs" ],
	THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
	"void main() {",
		THREE.ShaderChunk['beginnormal_vertex'],
		THREE.ShaderChunk['defaultnormal_vertex'],
	
		THREE.ShaderChunk[ "begin_vertex" ],
		THREE.ShaderChunk[ "project_vertex" ],
		THREE.ShaderChunk[ "worldpos_vertex" ],
		THREE.ShaderChunk[ "shadowmap_vertex" ],
	"}"
].join( '\n' )

对于片段着色器，要用到 shadowmap_pars_fragment 和 shadowmask_pars_fragment ：

const fragmentShader = [
	THREE.ShaderChunk[ "common" ],
	THREE.ShaderChunk[ "packing" ],
	THREE.ShaderChunk[ "bsdfs" ],
	THREE.ShaderChunk[ "lights_pars_begin" ],
	THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
	THREE.ShaderChunk[ "shadowmask_pars_fragment" ],
	"uniform float opacity;",
	"void main() {",
	"	vec4 ambient = vec4(0.2, 0.2, 0.2, 1.0);",
	"	vec3 col = vec3(1.0, 1.0, 0.5) * getShadowMask();",
	"	gl_FragColor = ambient + vec4(col, opacity);",
	"}"
].join( '\n' )

在 shadowmap_pars_fragment 中有函数 getShadow() ，在 shadowmask_pars_fragment 中有函数 getShadowMask()

let shadowMat = new THREE.ShaderMaterial({
	uniforms: THREE.UniformsUtils.merge( [
	THREE.UniformsLib[ "lights" ],
		{
			opacity:  { type: 'f', value: 1.0 }
		}
	] ),
	vertexShader,
	fragmentShader,
	lights: true
});

点击访问CodePen源码

下图中的黄色平面使用自定义材质

三、总结

Three.js 中使用 Shadow Map 的技术来产生阴影，阴影质量与 shadow map 的分辨率有关，分辨率越高，阴影质量越好，但代价也越高。

对于在较大场景中使用 Shadow Map 技术，在离光源较远的位置或场景过大，会导致阴影质量低下，常见的解决方法是使用级联阴影贴图（Cascaded Shadow Map），目前，为 Three.js 提供该类解决方法的相关的库是 three-csm，详细信息可访问Github网站。