Unity webgl optimization

Yes Unity Development WEBGL The impression is that development is convenient, packaging is slow, output content is slow, and loading is not supported on mobile terminals problem . But the most troublesome thing is that the loading is really slow .
So through various h5 Development comparison is ready to give up Unity Release WEBGL How to do it . But as the unity2020.1 There is a slight turnaround in releasing this status quo ...

It's been tested recently Unity Tinylaya and Unity webgl Found that if the optimization is done well unity webgl Although not comparable tiny and laya But it can narrow the gap between them a lot
Test the same scenario cold load ( The local server does not consider the network impact )
1.unity tiny   1.2 second

2.laya            1.69 second

3. Not optimized webgl(unity2018 Developed )   5.5 second

4. Optimization of the WEBGL(unity2020.1 Development )     1.98 second

Seeing this data, I hope to get ready to get out of the pit and re-enter the pit .

First answer a few questions about :

1. Why? Unity Tiny So fast ?
because unity tiny use DOTS( Multi line program data oriented technology stack ) Development DOTS=ECS+job System+Burst

Entity component system （ECS) : because unity3d There are all kinds of components. Maybe your project doesn't need so many components, but packaging is all added ecs The solution is to load what components I use .


Mission system （Job System):unity The main task is to run in the main thread, which is to let you unconsciously put unity Become multithreaded

Burst Compiler compiler :unity I used to use mono To compile and realize cross platform upgrade IL2CPP The speed is still better than c++ This compiler translates to big bang using LLVM from IL/.NET Bytecode conversion to highly optimized native code is said to have surpassed c++ The speed of .

therefore dots Is the future direction, but unity Have been listed, have money, give up your dream ? Say yes 2020 Officially released in dots There is no news . So now you can learn, but it's not so convenient to use . Be interested in your own research .


2.laya Why can it be so fast ?
laya It is a domestic engine mainly because unity webgl Inaction is why laya He USES asts perhaps js Development on the browser does not need to convert scripts, and scenes can be used unity And also used the entity component system, which can control the loading of required components. This is a good tool, mainly used to develop various small games . It took three days to develop a scenario for comparison with other tests .


3.Unity webgl Why so slow ?
1. There is no physical component system to pack the components in the engine into a honeycomb, whether you use it or not 2. The previous coding may still use mono This compilation is also very slow

3. Resource optimization is not completely loaded with a lot of data, and there may be a lot of unused data .

4. Why after optimization unitywebgl It can also be improved so much ?
1.unity2020.1 Changed the build loader to split components and optimize code according to the project

2. Full use IL2CPP To compile and improve the speed

3. Full use WebAssembly

4. Optimize yourself as much as possible to improve the loading speed

The final product will be better than the previous webgl There's a big improvement



Start project optimization
1. download Unity2020.1 And later versions must be higher than 2020.1 Version development

2. Set up WEBGL PLayer Setting

 

1. If there is no need to run in the background, turn off the background P->Resolution and Presentation ->Run In BackGround

2. Modify an appropriate loading page ( Loading pages as small as possible can reduce the sense of time ) Because the loaded progress bar is related to data loading, it may not correspond to the time when it is loaded into the engine, so it will feel that the progress bar is inaccurate .

3. If it is a professional version, remove splash screen Closing the startup screen will improve a little


4.Other Settings->Auto Graphics API Choose... According to your own needs webgl1.0webgl2.0 Or both. After all edge Browser only supports webgl1.0

5.Other Settings->Lightmap Encoding choice Low Select low light map webgl Sacrificing mass for speed

6.Other Settings->Api Compiler Configuration choice .Net Standard 2.0


7.Other Settings->Strip Engine Code Check this is the split engine code Managed stripping level> Set the level to high, which can peel off unused engine code as much as possible .

8.Other Settings-> Optimize mesh Data Check this to optimize grid data

9.Other Settings-> Texture MipMap Stripping According to your choice, check this is the anti aliasing of map edge blur

10.Other Settings-> Stack Trace Choose all None Stack traces don't need to be .

11.Publishing Settings ->Enable Excptions choice None To enable exception detection, the release time does not need

12.Publishing Settings ->Compression Format Whether to compress or not depends on your choice of compression. You must decompress it. If the network is not good, choose compression . Compression as much as possible Gzip Compatible with local loading, you can choose not to compress

13.Publishing Settings ->Data Caching The data cache must be checked. The secondary loading speed can be a lot .