Three.js: THREE.Water reflections break when a object with depthWrite false is in view

Created on 9 Feb 2018  路  7Comments  路  Source: mrdoob/three.js

With the new water that was introduced a couple versions ago, I am seeing (what appears to be) the same issue that occurred a long time ago with the original water system that THREE.Water was based on.

https://github.com/jbouny/ocean/issues/12

I am seeing this exact same behavior in my game (r89).

I do not have a fiddle up and ready yet, but I will tomorrow.

Chrome 64.

Bug Examples

All 7 comments

I do not have a fiddle up and ready yet, but I will tomorrow.

Thanks!

Closing as I cannot reproduce the issue in a fiddle.

Will keep trying, will update if I find anything.

I have FINALLY been able to reproduce this issue in a fiddle (after practically porting my whole game over to a fiddle lol).

The issue occurs whenever a material with depthWrite (at least spriteMaterial, haven't tested others) set to false is in frustum.

If you move the camera a bit up/down left/right you will see the reflections go crazy.

Here is the fiddle. I removed most non-relevant pieces.

https://jsfiddle.net/titansoftime/cafv1k78/

Do you mind describing a little bit more what the issue is?

When a material with depthWrite set to false is in view, reflections are broken. I do not know why, but my fiddle demonstrates this issue.

This was not an issue before this example was refactored a couple years ago.

It seems the issue can be solved by making the water's material opaque:

https://jsfiddle.net/nz7tmpka/1/

I don't see a reason why the material is transparent right now. The material of Reflector isn't transparent either. If nobody has objections, I'll make a PR with the fix.

I use transparency to simulate clearer waters in some situations, it's a nice effect. But honestly at this point, I'd just be happy to use the current version as opposed to having to maintain a 2 year old version separately (which does work with transparency).

Was this page helpful?
0 / 5 - 0 ratings