一、问题现象：为什么“透明<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 稳帧，舱内无破面。
四、 checklist：如何给项目选型
仅单个封闭模型、α 不变→
needDepthPrePass = true即可大量粒子/毛发/云，相互穿插→ 直接上 OIT
双层透明（外壳+内件）→ 外壳 PrePass + 内件 OIT，分层渲染
WebGL1 设备→ OIT 不可用，只能拆模型或假透明
安卓低端机→ PrePass 增加 1 DrawCall 通常比 OIT 4-8 层便宜
五、结语
Depth-PrePass 与 OIT 并不是“谁替代谁”，而是互补的两级武器：
PrePass 用最小代价解决“单物体自遮挡”
OIT 用额外带宽换来“任意乱序混合”
理解原理后，按“模型封闭性+重叠度+目标平台”三要素排兵布阵，就能在 Babylon.js 里优雅地搞定所有“透明<1”带来的渲染噩梦。祝各位调试愉快，破面退散！
