透明渲染这毛病我最早是在做某跨平台系统的三维场景时碰上的一个半透明玻璃球里面还套着一根同样半透明的管道转着转着管道就穿到玻璃外面来了再转两下玻璃内壁自己把自己糊成一片。后来做大屏可视化树叶、烟尘、水面一个比一个能出幺蛾子。这些问题有个共同名字——“自身错乱”本质就是半透明像素在混合时排序出了岔子。这篇文章专门聊 Babylon.js 环境下的两个核心解法深度预渲染Depth PrePass和顺序无关透明OIT。前者能让半透明物体和不透明场景正确咬合后者能从原理上绕开排序问题适合处理多层透明互相嵌套的场景。无论是前端可视化、WebGL 项目还是刚接触 Babylon.js 的图形学爱好者读完都应该能定位并修复大部分透明渲染异常。1. 透明渲染“自身错乱”到底是怎么来的1.1 半透明排序是绕不开的“画家算法”要理解自身错乱先得理解浏览器里绝大多数实时渲染是怎么处理透明物体的。默认情况下不透明物体渲染时开启深度测试和深度写入谁在前面谁挡住后面干干净净。半透明物体不行因为颜色要和后面的像素混合如果直接写入深度那背后的东西就全被挡掉玻璃就成实心的了。所以引擎把半透明物体按离相机从远到近排序先画远的再画近的一层层叠加这就是经典的画家算法。Babylon.js 内部会给每个半透明 mesh 计算一个排序点多数时候用物体中心点或者包围球中心然后按这个距离排序。单看一个玻璃球没问题球内球外分得清一旦出现两个互相穿插的半透明物体或者一个多面体自身有多个半透明面片互相折叠排序点只能代表“大概位置”代表不了每个三角形片段的真实先后于是该在后面的片段先画了该在前面遮挡的反而后画画面就乱套。我踩过最典型的一个坑是一块半透明水面上漂浮着半透明气泡水面 mesh 的中心点离相机远气泡中心点离相机近引擎把水面排后面、气泡排前面看起来正常。可相机一压低水面中心点的距离突然变得比气泡更近排序反过来气泡就被水面整个盖住了视觉上直接从水面上消失。这就是“自身错乱”最直观的表现——同一组模型换个角度就翻脸。1.2 深度测试和混合是两套逻辑不少人以为把深度测试打开就能解决半透明排序其实半透明渲染的难点恰恰在于深度和混合是两套独立逻辑。深度测试管的是“像素能不能被画上去”混合管的是“画上去之后怎么和背景色融合”。对于不透明物体深度测试就能搞定一切对于半透明物体深度测试只能决定这个像素是否被遮挡可它在混合时到底应该和谁融合还是得靠绘制顺序。举个例子你从正面看一块双层玻璃后面一层先画颜色先写进颜色缓冲前面一层后画把颜色混合上去视觉上透光、反射都对。但如果你把相机转到背面引擎重新排序后原本前面那层现在在几何上靠后了它变成了先画的一层于是颜色混合顺序完全反过来玻璃要么变暗要么边缘出现奇怪的色偏。这还不是最麻烦的最麻烦的是透明物体内部面片自身的顺序。一个模型由几百个三角形拼成引擎按 mesh 排序不按三角形排序内部三角形之间谁的像素先混合完全不可控。这就是为什么很多半透明模型一旋转内部结构就像粥一样糊在一起。想从根本上稳住画面就不能只靠排序要用深度预渲染把不透明的“底”打扎实再用 OIT 去处理透明层与透明层之间的纠缠。2. 深度预渲染先把不透明的“底”画清楚2.1 深度预渲染解决的是“透明和不透明”的错乱深度预渲染的思路非常直接在正式渲染一帧之前先把场景里不透明的物体单独画一遍只写深度不做颜色输出。这一遍生成的就是一张完整的深度图。等真正渲染透明物体时GPU 拿着这张深度图做深度测试透明像素若在不透明表面后面就直接被挡掉若在前面就正常通过并且混合。这样透明物体和不透明物体之间的遮挡关系就从“靠排序碰运气”变成了“靠深度缓冲定生死”。Babylon.js 里要启用这套机制核心有两条路。一条是启用 PrePassRenderer然后让对应材质参与深度预通道// 开启场景预通道渲染器 scene.prePassRenderer new BABYLON.PrePassRenderer(scene); // 需要参与深度预渲染的材质逐一打开 glassMaterial.enableDepthPrePass true; leafMaterial.enableDepthPrePass true;另一条是单独给相机创建深度渲染器拿到的深度纹理可以喂给后处理或自定义 shaderconst depthRenderer scene.enableDepthRenderer(camera, true); // 之后可以取 depthRenderer.getDepthMap() 做深度纹理采样就我实际项目里的感受绝大多数“半透明物体穿到墙里”“半透明物体把后面的不透明柱子挡没了”这类问题都是深度预渲染可以稳定解决的。它不改变透明物体之间的排序逻辑但把透明层和不透明层的边界彻底立住了。2.2 多个深度通道会不会把性能拖垮添加预通道意味着每帧要多渲染一遍不透明物体的顶点和深度GPU 的 draw call 数量会上升顶点处理工作量也会增加。对静态场景这个开关带来的开销并不大因为深度预通道不需要跑片段着色器的复杂光照很多材质只用顶点位置和一个极简的片段输出。但动态场景、大量蒙皮骨骼动画、植被摇摆这类高顶点数模型开启后帧率下降会非常明显。我做过一次实测一个中等规模的场景不透明模型面数约 1200 万开启 PrePassRenderer 后帧耗时从约 6ms 涨到 8ms。虽然体感不明显但同一个场景如果跑在低端移动设备上这个增量可能直接从 60fps 掉到 45fps 以下。所以深度预通道不建议无脑全开最好只给那些真正和半透明物体相交、且会产生明显视觉错误的不透明材质打开。比如一面会被玻璃穿透的墙壁开启预通道收益极大而远处一座和半透明区域毫无关系的山头开了纯属浪费。Babylon.js 的 PrePassRenderer 本身也支持按材质控制逐材质打开而不是场景级一刀切。2.3 alphaTest 材质同样受益深度预渲染对 alphaTest 材质特别有价值。树叶、栅栏、铁丝网这类用 alphaTest 裁掉像素的物体裁剪后边缘像素是非黑即白的不做混合因此可以正常写入深度。把树叶的材质设置成参与深度预通道后树叶后面再放一面半透明玻璃玻璃会被树叶精确遮挡而不是整片玻璃直接盖到树叶上方。这里有个容易被忽略的细节alphaTest 裁出来的边缘往往有锯齿如果你开着抗锯齿深度预通道用的深度纹理本身和最终主渲染的几何边缘可能有一两个像素的偏差结果就是玻璃和树叶交界处偶尔出现闪烁细线。遇到这种情况我的习惯是把 alphaTest 材质的边缘加一圈淡出过渡让裁剪边缘不是一刀切既缓和锯齿也减少深度偏差带来的闪烁。3. Babylon.js 实操透明材质配置与排序优化3.1 四种透明模式先分清楚Babylon.js 材质里有几个经典透明度模式搞错的话后面怎么调都白搭默认 OPAQUE完全不透明适合绝大多数实体。ALPHATEST像素 alpha 低于阈值直接丢弃适合树叶、栏杆边缘锐利性能好。ALPHABLEND真正做 alpha 混合适合玻璃、水面、烟雾边缘柔和但排序敏感。ALPHACOMBINE以 diffuse 纹理 alpha 为准做了纹理透视后整体透出适合 UI 和贴图型半透明物体。遇到“自身错乱”第一步先确认材质属于哪一类。很多初学者把树叶材质设成 ALPHABLEND结果树叶和树叶之间疯狂穿插其实树叶用 ALPHATEST 就能解决绝大部分问题。ALPHABLEND 的材质数量越少排序错乱的概率越低。配置半透明材质时我一般这么写const mat new BABYLON.PBRMaterial(glass, scene); mat.transparencyMode BABYLON.Constants.MATERIAL_ALPHABLEND; mat.alpha 0.6; mat.disableDepthWrite true; // 半透明混合通常不需要写深度 mat.backFaceCulling false; // 双面渲染避免薄片背面消失3.2 排序不是越细越好Babylon.js 里可以调整 mesh 的排序策略让引擎不只看中心点也参考包围球半径等参数。但这些策略只是缓解不能根治。排序策略调得越细每帧排序计算量越大而且细粒度排序在大场景里很容易导致画面不稳定——相机稍微一动排序点就变透明层顺序瞬间翻转。我和 A 同学一起排查过一个项目他把一张复杂的半透明建筑围挡拆成了几十个小组件结果相机旋转时围挡上的文字一会儿浮在玻璃前一会儿被玻璃吞掉。调了一圈排序策略最后解决问题的反而是把围挡合并成一个整体 mesh再配合深度预渲染。网格越碎排序点越多错乱概率越大能合并的半透明网格尽量合并这是最便宜的优化。3.3 深度预渲染需要配合透明模式开启深度预通道之后不是一切就万事大吉了它和 ALPHABLEND 的关系必须理清。深度预通道写入的是几何深度而 ALPHABLEND 材质在正式渲染时往往关闭深度写入。如果材质本身既是半透明又参与预通道那么预通道写入的深度就来自它自己的几何体主渲染再做深度测试时这个几何体会被自己预渲染的深度挡掉一部分。这句话比较绕用实际现象说就是某些透明材质开启 enableDepthPrePass 后反而出现“自己遮挡自己”的洞。解决方案很简单让半透明材质不要写深度也不要开预通道只让场景中不透明的墙、地面、柱子参与深度预渲染。透明与透明的关系交给 OIT 或调整透明度模式去解决。除非你明确知道一个半透明物体既要被深度图记录又不会被自身深度干扰否则别轻易给 ALPHABLEND 材质开预通道。4. OIT 顺序无关透明排序失效时的最终解法4.1 什么是顺序无关如果场景里的半透明物体数量不多排序问题忍一忍也就过去了。但当你有一堆烟雾、火焰、玻璃碎片互相交叠时排序再怎么调都是按下葫芦浮起瓢。这时候就该上 OITOrder Independent Transparency顺序无关透明。名字就叫“与顺序无关”意思是渲染结果不依赖物体绘制先后每个半透明像素都按自己的深度权重参与最终混合不需要引擎给它们排出一个全局先后顺序。OIT 最常见的实现之一是加权混合 OITWeighted Blended OIT它把每个半透明片段的颜色和深度转成一个权重累加进一个颜色累积缓冲和一个权重累积缓冲最后再做一个全屏合成。整个过程只用一个累积通道加一个合成通道性能不错画面质量也能满足大多数可视化场景需求。4.2 加权混合 OIT 的伪代码加权混合 OIT 的基本流程可以拆成两步第一步把所有半透明物体的片段颜色和权重写进累积目标第二步把累积目标和场景背景合成。累积通道的片段着色器伪代码// 半透明片段累积颜色暂存在浮点纹理里 uniform vec4 color; // 当前片段的半透明颜色 uniform float viewDepth; // 规范化后的深度值 [0,1] void main() { // 权重函数越近权重越大越远权重越小 float weight clamp(pow(1.0 - viewDepth, 3.0), 0.01, 4.0); accumColor.rgb color.rgb * color.a * weight; accumColor.a color.a * weight; }合成通道的着色器伪代码uniform sampler2D accumTex; uniform sampler2D backTex; // 不透明背景或上一帧颜色 void main() { vec4 acc texture(accumTex, uv); vec3 bgColor texture(backTex, uv).rgb; float alpha max(acc.a, 0.0001); vec3 blended acc.rgb / alpha; // 解出加权后的颜色 gl_FragColor vec4(mix(bgColor, blended, clamp(alpha, 0.0, 1.0)), 1.0); }看着不难但实际工程里到处是细节累积目标必须是浮点纹理否则累加几层就可能爆掉精度混合状态要设成加法混合合成通道要等所有透明物体画完再执行。Babylon.js 里可以创建自定义 RenderTargetTexture把半透明物体单独渲染到累积纹理再挂一个后处理做合成。4.3 在 Babylon.js 里搭一套最小 OITBabylon.js 没有开箱即用的“一键 OIT”但引擎给了足够多的底层能力可以用 RenderTargetTexture ShaderMaterial 实现一套最小可用的加权混合 OIT。大致步骤是这样创建两张浮点纹理作为累积目标的 color attachment一张存加权颜色一张存权重。创建 RenderTargetTexture把场景里参与 OIT 的半透明网格放到这个渲染目标的 renderList 里。给这些网格指定一个自定义 ShaderMaterial片段着色器走累积通道把颜色和权重写入两张浮点纹理而不是直接输出到屏幕。主场景先渲染全部不透明物体拿到一张背景颜色纹理。最后用一个全屏四边形后处理把背景和累积纹理做合成。实际项目中我发现 OIT 最合适的场景是烟雾、火焰、粒子这类没有清晰轮廓的半透明特效。它们本来就没有明确边界排序错了也看不太出来但如果能把排序彻底取消画面稳定度会提升非常多。至于玻璃、水这类需要明确高光和反射的材质纯 OIT 反而容易让高光权重被稀释需要给权重函数单独调参不能照抄烟雾那套。4.4 深度剥离是质量天花板但要付出代价除了加权混合另一种常被提起的 OIT 是深度剥离。它的思路是把场景按深度一层层剥离先找最靠近相机的一层半透明面画掉再找第二层画掉以此类推。每一层都能保留完整的颜色细节画面质量确实好但需要的渲染次数基本等于半透明层数场景复杂时性能成本不可接受。在 Babylon.js 里如果要走深度剥离通常会把半透明物体渲染到多个 RenderTarget每多一层就多一次全场景绘制。我做过一个试水项目场景里有三层半透明玻璃两层剥离就能看效果确实比加权混合干净但移动端直接掉到 20fps根本没法用。如果只是做 PC 端的高端数字孪生、建筑可视化深度剥离是可以考虑的如果是 Web 端通用展示我还是老老实实推荐加权混合。5. 调试与性能实战中的排查清单5.1 症状对照表我在多个项目里积累了一份透明渲染问题速查表照着查要比盲调快不少现象常见原因推荐手段半透明物体穿过不透明墙体透明物体未做深度测试开启深度预渲染两个半透明物体穿插时顺序翻转排序点不准合并网格、减少透明 mesh 数量透明物体内部糊成一片三角形层级没有排序考虑 OIT 加权混合叶片边缘闪烁、细线alphaTest 深度偏差边缘过渡带、调整裁剪阈值粒子或烟雾大面积变暗权重函数过小加大近处权重限制最大权重透明面背面消失背面剔除开启设置 backFaceCulling false半透明物体自己挡自己出现洞透明材质错误开启深度预通道关闭该材质的 enableDepthPrePass5.2 排查顺序建议遇到透明渲染异常我先按这个顺序查能省一半精力。第一确认材质 transparencyMode 是不是符合预期尤其是 alphaTest 和 ALPHABLEND 有没有搞混。第二看场景里半透明 mesh 数量数量越多排序风险越大能合并先合并。第三给所有和半透明相交的不透明材质开深度预渲染看看问题是否解决。第四如果还有问题再上 OIT 把透明层之间的排序去掉。最后才去微调权重函数和混合系数。千万别一上来就怀疑引擎 bug九成透明错乱都是排序和深度配置的锅。Babylon.js 的静态场景极少出现引擎级渲染错误把材质配置和渲染顺序捋清楚问题基本都能定位。5.3 两个容易忽略的隐藏坑第一个是渲染目标尺寸。OIT 的累积纹理如果和主屏幕分辨率不一致合成时很容易出现边缘模糊或色偏。要动态适配相机宽高比并在窗口 resize 时重新调整渲染目标尺寸。第二个是透明度排序与 instanced mesh。Babylon.js 的实例化网格共享同一个材质但每个实例的位置不同引擎排序时如果只按第一个实例算后面的实例全都会跟着错。这种场景最好把实例拆成几个部分或者对关键实例单独设置排序偏移。最后再分享一个我自己一直在用的习惯把调试面板里加一个“透明模式总开关”一键切换场景里所有 ALPHABLEND 材质和深度预通道的组合状态。排查时来回切换对比截图远比改一行看一帧高效得多。透明渲染这门手艺靠的就是把原理吃透再把这些经验沉淀成一套自己的排查流程。
透明渲染这毛病我最早是在做某跨平台系统的三维场景时碰上的一个半透明玻璃球里面还套着一根同样半透明的管道转着转着管道就穿到玻璃外面来了再转两下玻璃内壁自己把自己糊成一片。后来做大屏可视化树叶、烟尘、水面一个比一个能出幺蛾子。这些问题有个共同名字——“自身错乱”本质就是半透明像素在混合时排序出了岔子。这篇文章专门聊 Babylon.js 环境下的两个核心解法深度预渲染Depth PrePass和顺序无关透明OIT。前者能让半透明物体和不透明场景正确咬合后者能从原理上绕开排序问题适合处理多层透明互相嵌套的场景。无论是前端可视化、WebGL 项目还是刚接触 Babylon.js 的图形学爱好者读完都应该能定位并修复大部分透明渲染异常。1. 透明渲染“自身错乱”到底是怎么来的1.1 半透明排序是绕不开的“画家算法”要理解自身错乱先得理解浏览器里绝大多数实时渲染是怎么处理透明物体的。默认情况下不透明物体渲染时开启深度测试和深度写入谁在前面谁挡住后面干干净净。半透明物体不行因为颜色要和后面的像素混合如果直接写入深度那背后的东西就全被挡掉玻璃就成实心的了。所以引擎把半透明物体按离相机从远到近排序先画远的再画近的一层层叠加这就是经典的画家算法。Babylon.js 内部会给每个半透明 mesh 计算一个排序点多数时候用物体中心点或者包围球中心然后按这个距离排序。单看一个玻璃球没问题球内球外分得清一旦出现两个互相穿插的半透明物体或者一个多面体自身有多个半透明面片互相折叠排序点只能代表“大概位置”代表不了每个三角形片段的真实先后于是该在后面的片段先画了该在前面遮挡的反而后画画面就乱套。我踩过最典型的一个坑是一块半透明水面上漂浮着半透明气泡水面 mesh 的中心点离相机远气泡中心点离相机近引擎把水面排后面、气泡排前面看起来正常。可相机一压低水面中心点的距离突然变得比气泡更近排序反过来气泡就被水面整个盖住了视觉上直接从水面上消失。这就是“自身错乱”最直观的表现——同一组模型换个角度就翻脸。1.2 深度测试和混合是两套逻辑不少人以为把深度测试打开就能解决半透明排序其实半透明渲染的难点恰恰在于深度和混合是两套独立逻辑。深度测试管的是“像素能不能被画上去”混合管的是“画上去之后怎么和背景色融合”。对于不透明物体深度测试就能搞定一切对于半透明物体深度测试只能决定这个像素是否被遮挡可它在混合时到底应该和谁融合还是得靠绘制顺序。举个例子你从正面看一块双层玻璃后面一层先画颜色先写进颜色缓冲前面一层后画把颜色混合上去视觉上透光、反射都对。但如果你把相机转到背面引擎重新排序后原本前面那层现在在几何上靠后了它变成了先画的一层于是颜色混合顺序完全反过来玻璃要么变暗要么边缘出现奇怪的色偏。这还不是最麻烦的最麻烦的是透明物体内部面片自身的顺序。一个模型由几百个三角形拼成引擎按 mesh 排序不按三角形排序内部三角形之间谁的像素先混合完全不可控。这就是为什么很多半透明模型一旋转内部结构就像粥一样糊在一起。想从根本上稳住画面就不能只靠排序要用深度预渲染把不透明的“底”打扎实再用 OIT 去处理透明层与透明层之间的纠缠。2. 深度预渲染先把不透明的“底”画清楚2.1 深度预渲染解决的是“透明和不透明”的错乱深度预渲染的思路非常直接在正式渲染一帧之前先把场景里不透明的物体单独画一遍只写深度不做颜色输出。这一遍生成的就是一张完整的深度图。等真正渲染透明物体时GPU 拿着这张深度图做深度测试透明像素若在不透明表面后面就直接被挡掉若在前面就正常通过并且混合。这样透明物体和不透明物体之间的遮挡关系就从“靠排序碰运气”变成了“靠深度缓冲定生死”。Babylon.js 里要启用这套机制核心有两条路。一条是启用 PrePassRenderer然后让对应材质参与深度预通道// 开启场景预通道渲染器 scene.prePassRenderer new BABYLON.PrePassRenderer(scene); // 需要参与深度预渲染的材质逐一打开 glassMaterial.enableDepthPrePass true; leafMaterial.enableDepthPrePass true;另一条是单独给相机创建深度渲染器拿到的深度纹理可以喂给后处理或自定义 shaderconst depthRenderer scene.enableDepthRenderer(camera, true); // 之后可以取 depthRenderer.getDepthMap() 做深度纹理采样就我实际项目里的感受绝大多数“半透明物体穿到墙里”“半透明物体把后面的不透明柱子挡没了”这类问题都是深度预渲染可以稳定解决的。它不改变透明物体之间的排序逻辑但把透明层和不透明层的边界彻底立住了。2.2 多个深度通道会不会把性能拖垮添加预通道意味着每帧要多渲染一遍不透明物体的顶点和深度GPU 的 draw call 数量会上升顶点处理工作量也会增加。对静态场景这个开关带来的开销并不大因为深度预通道不需要跑片段着色器的复杂光照很多材质只用顶点位置和一个极简的片段输出。但动态场景、大量蒙皮骨骼动画、植被摇摆这类高顶点数模型开启后帧率下降会非常明显。我做过一次实测一个中等规模的场景不透明模型面数约 1200 万开启 PrePassRenderer 后帧耗时从约 6ms 涨到 8ms。虽然体感不明显但同一个场景如果跑在低端移动设备上这个增量可能直接从 60fps 掉到 45fps 以下。所以深度预通道不建议无脑全开最好只给那些真正和半透明物体相交、且会产生明显视觉错误的不透明材质打开。比如一面会被玻璃穿透的墙壁开启预通道收益极大而远处一座和半透明区域毫无关系的山头开了纯属浪费。Babylon.js 的 PrePassRenderer 本身也支持按材质控制逐材质打开而不是场景级一刀切。2.3 alphaTest 材质同样受益深度预渲染对 alphaTest 材质特别有价值。树叶、栅栏、铁丝网这类用 alphaTest 裁掉像素的物体裁剪后边缘像素是非黑即白的不做混合因此可以正常写入深度。把树叶的材质设置成参与深度预通道后树叶后面再放一面半透明玻璃玻璃会被树叶精确遮挡而不是整片玻璃直接盖到树叶上方。这里有个容易被忽略的细节alphaTest 裁出来的边缘往往有锯齿如果你开着抗锯齿深度预通道用的深度纹理本身和最终主渲染的几何边缘可能有一两个像素的偏差结果就是玻璃和树叶交界处偶尔出现闪烁细线。遇到这种情况我的习惯是把 alphaTest 材质的边缘加一圈淡出过渡让裁剪边缘不是一刀切既缓和锯齿也减少深度偏差带来的闪烁。3. Babylon.js 实操透明材质配置与排序优化3.1 四种透明模式先分清楚Babylon.js 材质里有几个经典透明度模式搞错的话后面怎么调都白搭默认 OPAQUE完全不透明适合绝大多数实体。ALPHATEST像素 alpha 低于阈值直接丢弃适合树叶、栏杆边缘锐利性能好。ALPHABLEND真正做 alpha 混合适合玻璃、水面、烟雾边缘柔和但排序敏感。ALPHACOMBINE以 diffuse 纹理 alpha 为准做了纹理透视后整体透出适合 UI 和贴图型半透明物体。遇到“自身错乱”第一步先确认材质属于哪一类。很多初学者把树叶材质设成 ALPHABLEND结果树叶和树叶之间疯狂穿插其实树叶用 ALPHATEST 就能解决绝大部分问题。ALPHABLEND 的材质数量越少排序错乱的概率越低。配置半透明材质时我一般这么写const mat new BABYLON.PBRMaterial(glass, scene); mat.transparencyMode BABYLON.Constants.MATERIAL_ALPHABLEND; mat.alpha 0.6; mat.disableDepthWrite true; // 半透明混合通常不需要写深度 mat.backFaceCulling false; // 双面渲染避免薄片背面消失3.2 排序不是越细越好Babylon.js 里可以调整 mesh 的排序策略让引擎不只看中心点也参考包围球半径等参数。但这些策略只是缓解不能根治。排序策略调得越细每帧排序计算量越大而且细粒度排序在大场景里很容易导致画面不稳定——相机稍微一动排序点就变透明层顺序瞬间翻转。我和 A 同学一起排查过一个项目他把一张复杂的半透明建筑围挡拆成了几十个小组件结果相机旋转时围挡上的文字一会儿浮在玻璃前一会儿被玻璃吞掉。调了一圈排序策略最后解决问题的反而是把围挡合并成一个整体 mesh再配合深度预渲染。网格越碎排序点越多错乱概率越大能合并的半透明网格尽量合并这是最便宜的优化。3.3 深度预渲染需要配合透明模式开启深度预通道之后不是一切就万事大吉了它和 ALPHABLEND 的关系必须理清。深度预通道写入的是几何深度而 ALPHABLEND 材质在正式渲染时往往关闭深度写入。如果材质本身既是半透明又参与预通道那么预通道写入的深度就来自它自己的几何体主渲染再做深度测试时这个几何体会被自己预渲染的深度挡掉一部分。这句话比较绕用实际现象说就是某些透明材质开启 enableDepthPrePass 后反而出现“自己遮挡自己”的洞。解决方案很简单让半透明材质不要写深度也不要开预通道只让场景中不透明的墙、地面、柱子参与深度预渲染。透明与透明的关系交给 OIT 或调整透明度模式去解决。除非你明确知道一个半透明物体既要被深度图记录又不会被自身深度干扰否则别轻易给 ALPHABLEND 材质开预通道。4. OIT 顺序无关透明排序失效时的最终解法4.1 什么是顺序无关如果场景里的半透明物体数量不多排序问题忍一忍也就过去了。但当你有一堆烟雾、火焰、玻璃碎片互相交叠时排序再怎么调都是按下葫芦浮起瓢。这时候就该上 OITOrder Independent Transparency顺序无关透明。名字就叫“与顺序无关”意思是渲染结果不依赖物体绘制先后每个半透明像素都按自己的深度权重参与最终混合不需要引擎给它们排出一个全局先后顺序。OIT 最常见的实现之一是加权混合 OITWeighted Blended OIT它把每个半透明片段的颜色和深度转成一个权重累加进一个颜色累积缓冲和一个权重累积缓冲最后再做一个全屏合成。整个过程只用一个累积通道加一个合成通道性能不错画面质量也能满足大多数可视化场景需求。4.2 加权混合 OIT 的伪代码加权混合 OIT 的基本流程可以拆成两步第一步把所有半透明物体的片段颜色和权重写进累积目标第二步把累积目标和场景背景合成。累积通道的片段着色器伪代码// 半透明片段累积颜色暂存在浮点纹理里 uniform vec4 color; // 当前片段的半透明颜色 uniform float viewDepth; // 规范化后的深度值 [0,1] void main() { // 权重函数越近权重越大越远权重越小 float weight clamp(pow(1.0 - viewDepth, 3.0), 0.01, 4.0); accumColor.rgb color.rgb * color.a * weight; accumColor.a color.a * weight; }合成通道的着色器伪代码uniform sampler2D accumTex; uniform sampler2D backTex; // 不透明背景或上一帧颜色 void main() { vec4 acc texture(accumTex, uv); vec3 bgColor texture(backTex, uv).rgb; float alpha max(acc.a, 0.0001); vec3 blended acc.rgb / alpha; // 解出加权后的颜色 gl_FragColor vec4(mix(bgColor, blended, clamp(alpha, 0.0, 1.0)), 1.0); }看着不难但实际工程里到处是细节累积目标必须是浮点纹理否则累加几层就可能爆掉精度混合状态要设成加法混合合成通道要等所有透明物体画完再执行。Babylon.js 里可以创建自定义 RenderTargetTexture把半透明物体单独渲染到累积纹理再挂一个后处理做合成。4.3 在 Babylon.js 里搭一套最小 OITBabylon.js 没有开箱即用的“一键 OIT”但引擎给了足够多的底层能力可以用 RenderTargetTexture ShaderMaterial 实现一套最小可用的加权混合 OIT。大致步骤是这样创建两张浮点纹理作为累积目标的 color attachment一张存加权颜色一张存权重。创建 RenderTargetTexture把场景里参与 OIT 的半透明网格放到这个渲染目标的 renderList 里。给这些网格指定一个自定义 ShaderMaterial片段着色器走累积通道把颜色和权重写入两张浮点纹理而不是直接输出到屏幕。主场景先渲染全部不透明物体拿到一张背景颜色纹理。最后用一个全屏四边形后处理把背景和累积纹理做合成。实际项目中我发现 OIT 最合适的场景是烟雾、火焰、粒子这类没有清晰轮廓的半透明特效。它们本来就没有明确边界排序错了也看不太出来但如果能把排序彻底取消画面稳定度会提升非常多。至于玻璃、水这类需要明确高光和反射的材质纯 OIT 反而容易让高光权重被稀释需要给权重函数单独调参不能照抄烟雾那套。4.4 深度剥离是质量天花板但要付出代价除了加权混合另一种常被提起的 OIT 是深度剥离。它的思路是把场景按深度一层层剥离先找最靠近相机的一层半透明面画掉再找第二层画掉以此类推。每一层都能保留完整的颜色细节画面质量确实好但需要的渲染次数基本等于半透明层数场景复杂时性能成本不可接受。在 Babylon.js 里如果要走深度剥离通常会把半透明物体渲染到多个 RenderTarget每多一层就多一次全场景绘制。我做过一个试水项目场景里有三层半透明玻璃两层剥离就能看效果确实比加权混合干净但移动端直接掉到 20fps根本没法用。如果只是做 PC 端的高端数字孪生、建筑可视化深度剥离是可以考虑的如果是 Web 端通用展示我还是老老实实推荐加权混合。5. 调试与性能实战中的排查清单5.1 症状对照表我在多个项目里积累了一份透明渲染问题速查表照着查要比盲调快不少现象常见原因推荐手段半透明物体穿过不透明墙体透明物体未做深度测试开启深度预渲染两个半透明物体穿插时顺序翻转排序点不准合并网格、减少透明 mesh 数量透明物体内部糊成一片三角形层级没有排序考虑 OIT 加权混合叶片边缘闪烁、细线alphaTest 深度偏差边缘过渡带、调整裁剪阈值粒子或烟雾大面积变暗权重函数过小加大近处权重限制最大权重透明面背面消失背面剔除开启设置 backFaceCulling false半透明物体自己挡自己出现洞透明材质错误开启深度预通道关闭该材质的 enableDepthPrePass5.2 排查顺序建议遇到透明渲染异常我先按这个顺序查能省一半精力。第一确认材质 transparencyMode 是不是符合预期尤其是 alphaTest 和 ALPHABLEND 有没有搞混。第二看场景里半透明 mesh 数量数量越多排序风险越大能合并先合并。第三给所有和半透明相交的不透明材质开深度预渲染看看问题是否解决。第四如果还有问题再上 OIT 把透明层之间的排序去掉。最后才去微调权重函数和混合系数。千万别一上来就怀疑引擎 bug九成透明错乱都是排序和深度配置的锅。Babylon.js 的静态场景极少出现引擎级渲染错误把材质配置和渲染顺序捋清楚问题基本都能定位。5.3 两个容易忽略的隐藏坑第一个是渲染目标尺寸。OIT 的累积纹理如果和主屏幕分辨率不一致合成时很容易出现边缘模糊或色偏。要动态适配相机宽高比并在窗口 resize 时重新调整渲染目标尺寸。第二个是透明度排序与 instanced mesh。Babylon.js 的实例化网格共享同一个材质但每个实例的位置不同引擎排序时如果只按第一个实例算后面的实例全都会跟着错。这种场景最好把实例拆成几个部分或者对关键实例单独设置排序偏移。最后再分享一个我自己一直在用的习惯把调试面板里加一个“透明模式总开关”一键切换场景里所有 ALPHABLEND 材质和深度预通道的组合状态。排查时来回切换对比截图远比改一行看一帧高效得多。透明渲染这门手艺靠的就是把原理吃透再把这些经验沉淀成一套自己的排查流程。
