10.20.2021

Z-buffer problem in Unity on WebGL

While working on a new game I stuck in the rendering problem. There are not much information about this on the internet so I wanted to share the information that could help someone.

First, my setup: Unity 2021.1, URP, Windows. 

Everything looks fine in the Editor but when I built my project to WebGL 2.0, I found weird vertex/facing jittering:

It reminded me popular Z-Fighting problem, but not only with nearby surfaces but much worse. It turned out that this problem related to the Z-buffer. Unfortunately, WebGL don't have the same capability to write depth as OpenGL or DirectX (I expect because of no floating point depth buffer).

So I reduced Camera clipping planes distance from ~1000 units to 400 units and it fixed the problem for my in-game scales. Here the same build, but with new Camera settings, no jittering:

It hasn't solved the problem completely and I know there are more pain in the future, when new game design requirements will appear. But my target was to understand and solve the problem by using standard Unity tools without adding custom shader or other long-term support solutions.


By the way, the shown game is procedural role-playing rogue-lite adventure that I'm updating from time to time with new content and mechanics. And it's already playable on itch:

https://kazantsev.itch.io/worlds

4 comments:

  1. Thanks for posting, your solution works!!!
    If I find anyone who's running into a similar issue, I will let them know!

    ReplyDelete