Three.js 为自制的材质添加阴影
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网站。
本文摘自：https://blog.csdn.net/qq_43758883/article/details/108172943
