Optimizing 3D WebGL Performance for Alipay's Spring Red Envelope Project

The Spring Red Envelope activity is one of Alipay's largest annual events, presenting a significant technical challenge for the frontend team to deliver innovative experiences while maintaining stability for billions of users.

This year the project introduced extensive 3D (WebGL) graphics for the first time, requiring careful balance between visual fidelity and performance. Initial measurements showed high memory usage (up to 30 MB for the homepage 3D scene and 70 MB for the "Global Fortune" scene) and long load times, leading to OOM crashes on low‑end devices.

Through detailed bottleneck analysis, three main problem areas were identified: model size, texture size, and runtime performance. The team applied a series of solutions:

Model size reduction : Used UnityMeshSimplify to cut triangle counts by ~30 % and removed unnecessary vertex data (normals, tangents) via a custom UnityToolkit option, shrinking total model data from 12 MB to 5 MB.

Texture compression : Adopted ASTC for Android and PVRTC for iOS, dramatically lowering memory consumption and improving sampling speed.

Atlas creation : Combined multiple images into power‑of‑two texture atlases to satisfy compression constraints and reduce request count.

GLB packaging : Packed models, textures, and animations into a single binary GLB file, reducing network requests to one per scene.

Progressive loading : Displayed static placeholder images first, then swapped to 3D content after assets were loaded and GPU‑submitted, with time‑sliced rendering to avoid long frame stalls.

GPU‑based particle system : Moved particle motion and color calculations entirely to shaders, optimized emitters with fixed‑size buffers and merged emitters to cut CPU overhead, and replaced tail effects with texture scaling.

Additional optimizations included GZIP compression of assets (halving final bundle size) and automated integration into the engine's UnityToolkit and Webpack workflow, enabling developers to use these techniques with minimal effort.

The combined efforts reduced peak memory usage by up to 50 %, cut transmission volume by sixfold, and delivered a smooth, visually rich experience for the massive user base.