Advanced Pass: BokehPass and SSAOPass
Learn how to create a bokeh effect and ambient occlusion effect in Three.js.
We'll cover the following...
We'll cover the following...
Before we discuss ShaderPass, we’re going to look at two passes that provide a more advanced effect: BokehPass and SSAOPass.
The BokehPass
With the BokehPass, we can add a bokeh effect to our scene. In a bokeh effect, only part of the scene is in focus, and the rest of the scene looks blurry:
An unfocussed bokeh effect
Example: Bokeh
Let’s execute the bokeh.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/bokeh.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 advance effects using masks
Note: We can change the properties of the passes from the right control panel in the output screen. ...