Learn Three.js - Third Edition

Advanced EffectComposer flows using masks

In the previous examples, we applied the postprocessing pass to the complete screen. However, Three.js, also has the ability to apply passes only to a specific area. In this section, we will perform the following steps:

1. Create a scene to serve as a background image.
2. Create a scene containing a sphere that looks like Earth.
3. Create a scene containing a sphere that looks like Mars.
4. Create EffectComposer, which renders these three scenes into a single image.
5. Apply a colorify effect to the sphere rendered as Mars.
6. Apply a sepia effect to the sphere rendered as Earth.

This might sound complex, but it is actually surprisingly easy to accomplish. First, let's look at the result that we're aiming for in ...