Home Reference Source
import {EffectComposer} from 'postprocessing/src/core/EffectComposer.js'
public class | source

EffectComposer

Implements:

The EffectComposer may be used in place of a normal WebGLRenderer.

The auto clear behaviour of the provided renderer will be disabled to prevent unnecessary clear operations.

It is common practice to use a RenderPass as the first pass to automatically clear the screen and render the scene to a texture for further processing.

Constructor Summary

Public Constructor
public

constructor(renderer: WebGLRenderer, options: Object)

Constructs a new effect composer.

Member Summary

Public Members
public

renderer: WebGLRenderer

The renderer.

Private Members
private

A copy pass used for copying masked scenes.

private

inputBuffer: WebGLRenderTarget

The input buffer.

private

outputBuffer: WebGLRenderTarget

The output buffer.

private

The passes.

Method Summary

Public Methods
public

addPass(pass: Pass, index: Number)

Adds a pass, optionally at a specific index.

public

createBuffer(depthBuffer: Boolean, stencilBuffer: Boolean): WebGLRenderTarget

Creates a new render target by replicating the renderer's canvas.

The created render target uses a linear filter for texel minification and magnification. Its render texture format depends on whether the renderer uses the alpha channel. Mipmaps are disabled.

public

Destroys this composer and all passes.

public

removePass(pass: Pass)

Removes a pass.

public

render(delta: Number)

Renders all enabled passes in the order in which they were added.

public

replaceRenderer(renderer: WebGLRenderer): WebGLRenderer

Replaces the current renderer with the given one.

public

reset()

Resets this composer by deleting all passes and creating new buffers.

public

setSize(width: Number, height: Number)

Sets the size of the buffers and the renderer's output canvas.

Every pass will be informed of the new size. It's up to each pass how that information is used.

Private Methods
private

Creates two depth texture attachments, one for the input buffer and one for the output buffer.

private

getDepthTexture(index: Number): DepthTexture

Retrieves the most relevant depth texture for the pass at the given index.

Public Constructors

public constructor(renderer: WebGLRenderer, options: Object) source

Constructs a new effect composer.

Params:

NameTypeAttributeDescription
renderer WebGLRenderer
  • optional

The renderer that should be used.

options Object
  • optional

The options.

options.depthBuffer Boolean
  • optional
  • default: true

Whether the main render targets should have a depth buffer.

options.stencilBuffer Boolean
  • optional
  • default: false

Whether the main render targets should have a stencil buffer.

Public Members

public renderer: WebGLRenderer source

The renderer.

You may replace the renderer at any time by using EffectComposer#replaceRenderer.

Private Members

private copyPass: ShaderPass source

A copy pass used for copying masked scenes.

private inputBuffer: WebGLRenderTarget source

The input buffer.

Reading from and writing to the same render target should be avoided. Therefore, two seperate yet identical buffers are used.

private outputBuffer: WebGLRenderTarget source

The output buffer.

private passes: Pass[] source

The passes.

Public Methods

public addPass(pass: Pass, index: Number) source

Adds a pass, optionally at a specific index.

Params:

NameTypeAttributeDescription
pass Pass

A new pass.

index Number
  • optional

An index at which the pass should be inserted.

public createBuffer(depthBuffer: Boolean, stencilBuffer: Boolean): WebGLRenderTarget source

Creates a new render target by replicating the renderer's canvas.

The created render target uses a linear filter for texel minification and magnification. Its render texture format depends on whether the renderer uses the alpha channel. Mipmaps are disabled.

Params:

NameTypeAttributeDescription
depthBuffer Boolean

Whether the render target should have a depth buffer.

stencilBuffer Boolean

Whether the render target should have a stencil buffer.

Return:

WebGLRenderTarget

A new render target that equals the renderer's canvas.

public dispose() source

Destroys this composer and all passes.

This method deallocates all disposable objects created by the passes. It also deletes the main frame buffers of this composer.

public removePass(pass: Pass) source

Removes a pass.

Params:

NameTypeAttributeDescription
pass Pass

The pass.

public render(delta: Number) source

Renders all enabled passes in the order in which they were added.

Params:

NameTypeAttributeDescription
delta Number

The time between the last frame and the current one in seconds.

public replaceRenderer(renderer: WebGLRenderer): WebGLRenderer source

Replaces the current renderer with the given one. The DOM element of the current renderer will automatically be removed from its parent node and the DOM element of the new renderer will take its place.

The auto clear mechanism of the provided renderer will be disabled.

Params:

NameTypeAttributeDescription
renderer WebGLRenderer

The new renderer.

Return:

WebGLRenderer

The old renderer.

public reset() source

Resets this composer by deleting all passes and creating new buffers.

public setSize(width: Number, height: Number) source

Sets the size of the buffers and the renderer's output canvas.

Every pass will be informed of the new size. It's up to each pass how that information is used.

If no width or height is specified, the render targets and passes will be updated with the current size of the renderer.

Params:

NameTypeAttributeDescription
width Number
  • optional

The width.

height Number
  • optional

The height.

Private Methods

private createDepthTexture() source

Creates two depth texture attachments, one for the input buffer and one for the output buffer.

Depth will be written to the depth texture when something is rendered into the respective render target and the involved materials have depthWrite enabled. Under normal circumstances, only a RenderPass will render depth.

When a shader reads from a depth texture and writes to a render target that uses the same depth texture attachment, the depth information will be lost. This happens even if depthWrite is disabled. For that reason, two separate depth textures are used.

private getDepthTexture(index: Number): DepthTexture source

Retrieves the most relevant depth texture for the pass at the given index.

Params:

NameTypeAttributeDescription
index Number

The index of the pass that needs a depth texture.

Return:

DepthTexture

The depth texture, or null if there is none.