Boosting Complex Marketing Animations: WebGL Performance Tricks & AI‑Powered Smart Effects

Introduction

Ant Group front‑end engineer Chi Shao presents at SEE Conf 2022 on applying interactive technology to complex marketing scenarios, covering two parts: WebGL rendering performance optimization and AI‑based smart animation solutions.

Ensuring Rendering Performance in Large Scenes

Traditional rendering pipelines involve vertex processing, rasterization, and pixel processing, with data transferred from system memory to GPU memory. Because CPU‑GPU communication is costly, reducing this transfer is key for large scenes.

By culling objects outside the screen’s view frustum, unnecessary data is discarded, cutting communication overhead.

Further optimization uses an interleaved data layout: packing multiple attributes into a single buffer and accessing them via indices and offsets, which minimizes the number of bind calls and improves throughput, analogous to transporting many cabbages at once instead of one by one.

Smart Animation

Dynamic effects boost visual appeal, user retention, click‑through rates, and dwell time, but creating them manually is time‑consuming. MarsStudio offers a configuration‑based animation generator where developers upload an image, select parameters, and instantly preview and download the resulting animation.

Beyond preset effects, a machine‑learning pipeline provides one‑click generation: an uploaded image is automatically matched with suitable animations using a generative adversarial network (GAN). The GAN’s generator creates candidate animations, while the discriminator evaluates their realism; through iterative training on paired image‑animation data, the system learns to produce high‑quality, diverse effects, achieving a “thousand images, thousand effects” capability.

After generation, image analysis identifies the main subject and its relative position, allowing the system to place the animation appropriately within the scene.

Conclusion

The workflow bridges design and front‑end teams, ensuring high‑performance rendering for massive marketing scenes and providing AI‑driven smart animation tools that let developers quickly add engaging effects without heavy design effort.