Testing Unity's WebGL size and loading time for different versions (2018.4 - 6000.0) and settings
- Physics
- GPU Instancing for materials
- Shadows
- Brotli Compression
- Toggle-able In-DOM Debug console
- Unity Rich text styling support for browser console & debug console
- Easy access to unity functions through the browser console (Youtube)
- Handy debug functions for times and memory consumption
- Responsive template layout for maximum mobile compatibility
- Github Actions to automatically build the project and deploy it on the server via Game CI
- Works with Unity WebGL Publisher (Use 2020.3-lts or 2020.3-lts-urp branch)
- Tracking multiple Unity versions starting from 2018.4
- Build targets for webgl1, webgl2 and webgpu
Live Demos (All Builds)
| Version | Size | Link |
|---|---|---|
| 6000.0.25f1 | 3.32 MB | https://deml.io/experiments/unity-webgl/6000.0.25f1-webgl2 |
| 2023.2.20f1 | 3.23 MB | https://deml.io/experiments/unity-webgl/2023.2.20f1-webgl2 |
| 2023.1.20f1 | 3.14 MB | https://deml.io/experiments/unity-webgl/2023.1.20f1-webgl2 |
| 2022.3.50f1 | 3.12 MB | https://deml.io/experiments/unity-webgl/2022.3.50f1-webgl2 |
| 2021.3.45f1 | 2.78 MB | https://deml.io/experiments/unity-webgl/2021.3.45f1-webgl2 |
| 2020.3.48f1 | 2.96 MB | https://deml.io/experiments/unity-webgl/2020.3.48f1-webgl2 |
| Version | Size | Link |
|---|---|---|
| 6000.0.25f1 | 2.92 MB | https://deml.io/experiments/unity-webgl/6000.0.25f1-minsize-webgl2 |
| 2023.2.20f1 | 2.85 MB | https://deml.io/experiments/unity-webgl/2023.2.20f1-minsize-webgl2 |
| 2023.1.20f1 | 2.72 MB | https://deml.io/experiments/unity-webgl/2023.1.20f1-minsize-webgl2 |
| 2022.3.50f1 | 2.69 MB | https://deml.io/experiments/unity-webgl/2022.3.50f1-minsize-webgl1 |
| 2021.3.45f1 | 2.74 MB | https://deml.io/experiments/unity-webgl/2021.3.45f1-minsize-webgl1 |
| 2020.3.48f1 | 2.48 MB | https://deml.io/experiments/unity-webgl/2020.3.48f1-minsize-webgl1 |
| Version | Size | Link |
|---|---|---|
| 6000.0.25f1 | 7.82 MB | https://deml.io/experiments/unity-webgl/6000.0.25f1-urp-webgl2 |
| 2023.2.20f1 | 6.87 MB | https://deml.io/experiments/unity-webgl/2023.2.20f1-urp-webgl2 |
| 2023.1.20f1 | 6.25 MB | https://deml.io/experiments/unity-webgl/2023.1.20f1-urp-webgl2 |
| 2022.3.50f1 | 5.92 MB | https://deml.io/experiments/unity-webgl/2022.3.50f1-urp-webgl2 |
| 2021.3.45f1 | 6.31 MB | https://deml.io/experiments/unity-webgl/2021.3.45f1-urp-webgl2 |
| 2020.3.48f1 | 5.60 MB | https://deml.io/experiments/unity-webgl/2020.3.48f1-urp-webgl2 |
| Version | Size | Link |
|---|---|---|
| 6000.0.25f1 | 6.05 MB | https://deml.io/experiments/unity-webgl/6000.0.25f1-urp-minsize-webgl2 |
| 2023.2.20f1 | 5.30 MB | https://deml.io/experiments/unity-webgl/2023.2.20f1-urp-minsize-webgl2 |
| 2023.1.20f1 | 5.71 MB | https://deml.io/experiments/unity-webgl/2023.1.20f1-urp-minsize-webgl2 |
| 2022.3.50f1 | 4.65 MB | https://deml.io/experiments/unity-webgl/2022.3.50f1-urp-minsize-webgl1 |
| 2021.3.45f1 | 6.11 MB | https://deml.io/experiments/unity-webgl/2021.3.45f1-urp-minsize-webgl1 |
| 2020.3.48f1 | 4.86 MB | https://deml.io/experiments/unity-webgl/2020.3.48f1-urp-minsize-webgl1 |
| Platform | Chrome | Firefox | Edge | Safari | Internet Explorer |
|---|---|---|---|---|---|
| Windows 10 | ✔️ | ✔️ | ✔️ | ➖ | ❌ |
| Linux | ✔️ | ✔️ | ✔️ | ➖ | ➖ |
| Mac | ✔️ | ✔️ | ✔️ | ✔️ | ➖ |
| Android | ✔️ | ✔️ | ✔️ | ➖ | ➖ |
| iOS | ✔️ | ✔️ | ✔️ | ✔️ | ➖ |
| Android Smart TV | ✔️ | ➖ | ➖ | ➖ | ➖ |
✔️ : Supported |
- For older Unity 2019 builds throw an error on iOS Firefox (Does not happen for iOS Safari or iOS Chrome):
An error occurred running the Unity content on this page. See you browser JavaScript console for more info. The error: Script error.- with iOS 16.2 and Firefox 108 I could not reproduce this problem anymore on 2019.4. - Internet Explorer does not work for Unity WebGL builds, since it does not support wasm.
- Previous versions of Firefox on Android had some performance problems, they seemed to have fixed those. In general performance on mobile is by far not as good as a native app build, but should be enough for simple games.
- For android smart TVs expect longer loading times (up to ~2 minutes)
- There are some combinations for iOS that have problems: With recent versions URP with WebGL 1 does not work at all and builtin render pipeline with WebGL 2 has performance problems or might not load at all. I recommend to either use URP with WebGL2 or builtin with WebGL1, if you are targeting iOS. You can always test the builds on your device, to see which combination might fit your needs: https://deml.io/experiments/unity-webgl/
- If you want to use this project as a basis for your project, be sure to select the release/branch for your unity version. Beta versions oftentimes have problems, therefore I would recommend to use the latest LTS version to run your project.
- The server is configured to support wasm streaming and brotli compression, see .htaccess 2020 .htaccess 2019
- Due to the odd way that Unity does brotli compression, some servers (such as itch.io) don't support it, you should learn how to manually compress your game or use gzip compression instead. If brotli is misconfigured or not supported you will get an error along the lines of:
You can change the compression in the project settings:
Unable to parse Build/WEBGL.framework.js.br! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: br" present. Check browser Console and Devtools Network tab to debug.
- In order to get rid of the warning on android/iOS it is removed in a post process build step (File)
- You might need to reload the page on android/iOS when running the first time
- This is a very small example. When building larger WebGL applications, you might run into problems with memory or compile errors. I recommend to build from the start and very often, to catch the changes that create those problems.
- If you want to have the smallest file size possible and faster load times, take a look at Project Tiny or web-specific libraries like Three.js or PlayCanvas.
- Removing the default skybox will save ~30kb.
- With 2021.2 Unity added the possibility to use different texture formats. The builds use the default DXT format, but since no texture is used this settings does not make any difference in this project.
- URP adds additional ~2.5 MB file size compared to the builtin render pipeline.
- In general the performance for URP seems to be better compared to builtin, but it has a larger build size.
- With Unity 2021.2 there is currently a problem with shader compilation and therefore builds fail:
Shader error in 'Hidden/Universal/CoreBlit': invalid subscript 'positionCS' at UnityWebGL-LoadingTest/Library/PackageCache/[email protected]/Runtime/Utilities/Blit.hlsl(92) (on gles) Compiling Vertex program with DISABLE_TEXTURE2D_X_ARRAY Platform defines: SHADER_API_DESKTOP UNITY_COLORSPACE_GAMMA UNITY_ENABLE_DETAIL_NORMALMAP UNITY_LIGHTMAP_RGBM_ENCODING UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BLENDING UNITY_SPECCUBE_BOX_PROJECTION UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS Disabled keywords: BLIT_SINGLE_SLICE SHADER_API_GLES30 UNITY_ASTC_NORMALMAP_ENCODING UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_ENABLE_REFLECTION_BUFFERS UNITY_FRAMEBUFFER_FETCH_AVAILABLE UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER2 UNITY_HARDWARE_TIER3 UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_DXT5nm UNITY_NO_FULL_STANDARD_SHADER UNITY_NO_SCREENSPACE_SHADOWS UNITY_PBS_USE_BRDF2 UNITY_PBS_USE_BRDF3 UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_UNIFIED_SHADER_PRECISION_MODEL UNITY_VIRTUAL_TEXTURING Shader error in 'Hidden/kMotion/CameraMotionVectors': SV_VertexID semantic is not supported on GLES 2.0 at line 11 (on gles) Compiling Subshader: 0, Pass: , Vertex program with <no keywords> Platform defines: SHADER_API_DESKTOP UNITY_COLORSPACE_GAMMA UNITY_ENABLE_DETAIL_NORMALMAP UNITY_LIGHTMAP_RGBM_ENCODING UNITY_PBS_USE_BRDF1 UNITY_SPECCUBE_BLENDING UNITY_SPECCUBE_BOX_PROJECTION UNITY_USE_DITHER_MASK_FOR_ALPHABLENDED_SHADOWS Disabled keywords: SHADER_API_GLES30 UNITY_ASTC_NORMALMAP_ENCODING UNITY_ENABLE_NATIVE_SHADOW_LOOKUPS UNITY_ENABLE_REFLECTION_BUFFERS UNITY_FRAMEBUFFER_FETCH_AVAILABLE UNITY_HALF_PRECISION_FRAGMENT_SHADER_REGISTERS UNITY_HARDWARE_TIER1 UNITY_HARDWARE_TIER2 UNITY_HARDWARE_TIER3 UNITY_LIGHTMAP_DLDR_ENCODING UNITY_LIGHTMAP_FULL_HDR UNITY_LIGHT_PROBE_PROXY_VOLUME UNITY_METAL_SHADOWS_USE_POINT_FILTERING UNITY_NO_DXT5nm UNITY_NO_FULL_STANDARD_SHADER UNITY_NO_SCREENSPACE_SHADOWS UNITY_PBS_USE_BRDF2 UNITY_PBS_USE_BRDF3 UNITY_PRETRANSFORM_TO_DISPLAY_ORIENTATION UNITY_UNIFIED_SHADER_PRECISION_MODEL UNITY_VIRTUAL_TEXTURING - URP on mobile runs a lot better with WebGL 2 than WebGL 1 on iOS. For example compare 2021.3.6f1 URP WebGL1 with 2021.3.6f1 URP WebGL2 on your iPhone.
- Unity 2022.1 has problems building for URP with WebGL1 (also on desktop), error:
Texture creation failed. 'ShadowAuto' is not supported for Render usage on this platform. Use 'SystemInfo.IsFormatSupported' C# API to check format support. NullReferenceException: Object reference not set to an instance of an object.
- Built with
Tools/Build WebGL/minsize - Built with Code Optimization:
Size - Enable Exceptions:
None - C++ Compiler Configuration:
Master
This functionality was added 2021-11-21 and is only supported by releases starting at that date
The script WebGlBridge adds an easy to access gameobject that can be called from the browser console through unityGame.SendMessage("WebGL", "COMMAND_NAME",PARAMETER)
Currently the following commands are available:
Available commands:
---CommonCommands---
runUnityCommand("DisableCaptureAllKeyboardInput"); -> Disable unity from consuming all keyboard input
runUnityCommand("EnableCaptureAllKeyboardInput"); -> Enable unity from consuming all keyboard input
runUnityCommand("LogMemory"); -> Logs the current memory
runUnityCommand("UnloadUnusedAssets"); -> Resources.UnloadUnusedAssets
runUnityCommand("SetApplicationRunInBackground", System.Int32 runInBackground); -> Application.runInBackground
runUnityCommand("SetApplicationTargetFrameRate", System.Int32 targetFrameRate); -> Application.targetFrameRate
runUnityCommand("SetTimeFixedDeltaTime", System.Single fixedDeltaTime); -> Time.fixedDeltaTime
runUnityCommand("SetTimeTimeScale", System.Single timeScale); -> Time.timeScale
runUnityCommand("ToggleInfoPanel"); -> Toggle develop ui visibility of InfoPanel
runUnityCommand("LogUserAgent"); -> Log User Agent and isMobileDevice
runUnityCommand("LogExampleMessages"); -> Log example messages for Log, warning and error
runUnityCommand("LogMessage", "System.String message"); -> Log a custom message
runUnityCommand("ThrowDictionaryException"); -> Throw a dictionary key not found exception
runUnityCommand("LogTextureSupport"); -> Log supported and unsupported texture formats
runUnityCommand("DeleteAllPlayerPrefs"); -> PlayerPrefs.DeleteAll
runUnityCommand("LogShaderCompilation", System.Int32 enabled); -> GraphicsSettings.logWhenShaderIsCompiled
---ObjectSpawnerCommands---
runUnityCommand("PauseSpawning"); -> Pause spawning of cubes
runUnityCommand("ResumeSpawning"); -> Resume spawning of cubes
runUnityCommand("AddSpawner"); -> Add a spawner
runUnityCommand("RemoveSpawner"); -> Remove a spawner
---WebBridge---
runUnityCommand("Help"); -> Log all available commandsThis repository supports continuous Integration through game.ci. There are scripts for creating a unity license, building the project and upgrading the project.
The main github actions workflow is release.yml. On Unity side a custom build script on the basis of game.ci's BuildScript is used: BuildScript.cs. This script supports defining different build logic through git tags through the following syntax: UNITY_VERSION-TAG1-TAG2... Example: 2022.2.0f1-urp-webgl2
The following tags are supported:
minsize: Set Code optimization to size and and don't support exceptionsdebug: Build a development build with embedded debug symbols and full stack tracewebgl1: Build for WebGL1webgl2: Build for WebGL2
For upgrading Unity upgrade-unity.yml is used. It can be triggered through github actions manually by defining the branch to upgrade and some additional settings
It will create a pull request with the newly defined unity version along with tags to trigger automatic builds. Additionally, all packages are updated to their latest version, see also UnityPackageScripts.cs.
You can find a list of all live builds with their sizes over here: https://deml.io/experiments/unity-webgl/
- MIT (c) Johannes Deml - see LICENSE
