Advanced Pass: BokehPass and SSAOPass
Explore how to enhance 3D scenes in Three.js by applying advanced post-processing techniques with BokehPass and SSAOPass. Learn to add realistic depth of field effects and ambient occlusion to improve the visual depth and lighting of your scenes. Understand the setup and configuration of these passes using EffectComposer, and how to fine-tune properties for your desired focus and shadow effects while considering performance impacts.
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:
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',
}
}
Note: We can change the properties of the passes from the right control panel in the output screen. ...