本文主要是介绍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）的球体 和 完全不透明的球体，两者的投射阴影都是一样的。
虚幻引擎支持 彩色的半透明阴影。但是要求投影的网格先使用一张彩色贴图。比如教堂的彩色玻璃窗户。窗户就要求使用彩色贴图，才能在地面投影出 彩色的阴影
这篇关于ThreeJs样例 webgl_shadow_contact 分析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
