Custom Effects Using THREE.ShaderPass

We’ve used the standard passes provided by Three.js for our effects. Three.js also provides THREE.ShaderPass, which can be used for custom effects and comes with a large number of shaders that we can use and experiment with.

Using THREE.ShaderPass for custom effects

With THREE.ShaderPass, we can apply a large number of additional effects to our scene by passing in a custom shader. Three.js comes with a set of shaders that can be used together with this THREE.ShaderPass. They will be listed in this section. We’ve divided this lesson into three parts.

The first set involves simple shaders. All these shaders can be viewed and configured by opening up the shaders.js example (in the below playground):

• BleachBypassShader: This creates a bleach bypass effect. With this effect, a silver-like overlay will be applied to the image.

• BlendShader: This isn’t a shader that we apply as a single postprocessing step, but it allows us to blend two textures together. We can, for instance, use this shader to smoothly blend the rendering of one scene into another (not shown in shaders.js).

• BrightnessContrastShader: This allows us to change the brightness and contrast of an image.

• ColorifyShader: This applies a color overlay to the screen. We’ve seen this one already in the mask example.

• ColorCorrectionShader: With this shader, we can change the color distribution.

• GammaCorrectionShader: This applies a gamma correction to the rendered scene. This uses a fixed gamma factor of 2. Note that we can also set the gamma correction directly on THREE.WebGLRenderer by using the gammaFactor, gammaInput, and gammaOutput ...