Chapter 386: BloomNode

Core Idea

Post processing node for creating a bloom effect.

const renderPipeline = new THREE.RenderPipeline( renderer );
const scenePass = pass( scene, camera );
const scenePassColor = scenePass.getTextureNode( 'output' );
const bloomPass = bloom( scenePassColor );
renderPipeline.outputNode = scenePassColor.add( bloomPass );

By default, the node affects the entire image. For a selective bloom, use the emissive material property to control which objects should contribute to bloom or not. This can be achieved via MRT.

const renderPipeline = new THREE.RenderPipeline( renderer );
const scenePass = pass( scene, camera );
scenePass.setMRT( mrt( {
	output,
	emissive
} ) );
const scenePassColor = scenePass.getTextureNode( 'output' );
const emissivePass = scenePass.getTextureNode( 'emissive' );
const bloomPass = bloom( emissivePass );
renderPipeline.outputNode = scenePassColor.add( bloomPass );

Key Concepts

highPassFn : function: Can be used to inject a custom high pass filter (e.g., for anamorphic effects).
inputNode : Node.<vec4>: The node that represents the input of the effect.
radius : UniformNode.<float>: The radius of the bloom. Must be in the range [0,1].
smoothWidth : UniformNode.<float>: Can be used to tweak the extracted luminance from the scene.
strength : UniformNode.<float>: The strength of the bloom.
threshold : UniformNode.<float>: The luminance threshold limits which bright areas contribute to the bloom effect.
updateBeforeType : string: The updateBeforeType is set to NodeUpdateType.FRAME since the node renders its effect once per frame in updateBefore().

Code Examples

import { bloom } from 'three/addons/tsl/display/BloomNode.js';

What it demonstrates: Typical usage of BloomNode.

Reference Tables

Constructor

Signature
`new BloomNode( inputNode : Node.<vec4>, strength : number, radius : number, threshold : number )`

Properties

Property	Description
`.highPassFn : function`	Can be used to inject a custom high pass filter (e.g., for anamorphic effects).
`.inputNode : Node.<vec4>`	The node that represents the input of the effect.
`.radius : UniformNode.<float>`	The radius of the bloom. Must be in the range `[0,1]`.
`.smoothWidth : UniformNode.<float>`	Can be used to tweak the extracted luminance from the scene.
`.strength : UniformNode.<float>`	The strength of the bloom.
`.threshold : UniformNode.<float>`	The luminance threshold limits which bright areas contribute to the bloom effect.
`.updateBeforeType : string`	The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders its effect once per frame in `updateBefore()`.

Methods

Method	Description
`.dispose()`	Frees internal resources. This method should be called when the effect is no longer required.
`.getResolutionScale() : number`	Gets the current resolution scale of the pass.
`.getTextureNode() : PassTextureNode`	Returns the result of the effect as a texture node.
`.setResolutionScale( resolutionScale : number ) : BloomNode`	Sets the resolution scale for the pass. The resolution scale is a factor that is multiplied with the renderer's width and height.
`.setSize( width : number, height : number )`	Sets the size of the effect.
`.setup( builder : NodeBuilder ) : PassTextureNode`	This method is used to setup the effect's TSL code.
`.updateBefore( frame : NodeFrame )`	This method is used to render the effect once per frame.

Key Takeaways

BloomNode extends: EventDispatcher → Node → TempNode
Most relevant properties: highPassFn, inputNode, radius, smoothWidth.
Key methods: dispose, getResolutionScale, getTextureNode, setResolutionScale.

Connects To

EventDispatcher: parent class
Node: parent class
TempNode: parent class
Source: examples/jsm/tsl/display/BloomNode.js