...

/

Advanced Pass: BokehPass and SSAOPass

Advanced Pass: BokehPass and SSAOPass

Learn how to create a bokeh effect and ambient occlusion effect in Three.js.

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
An unfocussed bokeh effect
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. ...