标准渲染管线

BabylonJS - 使用渲染管线进行后处理

后处理效果是在绘制完所有几何体之后应用于整个渲染场景图像的，可以实现泛光 (bloom)、景深 (depth of field)、屏幕空间环境光遮蔽 (SSAO)、镜头光晕 (lens flares) 和颜色校正 (color correction) 等效果。BabylonJS 使用渲染管线 (Rendering Pipelines) 来管理这些效果。

StandardRenderingPipeline 是一个便捷的内置管线，捆绑了几个常见的、基于物理的后处理效果。

注意： 虽然存在 StandardRenderingPipeline，但现代、更灵活的方法通常涉及使用 DefaultRenderingPipeline。它提供了类似的效果，具有更好的默认设置和集成性，特别是在 PBR 工作流程中。然而，我们将首先按照原始教程结构解释 StandardRenderingPipeline，然后提及 DefaultRenderingPipeline。

使用 StandardRenderingPipeline

StandardRenderingPipeline 旨在模拟通过真实相机镜头看到的效果。

// Basic setup:
// 基本设置：
const pipeline = new BABYLON.StandardRenderingPipeline(
    "standardPipeline", // Name for the pipeline 管线的名称
    scene,             // The Babylon scene Babylon 场景
    1.0,               // Ratio of the canvas size (1.0 = full resolution) Canvas 大小的比例（1.0 = 全分辨率）
    null,              // Source sampler (usually null, pipeline handles it) 源采样器（通常为 null，管线处理它）
    [camera]           // Array of cameras to apply the pipeline to 要应用此管线的摄像机数组
);

常见效果和属性

pipeline.BloomEnabled：(Boolean) 启用泛光效果（亮区域周围的柔和发光）。
pipeline.brightThreshold：(Number) 像素亮度阈值，高于此阈值的像素会产生泛光。
pipeline.blurWidth：(Number) 泛光效果的模糊量。
pipeline.exposure：(Number) 模拟相机曝光调整。
pipeline.LensDirtTexture：(BABYLON.Texture) 模拟镜头上的污垢或污迹的纹理，在亮光下显现。
pipeline.LensFlareEnabled：(Boolean) 启用镜头光晕效果。
pipeline.lensFlareStrength：(Number) 光晕的强度。
pipeline.lensFlareHaloWidth：(Number) 光晕中光环部分的宽度。
pipeline.DepthOfFieldEnabled：(Boolean) 启用景深（模糊焦点距离之外的对象）。
pipeline.depthOfFieldDistance：(Number) 与摄像机的距离，在此距离处的对象完美聚焦。
pipeline.depthOfFieldBlurWidth：(Number) 焦点外区域的模糊量。
pipeline.fxaaEnabled：(Boolean) 启用快速近似抗锯齿 (FXAA) 以平滑锯齿边缘。
pipeline.hdr：(Boolean) 启用高动态范围 (HDR) 处理，通常与泛光和曝光一起使用。

示例：带有泛光和镜头污垢的 Standard 管线

此示例设置了一个带有反射 PBR 材质的场景，并使用 StandardRenderingPipeline 应用了泛光和镜头污垢效果。

import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders'; // For HDR loader 用于 HDR 加载器
import '@babylonjs/post-processes'; // Necessary for StandardRenderingPipeline StandardRenderingPipeline 所必需

const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);

const createScene = async function() {
    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2.2, Math.PI / 2.5, 15, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    camera.minZ = 0.1;
    camera.wheelPrecision = 100;

    // Environment Texture (e.g., from HDRLabs or Poly Haven)
    // 环境纹理（例如，来自 HDRLabs 或 Poly Haven）
    // Using an HDR texture is recommended for realistic lighting and reflections with PBR & post-processing
    // 推荐使用 HDR 纹理以实现 PBR 和后处理的逼真光照和反射
    const hdrTexture = new BABYLON.CubeTexture("path/to/your/environment.env", scene);
    // Alternatively, use HDRCubeTexture for .hdr files:
    // 或者，对于 .hdr 文件使用 HDRCubeTexture：
    // const hdrTexture = new BABYLON.HDRCubeTexture("path/to/your/environment.hdr", scene, 512);
    scene.environmentTexture = hdrTexture;

    // Skybox (Optional but recommended for context)
    // 天空盒（可选，但建议用于提供背景）
    const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 1000.0 }, scene);
    const skyboxMaterial = new BABYLON.StandardMaterial("skyBoxMat", scene);
    skyboxMaterial.backFaceCulling = false;
    skyboxMaterial.reflectionTexture = hdrTexture.clone();
    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.disableLighting = true;
    skybox.material = skyboxMaterial;
    skybox.infiniteDistance = true;

    // Create a reflective mesh
    // 创建一个反射网格体
    const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 5 }, scene);
    const pbrMat = new BABYLON.PBRMaterial("pbrMat", scene);
    pbrMat.metallic = 0.9;
    pbrMat.roughness = 0.1;
    pbrMat.albedoColor = new BABYLON.Color3(1, 1, 1);
    // PBRMaterial automatically uses scene.environmentTexture for reflections
    // PBRMaterial 自动使用 scene.environmentTexture 进行反射
    sphere.material = pbrMat;
    sphere.position.y = 2.5;

    // Add a bright light source to trigger bloom/flare
    // 添加一个亮光源来触发泛光/光晕
    const pointLight = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 8, -8), scene);
    pointLight.intensity = 200; // Needs to be quite bright 需要相当亮
    pointLight.diffuse = new BABYLON.Color3(1, 1, 0.8); // Warm white 暖白色

    // --- Standard Rendering Pipeline Setup ---
    // --- Standard Rendering Pipeline 设置 ---
    const pipeline = new BABYLON.StandardRenderingPipeline(
        "standard",
        scene,
        1.0, // Render at full resolution 以全分辨率渲染
        null,
        [camera]
    );

    // Enable and configure Bloom
    // 启用和配置泛光
    pipeline.BloomEnabled = true;
    pipeline.brightThreshold = 0.8; // Pixels brighter than 0.8 contribute 亮度高于 0.8 的像素会产生贡献
    pipeline.bloomWeight = 0.5;   // Strength of the bloom effect 泛光效果的强度
    pipeline.blurWidth = 1.0;    // How wide the bloom spreads 泛光扩散的范围

    // Enable and configure Lens Dirt
    // 启用和配置镜头污垢
    // You need a texture file for this (grayscale often works well)
    // 你需要为此准备一个纹理文件（灰度图通常效果很好）
    pipeline.lensTexture = new BABYLON.Texture("path/to/your/lens_dirt.jpg", scene);
    pipeline.lensDirtIntensity = 15.0; // Adjust based on texture and desired effect 根据纹理和期望的效果进行调整

    // Enable FXAA for anti-aliasing
    // 启用 FXAA 进行抗锯齿
    pipeline.fxaaEnabled = true;

    // Adjust exposure if the scene is too bright/dark with HDR
    // 如果场景在 HDR 下过亮/过暗，调整曝光
    pipeline.exposure = 1.0;

    // Enable HDR (often beneficial with bloom)
    // 启用 HDR（通常对泛光有益）
    pipeline.hdr = true;

    return scene;
};

createScene().then(scene => {
    engine.runRenderLoop(function() { if (scene) { scene.render(); } });
});

window.addEventListener('resize', function() { engine.resize(); });

解释与注意事项

依赖 (Dependencies)： 确保导入 @babylonjs/post-processes。
HDR 环境 (HDR Environment)： 强烈建议使用 HDR 环境纹理 (scene.environmentTexture)。它为 PBR 材质提供逼真的光照和反射，并为泛光等后处理效果提供更大的动态范围。
PBR 材质 (PBR Material)： 我们使用具有高金属度和低粗糙度的 PBRMaterial 来创建一个反射球体，以展示环境和光照。
亮光源 (Bright Light)： 添加一个亮光源（高强度的 PointLight）以有效触发泛光和镜头光晕效果。
管线创建 (Pipeline Creation)： 我们实例化 StandardRenderingPipeline 并将其与我们的摄像机关联。
效果配置 (Effect Configuration)： 我们启用 BloomEnabled、fxaaEnabled，设置 lensTexture，并调整 brightThreshold、bloomWeight、blurWidth 和 lensDirtIntensity 等属性来控制效果的外观。尝试不同的值！
HDR 标志 (HDR Flag)： 设置 pipeline.hdr = true 可以通过在高动态范围内执行计算，然后在映射回屏幕输出之前，来提高泛光等效果的质量。

现代替代方案：DefaultRenderingPipeline

DefaultRenderingPipeline 通常建议用于新项目。它提供了一组类似的效果，但通常更容易配置，并且与现代渲染功能集成得更好。

// Replace the StandardRenderingPipeline setup with:
// 将 StandardRenderingPipeline 设置替换为：

import { DefaultRenderingPipeline } from '@babylonjs/core/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline';
import { ImageProcessingPostProcess } from '@babylonjs/core/PostProcesses/imageProcessingPostProcess';

// ... inside createScene ...
// ... 在 createScene 内部 ...

// --- Default Rendering Pipeline Setup ---
// --- Default Rendering Pipeline 设置 ---
const defaultPipeline = new BABYLON.DefaultRenderingPipeline(
    "defaultPipeline",
    true, // Add image processing for HDR, tone mapping, etc. 添加图像处理以实现 HDR、色调映射等
    scene,
    [camera]
);

// Enable and configure Bloom
// 启用和配置泛光
defaultPipeline.bloomEnabled = true;
defaultPipeline.bloomThreshold = 0.8;
defaultPipeline.bloomWeight = 0.5;
defaultPipeline.bloomScale = 0.5; // Controls downsampling for performance vs quality 控制降采样以平衡性能与质量

// Enable and configure Chromatic Aberration (example of another effect)
// 启用和配置色差（另一个效果示例）
// defaultPipeline.chromaticAberrationEnabled = true;
// defaultPipeline.chromaticAberration.aberrationAmount = 30;

// Enable FXAA
// 启用 FXAA
defaultPipeline.fxaaEnabled = true;

// Image Processing (Tone mapping, exposure, contrast, vignette)
// 图像处理（色调映射、曝光、对比度、晕影）
// Usually enabled by default if 'true' passed in constructor
// 通常在构造函数中传入 'true' 时默认启用
defaultPipeline.imageProcessingEnabled = true;
defaultPipeline.imageProcessing.contrast = 1.2;
defaultPipeline.imageProcessing.exposure = 1.0;
// defaultPipeline.imageProcessing.vignetteEnabled = true;
// defaultPipeline.imageProcessing.vignetteWeight = 1.5;

// --- No specific lens dirt property here, but can be faked with vignette or custom shader ---
// --- 这里没有特定的镜头污垢属性，但可以通过晕影或自定义着色器模拟 ---

DefaultRenderingPipeline 通常能提供更好的开箱即用视觉效果，并且直接包含图像处理控制（曝光、对比度、色调映射、晕影），这在使用 HDR 环境时至关重要。

试验任一管线的不同属性是实现场景所需视觉风格的关键。