Baked Lighting broken in WebGL Build

Hi all,
I’m building my application in webGl and I’m having issues in the final build since certain light maps appear broken, while in the editor it is working properly.

To have a context, I’m not using any directional light, I’m using only point lights and spotlights all obviously baked. The room is simmetric and i don’t have any lights that are pointing towards the broken area, but the right area of the room, and part of the ceiling, is for some reason brighter than the rest, whille the exact opposite of that area is lighted correctly.

Unity 2021.3.12f1

Editor View:

WebGL View:
(As you can see here, the right corner of the room is unresonably brighter, while in the editor is the same as the left corner. The ceiling here is so much brigher than left corner and than the ceiling in other parts of the environment)

I would suspect the lighting settings to be an issue, possibly the size of the light/shadow map texture is too high for WebGL to handle respectively Unity forces the light info into an inadequately small texture to meet WebGL limitations. I bet reducing the lightmapping quality is probably going to solve this issue but at the cost of generally lower lighting quality.

But first make sure the Player settings, specifically rendering, are set to the same settings (whereever possible) between WebGL and Windows/Desktop settings. For example, don’t try to compare Forward vs Deferred rendering, or Linear vs Gamma color space. You want both platform’s settings to match each other’s settings as closely as possible. The overbrightness of the WebGL image makes me suspect that you will find such a major mismatch, and I wouldn’t be surprised if it’s either of the aforementioned two settings. But it could just be a result of WebGL not being able to reproduce the high-quality lighting settings you have set up for Desktop.

Start by setting the baked lighting to the lowest possible quality settings and compare editor (better: desktop build) vs webgl quality and then start tuning one (!) particular setting to higher qualities and keep comparing where you notice differences. Feel free to attach more comparison images about anything that feels odd.

Next, when you’re done with one setting, go back to lowest quality again and start tuning another single setting. Note the settings that have the most impact on visual quality.

In the end you will probably have to narrow the settings down to what gives the best quality in WebGL without any visual issues. And you may have to revisit this for other stages or if you keep adding complexity to this building mesh.

1 Like