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. |