Three.js Cookbook

Creating custom postprocessing steps

In the Setting up the basic postprocessing pipeline recipe, we showed you how you can use THREE.EffectComposer to add postprocessing effects to a rendered Three.js scene. In this recipe, we'll explain how you can create custom processing steps that you can use with THREE.EffectComposer.

Getting ready

This recipe uses THREE.EffectComposer, so we need to load some additional JavaScript files with the correct objects. For this, you need to add the following at the top of your HTML page:

 <script src="../libs/postprocessing/CopyShader.js"></script> <script src="../libs/postprocessing/EffectComposer.js"></script> <script src="../libs/postprocessing/RenderPass.js"></script> <script src="../libs/postprocessing/ShaderPass.js"></script> ...