Chapter 243: BokehPass

Core Idea

Pass for creating depth of field (DOF) effect.

Key Concepts

• camera : Camera: The camera.
• materialBokeh : ShaderMaterial: The pass bokeh material.
• scene : Scene: The scene to render the DOF for.
• uniforms : Object: The pass uniforms. Use this object if you want to update the focus, aperture or maxblur values at runtime.

Code Examples

const bokehPass = new BokehPass( scene, camera, {
	focus: 500
	aperture: 5,
	maxblur: 0.01
} );
composer.addPass( bokehPass );

• What it demonstrates: Typical usage of BokehPass.

Reference Tables

Constructor

Signature
new BokehPass( scene : Scene, camera : Camera, params : BokehPass~Options )

Properties

Property	Description
.camera : Camera	The camera.
.materialBokeh : ShaderMaterial	The pass bokeh material.
.scene : Scene	The scene to render the DOF for.
.uniforms : Object	The pass uniforms. Use this object if you want to update the focus, aperture or maxblur values at runtime.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever the pass is no longer used in your app.
.render( renderer : WebGLRenderer, writeBuffer : WebGLRenderTarget, readBuffer : WebGLRenderTarget, deltaTime : number, maskActive : boolean )	Performs the Bokeh pass.
.setSize( width : number, height : number )	Sets the size of the pass.

Key Takeaways

1. BokehPass extends: Pass
2. Most relevant properties: camera, materialBokeh, scene, uniforms.
3. Key methods: dispose, render, setSize.

Connects To

• Pass: parent class
• Source: examples/jsm/postprocessing/BokehPass.js