Understanding DepthOfField

[ChrisCrossCrash]

I'm trying to understand how to use DepthOfField from @react-three/postprocessing.

I was expecting it to work similar to how depth of field works in Blender, so that an object at a given focus distance is in focus, and other things appear blurry.

In both my scene and the Code Sandbox from the documentation, it seems like setting the focusDistance to anything above 0 causes everything in the scene to become blurry. Why is that?

The docs say this for the focusDistance prop:

focusDistance: The normalized focus distance. Range is [0.0, 1.0].

So a valid value should be between 0 and 1, correct? Also, I'm not exactly sure what "normalized" means in this context. Perhaps 0 is the camera and 1 is the farthest object in the scene?

I tried in both Firefox and Chrome with similar results.

Thanks for your help!

[marcelpi]

Yeah, I'm having the same issue with both focusDistance and focalLength. Can't figure out what 'The normalized focus distance' means and can't get it to work. Did you figure it out?

I was expecting 1 to be the target and 0 the camera itself, but it seems that's not how it works.

[ChrisCrossCrash]

Yes actually I did figure it out. The "normalized focus distance" means a value between 0 and 1, where 0 is at the camera's near distance and 1 is the camera's far distance. The defaults are 0.1 for near and 2000 for far. That explains why it seems like any focusDistance greater than 1 causes everything to get blurry when you are dealing with objects a meter or two away from the camera. You just need to set far to a much smaller value, or use very low values for focusDistance.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

[ChrisCrossCrash]

I figured it out. The "normalized focus distance" means a value between 0 and 1, where 0 is at the camera's near distance and 1 is the camera's far distance. The defaults are 0.1 for near and 2000 for far. That explains why it seems like any focusDistance greater than 1 causes everything to get blurry when you are dealing with objects a meter or two away from the camera. You just need to set far to a much smaller value, or use very low values for focusDistance.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

[marcelpi]

Thanks Chris! Also, check out this discussion for keeping objects in focus, if you're using React: pmndrs/react-postprocessing#131

[ChrisCrossCrash]

@marcelpi Thanks for the very useful info!

[aplauche]

This should definitely be in the docs - very helpful to know