网站与支付宝对接,网站建设先进材料,医院网站需要前置审批,国家工程建设标准化网站webgl_shadow_contact 官方样例中#xff0c;对阴影的渲染比较特殊#xff0c;很值得借鉴#xff0c;学习渲染阴影的思路#xff1b;这个例子中对阴影的渲染#xff0c;并没有使用任何光源#xff0c;没有用shadowmap的常规方式 渲染阴影#xff1b;而是使用了深度材质T…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的球体 和 完全不透明的球体两者的投射阴影都是一样的。
虚幻引擎支持 彩色的半透明阴影。但是要求投影的网格先使用一张彩色贴图。比如教堂的彩色玻璃窗户。窗户就要求使用彩色贴图才能在地面投影出 彩色的阴影
