Three.js Cookbook

Setting up the basic postprocessing pipeline

Besides rendering a scene in 3D, Three.js also allows you to add postprocessing effects to the final output. With postprocessing, you can take the final rendered 2D image and apply all different kinds of filters to it. You could, for instance, add specific blurring effects, sharpen specific colors, and much more. In this recipe, we'll show you how to set up a postprocessing pipeline in Three.js, which you can use to add effects to the final rendered scene.

Getting ready

To work with postprocessing in Three.js, you need to include a number of additional JavaScript files from the Three.js distribution. For this recipe, the following JavaScript files should be added to your HTML page:

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