Choosing the Right Mobile 3D Engine: From Web to Native and Hybrid Solutions

1. This Year’s First Step

With the launch of the “Taobao Life Small House” project, the Metaverse plan for Taobao Life took shape, and together with the Disney “Mao Mao Carnival Hall” launched earlier this year, we made our first Metaverse technology step.

2023 marks the third anniversary of Taobao Life. After taking over from the Lingxi Interactive C6 team, we faced a long learning curve because we lacked experience with medium‑large 3D interactive games. We had to adapt from a game‑studio model to Taobao’s functional organization, dealing with cross‑discipline coordination, skill matching and team‑fit issues.

Below we share our thoughts and experience as a “door‑opening brick” for anyone chasing this wave.

This year D2 we will continue the topic sharing “Taobao Life’s Exclusive ‘Small House’ – Virtual Character and Scene Technology Exploration”, stay tuned.

2. How to Choose a Suitable Mobile 3D Engine

Choosing the right 3D engine is often the first technical priority. We analyze leading engines to illustrate the decision process.

2.1 Let the Engine Do What It Is Good At

Understanding an engine’s strengths can be done by reading its official description. For example:

Three.js: “The aim of the project is to create an easy to use, lightweight, cross‑browser, general purpose 3D library.”

Babylon.js: “A fully‑featured, open‑source game engine … making it as simple as possible to create powerful and beautiful games that run on the web in any browser.”

Three.js is a 3D library providing basic rendering, animation, resource management and math tools, while Babylon.js is a full game engine offering GUI, physics, particles, character system, state machine, camera control, joystick input, etc.

Why know an engine’s strengths? Different domains require different 3D capabilities. Three.js is a general‑purpose solution suitable for games, digital twins, data visualization, industrial showcases, virtual humans, etc., but often needs a custom framework for specific needs. Babylon.js focuses on game development and provides built‑in features such as ArcFollowCamera, Gamepad, PhysicsEngine, etc.

Most modern 3D engines are versatile, but when selecting we look for the fastest way to solve project problems. The following table summarizes our comparison:

2.2 Web, Native or Hybrid?

After understanding engine strengths, we must decide the platform stack. Engines such as Unreal, PlayCanvas and CocosCreator represent distinct technology stacks and platform positions:

Unreal: Native, language C++.

PlayCanvas: Web‑first, language TypeScript.

CocosCreator: Hybrid (JS Runtime + Native), language TypeScript.

Key factors for 3D implementation include logical computation (CPU‑bound) and floating‑point computation (GPU‑bound). Their performance differences lead to the following observations:

Native often appears optimal, but it sacrifices dynamism. Web retains excellent dynamism and cross‑platform capability, especially for simple industrial showcases or mini‑games. WebGPU, WebWorker and WebAssembly have improved Web 3D prospects.

Before WebGPU matures, Hybrid can bridge the gap by moving performance‑critical parts to Native while keeping the rest in JS. The architecture diagram below shows a typical layered engine:

We illustrate three possible schemes:

Scheme 1 : JS provides the latest graphics API (WebGPU) following W3C standards, preserving flexibility. This is the approach used by CocosCreator, Taobao Mini‑Program (FCanvas) and WeChat Mini‑Games.

Scheme 2 : Rendering is offloaded to Native, reducing JS‑to‑Native binding overhead.

Scheme 3 : More responsibilities reside in Native; JS remains lightweight for business logic, suitable for static product showcases.

WebGL uses a global state machine with synchronous CPU‑GPU communication for each API call, which limits efficiency. WebGPU batches commands asynchronously, allowing parallel workers and reducing main‑thread blocking.

Choosing a Hybrid solution therefore depends on business needs and the desired front‑end development freedom.

Native engines such as Unreal, Unity or internal custom engines deliver top performance but require careful management of development cycles, product iteration and long‑term maintenance.

2.3 Build Your Own Engine or Embrace the Community?

The decision is nuanced. Community engines (Three.js, Babylon.js, CocosCreator, Unreal, Unity, plus internal engines like Hilo3D, Oasis Engine, AceNNR) are powerful, but you must assess whether you can “roll” them.

How to cultivate a battle‑ready 3D team (see Chapter 5).

Predict engine positioning (Chapter 2.1) and technical方案 (Chapter 2.2).

Hands‑on creation of a professional 3D workflow and balancing effect vs performance (Chapter 4).

Continuously optimize and refine the engine around project characteristics.

When taking over Taobao Life we concluded:

We have a small but capable team.

We focus on Web as the primary platform; WebGL is a ceiling but WebGPU is promising.

We build a professional 3D workflow to compensate for Web’s current limitations.

We concentrate on Taobao Life’s 3D technology, applying it where it matters most.

If you cannot “roll” a custom engine, choose a community engine that fits the two criteria above, and still ensure dedicated 3D technical experts lead the project.

2.4 Edge or Cloud?

During Double 11 many teams used cloud‑based real‑time rendering (e.g., Unity + cloud, Unreal + cloud). Cloud offers desktop‑grade GPUs and top‑tier engines, but budget constraints limit simultaneous users. On‑device solutions using top engines (Unreal, Unity) also exist, but Web or Hybrid remains the most stable choice today.

3. How to Build a Professional 3D Art Workflow

Why does a 3D project need an art workflow while a 2D project does not? 3D pipelines are not standardized; they must suit the team and project. Simple one‑off projects can skip a formal workflow.

When is a workflow unnecessary? When the project does not require large‑scale production or lacks resources for detailed art recreation.

What constitutes a 3D art workflow? Example: the Lingxi Interactive C6 team used SVN + Excel + DingTalk to manage files, data and processes.

We integrated this with Taobao’s platforms to create an online SOP art platform, driven by three reasons:

Our organizational structure cannot achieve a studio‑style workflow.

Decentralized management is risky and hard to trace.

We are accustomed to an online SOP.

Key roles in a 3D team include 2D designers, 3D artists, lead artists, product, QA, etc. Defining content types, standards and hand‑off points allows us to implement the workflow on an SOP platform.

4. Balancing Effect and Performance

Performance optimization can raise frame rates, but further gains often sacrifice visual quality. Common strategies include lowering resolution, reducing lights, global illumination, animations, and particle effects.

For mobile, C++ runtime vs JS runtime logical performance differences are minor for showcase projects; most impact comes from art quality, model detail, material rendering (PBR/NPR), lighting and shadows.

Techniques such as Level of Detail (LoD), mesh simplification, mip‑mapped textures, and offline baking (LightMap/ShadowMap) help achieve a good balance.

5. How to Cultivate a Battle‑Ready 3D Team

Before building a team, assess whether the project requires a dedicated 3D team, the breadth of required knowledge, the availability of a middle‑platform, and the ability to secure resources.

Typical roles include 3D lead artist, artists, planners, art PM, technical artist, engine programmer, game programmer, QA, etc. Some functions can be centralized in a middle‑platform (engine development, generic workflows, particle systems), while others remain project‑specific.

6. The Road Ahead

We have taken the first step in Taobao Life’s Metaverse with the “Small House”. Our roadmap continues to expand virtual avatars across multiple worlds, focusing on Web‑based engines, Hybrid solutions, and preserving our 3D technology, workflow and experience as core assets.

We will keep sharing knowledge with the community; after last year’s D2 we released “Virtual Idol Birth – Digital Human Industry and Technology Research”, and this year’s D2 will feature “Taobao Life’s Exclusive ‘Small House’ – Virtual Character and Scene Technology Exploration”.

Reference Materials

[1] ArcFollowCamera: https://doc.babylonjs.com/typedoc/classes/BABYLON.ArcFollowCamera

[2] Gamepad: https://doc.babylonjs.com/typedoc/classes/BABYLON.Gamepad

[3] PhysicsEngine: https://doc.babylonjs.com/typedoc/classes/BABYLON.PhysicsEngine