6.1 后期处理：帧的最后一段流水线

6.1 后期处理：帧的最后一段流水线

本节摘要：后期处理发生在整帧绘制完成之后——把画面整体当成一张图片再加工，泛光、调色、景深、抗锯齿都在这一段发生。它是"正确画面"到"有气氛画面"的通道，代价是每个像素按层数多算几遍。本节讲后期链的构成与成本模型、默认渲染管线的三件套配置、按设备裁剪的纪律。承接 1.2 节的第 7 站之后，是流水线的收官段。

一、帧的暗房

摄影的暗房流程：底片拍完不直接出照片，先进暗房做曝光补偿、调色、局部加光——对象是整张照片而非某个物体。后期处理就是渲染的暗房：整帧画完（1.2 节的第 7 站结束），画面被整体交给一条滤镜链，每个滤镜对全部像素跑一遍，最后才呈现上屏。

这个位置决定了它的两个天性。其一，它是"整帧级"操作：想让霓虹灯发光、想让远处虚化、想让画面偏暖，都改的是全部像素，不做物体区分（分层后期是进阶话题）。其二，它天然昂贵：三层后期就是每个像素多算三遍，分辨率越大越贵——第5章的 GPU 账里，后期链常占两到四成。

图 6-1 后期处理链：整帧像素逐层加工

二、三件套的配置

引擎把常用后期打包成默认渲染管线，开关即用。三件套的参数各有"性格旋钮"，先跑通再微调：

// 默认渲染管线：后期处理的总开关容器
const pipeline = new BABYLON.DefaultRenderingPipeline(
  "default",  // 名字
  true,       // HDR：高动态范围，泛光的前提
  scene,
  [camera]    // 作用于哪些相机
);

// 一 泛光：亮过阈值的地方晕开
pipeline.bloomEnabled = true;
pipeline.bloomThreshold = 0.8;   // 亮度阈值：只有比它亮的像素发光
pipeline.bloomWeight = 0.35;     // 强度：0.2 到 0.5 之间自然，高了像曝光事故
pipeline.bloomKernel = 48;       // 模糊半径：像素级，越大越弥散也越贵

// 二 调色：统一的色调管理
pipeline.imageProcessingEnabled = true;
pipeline.imageProcessing.contrast = 1.15;
pipeline.imageProcessing.exposure = 1.05;
pipeline.imageProcessing.vignetteEnabled = true;        // 暗角：注意力往中间引
pipeline.imageProcessing.vignetteWeight = 1.8;

// 三 景深：焦点外模糊
pipeline.depthOfFieldEnabled = true;
pipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low; // 模糊档位：Low 省一半
pipeline.depthOfField.fStop = 1.4;      // 光圈：越小景深越浅
pipeline.depthOfField.focusDistance = 8000; // 焦点距离毫米
​

参数手感各有坑位：泛光阈值调太低，整幅画面像蒙了雾（全屏都在"亮"）；景深焦点没对准主体，画面像没擦的镜头。调参顺序照暗房逻辑来：先定调色（底色统一），再开泛光（光源气氛），最后景深点到为止。

三、按设备裁剪的纪律

后期是配置里"最值得做设备分档"的部分。桌面全开三件套，中端手机只留调色加低档泛光，低端机全关——三档配置写成函数按设备等级取用。裁剪的另一刀切在 HDR 上：HDR 链路让每层中间结果用更高精度存储，显存与带宽双涨，移动端直接关掉，泛光效果略逊但帧率稳。

// 设备分档：三档后期配置
function setupPostFX(pipeline, tier) {
  pipeline.imageProcessingEnabled = true;         // 调色：三档都留，最便宜的气氛
  if (tier === "low") return;                     // 低端：到此为止
  pipeline.bloomEnabled = true;                   // 中端：加泛光
  pipeline.bloomKernel = 32;                      // 且用小模糊半径
  if (tier === "high") {                          // 高端：全三件
    pipeline.depthOfFieldEnabled = true;
    pipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Medium;
  }
}
​

⚠️ 常见坑：后期链会让 3.1 节的透明混合排序问题更明显（半透明物在泛光下边缘发糊），透明物多的场景先把泛光权重降一档再判断是不是排序问题。

案例：产品页的气氛装配

背景：高端手表展示页"正确但廉价"——曝光均匀、纯白背景、金属不亮。操作分三轮：第一轮只上调色，对比 1.2、曝光 1.05、暗角开到中等强度，背景压成深灰，高级感立刻出现——调色几乎不花帧预算，这是它该排第一的原因。第二轮加泛光，阈值 0.85 只让表盘反光与徽标越线发光，权重压在 0.25 克制使用。第三轮按设备分档，桌面开低档景深虚化背景，中端手机关景深，低端机连泛光也关只留调色。结果：桌面帧耗时只涨约 2 毫秒，中端 1 毫秒以内，视觉档位却拉开了三档。解读：气氛的性价比排序是"调色高于泛光高于景深"——调色近乎免费、泛光按像素收钱、景深最贵；先做免费的，贵的按设备分档付账。变式：卡通风格场景把三件套换成描边与色阶分离，风格化后期思路同源，都是整帧加工，装配纪律原样适用。

两个常见问答

为什么我的泛光像一场雾？ 阈值过低，全屏像素都越过了发光线。先把阈值提到 0.8 以上只留高光，再谈强度与半径；顺序反了永远在雾里调。

后期和抗锯齿是什么关系？ 默认管线的抗锯齿也是链上的一层，位置固定在最前。开高倍多重采样再叠景深时个别平台会冲突，退回快速近似抗锯齿兜底是工程上的常见解法。

本节要点回顾

• 后期是暗房：整帧画完统一加工，位置在着色之后、呈现之前
• 成本模型是层数乘像素数：分辨率越大层数越多越贵，GPU 账的重头
• 三件套口感：泛光给亮源、调色给底色、景深给层次，调参按暗房顺序
• 裁剪从贵往便宜：先景深再泛光半径，调色最后动
• 设备分档三档配置：桌面全开、中端调色加泛光、低端只留调色

帧的出口就绪。下一节把帧送进一个更苛刻的容器——头显：一帧画两遍的世界。