★ FEATURED ARTICLE 2. 解决透明渲染自身错乱先搞清楚它为什么乱透明渲染的“自身错乱”说白一点就是透明物体在渲染时会错误地遮挡住自己身后的透明物体。这在 3D 引擎里是一个老生常谈的大坑Babylon.js 默认的透明混合方式属于“画家算法”也就是先画不透明的再按照物体距离摄像机的远近从远到近一层层去画透明物体。这个“远到近”的顺序依赖什么问题看下面这个场景一个半透明的玻璃圆球里面套着一个半透明的玻璃圆柱两者都是透明的。摄像机从某个角度望过去正确的视觉结果是圆柱应该透过圆球的前表面显示出来同时圆球的后表面也应该透过前表面若隐若现。但用默认渲染结果往往是圆球把自己的后表面挡住了或者圆柱直接被圆球整体吞掉看起来像一块发白的雾团。这就是所谓的“自身错乱”。深层原因有两条透明物体间的深度关系是动态的。摄像机一转动物体的前后关系就变但引擎按三角形或物体级别排序时没法保证每一个像素级别的前后顺序都正确。半透明材质意味着 A 和 B 互相都能看到对方这种“双向透明”不是简单排序能解决的。排序只能处理“单向遮挡”处理不了“互相透视”。Babylon.js 里解决这个问题的正经方案就是今天要聊的两件套深度预渲染Depth Pre-pass与顺序无关透明Order-Independent TransparencyOIT。深度预渲染负责把场景里所有不透明物体先画一遍深度生成一张可靠的深度缓冲OIT 则在透明物体渲染阶段利用这张深度缓冲把透明物体的颜色按“深度无关”的方式累积起来。两者合在一起才能做到“无论摄像机怎么转透明叠加结果都稳定正确”。这套方案适合谁三类人第一类是做产品展示类的项目比如珠宝、手表、玻璃器皿的在线 3D 预览第二类是做建筑可视化要表现室内玻璃隔断、玻璃幕墙的多层叠加第三类是做游戏里带体积感的效果比如能量护盾、魔法罩、水体边缘的半透明层。只要你的场景里有多个透明物体互相穿插、互相嵌套默认渲染就会露馅这套方案就是为你准备的。3. Babylon.js 透明渲染的内置短板与 OIT 的价值要说清楚深度预渲染和 OIT 为什么有用得先看 Babylon.js 默认透明管线的具体短板。3.1 画家算法在真实场景中的三个死穴Babylon.js 默认对透明物体做的事情很简单先渲染不透明物体再把透明物体按离摄像机的距离排个序从远到近逐个绘制。这个排序本身没问题但一到真实场景就露馅。第一个死穴是“三角形级别的错误”。引擎可以按单个三角形排序也可以按整个 mesh 排序。按 mesh 排序时一个 mesh 内部若有自重叠的透明面排序就失效因为引擎不知道该拿哪些三角形先画。按三角形排序时性能又扛不住一个一万面的透明 mesh 要排一万个三角形实时场景直接卡顿。第二个死穴是“互相穿插”。两个半透明平面呈十字形交叉或者一个平面插进另一个平面里无论你怎么排总会有一半像素的顺序是错的。因为交叉的部分不存在“谁更远”的统一答案每个像素的深度关系都不一样。第三个死穴是“摄像机移动”。排序必须在每帧重新执行。如果场景里有几十个透明物体每帧都做一次全量排序虽然现代 CPU 能扛住但排序结果在摄像机快速旋转时会闪烁、跳变因为距离相近的物体排序结果会抖动。3.2 OIT 的底层直觉每个像素独立处理OIT 的思路完全绕开“排序”这个难题。它不再关心“哪个物体在前面”而是对每个像素收集所有透明物体在该像素上的颜色贡献再按照正确的混合公式把它们全部组合起来。相当于把透明渲染从“全局排序问题”拆成了“逐像素独立计算问题”。这个直觉用生活类比来解释画家算法像是让一排人按高矮站好再一个一个往画布上叠色块只要有人站错位置颜色就叠错OIT 则像是让每个像素位置派一个“独立收银员”所有透明物体都把在这个像素上的颜色放到收银台上收银员按照固定规则把它们结账成最终颜色。谁先来谁后来无所谓规则一样结果一样。3.3 为什么必须有深度预渲染OIT 才能干活这里有个关键点OIT 只是解决了“透明物体之间的顺序”但它还需要知道“透明物体和不透明物体之间的顺序”。如果一个不透明物体挡在透明物体的前面那透明物体根本不应当被看到。Babylon.js 的默认渲染管线已经先把不透明物体画完了深度缓冲里有了不透明物体的深度值。透明物体在 OIT 管线中逐个绘制时每个像素都要和深度缓冲比对如果透明物体像素的深度大于已有值就直接扔掉。这个机制就是深度预渲染的核心价值。但是有个坑透明物体本身互相之间不写深度因为如果写了后面的透明碎片就会被扔掉无法实现叠加。所以深度缓冲里只有不透明物体的深度。这一步非常关键理解了这个你就知道为什么 OIT 必须在深度预渲染之后做——它需要一张“只包含不透明物体深度”的干净缓冲才能区分“被挡住”和“被半透明覆盖”。4. 实战之前的深度预渲染配置配置深度预渲染在 Babylon.js 里不是一句scene.clear()那么简单。直接开工前我建议你先把场景里和深度相关的参数理一遍。4.1 开启深度预渲染的标准姿势Babylon.js 从 4.x 开始已经把深度预渲染和 OIT 集成在scene.prePass机制里。最直接的开启方式const scene new BABYLON.Scene(engine); const prePassRenderer new BABYLON.PrePassRenderer(scene); prePassRenderer.enable();注意PrePassRenderer是后面接 OIT 的前提。它的工作方式是单独生成一张深度纹理和一张法线纹理看需求不透明物体在这张纹理里留下深度值透明物体后期再叠加。如果场景里存在大量不透明物体建议打开多视图和 MSAAprePassRenderer.samples 4;4表示 4x MSAA透明物体边缘的锯齿会柔和很多。代价是显存占用升高移动端建议 2桌面端可以到 4。4.2 关联相机与后期效果深度预渲染的结果最终要给 OIT 使用所以相机的后期处理链上要挂上对应效果。const oit new BABYLON.OrderIndependentTransparency(scene); scene.postProcessRenderPipeline null; // 避免和默认后期管线冲突这里有一个很容易踩的坑如果你同时启用了默认的DefaultRenderingPipeline比如 Bloom、FXAA它和PrePassRenderer会打架导致最终输出里透明物体颜色明显发暗或者边缘发亮。我建议先只用PrePassRenderer OIT效果调通后再按需添加其他后期。4.3 透明材质的关键设置在 Babylon.js 中透明材质必须在PBRMaterial或StandardMaterial上开启透明度const material new BABYLON.PBRMaterial(glass, scene); material.alpha 0.35; // 整体透明度 material.transparencyMode BABYLON.Material.MATERIAL_ALPHABLEND; material.metallic 0.0; material.roughness 0.1;transparencyMode必须显式设置。若保持默认引擎可能不会将其纳入 OIT 管线透明效果还是走老排序逻辑那你就回到了起点。另一个容易被忽略的点material.alpha和material.opacityTexture的区别。前者是整体透明度后者是带纹理的透明度。两者都可以和 OIT 兼容但如果同时设置最终透明度是相乘关系。这个乘法逻辑我在测试里发现经常导致透明度比预期更“透”所以要么只用alpha要么只用opacityTexture别贪心都用。5. 顺序无关透明OIT三种模式选哪种、怎么用Babylon.js 的 OIT 不是只有一种实现它内部提供了三种模式按需选择。5.1 模式一深度桶Depth Peeling深度桶的思路是把透明物体按深度一层层“剥开”。第一遍把最近的透明碎片采出来写入一个图层第二遍把第二近的采出来写入另一个图层。最后把所有图层按从远到近混合。优点结果最准确几乎等同于逐像素排序的完美结果。 缺点显存和带宽开销高每多一层就要多一次全屏纹理读写。Babylon.js 默认最多 4 层如果透明物体复杂度超过 4 层嵌套就会出现少量错误。5.2 模式二加权混合Weighted Blended OIT加权混合为每个像素维护一个“累计颜色”和一个“累计权重”。权重由透明度、深度、覆盖率共同决定最后一步统一除以权重得到混合结果。优点性能极好只需要两次 pass一次计算颜色和权重一次做最终合成。 缺点近似结果不能完美表达多层透明度。5.3 模式三双深度桶Dual Depth Peeling在深度桶的基础上同时从最前和最后双向剥离。相当于每一轮多处理一层所以同样的层数下能覆盖更多透明碎片。实际项目里我的推荐顺序是场景复杂度推荐模式原因简单场景1~2 层透明嵌套默认深度桶精度高显存开销可接受中等复杂度护盾、水波、玻璃幕墙加权混合帧率优先视觉差异不明显复杂嵌套多层玻璃 半透明液体双深度桶平衡精度与速度5.4 切换 OIT 模式的实际代码const oit new BABYLON.OrderIndependentTransparency(scene); // 使用深度桶 oit.mode BABYLON.OrderIndependentTransparency.MODE_DEPTH_PEELING; // 使用加权混合 oit.mode BABYLON.OrderIndependentTransparency.MODE_WEIGHTED_OIT; // 使用双深度桶 oit.mode BABYLON.OrderIndependentTransparency.MODE_DUAL_DEPTH_PEELING;切换模式后注意看控制台有没有 warning。我在某版本的 Babylon.js 中遇到过加权混合模式下贴图 UV 错乱的问题最后升级引擎版本解决。所以如果你用的是较老版本的 Babylon.js优先考虑升级到 5.x 及以上。6. 完整实操流程从空场景到多层透明玻璃现在我们把所有部件组装起来做一个完整示例。这个示例描述如下场景里有一面不透明墙体墙体前放一个半透明玻璃球球内嵌套一个半透明玻璃圆柱。摄像机慢慢绕场景旋转观察透明叠加是否稳定。6.1 场景初始化与硬件判断const engine new BABYLON.Engine(canvas, true); const scene new BABYLON.Scene(engine); scene.clearColor new BABYLON.Color4(0.05, 0.05, 0.08, 1.0); const camera new BABYLON.ArcRotateCamera(camera, 0.8, 1.2, 8, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, true); // 环境光照 const hdrTexture BABYLON.CubeTexture.CreateFromPrefilteredData( /assets/environment.env, scene ); scene.environmentTexture hdrTexture; scene.environmentIntensity 0.6;这里我特意加了 HDR 环境贴图。PBR 材质在纯白色环境下透明玻璃看起来会非常平没有高光反射OIT 效果很难看出来。没有 HDR 环境你会发现透明物体通了 OIT 也像一层塑料膜。6.2 建造墙体、玻璃球、玻璃圆柱// 不透明墙体 const wall BABYLON.MeshBuilder.CreateBox(wall, { width: 8, height: 4, depth: 1 }, scene); wall.position.z -2; const wallMat new BABYLON.StandardMaterial(wallMat, scene); wallMat.diffuseColor new BABYLON.Color3(0.3, 0.3, 0.35); wallMat.specularColor new BABYLON.Color3(0.1, 0.1, 0.1); wall.material wallMat; // 玻璃球 const sphere BABYLON.MeshBuilder.CreateSphere(glassSphere, { diameter: 2, segments: 48 }, scene); sphere.position.y 0.5; const glassMat new BABYLON.PBRMaterial(glassMat, scene); glassMat.alpha 0.35; glassMat.transparencyMode BABYLON.Material.MATERIAL_ALPHABLEND; glassMat.metallic 0.0; glassMat.roughness 0.05; sphere.material glassMat; // 玻璃圆柱 const cylinder BABYLON.MeshBuilder.CreateCylinder(glassCylinder, { height: 1.6, diameterTop: 1.2, diameterBottom: 1.2, tessellation: 48 }, scene); cylinder.position.y 0.5; const cylinderMat glassMat.clone(cylinderMat); cylinderMat.alpha 0.45; cylinder.material cylinderMat;注意玻璃球和玻璃圆柱的位置是重叠的都在 y0.5 附近这是故意的。若把它们分开摆默认渲染看不出问题OIT 的价值就体现不出来。6.3 挂上深度预渲染 OITconst prePass new BABYLON.PrePassRenderer(scene); prePass.enable(); prePass.samples 4; const oit new BABYLON.OrderIndependentTransparency(scene); oit.mode BABYLON.OrderIndependentTransparency.MODE_DUAL_DEPTH_PEELING;到这里运行页面旋转摄像机你应该看到玻璃圆柱始终清晰地透过玻璃球显示且玻璃球的后表面能通过前表面隐约可见。不再有发白、发虚、整块消失的问题。6.4 没有 OIT 时的对比把 OIT 那两行注释掉重新运行。此时透明物体回落到默认画家算法。旋转摄像机球体某些角度会出现明显的白色雾状区域圆柱若转到球体后面会被球体完全遮蔽看不出圆柱轮廓。两者对比一下你就知道这套方案值不值。7. 性能优化让 OIT 在复杂场景不崩帧OIT 的提升不是免费的。Depth Peeling 模式在多层嵌套下GPU 带宽开销能占到整个渲染时间的 40% 以上。做性能优化时我的经验是按下面顺序来。7.1 限制透明物体数量这是最容易被忽视的优化不是所有半透明材质都必须走 OIT。场景里的阴影、粒子、雾效都有自己的半透明逻辑。千万不要把PrePassRenderer.enable()当成全局开关它只会把transparencyMode为 ALPHABLEND 的材质纳入 OIT。所以实际项目中我会刻意让普通 UI 的透明元素用默认渲染高价值的嵌套透明模型玻璃容器、护盾、水体才设置MATERIAL_ALPHABLEND。这一条优化通常能减少 50% 的 OIT 压力。7.2 调整 Depth Peeling 层数oit.maxPassCount 4;maxPassCount控制深度桶最多剥几层。大部分场景 2 层就足够肉眼几乎看不出差异但是性能可以提升接近一倍。建议从 2 开始往上加到视觉满意为止。7.3 降低不透明物体的超采样压力prePass.samples 4很爽但在移动端是灾难。若目标是 60 帧建议移动端直接设为 1或者改为 2然后配合 FXAA 扛锯齿。桌面端追求画质再上 4。7.4 场景透明物体数量过大时分级处理假设场景有 50 个透明物体全部走 OITGPU 压力会很大。这里我的做法是距离摄像机 5 米以内的透明物体走 OIT质量优先。距离摄像机 5 米以外的透明物体直接用默认透明或完全关闭透明采用不透明贴图模拟。这种方法在建筑可视化中经常用到距离远的玻璃反射可以用Cube贴图模拟完全不透明也能糊弄过去。8. 常见问题与排查技巧实录这部分全是实战中踩过的坑记录在这里方便你直接按图索骥。8.1 透明物体没有被 OIT 处理还是原始排序效果检查材质设置material.transparencyMode BABYLON.Material.MATERIAL_ALPHABLEND曾经我在一个项目里用material.alpha 0.3设置了透明度但忘记设置transparencyMode。在 Babylon.js 中alpha会激活透明混合但PrePassRenderer识别透明材质是靠transparencyMode判断的。两者对不上OIT 就静默失效。排查时第一件事就是把这个布尔值打出来看。8.2 OIT 开启后画面整体变暗透明物体变暗多半是因为深度预渲染的深度纹理没有包含透明物体的深度同时透明物体又被不透明物体“误导”深度剔除。检查一下场景里是否存在隐藏的透明平面或粒子系统正在写深度。8.3 透明物体边缘发黑像蒙了一层灰这个问题跟alphaToCoverage有关。Babylon.js 的 OIT 内部如果启用了 alpha 到覆盖率转换边缘像素的 alpha 会异常。建议关闭prePass.renderParticles false;粒子系统和 OIT 的兼容性一般若场景中有很多粒子建议把renderParticles关掉。8.4 开启后期管线后 OIT 结果错误前面提过DefaultRenderingPipeline和 PrePass 会冲突。如果必须要用 Bloom建议方案是不用默认的DefaultRenderingPipeline而是手动添加一个极简风格的 Bloom 到postProcessRenderPipeline并确保它在 OIT 之后运行const pipeline new BABYLON.PostProcessRenderPipeline(scene); const bloom new BABYLON.BloomEffect(scene, 1, 0.8, 0.5, 1); pipeline.addEffect(bloom); scene.postProcessRenderPipeline pipeline;注意顺序OIT 结果应该作为输入被 Bloom 再处理。如果你先 Bloom 再 OIT等于把 Bloom 的发光光晕又做了一次透明混合结果会很脏。8.5 WebGL1 下 OIT 不可用Babylon.js 的 OIT 要求 WebGL2。如果你打开控制台看到一堆float texture相关的报错八成是浏览器默认禁用了 WebGL2。检查方式const isWebGL2 engine.webGLVersion 2; console.log(isWebGL2);不是 2 的话需要让用户换浏览器或打开硬件加速。9. 最后的实操建议我在实际项目里测试这套方案时最大的体会是别把 OIT 当成“万能透明开关”它是一套需要精细配置的渲染管线段。每次加一个透明物体都要想清楚它需不需要正确排序。如果只是场景里的一个半透明灯罩默认透明就够了没必要贡献一份 OIT 计算量。另外Depth Peeling 模式下Babylon.js 的透明排序结果虽然正确但叠层数多了以后会轻微消耗性能。实际产品里我一般把maxPassCount固定在 2只有当用户走近透明物体、需要近距离观察时才动态调高到 4。如果你做的是类似玻璃酒杯展示这种需要极高真实感的项目还有一个外挂思路在 OIT 之上叠加一层屏幕空间反射SSR。用深度预渲染得到的深度纹理作为 SSR 的输入反射和透视结合表现力会有质的飞跃。但这属于进阶玩法等 OIT 本身的输出稳定了再尝试不然排查起来会非常痛苦。希望这套实战流程能帮你告别透明渲染的“自身错乱”。踩坑不可怕可怕的是不知道往哪个方向排查。现在至少你已经知道自己该查哪里了。
阅读完成 · 觉得有帮助？
