Bug Rendering is completely broken in WebGL build

I've been working on customizing the FPS Microgame in Unity for the past month, but when I created a WebGL build of the project and ran it on localhost and Unity Play, the 3D rendering was completely broken for every scene. This is what it looks like:



It runs just fine in the editor and is only like this in the build. I've tried restarting Unity and rebuilding the project, but it still had this glitchy effect. I have a previous build that isn't broken.

Any idea of what's going on?

 

What browser? Tried any other? System specs? Unity version? Render Pipeline?

I‘d say try playing with quality/graphics settings and turn off postprocessing, if any.

I have a hunch this may be Safari on an M1 mac.

 

It's on Chrome, I'm on Windows with Unity version 2021.3.16 and using URP. I just tried it in Firefox and it worked! It didn't work on Microsoft Edge, though.

 

i recently converted a couple of my games to urp for webgl and while the 3d one went super super dark, and i had to bump all the lights a lot, i am glad I didnt suffer this, both mine at working as expected

 

Check player settings. If there is WebGL v1 listed remove that, you should only be targeting v2 these days. WebGL v1 has been removed entirely in 2022.x I believe. Not sure if that fixes the issue though.

I'd also check Chrome and graphics drivers for updates.

 

I have WebGL 2 listed. I updated Chrome but nothing changed, and I don't have any driver updates.

 

out of interest then does sillygames.online/mnm/ bring up a normal looking game, or weird like yours? (dont bother playing its very much work in progress)

 

It works fine

 

But the UI in my game works fine too. It's only the 3D part that's weird.

 

Ah but you see technically thats not all 2d either

out of interest check your lower graphics qualities on your game and set your ide to run at like low low, see if that replicates what you see in the browser

 

No, it doesn't get as crazy as in the browser.

 

can you upload it somewhere, i will check seem if its fruity for me too? help narrow down maybe

 

https://play.unity.com/mg/fps/webgl-builds-294837

 

looks like its a you thing

 

Hmmm

 

That's strange

 

What browser are you using?

 

For me it's broken in Chrome and Edge:


In Firefox it's working.

 

Yes, that's what I observed

 

thats edge and win 11 on a £380 quid laptop of ultra crapness

 

Try chrome

 

Hmmm... It seems that there is a problem with post-processing and the HDR setting in the URP asset.

 

Bloom, Vignette, Tonemapping, Motion Blur, and Film Grain

 

How exactly can I send? The project size is in the gigabytes.

 

I had a problem which looked to be a bug, i raised a ticket and the zip of my game wouldnt send - i guess it was too big. So, the person who did the ticket asked me to load it to google drive.. One thing i did struggle with was for one issue I had included a zip - eg like you'd store on git hub, eg not the library, temp etc.. but they said it wasnt enough and again i had to use a google drive to send all that cos well theres a lot of tat

 

It looks like thigs for me:


Edge, Windows 11, RTX 3060 Mobile. Works fine on Firefox.

 

no, but last couple of bugs they siad it was no use without all of it.. made me send those too, made no sense

 

I have had issues in the past related to Library folder, but those were resolved by closing the project, deleting Library, opening the project again, letting it re-import everything from scratch and then creating a new build. You shouldn't be storing anything important in Library because it's a temporary folder - in fact I've found that deleting it every so often, everything runs much smoother in the editor (shorter domain reload, shorter "hold on.." dialogs etc.), at least once it's done processing things again once (shader recompilation and so on). Maybe you could try backing up your project including Library (just in case) and see if a fresh build with a new Library folder resolves it. Also you will free up some space, because that folder grows and grows over time, especially when switching between platforms and doing other things that trigger reimporting. Deleting Library has been brought up many times on the forum and solved many an issue over the years for many people ..if it doesn't help in your case, at least you tried that, and can keep looking into what's going wrong from there.

 

I found the problem. I was using two weapon cameras (one for the left-hand weapons and one for the right-hand weapons to avoid clipping into objects) with the render type set to base and background type set to uninitialized because when the render type was set to overlay and stacked onto the main camera, enabling post-processing on all the cameras made everything appear darker for some reason. With this setup, the post-processing and the layering of the three cameras appeared to be working fine in the editor. I don't know if this was supposed to happen because when I deleted the Library folder and reopened the project, the layering stopped working and the right-hand camera overrided the left-hand camera. So I switched back to using the camera stack and rebuilt the project, and the rendering wasn't broken. I'm not exactly sure what really happened. The only problem now is that I can't have post-processing on my weapon cameras.

 

Sure you can - at least I've had no problems having it on multiple personally in URP.. if you have a stack of several cameras, just uncheck Post Processing from each camera except for the furthest one down the list that you want it on. So for example if you have cameras Main, A, B, C, and you want it on Main+A+B (but not C), only enable it for B

Edit: The reason it was getting darker for you is because you were applying your post processing on the result multiple times. So if you had Main,A,B all with it enabled, your Main would actually be getting post processed 3 times. At least that's what I observed when I sorted out exactly this issue previously - not sure it's actually supposed to be like that, but in my projects it is lol

 

Ohhh, I never knew that was how it worked. Thanks! But that does make me wonder: how do you get post-processing on only one of the overlay cameras?

 

No idea - never did figure out how to have a camera *before* one with post processing *not* have it, but I guess you could just make sure any camera that won't have it comes after the ones that do - if it's not possible for you to order them that way, maybe someone else can offer a solution because I don't know. Or if it turns out it's literally not technically possible right now, you could try submitting a feature request and hope for the best lol

 

Alright, thank you!