Why G3D Was Built: Alibaba’s WebGL Engine for Hybrid Apps

G3D is a JavaScript 3D rendering engine based on WebGL that can run in hybrid environments such as Weex and React Native through GCanvas. It was launched by Alibaba’s terminal team and open‑sourced together with GCanvas in March 2018.

Many wonder how G3D differs from three.js and what the relationship between G3D and GCanvas is; this article explains the background of G3D.

Why G3D Exists

The origin of G3D starts with GCanvas.

GCanvas provides Canvas drawing capabilities in Weex and React Native, including both 2D and WebGL contexts. While 2D is straightforward, the WebGL context requires a 3D rendering engine; popular engines like three.js and Babylon.js rely heavily on DOM APIs and native objects that are unavailable in hybrid environments.

The GCanvas team attempted to integrate three.js and Babylon.js but faced several challenges:

These engines depend on many DOM APIs and native objects that do not exist in Weex or React Native, making adaptation costly and hard to keep up with upstream updates.

GCanvas currently supports only a subset of the WebGL API, so the engines cannot run properly.

The large size of three.js and Babylon.js includes many features unnecessary for Alibaba’s mobile scenarios, which would hurt performance.

Therefore, the team decided to develop a lightweight WebGL engine, G3D, from scratch to complement GCanvas’s 3D capabilities. For a long time, G3D will be the only practical way to use GCanvas’s WebGL features without dealing directly with the raw WebGL API.

What G3D Can Do

G3D provides the basic functions of a 3D rendering engine:

Define scenes and perspective cameras.

Lighting: ambient, directional, point, and hemispheric lights.

Materials: Phong‑based material (Lambert is a special case) and unlit material.

Geometries: cube, sphere, cylinder, cone, polyline, and the ability to create geometry from model data.

Model parsing: supports OBJ/MTL and STL formats.

Interaction: 3D picking and dragging (currently works only in browsers because GCanvas framebuffer is not fully functional).

Animation: skeletal and skinning animations.

Because G3D must run in hybrid environments without DOM APIs, it cannot support non‑rendering features such as audio playback or automatic file loading that browsers provide. For example, three.js can load a model by URL automatically, whereas with G3D you must manually fetch the file content and pass the string to

G3D.MeshBuilder

methods.

The Future of G3D

G3D is already used in Alibaba’s 3D customization business. In the next six months to a year, its goals are:

Catch up with advanced features of Babylon.js and three.js—shadows, shader materials, pre‑processing, normal maps, ray tracing—while driving improvements in GCanvas’s WebGL support and benefiting both business and the community.

Further integrate G3D with modeling and animation toolchains, refine model‑material data structures, and achieve a “what you see in Blender is what G3D renders” experience, thereby reducing 3D project development costs.