Chapter 11. Custom Shaders and Render Postprocessing

We're getting to the end of the book, and in this chapter, we'll look at the one main feature of Three.js we haven't touched upon: render postprocessing. Besides that, in this chapter, we'll also introduce you to how you can create custom shaders. The main points we'll discuss in this chapter are the following:

• Setting up Three.js for postprocessing

• Discussing the basic postprocessing passes provided by Three.js, such as THREE.BloomPass and THREE.FilmPass

• Applying effects to part of the scene using masks

• Using THREE.TexturePass to store rendering results

• Using THREE.ShaderPass to add even more basic postprocessing effects, such as sepia filters, mirror effects, and color adjustments

• Using THREE.ShaderPass for various blurring effects and more advanced filters

• Creating a custom postprocessing effect by writing a simple shader

In the Introducing requestAnimationFrame section of Chapter 1, Creating Your First 3D Scene with Three.js, we set up a...