How Alipay’s Frontend Team Turned AR Red Packets into a Web3D Platform

From AR Red Packets to Web3D Exploration

3D animation and games have long been a difficulty for front‑end development. Since Alipay launched an AR red‑packet during the 2017 Spring Festival, the team has continuously explored the Web3D field.

Early Challenges and the Birth of R3

The AR red‑packet combined image‑recognition code from the client team and 3D animation from the front‑end team. Although the animation was originally written in C by a game developer, the front‑end team decided to pursue pure Web3D using only JavaScript and WebGL.

The main problem was how Web3D could develop further. In early 2017 Alipay shifted back to a pure financial tool focus, treating AR as a futuristic feature. The Web3D team needed a new business scenario to survive.

Technical obstacles were severe. The dominant 3D engine, Three.js, was large and complex, and there was no consensus on model formats. The emerging glTF format later became the standard for web‑based 3D models.

The front‑end team built a brand‑new rendering engine called R3 (Render for 3D) and a Unity plug‑in to export models directly to the web. R3 was promoted across Alipay’s business units, gaining its first breakthrough.

Game‑Based Growth: Star Planet, Huixing, and More

In 2017 the “Ant Forest” and “Ant Manor” apps drove massive user engagement. R3 powered the first 3D mini‑game “Star Planet”, which quickly attracted a large user base and sparked interest from other business teams.

Subsequent attempts like “Huixing” faced long development cycles and low traffic, leading the R3 team to shift focus away from interactive games.

Later, a simple “Chicken Climbing Race” game built from Star Planet assets became the highest‑traffic Web3D app in 2018.

Games such as “Pile‑Up Fun” were turned into marketing tools, achieving ten times the sharing rate of ordinary campaigns and later powering the 2019 “Yu‑E‑Bao” anniversary event.

Lottie’s Rise and the 3D Cost Challenge

Lottie, based on After Effects, allowed designers to export animations as JSON without code, quickly becoming the go‑to solution for many marketing activities, especially during the 2018 Double‑11 event.

However, 3D modeling remains a bottleneck; creating a Web3D project can take a month, which is unacceptable for small‑scale business needs. To lower costs, the team built a web‑based 3D editor, but its complexity limited adoption.

Evolution to Oasis and Mars Editors

By late 2019 the R3 engine was renamed Oasis , aiming to become a “3D oasis” for future projects. A parallel effort produced the Mars editor, which rendered 2D animations with 3D techniques, offering better performance than pure CSS or Lottie for complex scenes.

Both editors reduced production costs and increased the number of Web3D releases from one project per half‑year to two‑three projects per month.

Future Outlook

The main short‑term limitation of Web3D is its ecosystem. As technical barriers fall, more front‑end developers and designers will experiment, leading to platform‑centric growth where best practices are shared.

While Web3D still lags behind Lottie in overall usage, its visual capabilities surpass Lottie for particle effects and complex lighting. Emerging technologies like WebAssembly and server‑side rendering (e.g., Unreal’s Pixel Streaming) may further reshape the landscape.

Ultimately, the competition may become a “platform war” where the ability to produce interchangeable assets (videos, games, JSON) determines success.