Three.js: Water.js shader does not support logarithmicDepthBuffer

[olivierchatry]

Description of the problem

Seems like the water shader does not support logarithmicDepthBuffer. Not sure what to do there :/.

Three.js version

• [x] r92

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

[Mugen87]

Related to #13038.

[n2k3s2it]

I was about to open another issue regarding the exact same thing, then I found this.

Here are my findings:

It still occurs in r105 and r106.

I cloned the water example locally and changed line number 124 in webgl_water.html.
Only adding , logarithmicDepthBuffer: true

renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );

And the wooden plane seems to be rendered _on top_ of the water. As you don't see any refraction on the wood texture (just on the edges _outside_ the plane mesh) nor any reflection from the spinning torus knot.

I tried to fix it myself by looking at https://github.com/mrdoob/three.js/pull/10213/commits/6e7d31277c199366cb2c2de2518b8eea91611d02 but I couldn't figure it out for the water shader. I'm not so good programming shaders.

What would need to change for the water shader so it can support the logarithmic depth buffer?

[WestLangley]

@n2k3s2it See if #17014 works for you.

[n2k3s2it]

It does! Wonderful that it was only 4 includes 😄
Thanks for the quick response & solution!

[WestLangley]

Reopened.

I expect this PR is referring to Water.js.

17014 added logarithmic depth buffer support to Water2.js.

[mrdoob]

Oh...