Search⌘ K
AI Features
Home
Courses
Learn Three.js for 3D Computer Graphics

Advanced EffectComposer

Explore how to create advanced visual effects in Three.js using EffectComposer with masks. Learn to render multiple scenes together and apply selective post-processing like colorify and sepia effects to specific 3D objects. Understand how to control render passes with mask and clear mask passes for precise effect application.

We'll cover the following...

Advanced EffectComposer flows using masks

We have applied the postprocessing pass to a complete screen. However, Three.js also has the ability to apply passes only to a specific area. In this lesson, 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.

Example: Masks

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 the masks.js example in the playground below. The following screenshot shows the results of these steps:

Use a mask to apply an effect to part of the screen
Use a mask to apply an effect to part of the screen

Let’s execute the mask.js example in the playground below by clicking the “Run” button:

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const fs = require('fs').promises

// we should search through the directories in examples, and use
// the name from the files to generate the HtmlWebpackPlugin settings.
module.exports = async () => {

  return {
    module: {
      rules: [
        {
          test: /\.glsl$/i,
          use: 'raw-loader'
        }
      ]
    },
    mode: 'development',
    entry: {
      'chapter-11': './samples/chapters/chapter-11/masks.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/',
    },
    plugins: [
      new HtmlWebpackPlugin(),
    ],
    experiments: {
      asyncWebAssembly: true
    },
    devServer: {
       allowedHosts: 'all',
       host: '0.0.0.0',
       port: '3000',
       static: [
        {
          directory: path.join(__dirname, 'assets'),
          publicPath: '/assets'
        },
        {
          directory: path.join(__dirname, 'dist')
        }
      ] 
    },
  mode: 'development',
  }
}
Create Earth, Mars, and background using masks

The first thing we need to do is set up the various scenes (lines 72–74 in the ...