PART 1

The common perception of Unity WebGL development is that while it’s convenient for development, it suffers from slow builds, sluggish content loading, lack of mobile support, and a host of other issues. The most frustrating problem, however, remains the painfully slow loading times. After comparing various H5 development frameworks, I was ready to abandon Unity WebGL entirely. But with the release of Unity 2020.1, there’s finally a glimmer of hope...

Recent tests comparing Unity Tiny, Laya, and Unity WebGL revealed that with proper optimization, Unity WebGL can significantly close the performance gap with Tiny and Laya, even if it still lags slightly behind. Below are cold-load test results for the same scene (local server, network impact excluded):

1. Unity Tiny: 1.2 seconds

2. Laya: 1.69 seconds

3. Unoptimized WebGL (built with Unity 2018): 5.5 seconds

4. Optimized WebGL (built with Unity 2020.1): 1.98 seconds

These results rekindled my hope and motivated me to dive back into Unity WebGL development.

Key Questions Addressed:

1. Why is Unity Tiny so fast?
Unity Tiny leverages DOTS (Data-Oriented Technology Stack), which combines three core technologies:

• Entity Component System (ECS): Unlike traditional Unity components, ECS allows loading only the components your project actually uses, eliminating unnecessary bloat.

• Job System: Enables multithreaded execution by offloading tasks from the main thread.

• Burst Compiler: Replaces Mono/IL2CPP with LLVM-based compilation, translating .NET bytecode into highly optimized native code. Benchmarks suggest it can even outperform C++ in some cases.

While DOTS represents the future of Unity, its official release has been delayed (originally slated for 2020). It’s worth exploring but may not yet be production-ready.

2. Why is Laya also fast?
Laya, a Chinese engine, emerged due to Unity’s initial neglect of WebGL optimization. It supports TypeScript/JavaScript development, eliminating script translation in browsers, and integrates ECS for component control. Laya is ideal for lightweight web games.

3. Why was Unity WebGL historically slow?

• No ECS: All engine components were bundled regardless of usage.

• Legacy Mono compilation.

• Unoptimized resource loading (including unused data).

4. How did optimization improve Unity WebGL?

• Component stripping and code optimization in Unity 2020.1.

• Full adoption of IL2CPP for faster compilation.

• WebAssembly integration.

• Manual optimizations (e.g., reducing asset size, removing unused code).

Optimization Steps for Unity WebGL:

1. Use Unity 2020.1 or newer.

2. Editor Settings:

• Disable Run In Background (Project Settings → Resolution and Presentation).

• Design a lightweight loading screen (progress bars may not reflect actual engine load times).

• Remove the Splash Screen (Professional license required).

• Auto Graphics API: Choose WebGL 1.0/2.0 based on target browsers (e.g., Edge only supports 1.0).

• Lightmap Encoding: Set to Low (prioritize speed over quality).

• API Compatibility Level: Use .NET Standard 2.0.

• Strip Engine Code: Enable + set Managed Stripping Level to High.

• Optimize Mesh Data: Enable.

• Texture MipMap Stripping: Optional (trade-off between anti-aliasing and performance).

• Stack Trace: Set to None.

• Enable Exceptions: Disable (None).

• Compression Format: Use Gzip (unless local loading requires uncompressed data).

• Data Caching: Enable to accelerate reloads.

PART 2

This section focuses on project-level optimizations to further reduce load times.

Post-Build Analysis:

After building, analyze the bundle via Console → Open Editor Log.

Optimization Strategies:

1. Use AssetBundles for dynamic resource loading.

2. Minimize plugins (they increase bundle size).

3. Avoid fonts: Replace text with images if possible (Chinese fonts bloat bundles).

4. Remove unused Packages (reduces Included DLLs size).

5. Delete unused folders: Resources and StreamingAssets are always included.

6. Trim components: Remove unnecessary Colliders, scripts, etc.

7. Simplify rendering:

   • Disable HDR on cameras.

   • Avoid real-time shadows.

   • Set Anti Aliasing to 2x/4x.

8. Texture Optimization:

   • Use RGBA Crunched DXT5 format.

   • Enable MipMaps selectively.

9. Memory Management: Apply standard garbage collection best practices.

By following these steps, a well-optimized Unity WebGL build can achieve near-native performance, making it a viable choice for web-based projects.

打赏

扫一扫，请博主喝杯咖啡～