Hi. I have perspective camera and a scene with some 3D objects on different depth.
The idea is to focus on a selected object on the scene. For it I use bokeh. The question is: how to automaticaly calculate a focus on some object?
Thanks in advance.
Are you using the code of one of the official bokeh shaders of three.js
or a custom implementation?
Iām using Bokeh from here:
postprocessing.
For test, Iām changing focus with a slider. And it works.
But how to calculate it automatically?
You can try to study the following example: https://threejs.org/examples/#webgl_postprocessing_dof2
The focal depth is calculated based on the distance from the camera to a certain object in the scene. This object is determined by a simple raycast. The following code shows this approach:
Yes, I was trying this sample, but the result was the same - all objects are blurred.
āldistanceā that is using here:
postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance;
is to big
Maybe there is a problem in your shader code. Try it with BokehShader2
.
Iām not sure that a problem with the shader, because when I change the focus value with slider(Iāve attached 2 screenshots above), it works good.
And the focus is about: 0.014.
And when I tried to use code from the sample, the focus value is about 50
It seems that the parameterization of both shaders is different. I can only recommend to use BokehShader2
. Otherwise you should raise an issue at: https://github.com/vanruesc/postprocessing
Ok, so you are saying, that the code that you have attached above(from the sample), works on 100%
yes?
Well, I think it works in our example
Ok. One more question: could you please clarify what is the ādistance = 100ā?
Itās the initial value of distance
used for calculating the focal depth. This process is somewhat animated what you can see at this line.
Do you have TypeScript definitions for DoF?
Sry, Iām not using TypeScript.
Sad, very sad