Point Clouds and Postprocessing - Three.js - page 284

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>
<script src="../libs/postprocessing/
MaskPass.js"></script>
In this recipe, we'll create a postprocessing effect that converts the output using a
mosaic effect. You can look at the final result by opening 06.08-create-custom-
post-processing-step.html in your browser. You will see something similar to
the following screenshot: