# 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