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
DepthOfField Demo

Props

NameTypeDefaultDescription
blendFunctionBlendFunctionBlendFunction.NORMALThe blend function of this effect.
focusDistanceNumber0The normalized focus distance. Range is [0.0, 1.0].
focalLengthNumber0.1The focal length. Range is [0.0, 1.0].
bokehScaleNumber1.0The scale of the bokeh blur.
widthNumberResizer.widthThe render width.
heightNumberResizer.heightThe render height.