Chapter 270: ShaderPass

Core Idea

This pass can be used to create a post processing effect with a raw GLSL shader object. Useful for implementing custom effects.

Key Concepts

• material : ShaderMaterial: The pass material.
• textureID : string: The name of the texture uniform that should sample the read buffer.
• uniforms : Object: The pass uniforms.

Code Examples

const fxaaPass = new ShaderPass( FXAAShader );
composer.addPass( fxaaPass );

• What it demonstrates: Typical usage of ShaderPass.

Reference Tables

Constructor

Signature
`new ShaderPass( shader : Object

Properties

Property	Description
.material : ShaderMaterial	The pass material.
.textureID : string	The name of the texture uniform that should sample the read buffer.
.uniforms : Object	The pass uniforms.

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 shader pass.

Key Takeaways

1. ShaderPass extends: Pass
2. Most relevant properties: material, textureID, uniforms.
3. Key methods: dispose, render.

Connects To

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