当前位置：首页 > news >正文

ThreeJs样例 webgl_shadow_contact 分析

news 2025/8/20 21:09:46

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
} );