Standard Rendering Pipeline

BabylonJS - Post-Processing with Rendering Pipelines

Post-processing effects are applied to the entire rendered scene image after all the geometry has been drawn, allowing for effects like bloom, depth of field, screen-space ambient occlusion (SSAO), lens flares, and color correction. BabylonJS uses Rendering Pipelines to manage these effects.

The StandardRenderingPipeline is a convenient built-in pipeline that bundles several common, physically-based post-processing effects.

Note: While StandardRenderingPipeline exists, the modern and more flexible approach often involves using the DefaultRenderingPipeline. It offers similar effects with better defaults and integration, especially with PBR workflows. However, we will first explain StandardRenderingPipeline as per the original tutorial structure, then mention the DefaultRenderingPipeline.

Using the StandardRenderingPipeline

The StandardRenderingPipeline aims to simulate effects seen through a real camera lens.

// Basic setup:
const pipeline = new BABYLON.StandardRenderingPipeline(
    "standardPipeline", // Name for the pipeline
    scene,             // The Babylon scene
    1.0,               // Ratio of the canvas size (1.0 = full resolution)
    null,              // Source sampler (usually null, pipeline handles it)
    [camera]           // Array of cameras to apply the pipeline to
);

Common Effects and Properties

pipeline.BloomEnabled: (Boolean) Enables bloom effect (soft glow around bright areas).
pipeline.brightThreshold: (Number) Luminance threshold above which pixels contribute to bloom.
pipeline.blurWidth: (Number) Amount of blur for the bloom effect.
pipeline.exposure: (Number) Simulates camera exposure adjustment.
pipeline.LensDirtTexture: (BABYLON.Texture) A texture simulating dirt or smudges on the lens, revealed by bright lights.
pipeline.LensFlareEnabled: (Boolean) Enables lens flare effect.
pipeline.lensFlareStrength: (Number) Intensity of the flare.
pipeline.lensFlareHaloWidth: (Number) Width of the halo part of the flare.
pipeline.DepthOfFieldEnabled: (Boolean) Enables depth of field (blurring objects outside the focal distance).
pipeline.depthOfFieldDistance: (Number) The distance from the camera that is perfectly in focus.
pipeline.depthOfFieldBlurWidth: (Number) Amount of blur for out-of-focus areas.
pipeline.fxaaEnabled: (Boolean) Enables Fast Approximate Anti-Aliasing (FXAA) to smooth jagged edges.
pipeline.hdr: (Boolean) Enables High Dynamic Range processing, often used with bloom and exposure.

Example: Standard Pipeline with Bloom and Lens Dirt

This example sets up a scene with a reflective PBR material and applies bloom and lens dirt effects using the StandardRenderingPipeline.

import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders'; // For HDR loader
import '@babylonjs/post-processes'; // Necessary for 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)
    // Using an HDR texture is recommended for realistic lighting and reflections with PBR & post-processing
    const hdrTexture = new BABYLON.CubeTexture("path/to/your/environment.env", scene);
    // Alternatively, use HDRCubeTexture for .hdr files:
    // 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
    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 ---
    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
    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
    pipeline.fxaaEnabled = true;

    // Adjust exposure if the scene is too bright/dark with HDR
    pipeline.exposure = 1.0;

    // Enable HDR (often beneficial with bloom)
    pipeline.hdr = true;

    return scene;
};

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

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

Explanation & Notes

Dependencies: Make sure to import @babylonjs/post-processes.
HDR Environment: Using an HDR environment texture (scene.environmentTexture) is highly recommended. It provides realistic lighting and reflections for PBR materials and gives post-processing effects like bloom more dynamic range to work with.
PBR Material: We use a PBRMaterial with high metallic and low roughness to create a reflective sphere that shows off the environment and lighting.
Bright Light: A bright light source (PointLight with high intensity) is added to effectively trigger bloom and lens flare effects.
Pipeline Creation: We instantiate StandardRenderingPipeline and associate it with our camera.
Effect Configuration: We enable BloomEnabled, fxaaEnabled, set a lensTexture, and adjust properties like brightThreshold, bloomWeight, blurWidth, and lensDirtIntensity to control the effects’ appearance. Experiment with these values!
HDR Flag: Setting pipeline.hdr = true can improve the quality of effects like bloom by performing calculations in a higher dynamic range before mapping back to the screen output.

Modern Alternative: DefaultRenderingPipeline

The DefaultRenderingPipeline is generally recommended for new projects. It offers a similar set of effects but is often easier to configure and integrates better with modern rendering features.

// Replace the StandardRenderingPipeline setup with:

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

// ... inside createScene ...

// --- Default Rendering Pipeline Setup ---
const defaultPipeline = new BABYLON.DefaultRenderingPipeline(
    "defaultPipeline",
    true, // Add image processing for HDR, tone mapping, etc.
    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
defaultPipeline.fxaaEnabled = true;

// Image Processing (Tone mapping, exposure, contrast, vignette)
// Usually enabled by default if 'true' passed in constructor
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 ---

The DefaultRenderingPipeline often provides better visual results out-of-the-box and includes image processing controls (exposure, contrast, tone mapping, vignette) directly, which are essential when working with HDR environments.

Experimenting with the different properties of either pipeline is key to achieving the desired visual style for your scene.