ThreeJs样例 webgl_shadow_contact 分析

2023-11-30 13:28

本文主要是介绍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 分析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/437194

相关文章

MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析

《MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析》本文将详细讲解MyBatis-Plus中的lambdaUpdate用法,并提供丰富的案例来帮助读者更好地理解和应... 目录深入探索MyBATis-Plus中Service接口的lambdaUpdate用法及示例案例背景

MyBatis-Plus中静态工具Db的多种用法及实例分析

《MyBatis-Plus中静态工具Db的多种用法及实例分析》本文将详细讲解MyBatis-Plus中静态工具Db的各种用法,并结合具体案例进行演示和说明,具有很好的参考价值,希望对大家有所帮助,如有... 目录MyBATis-Plus中静态工具Db的多种用法及实例案例背景使用静态工具Db进行数据库操作插入

Go使用pprof进行CPU,内存和阻塞情况分析

《Go使用pprof进行CPU,内存和阻塞情况分析》Go语言提供了强大的pprof工具,用于分析CPU、内存、Goroutine阻塞等性能问题,帮助开发者优化程序,提高运行效率,下面我们就来深入了解下... 目录1. pprof 介绍2. 快速上手:启用 pprof3. CPU Profiling:分析 C

MySQL表锁、页面锁和行锁的作用及其优缺点对比分析

《MySQL表锁、页面锁和行锁的作用及其优缺点对比分析》MySQL中的表锁、页面锁和行锁各有特点,适用于不同的场景,表锁锁定整个表,适用于批量操作和MyISAM存储引擎,页面锁锁定数据页,适用于旧版本... 目录1. 表锁(Table Lock)2. 页面锁(Page Lock)3. 行锁(Row Lock

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式:MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列(LCS)问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动

C#使用DeepSeek API实现自然语言处理,文本分类和情感分析

《C#使用DeepSeekAPI实现自然语言处理,文本分类和情感分析》在C#中使用DeepSeekAPI可以实现多种功能,例如自然语言处理、文本分类、情感分析等,本文主要为大家介绍了具体实现步骤,... 目录准备工作文本生成文本分类问答系统代码生成翻译功能文本摘要文本校对图像描述生成总结在C#中使用Deep

Redis主从/哨兵机制原理分析

《Redis主从/哨兵机制原理分析》本文介绍了Redis的主从复制和哨兵机制,主从复制实现了数据的热备份和负载均衡,而哨兵机制可以监控Redis集群,实现自动故障转移,哨兵机制通过监控、下线、选举和故... 目录一、主从复制1.1 什么是主从复制1.2 主从复制的作用1.3 主从复制原理1.3.1 全量复制

Redis主从复制的原理分析

《Redis主从复制的原理分析》Redis主从复制通过将数据镜像到多个从节点,实现高可用性和扩展性,主从复制包括初次全量同步和增量同步两个阶段,为优化复制性能,可以采用AOF持久化、调整复制超时时间、... 目录Redis主从复制的原理主从复制概述配置主从复制数据同步过程复制一致性与延迟故障转移机制监控与维

Redis连接失败:客户端IP不在白名单中的问题分析与解决方案

《Redis连接失败:客户端IP不在白名单中的问题分析与解决方案》在现代分布式系统中,Redis作为一种高性能的内存数据库,被广泛应用于缓存、消息队列、会话存储等场景,然而,在实际使用过程中,我们可能... 目录一、问题背景二、错误分析1. 错误信息解读2. 根本原因三、解决方案1. 将客户端IP添加到Re