CODEWITHSUNDEEP
unity-game-enginecolorsgraphicsrenderingwebgl
Scorpishy
Scorpishy

Reputation: 21

How to Fix Incorrect Unity Color Rendering in Web Version of Game?

I am struggling with incorrect color rendering in the web version of my game.

It looks fine on Windows, like this:

Windows Build

But on the web, it looks like this:

WebGL 2 Build

I'm using Unity 6, and by default, it uses the WebGL 2 renderer in Graphics API. The Color Scheme is set to Linear. I tried switching to Gamut, and it improved some areas (especially the lit parts), but the problem persists, and the overall visual quality worsens. Turning off HDR helped somewhat, but not completely. The Project Settings -> Quality for WebGL is set to Ultra. Changing texture compression algorithms (ETC2, ASTC, no compression) or other settings like camera/project settings/URP did not resolve the issue. Disabling post-processing didn’t help either, and enabling Dithering didn’t make a difference.

Google searches haven’t provided any new solutions, and I couldn’t find anything in Unity documentation. My ideas on how to fix this are running out. Visual analysis suggests the problem is most prominent in areas with scattered light, shadows (especially around the contours of lungs, which are done in Photoshop as a Drop Shadow effect), and gradient transitions. The sprites are packed into texture atlases, and there are no custom shaders. Tested in different browsers - the problem is observed everywhere (Chrome, Edge, Firefox).

I tried turning off the light, global volume, changing materials, compression algorithms, settings of project, camera, URP, tested in different browsers.

I expect a result close to Windows Build.

If anyone has encountered a similar issue, I would greatly appreciate any help or suggestions. Thanks in advance!

Upvotes: 1

Views: 112

Answers (1)

Scorpishy
Scorpishy

Reputation: 21

After a lot of testing, I finally managed to identify and resolve the issue with transparency artifacts and color discrepancies in Unity 6, URP 2D, WebGL 2 builds. Sharing my findings here in case someone encounters the same problem.

Issue Description: Unity 6.0.0, URP 2D Renderer. Color Space: Linear. PNG textures with transparency (e.g., soft gradients, shadows, scattered light), exported in sRGB from Photoshop. Using Sprite-Lit-Default shader. Post-Processing enabled on the Camera. WebGL 2 Build. Symptoms:

Banding and artifacts in transparent/gradient areas, distorted colors. Color differences between WebGL 2 and Windows (Direct3D11). Reproduction Steps: Create a new Unity 6 2D URP project. Import PNG textures with gradients and transparency. Use Sprite-Lit-Default shader. Enable Post-Processing on the Camera. Build for WebGL 2. Artifacts and color issues will be visible in gradients and transparent areas. Confirmed Workarounds: I found two reliable ways to eliminate the artifacts:

Disable Post-Processing in the Camera settings. (Disabling the Global Volume component alone is not enough. The Camera’s Post-Processing checkbox must be turned off.)

Enable High Dynamic Range (HDR) in the URP Asset settings:

Go to URP Asset → Post-processing → Grading Mode → High Dynamic Range. Note: While HDR resolves the artifacts, it slightly alters the colors and brightness, which may not be desirable for all projects.

Final Notes: This appears to be a rendering or color sampling issue specifically affecting WebGL 2 with Linear color space and Post-Processing in URP. If there are any alternative solutions that don’t require enabling HDR, I’d appreciate hearing about them.

Upvotes: 1

Related Questions