Question Problem with thin layer texture appearing very blotchy/broken

I'm having some graphics issues with one of my WebGL builds, using URP. I have some layers in a wall which I want to show and hide. One of them is very thin. When I play the game inside in Unity the texture looks fine, but in the WebGL build, it looks very patchy and glitchy until i zoom in very close to the layer it kind of appears normal.

I have tried playing with many of the graphics quality, camera and lighting settings but I can't seem to solve it. Any ideas? Screenshot of issue attached

 

Have you tried using a quad instead of a 'thin object'?
My guess is that WebGL uses less accurate objects for float (such as half or fixed) and thus the bounding box of the renderer is just too small.

 

Thanks for the response. I don't have much experience with what you've mentioned. I'm using FBX meshes which were exported from a drawings program. Would there be a way to convert that to a quad?

 

Delete all but your front-facing faces.
Then check if the normals are correct.

 

Thanks again. I tried playing around with the front facing render settings, but it didn't really work.

I'm pretty sure this could work, there are just some settings a miss. I have another similar project with similar layers and thicknesses which work fine in WebGL. I'm going to see if I can compare settings.

 

This is a basic example of z fighting.

WebGL doesn't support reversed Z depth rendering, which significantly improves the accuracy of Z depth sorting, which means your camera's far clip and especially near clip ranges will affect how well the GPU can sort two planes that are very close together.

The solutions are:
1. Increase the camera's near clip plane to as high as you can reasonably allow. You can also decrease the far plane, but this will have less immediate impact. Just doubling your near clip plane can have a profound impact on z fighting reduction.
2. Move the planes further apart. This can be done manually in the content, or with an offset in the shader. For hand written shaders you can use the Offset render state command, but this isn't exposed for Shader Graph. This is unfortunate because the shader Offset exists explicitly to solve this kind of issue. Alternatively you can apply a rough approximation of Offset in the Shader Graph itself, like this:
https://forum.unity.com/threads/dep...or-something-equivalent.1145399/#post-7354403
The real way Offset works is significantly more complicated, and cannot be perfectly reproduced by manipulating vertex positions. But one of the key differences between that Shader Graph approximation implementation and the real Offset is how much the surface is pulled towards the camera increases with the surfaces distance from the camera. So that's something you could also add if you were inclined to.

 

@bgolus you're completely correct, it was z fighting and the near clip plane was the issue! That's annoying because I thought about this but only focused on the far plane clipping!

Thanks for saving me much more time and helping to get my show on the road