Advanced EffectComposer
Learn how to use flows using mask with EffectComposer.
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:
Create a scene to serve as a background image.
Create a scene containing a sphere that looks like Earth.
Create a scene containing a sphere that looks like Mars.
Create
EffectComposer, which renders these three scenes into a single image.Apply a colorify effect to the sphere rendered as Mars.
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:
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',
}
}
The first thing we need to do is set up the various scenes (lines 72–74 in the ...