URP/Unlit and Lit Shader not working in WebGL build with MSAA anti-aliasing

Hi everyone!

First of all I want to ask if it is normal to constantly have issues when wanting a WebGL build to work, because I am slowly losing my mind over things that randomly dont seem to work.

I have a crosshair in my scene which uses a URP/Unlit shader. Every thing in the scene seems to render in normally but the crosshair just simply doesn’t render at all. That is, when I have MSAA active in my Render Pipeline (mobile). When I turn it off the crosshair renders in perfectly fine. But since the game just looks worse without anti-aliasing, I want it to work with it activated and honestly, that is just something that has to work in my opinion. Importantly, the bug only appears in the WebGL build and not in the editor. Also I tried it with the Lit URP shader and it still doesn’t work.

Does anyone have any suggestion on how to fix it?

How do you render the crosshair? UITK? UGUI? Just a sprite?

I assume you use Forward(+) rendering?

Are there any camera postprocessing effects active? These may affect anti-aliasing, and are also generally very costly on WebGL (as is MSAA on certain systems so be sure to check with your minimum hardware specs - particularly integrated graphics struggle with AA and post FX).

I don’t know why it wouldn’t render. I did just fix an issue with URP/Lit for Adreno devices, where objects wouldn’t render. But I wouldn’t expect Unlit would have that same issue. Can you file a bug, with a repo, and info on which device it’s not rendering on?

Hey thanks for your reply!

I am not exactly sure what those mean. But I can provide you screenshots of all the settings for my crosshair.
Here’s the material:

Here the crosshair texture:

And here the corsshair object:

I have tried tweaking several settings in both the material and the texture now but nothing worked yet.

Sure I can do that!

A small update:

I have created a completly new scene and copied just the crosshair to it. In the WebGL build on this scene, it renders perfectly fine.

I think your setup is rather odd by using a Plane to show a crosshair with a MeshRenderer. Common (best?) practice is to either position a sprite there, or better yet use the UI system (UGUI = classic GameObject GUI; UITK = UI Toolkit, the new CSS like UI with a visual design tool UI Builder).

The way you set it up with a Plane will have one potential side-effect: the camera might cull your Plane because it may be too close to the camera, eg within the near clipping plane. Try adjusting this near clip plane value to 0 (or the lowest value) in your camera to check if the mesh appears. But you should refactor this anyway.

Also if you create such an object you will want to make sure to remove any and all extraneous MeshCollider instances. For one, this might cause you really hard to understand issues. Like imagine the player approaches a table with objects on it, and some of them move while looking over the table - it won’t be obvious that they may be colliding with the crosshair MeshCollider. Or more likely: you raycast from the camera to hit the target, but the hit point is always 0.1 in front of the camera and you have no idea why that happens (you do now :wink: ).

The other thing is that MeshColliders are expensive (particularly on the web and specifically when instantiating objects that have MeshColliders on them your CPU frame time will spike), and any unused collider is still being processed by the physics system and raycasts.