Babylon.js Post Process — Full-Screen Visual Effects

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Babylon.js Post Process. We cover key concepts, practical examples, and best practices to help you master this topic.

Babylon.js post-process effects apply full-screen GPU shaders to the rendered frame, enabling bloom, blur, color grading, and custom image effects.

What You'll Learn

By the end of this guide, you will apply built-in post-process effects, create custom post-process shaders, chain multiple effects in a render pipeline, configure effect parameters at runtime, and optimize post-process performance.

Bloom Effect

var bloom = new BABYLON.BloomEffect('bloom', scene, 0.8, 0.4, 1.0, 32);
scene.postProcessRenderPipelineManager.addPipeline(bloom);
bloom.exposure = 1.0;
bloom.bloomThreshold = 0.4;
bloom.bloomScale = 0.8;

Default Render Pipeline

var pipeline = new BABYLON.DefaultRenderingPipeline('default', true, scene);
pipeline.bloomEnabled = true;
pipeline.bloomThreshold = 0.5;
pipeline.bloomWeight = 0.7;
pipeline.bloomKernel = 32;
pipeline.bloomScale = 0.5;

pipeline.fxaaEnabled = true;
pipeline.imageProcessingEnabled = true;

Custom Post-Process

var custom = new BABYLON.PostProcess('custom', 'customFX', ['time'], null, 1.0, camera);
custom.onApply = function(effect) {
    effect.setFloat('time', performance.now() / 1000);
};

Chaining Effects

var blur = new BABYLON.BlurPostProcess('blur', 1.0, camera, 0.5);
blur.kernel = 16;

var toneMap = new BABYLON.PostProcess('toneMap', 'toneMap', null, null, 1.0, camera);
toneMap.onApply = function(effect) { };

Common Mistakes

1. Too Many Post-Process Effects

Each effect adds a full-screen render pass. More than 4 effects reduce frame rate significantly.

2. Bloom Parameters Wrong

bloomThreshold above 1.0 clips no pixels. bloomScale over 1.0 stretches the effect beyond screen.

3. Custom Post-Process Without Camera

The camera parameter is optional. Without it, the effect applies to the entire scene's default camera.

4. Forgetting dispose

Post-process effects hold GPU resources. Dispose them when not needed: effect.dispose().

5. Not Using DefaultRenderingPipeline

DefaultRenderingPipeline includes bloom, HDR, lens flares in one optimized pass. Use it instead of manual chains.

Practice Questions

Q1: What is a post-process effect? A: A full-screen shader that processes the rendered frame after the 3D scene is drawn.

Q2: How do you enable bloom? A: Use DefaultRenderingPipeline with bloomEnabled = true.

Q3: How many post-process effects are recommended? A: 2-4 max. Each adds a full-screen render pass.

Q4: What is FXAA? A: Fast Approximate Anti-Aliasing. Enable via pipeline.fxaaEnabled = true.

Q5: How do you remove a post-process? A: Call effect.dispose(). For pipeline effects, remove from the pipeline manager.

Challenge: Build a scene with bloom, grain, and vignette effects. Add a GUI slider to control bloom intensity in real-time.

FAQ

Does Babylon.js support SSAO?

Yes. Use the SSAORenderingPipeline for ambient occlusion.

Can I use post-process on a specific mesh only?

Yes. Create a BABYLON.PostProcess with a specific camera and render list.

What is the difference between PostProcess and RenderPipeline?

PostProcess is a single effect. RenderPipeline groups multiple effects into one optimized pass.

How do I create a pixelation effect?

Write a custom fragment shader that samples at lower resolution using floor(uv * pixelSize) / pixelSize.

Do post-process effects work in VR?

Yes. Use VRMultiviewToSingleviewPostProcess for VR post-processing.

Try It Yourself

Build a scene with bloom and color grading.

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js Post-Process</title>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Post-Process Demo</h2>
<button onclick="toggleBloom()">Toggle Bloom</button>
<canvas id="renderCanvas" style="width:100%;height:400px;border-radius:8px;"></canvas>
<script>
var canvas = document.getElementById('renderCanvas');
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera('camera', -Math.PI/2, Math.PI/3, 8, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene);

var sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, scene);
var mat = new BABYLON.StandardMaterial('mat', scene);
mat.emissiveColor = new BABYLON.Color3(1, 0.4, 0.2);
mat.emissiveIntensity = 0.5;
sphere.material = mat;

BABYLON.MeshBuilder.CreateGround('ground', { width: 10, height: 10 }, scene);

var pipeline = new BABYLON.DefaultRenderingPipeline('default', true, scene);
pipeline.bloomEnabled = true;
pipeline.bloomThreshold = 0.3;
pipeline.bloomWeight = 0.6;
pipeline.bloomKernel = 32;
pipeline.bloomScale = 0.5;

var bloomOn = true;
function toggleBloom() {
    bloomOn = !bloomOn;
    pipeline.bloomEnabled = bloomOn;
}

engine.runRenderLoop(function() { scene.render(); });
window.addEventListener('resize', function() { engine.resize(); });
</script>
</body>
</html>

What's Next

Work with sprites and particles.

Sprites Particles — Sprites and particle systems. Physics Engine — Physics engine integration.

← Previous Babylon.js Shaders — Custom GLSL Shader Programming Next → Babylon.js Sprites and Particles — 2D Effects in 3D

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Babylonjs