Point Clouds and Postprocessing - Three.js - page 280

Setting up the basic postprocessing

pipeline

Besides rendering a scene in 3D, Three.js also allows you to add postprocessing ef-
fects to the final output. With postprocessing, you can take the final rendered 2D im-
age 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>
<script src="../libs/postprocessing/
EffectComposer.js"></script>
<script src="../libs/postprocessing/
RenderPass.js"></script>
<script src="../libs/postprocessing/
ShaderPass.js"></script>
<script src="../libs/postprocessing/
MaskPass.js"></script>

To demonstrate how postprocessing works, we'll apply the dot-screen effect to a
Three.js scene. For this effect, we require one additional JavaScript file:

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