---

title: EffectComposer category: Addons layout: docs

EffectComposer

Used to implement post-processing effects in three.js. The class manages a chain of post-processing passes to produce the final visual result. Post-processing passes are executed in order of their addition/insertion. The last pass is automatically rendered to screen.

This module can only be used with WebGLRenderer.

Code Example

const composer = new EffectComposer( renderer );
// adding some passes
const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
const glitchPass = new GlitchPass();
composer.addPass( glitchPass );
const outputPass = new OutputPass()
composer.addPass( outputPass );
function animate() {
	composer.render(); // instead of renderer.render()
}

Import

EffectComposer is an addon, and must be imported explicitly, see Installation#Addons.

import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';

Constructor

new EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )

Constructs a new effect composer.

renderer | The renderer.
---|---
renderTarget | This render target and a clone will be used as the internal read and write buffers. If not given, the composer creates the buffers automatically.

Properties

.passes : Array.<Pass>

An array representing the (ordered) chain of post-processing passes.

.readBuffer : WebGLRenderTarget

A reference to the internal read buffer. Passes usually read the previous render result from this buffer.

.renderToScreen : boolean

Whether the final pass is rendered to the screen (default framebuffer) or not.

Default is true.

.renderer : WebGLRenderer

The renderer.

.writeBuffer : WebGLRenderTarget

A reference to the internal write buffer. Passes usually write their result into this buffer.

Methods

.addPass( pass : Pass )

Adds the given pass to the pass chain.

pass | The pass to add.
---|---

.dispose()

Frees the GPU-related resources allocated by this instance. Call this method whenever the composer is no longer used in your app.

.insertPass( pass : Pass, index : number )

Inserts the given pass at a given index.

pass | The pass to insert.
---|---
index | The index into the pass chain.

.isLastEnabledPass( passIndex : number ) : boolean

Returns true if the pass for the given index is the last enabled pass in the pass chain.

passIndex | The pass index.
---|---

Returns: Whether the pass for the given index is the last pass in the pass chain.

.removePass( pass : Pass )

Removes the given pass from the pass chain.

pass | The pass to remove.
---|---

.render( deltaTime : number )

Executes all enabled post-processing passes in order to produce the final frame.

deltaTime | The delta time in seconds. If not given, the composer computes its own time delta value.
---|---

.reset( renderTarget : WebGLRenderTarget )

Resets the internal state of the EffectComposer.

renderTarget | This render target has the same purpose like the one from the constructor. If set, it is used to setup the read and write buffers.
---|---

.setPixelRatio( pixelRatio : number )

Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output. Setting the pixel ratio will automatically resize the composer.

pixelRatio | The pixel ratio to set.
---|---

.setSize( width : number, height : number )

Resizes the internal read and write buffers as well as all passes. Similar to WebGLRenderer#setSize, this method honors the current pixel ration.

width | The width in logical pixels.
---|---
height | The height in logical pixels.

.swapBuffers()

Swaps the internal read/write buffers.

Source

examples/jsm/postprocessing/EffectComposer.js