Three.js: DOF2 example broken

[mirohristov-com]

The dof2 example seems to have stopped working since r91 and r90 or even before that.

My guess is it's the depthMaterial = new THREE.MeshDepthMaterial(); returning blank/black result but I'm pretty new to threejs so I wouldn't know.

It appears to be working better in r88 - https://jsfiddle.net/3bvpr75n/4/

Any idea for a quick fix besides downgrading?

Three.js version

• [x] r91

Browser

• [x] All of them

OS

• [x] All of them

[Mugen87]

Can you please check if it looks better with this adjusted fiddle? https://jsfiddle.net/3bvpr75n/14/

The depth texture is sampled differently now.

[mirohristov-com]

Yes. I'm not sure if that's what the original example looked like but at least the depth is taken into account when blurring. Should we just fix the bokehShader?

[Mugen87]

Now that i think about it...the fix is incorrect. I'll try to revisit this over the next days.

[Mugen87]

I guess we need a similar fix like in #11881

[otse]

This is broken again, no clue.

Here is an older version that works. Does @Mugen87 have a simple hotfix for this?

http://broiler.astrometry.net/~kilian/bloopyfloop/examples/webgl_postprocessing_dof2.html

[Mugen87]

Thanks for sharing this. I'll try to have a look in the next days.

[otse]

I've diffed r92 against kilian's r59, and the only real difference in the script tag of the example page is the mouse picking code, and your new shader define for the getDepth function you recently added to the glsl. I've tried using the old bokeh glsl code from kilian in r92 but also no results. :)

[Mugen87]

I think the example needs a complete overhaul. I've only fixed the depth sampling which was definitely broken. But there are more things that need a correction e.g. the demo does not focus objects in the center and back anymore.

[Mugen87]

@mrdoob Maybe it's better to remove this example and the broken webgl_postprocessing_ssao from files.js for the moment. We can add them back when they are working again.

[mrdoob]

Or maybe @zz85 could take a look?

[Mugen87]

Any help for this would be great! 😊

[Mugen87]

@otse Can you please check if the new PR solves the problem? It should be hopefully better than before. In any event, it's possible to focus objects again.

Demo: https://rawgit.com/Mugen87/three.js/dev7/examples/webgl_postprocessing_dof2.html

[otse]

I think you almost got it, but the closest monkeys don't focus.

[Mugen87]

Seems to be related to the focalDepth calculation in JS. But it should work when you select shaderFocus. Not sure how to calculate a correct viewZ value in JavaScript...

[mrdoob]

Not sure how to calculate a correct viewZ value in JavaScript...

/ping @WestLangley

[Mugen87]

It's about the following lines. The value for the uniform focalDepth should be a viewZ value.

https://github.com/mrdoob/three.js/blob/efeb95f10790ab4755171584139d5344177f2713/examples/webgl_postprocessing_dof2.html#L420-L426

[zz85]

@Mugen87 - looks like you're going down the right path. The change in depth packing requires a javascript equivalent of perspectiveDepthToViewZ() calculated in the shaders to match up the correct values.

[Mugen87]

Thanks for the feedback! I've tried the following:

function perspectiveDepthToViewZ( invClipZ, near, far ) {

    return ( near * far ) / ( ( far - near ) * invClipZ - far )

}

And then in the render function

point.copy( intersects[ 0 ].point );

point.project( camera );

var viewZ = perspectiveDepthToViewZ( point.z, camera.near, camera.far );

But it seems the calculated viewZ value is not correct. When i select monkeys in the back, the spheres in the front getting sharp.

[mrdoob]

@Mugen87 I think this broke when we changed the depth texture? Have you tried 1.0 - viewZ?

[Mugen87]

Yes, but this does not work :disappointed: . According to https://stackoverflow.com/a/12904072/5250847, it should be:

point.project( camera ); // point.z is now NDC depth
var depth = ( point.z + 1 ) * 0.5; // ensure normalized range [0,1]
var viewZ = perspectiveDepthToViewZ( depth, camera.near, camera.far );

The result is now better but it's still not possible to focus the monkeys in the front.