Adding Bloom Post-Process to a Babylon.js Scene with DefaultRenderingPipeline

Problem: you need visible glow on emissive materials without writing a custom shader

Bloom is a post-process that blurs bright pixels and adds them back to the image. In Babylon.js the supported way to get it is via DefaultRenderingPipeline, which owns a bloom post-process per camera. The useful takeaway is to create the pipeline once per camera before the first render, enable bloom, and tune threshold, strength and scale for the scene content.

Desired outcome

A scene where bright/emissive surfaces bleed light into surrounding pixels, with runtime control to enable/disable and to fall back gracefully on constrained GPUs. The pipeline should survive camera or canvas resize without resolution mismatch.

Prerequisites

• A Babylon.js engine instance and a Scene with an active Camera. The pipeline is camera-bound.
• Post-process module available in the bundle. With ES modules import the pipeline from the Babylon.js package.
• A scene containing bright content to make bloom observable, e.g., a material with emissiveColor or emissiveTexture.

Unfamiliar terms: post-process runs after the scene is rendered to a texture; DefaultRenderingPipeline is a convenience container for bloom, tone mapping, vignette etc. It creates intermediate render targets.

Focused setup

Create the pipeline per camera

Create the pipeline after the scene and camera exist and before the render loop starts to avoid a one-frame flash.

import { DefaultRenderingPipeline } from "@babylonjs/core/PostProcesses/RenderPipelinePipeline";

const pipeline = new DefaultRenderingPipeline(
  "mainPipeline",
  true,
  scene,
  [camera]
);

Parameters: name, reusable, scene, cameras array. Reusable true allows the pipeline to be shared if you add more cameras later.

Enable and configure bloom

Bloom is off by default. Enable it and set the three main controls.

pipeline.bloomEnabled = true;

pipeline.bloomThreshold = 1.0;   // pixels brighter than this contribute
pipeline.bloomStrength = 0.8;    // intensity of the added blur
pipeline.bloomScale = 0.5;       // blur kernel size, lower = tighter glow

Threshold controls which pixels are extracted. Strength controls how much the blurred result is mixed back. Scale controls blur spread. Values are scene dependent; start with threshold ~1.0 for linear HDR-like content.

Handle resize

The pipeline creates render targets sized to the canvas. On canvas or camera change, Babylon.js updates the targets automatically, but if you change devicePixelRatio manually you should let the engine handle resize events.

window.addEventListener("resize", () => {
  engine.resize();
});

Risk: initializing the pipeline after the first render can cause the first frame to render without the intermediate target, producing a flash.

Runtime checks

• Visual check: toggle pipeline.bloomEnabled at runtime and observe bright areas. The change should be immediate if the pipeline is attached.
• Inspector check: open Babylon.js Inspector, select the camera, inspect the postProcesses array. The bloom post-process should be listed as part of the DefaultRenderingPipeline.
• Resolution check: reduce engine.getHardwareScalingLevel or canvas size and confirm bloom remains functional without errors. This validates that render targets are recreated correctly.
• Teardown check: call pipeline.dispose() and confirm the scene renders normally without bloom, indicating clean removal of post-processes and render targets.

Limitations and recovery options

Bloom adds extra render targets and temporary textures. Memory usage rises with resolution and larger kernel sizes. Multiple heavy post-processes combined with bloom increase GPU load, especially on mobile WebGL contexts.

WebGL1 contexts may lack floating-point render target support required for some bloom configurations, leading to reduced quality or fallback to lower precision.

Recovery strategies:

• Disable bloom on low-end devices: query engine.getCaps and set pipeline.bloomEnabled = false when maxTextureSize is low or when you detect WebGL1.
• Reduce cost: lower pipeline.bloomScale and pipeline.bloomStrength, or render the pipeline at half resolution via engine.setHardwareScalingLevel.
• Switch to lighter effect: keep tone mapping enabled and disable bloom, or use emissive intensity alone.

Rollback when the pipeline is created: dispose the pipeline to remove post-processes and free render targets.

pipeline.dispose();

This restores the scene to direct rendering without intermediate passes.