three.js透光率实现原理归纳

news/2025/2/12 2:02:51

在这里插入图片描述

.transmission : Float
透光率(或者说透光性),范围从0.0到1.0。默认值是0.0。
很薄的透明或者半透明的塑料、玻璃材质即便在几乎完全透明的情况下仍旧会保留反射的光线,透光性属性用于这种类型的材质。
当透光率不为0的时候, opacity透明度应设置为1.

会增加不少开销 额外渲染一次 单独渲染 作为transmissionSamplerMap传入
uniforms.transmissionSamplerMap.value = transmissionRenderTarget.texture;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

function renderTransmissionPass( opaqueObjects, transmissiveObjects, scene, camera ) {const overrideMaterial = scene.isScene === true ? scene.overrideMaterial : null;if ( overrideMaterial !== null ) {return;}if ( currentRenderState.state.transmissionRenderTarget[ camera.id ] === undefined ) {currentRenderState.state.transmissionRenderTarget[ camera.id ] = new WebGLRenderTarget( 1, 1, {generateMipmaps: true,type: ( extensions.has( 'EXT_color_buffer_half_float' ) || extensions.has( 'EXT_color_buffer_float' ) ) ? HalfFloatType : UnsignedByteType,minFilter: LinearMipmapLinearFilter,samples: 4,stencilBuffer: stencil,resolveDepthBuffer: false,resolveStencilBuffer: false,colorSpace: ColorManagement.workingColorSpace,} );// debug/*const geometry = new PlaneGeometry();const material = new MeshBasicMaterial( { map: _transmissionRenderTarget.texture } );const mesh = new Mesh( geometry, material );scene.add( mesh );*/}const transmissionRenderTarget = currentRenderState.state.transmissionRenderTarget[ camera.id ];const activeViewport = camera.viewport || _currentViewport;transmissionRenderTarget.setSize( activeViewport.z, activeViewport.w );//const currentRenderTarget = _this.getRenderTarget();_this.setRenderTarget( transmissionRenderTarget );_this.getClearColor( _currentClearColor );_currentClearAlpha = _this.getClearAlpha();if ( _currentClearAlpha < 1 ) _this.setClearColor( 0xffffff, 0.5 );_this.clear();if ( _renderBackground ) background.render( scene );// Turn off the features which can affect the frag color for opaque objects pass.// Otherwise they are applied twice in opaque objects pass and transmission objects pass.const currentToneMapping = _this.toneMapping;_this.toneMapping = NoToneMapping;// Remove viewport from camera to avoid nested render calls resetting viewport to it (e.g Reflector).// Transmission render pass requires viewport to match the transmissionRenderTarget.const currentCameraViewport = camera.viewport;if ( camera.viewport !== undefined ) camera.viewport = undefined;currentRenderState.setupLightsView( camera );if ( _clippingEnabled === true ) clipping.setGlobalState( _this.clippingPlanes, camera );renderObjects( opaqueObjects, scene, camera );textures.updateMultisampleRenderTarget( transmissionRenderTarget );textures.updateRenderTargetMipmap( transmissionRenderTarget );if ( extensions.has( 'WEBGL_multisampled_render_to_texture' ) === false ) { // see #28131let renderTargetNeedsUpdate = false;for ( let i = 0, l = transmissiveObjects.length; i < l; i ++ ) {const renderItem = transmissiveObjects[ i ];const object = renderItem.object;const geometry = renderItem.geometry;const material = renderItem.material;const group = renderItem.group;if ( material.side === DoubleSide && object.layers.test( camera.layers ) ) {const currentSide = material.side;material.side = BackSide;material.needsUpdate = true;renderObject( object, scene, camera, geometry, material, group );material.side = currentSide;material.needsUpdate = true;renderTargetNeedsUpdate = true;}}if ( renderTargetNeedsUpdate === true ) {textures.updateMultisampleRenderTarget( transmissionRenderTarget );textures.updateRenderTargetMipmap( transmissionRenderTarget );}}_this.setRenderTarget( currentRenderTarget );_this.setClearColor( _currentClearColor, _currentClearAlpha );if ( currentCameraViewport !== undefined ) camera.viewport = currentCameraViewport;_this.toneMapping = currentToneMapping;}

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

export default /* glsl */`
#ifdef USE_TRANSMISSIONmaterial.transmission = transmission;material.transmissionAlpha = 1.0;material.thickness = thickness;material.attenuationDistance = attenuationDistance;material.attenuationColor = attenuationColor;#ifdef USE_TRANSMISSIONMAPmaterial.transmission *= texture2D( transmissionMap, vTransmissionMapUv ).r;#endif#ifdef USE_THICKNESSMAPmaterial.thickness *= texture2D( thicknessMap, vThicknessMapUv ).g;#endifvec3 pos = vWorldPosition;vec3 v = normalize( cameraPosition - pos );vec3 n = inverseTransformDirection( normal, viewMatrix );vec4 transmitted = getIBLVolumeRefraction(n, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90,pos, modelMatrix, viewMatrix, projectionMatrix, material.dispersion, material.ior, material.thickness,material.attenuationColor, material.attenuationDistance );material.transmissionAlpha = mix( material.transmissionAlpha, transmitted.a, material.transmission );totalDiffuse = mix( totalDiffuse, transmitted.rgb, material.transmission );#endif
`;

https://dhexx.cn/news/show-5468788.html

相关文章

CEEMDAN-CPO-VMD二次分解(CEEMDAN+冠豪猪优化算法CPO优化VMD)

CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09; 目录 CEEMDAN-CPO-VMD二次分解&#xff08;CEEMDAN冠豪猪优化算法CPO优化VMD&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 首先运用CEEMDAN对数据进行一次分解&#xff…

数仓技术hive与oracle对比(五)

附录说明 附录是对测试过程中涉及到的一些操作进行记录和解析。 oracle清除缓存 alter system flush shared_pool; 将使library cache和data dictionary cache以前保存的sql执行计划全部清空&#xff0c;但不会清空共享sql区或者共享pl/sql区里面缓存的最近被执行的条目。刷…

【WebRTC】适合新手宝宝的WebRTC入门教学

文章目录 简述SDPNATNAT的分类完全圆锥型受限圆锥型端口受限圆锥型对称型 ICESTUNTURN总结参考链接 简述 WebRTC通过整合现有的网络协议为设备提供了实时通信的能力&#xff0c;其底层由 C 开发&#xff0c;并通过标准化的 JavaScript API 和原生接口&#xff08;如 C 和 Java…

import是如何“占领满屏“

import是如何“占领满屏“的&#xff1f; 《拒绝使用模块重导&#xff08;Re-export&#xff09;》 模块重导是一种通用的技术。在腾讯、字节、阿里等各大厂的组件库中都有大量使用。 如&#xff1a;字节的arco-design组件库中的组件&#xff1a;github.com/arco-design… …

openEuler卸载 rpm安装的 redis

停止 Redis 服务 sudo systemctl stop redis禁用 Redis 服务 sudo systemctl disable redis 卸载 Redis 软件包 sudo yum remove redis查找并删除 Redis 的残留文件 find / -name red*删除 Redis 配置文件 删除 Redis 数据文件 sudo rm -rf /var/lib/redis检查 Redis 是否…

【目标跟踪】AntiUAV600数据集详细介绍

AntiUAV600数据集的提出是为了适应真实场景&#xff0c;即无人机可能会随时随地出现和消失。目前提出的Anti-UAV任务都只是将其看做与跟踪其他目标一样的任务&#xff0c;没有结合现实情况考虑。 论文链接&#xff1a;https://arxiv.org/pdf/2306.15767https://arxiv.org/pdf/…

【大数据学习 | 面经】Spark 3.x 中的AQE(自适应查询执行)

Spark 3.x 中的自适应查询执行&#xff08;Adaptive Query Execution&#xff0c;简称 AQE&#xff09;通过多种方式提升性能&#xff0c;主要包括以下几个方面&#xff1a; 动态合并 Shuffle 分区&#xff08;Coalescing Post Shuffle Partitions&#xff09;&#xff1a; 当 …

Linux-ubuntu环境配置

一&#xff0c;安装VWware&#xff0c;里面导入镜像文件 这些都是文件夹里面有的&#xff0c;然后对着正点原子视频安装就行&#xff0c;虚拟机的破解码&#xff0c;去百度搜一个能用就行&#xff0c;中间遇见俩问题。①乌班图里面不能上网&#xff0c;②插入U盘后&#xff0c;…

Netty - NIO基础学习

一 简介 1 三大模型是什么&#xff1f; IO三大模型之一&#xff0c;BIO&#xff0c;AIO&#xff0c;还有我们的主角NIO(non-blocking-io)&#xff0c;也就是同步非阻塞式IO。这三种模型到底是干什么的&#xff1f;其实这三种模型都是对于JAVA的一种I/O框架&#xff0c;用来进行…

微前端架构学习笔记

前言 之前遇到过一个需求&#xff0c;有两个项目分别由两个不同的部门负责&#xff0c;不同技术栈&#xff0c;不同代码仓库&#xff1a; A 项目是官网&#xff0c;负责展示产品亮点等信息&#xff0c;有多个入口可以进入 B 项目中的不同页面。B 项目是业务线&#xff0c;负责…