How Alibaba’s Taobao Life Renders Real‑Time Virtual Avatars with Web Tech

Industry Background

Virtual human rendering has become essential in movies, games and live streaming, with high‑profile examples such as Alita: Battle Angel and the Siren virtual idol showcased at GDC 2018.

Cross‑Domain Applications

Beyond games, virtual avatars are used for virtual idols on platforms like B‑Station, and Taobao Life allows users to create their own avatars for interactive shopping experiences.

Technical Overview

Rendering Pipeline Basics

The system loads a shared human model, then applies user‑specific configuration (clothing, cosmetics, facial shape) on top of the base mesh. The pipeline follows a classic CPU‑GPU hand‑off where each stage passes processed data to the next.

Outfit & Beauty Implementation

Dynamic Asset Loading – Individual clothing and accessory models are loaded on demand and attached to the appropriate skeleton bones.

Render‑to‑Texture for Cosmetics – Facial cosmetics are composited as textures on the GPU, then used as the final face material, reducing the need for separate geometry.

Face‑Morph ("Pinch Face") Techniques

Two complementary methods are used:

Bone Skinning – Bones drive large‑scale deformations such as head size or jaw movement.

Vertex Morph Targets – Fine‑grained shape changes (e.g., eyebrow arch, lip shape) are stored as blend shapes and interpolated with a weight.

AR Interaction

Real‑time facial capture runs on a native AR camera; the extracted bone and morph data are fed back to the Web rendering layer via a same‑layer rendering component, enabling live AR avatars.

Web Advantages & Disadvantages

Advantages : Fast iteration, easy deployment, and seamless integration with the Taobao app ecosystem.

Disadvantages : Limited pre‑loading, lower rendering performance compared to native OpenGL, and constraints of WebGL (e.g., bone count limits).

Conclusion

Taobao Life demonstrates that sophisticated avatar rendering—dynamic outfits, real‑time beauty effects, face morphing, and AR‑driven expressions—can be achieved on the Web using a combination of rendering pipelines, texture compositing, and hybrid native‑Web integration, while acknowledging current performance trade‑offs.