DepthOfField

A depth of field effect.

Based on a graphics study by Adrian Courrèges and an article by Steve Avery: https://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/ https://pixelmischiefblog.wordpress.com/2016/11/25/bokeh-depth-of-field/

import { DepthOfField } from '@react-three/postprocessing'

return (
  <DepthOfField
    focusDistance={0} // where to focus
    focalLength={0.02} // focal length
    bokehScale={2} // bokeh size
  />
)

Example

DepthOfField Demo

Props

Name	Type	Default	Description
blendFunction	BlendFunction	BlendFunction.NORMAL	The blend function of this effect.
focusDistance	Number	0	The normalized focus distance. Range is [0.0, 1.0].
focalLength	Number	0.1	The focal length. Range is [0.0, 1.0].
bokehScale	Number	1.0	The scale of the bokeh blur.
width	Number	Resizer.width	The render width.
height	Number	Resizer.height	The render height.

Edit this page