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:
Press + to interact
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. ...