WebGL State of the art

Unity Engine
,
1

Hello everyone I would like to create a thread with the best workflow, optimizations, and ideas, so everyone can scroll into this post and find the best guidelines to build optimized WebGL games.

In the pursuit of both broad device compatibility and engine advancements, my checklist presents a thoughtful compromise. Though it may not necessarily align with industry best practices, it is designed to ensure that your WebGL game is accessible to all devices.

I will start with some of the configurations that I finetuned over the years that worked great for me.

Unity version 2022.1

  • Scriptable Render pipeline [URP]
  • Texture Compression [RGBA Crunched]
  • Code Optimization **
  • Color space [Gamma]
  • Auto graphics API [True] (to support safari old WebGL 1)
  • IL2CPP Code Generation [Faster(smaller) builds]
  • Stack Trace [None]
  • Compression format [Brotli]
  • Enable exception [None]
  • Strip Engine code [True]
    I will keep editing this post with the best tips and suggestions that will be posted in this thread.

Thanks for the contribution, and I hope you will welcome this initiative, if there is another post like this feel free to let me know and I will close this post.

2 Likes
2
  • Auto graphics API [True] (to support safari old WebGL 1)

That is no longer relevant as it’s being depreciated in the next LTS and Safari enables WebGL2 (abiet, badly) by default.

You also forgot to add “Master Release”, “Uncheck Enable Post-processing” in URP, Remove AO in URP.

Last 2 can always enable them later if required but by default it eats a lot of perf / increases size for no reason.

3

I would change the following:

  • Color space [Linear]
  • WebGL v2 API [True]

Linear color space and WebGL v2 (which supports it, v1 doesn’t) is the way to go forward. Specifically since WebGL v1 support has been deprecated in Unity.

Eanbling linear color space makes working with assets, lighting and so on easier or at least more natural for most artists. At the same time you get to use all visual goodies and (sometimes severe!) performance improvements that WebGL v2 brings to the table.

Also try out code stripping options. And setting a reasonable minimum memory size manually (default is 256 MB I believe, while 512 MB can already be too much for some devices).

1 Like
4

True, but this only works with updated safari version, prev version of it won’t work, and also IOS locks safari updates for “outdated” phones

5

The reason why I used Color space [Gamma] was to support as many devices as possible since Gamma works with both WebGL1 and WebGL2.
Right now there are still too many devices using WebGL1, I understand the benefits of webgl2 and it’s crazy for me to think that it’s not already implemented by default for at least 90% of the phone, but that’s the reality we live in I need to support as many phones as possible.

6

Have stats about this? Android, iOS OS versions points to WebGL2 being supported on the majority of devices. Telling Unity developers to use WebGL1 as “Best Practice” is simply wrong, especially since its been already stripped in the next version of Unity.

You didn’t mention the fact that it’s supposed to be a “Max compatibility” settings list either. Which is very different from “State of the art”.

1 Like
7

While striving for maximum compatibility and the latest advancements, my checklist proposes a balance. While it is not considered best practice to support WebGL1 and utilize the Gamma color space, it is a necessary sacrifice in order to accommodate a wide range of devices, but I totally get your point and added a disclaimer on the original post.