Chapter 277: UnrealBloomPass

Core Idea

This pass is inspired by the bloom pass of Unreal Engine. It creates a mip map chain of bloom textures and blurs them with different radii. Because of the weighted combination of mips, and because larger blurs are done on higher mips, this effect provides good quality and performance.

When using this pass, tone mapping must be enabled in the renderer settings.

Reference:

• Bloom in Unreal Engine

Key Concepts

• clearColor : Color: The effect's clear color
• needsSwap : boolean: Overwritten to disable the swap.
• radius : number: The Bloom radius. Must be in the range [0,1].
• resolution : Vector2: The effect's resolution.
• strength : number: The Bloom strength.
• threshold : number: The luminance threshold limits which bright areas contribute to the Bloom effect.

Code Examples

const resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
const bloomPass = new UnrealBloomPass( resolution, 1.5, 0.4, 0.85 );
composer.addPass( bloomPass );

• What it demonstrates: Typical usage of UnrealBloomPass.

Reference Tables

Constructor

Signature
new UnrealBloomPass( resolution : Vector2, strength : number, radius : number, threshold : number )

Properties

Property	Description
.clearColor : Color	The effect's clear color
.needsSwap : boolean	Overwritten to disable the swap.
.radius : number	The Bloom radius. Must be in the range [0,1].
.resolution : Vector2	The effect's resolution.
.strength : number	The Bloom strength.
.threshold : number	The luminance threshold limits which bright areas contribute to the Bloom effect.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever the pass is no longer used in your app.
.render( renderer : WebGLRenderer, writeBuffer : WebGLRenderTarget, readBuffer : WebGLRenderTarget, deltaTime : number, maskActive : boolean )	Performs the Bloom pass.
.setSize( width : number, height : number )	Sets the size of the pass.

Key Takeaways

1. UnrealBloomPass extends: Pass
2. Most relevant properties: clearColor, needsSwap, radius, resolution.
3. Key methods: dispose, render, setSize.

Connects To

• Pass: parent class
• Source: examples/jsm/postprocessing/UnrealBloomPass.js