当前位置：首页 > news >正文

当透明遇上“自身错乱”：Babylon.js 深度预渲染与顺序无关透明（OIT）实战指南

news 2026/3/27 3:50:52

一、问题现象：为什么“透明<1”就乱？

如果使用PBRMetallicRoughnessMaterial，当alpha<1时，如果mesh本身比较复杂，往往看上去一团糟的，透明片叠加得乱七八糟得，这是因为透明队列不再写深度，而引擎又只能按物体中心排序——同一 mesh 内部三角面顺序固定，于是出现“前面的面先画，后面的面被深度丢弃”或“前后反复覆盖”的破面/闪斑，即自遮挡（self-occlusion）。

今天的主角就是官方社区验证最稳的两把“瑞士军刀”：

Depth-PrePass（深度预渲染）
OIT（Order-Independent Transparency，顺序无关透明）

二、原理剖析

2.1 Depth-PrePass：先写深度，再画颜色

一句话：把一次 DrawCall 拆成两次——
Pass-0 只写深度（colorMask = false），Pass-1 正常混合。
因为深度缓冲区在 Pass-1 前已完整生成，谁前谁后由硬件深度测试说了算，彻底摆脱“面顺序”依赖。

Babylon.js 内部实现

检测到material.needDepthPrePass = true时，引擎自动生成两条SubMesh：
- 第一条renderPass=DEPTH（shader 里gl_FragColor直接 discard）
- 第二条renderPass=COLOR（正常 PBR 光照 + α-blend）
两次绘制共用同一几何体，无 CPU 端排序开销，仅增加一次 DrawCall。

代价：

多 1 次顶点着色（VS）和 1 次光栅化，像素着色（PS）只跑一次。
对移动端 GPU 来说，VS 便宜，PS 贵；复杂 PBR 场景反而更划算。

2.2 OIT：双深度剥离，让“α 混合”不再关心顺序

思路：
把“从远到近”排序问题变成“从远到近 N 层”收集问题——

第一遍：把最近深度d0写进深度纹理
第二遍：把“比d0更远且 α>0”的第二深深度d1写入
第三遍：把“比d1更远且 α>0”的第三深深度d2写入
……
直到收集完MAX_LAYERS层，最后从远到近一次性混合。

Babylon.js 实现细节

开启条件：scene.useOrderIndependentTransparency = true+ WebGL2
内部使用双深度剥离（Dual Depth Peeling）+ 链表像素存储（Pixel Linked-list）
默认 4 层，可通过scene.oitMaxLayers = 8调整
每层一次全屏绘制，共用同一几何，带宽消耗随层数线性增加。

代价：

显存：额外 2 张RGBA32F纹理（深度 + 颜色链表）
帧率：桌面端 1080p 约降 10-20 %；移动端 720p 约降 30-40 %
限制：WebGL1 设备自动回退到“物体级排序”，无效果。

三、案例实战：三种典型场景如何“排兵布阵”

下面给出 3 个真机测试过的 demo，分别演示“单用 PrePass”、“单用 OIT”以及“二者叠加”的最佳实践。

场景	模型特点	相机行为	推荐方案	关键代码片段
A. 展厅汽车	40 万面封闭车体，透明玻璃	固定轨道漫游	仅 Depth-PrePass	`mat.needDepthPrePass = true;`
B. 医疗点云	10 万颗粒子，α=0.3，相互重叠	医生任意旋转	仅 OIT	`scene.useOIT = true;`
C. 航天器舱	内部管线+外层壳，双层透明	舱内 VR 漫游	PrePass + OIT 分层	壳用 PrePass，管线用 OIT

Demo A：展厅汽车——PrePass 单杀

// 加载 glTF BABYLON.SceneLoader.LoadAssetContainer( "car.glb", ..., function (container) { const car = container.meshes[0]; const glass = car.getChildMeshes().find(m => m.name.includes("Glass")); glass.material.needDepthPrePass = true; // ← 核心一行 glass.material.alpha = 0.25; container.addAllToScene(); });

结果：

桌面 RTX2060 帧率 120 FPS → 118 FPS（-1.6 %）
破面完全消失，车窗内部骨架清晰可见。

Demo B：医疗点云——OIT 救场

scene.useOrderIndependentTransparency = true; scene.oitMaxLayers = 6; // 10 万粒子重叠度较高 const ps = new BABYLON.PointsCloudSystem("pcs", 2, scene); ps.addPoints(100000); ps.buildMeshAsync().then(() => { ps.mesh.material = new BABYLON.PBRMaterial("mat", scene); ps.mesh.material.alpha = 0.3; ps.mesh.material.transparencyMode = PBRMaterial.PBRMATERIAL_ALPHABLEND; });

结果：

无 OIT 时旋转视角出现“闪烁团块”；开启后层次正确
iPad Pro M1 帧率 60 FPS → 42 FPS（-30 %），但医生可接受。

Demo C：航天器舱——混合打法

思路：

外层壳面数高、α 恒定，用 PrePass 最省
内部管线细小且相互穿插，用 OIT 避免拆模型

// 1. 外壳 shell.material.needDepthPrePass = true; shell.material.alpha = 0.15; // 2. 内部管线 scene.useOrderIndependentTransparency = true; tubes.material.alpha = 0.4;

技巧：
把外壳renderingGroupId = 0，管线= 1，保证壳先画（PrePass 已写深度），管线 OIT 阶段再收集链表，不浪费层数。
VR 模式下 90 FPS 稳帧，舱内无破面。