ThreeJs样例 webgl_shadow_contact 分析

webgl_shadow_contact 官方样例中，对阴影的渲染比较特殊，很值得借鉴，学习渲染阴影的思路；这个例子中对阴影的渲染，并没有使用任何光源，没有用shadowmap的常规方式 渲染阴影；而是使用了深度材质THREE.MeshDepthMaterial；得到的阴影效果就是，离投影的正交相机的远景平面，越远影子就越模糊。

大体思路 看 animate() 方法，使用shadowCamera 正交相机 把整个场景渲染都一个 renderTarget （512 x 512 的类似图片的缓存）中，然后在 blurShadow() 方法中，

blurPlane.material.uniforms.tDiffuse.value = renderTarget.texture;

刚刚渲染了的 renderTarget 作为输入，

renderer.setRenderTarget( renderTargetBlur );

另一个 renderTargetBlur （512 x 512 的类似图片的缓存），作为即将渲染的输出buffer。

renderer.render( blurPlane, shadowCamera );

使用 horizontalBlurMaterial ，对renderTarget 中的图像进行水平模糊，输出到 renderTargetBlur 对应的缓存（图片），
紧接着，renderTargetBlur 作为输入，在renderTargetBlur 图像的基础上，使用 verticalBlurMaterial 对水平模糊后的图像进行竖直模糊，并将结果输出到 最开始 的 renderTarget 缓存。这里也可以看出 blurPlane 网格实体，就是一个辅助性质的，专用于阴影呈现的网格。

plane 网格实体最终的呈现这些阴影。fillPlane网格实体 是阴影的背景板。
样例中，对深度材质的着色器进行了关键的修改：

// like MeshDepthMaterial, but goes from black to transparent
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.userData.darkness = { value: state.shadow.darkness };
depthMaterial.onBeforeCompile = function ( shader ) {

	shader.uniforms.darkness = depthMaterial.userData.darkness;
	shader.fragmentShader = /* glsl */`
		uniform float darkness;
		${shader.fragmentShader.replace(
	'gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );',
	'gl_FragColor = vec4( vec3( 0.0 ), ( 1.0 - fragCoordZ ) * darkness );'
)}
	`;

同时，要留意这个 深度材质是怎么使用的

cameraHelper.visible = false;
scene.overrideMaterial = depthMaterial;

把场景中的所有物体材质都替换成 这个经过了修改的深度材质。

顺便提一下 另一个样例 webgl_shadowmap_pointlight，这个样例就简单多了，关键代码如下：

const texture = new THREE.CanvasTexture( generateTexture() );
texture.magFilter = THREE.NearestFilter;
texture.wrapT = THREE.RepeatWrapping;
texture.wrapS = THREE.RepeatWrapping;
texture.repeat.set( 1, 4.5 );

geometry = new THREE.SphereGeometry( 2, 32, 8 );
material = new THREE.MeshPhongMaterial( {
	side: THREE.DoubleSide,
	alphaMap: texture,
	alphaTest: 0.5
} );

其实就是进行透明度测试，透明度小于0.5的片元，直接丢弃。球体网格的材质应用带这个贴图的纹理后，直接变成镂空的，透光的了

重看这两个官方样例，是为了研究 半透明物体的阴影如何渲染。在ThreeJS 物体的透明度 不影响阴影渲染。一个半透明物体（opacity： 0.3）的球体 和 完全不透明的球体，两者的投射阴影都是一样的。

虚幻引擎支持 彩色的半透明阴影。但是要求投影的网格先使用一张彩色贴图。比如教堂的彩色玻璃窗户。窗户就要求使用彩色贴图，才能在地面投影出 彩色的阴影