Turning an Annual Meeting into a Live 3D Smiling Planet: Alibaba’s Face‑Check‑In System

Alibaba's internal "smile check‑in" system replaces traditional invitation cards with facial recognition and a live "smile index" displayed on a large screen during annual meetings.

Engineers built the system in two weeks using H5 animation combined with the company’s face‑recognition service. After a face is recognized, the participant’s nickname, avatar and smile score appear on a "smile planet" visualized with Three.js.

The solution includes several functional steps:

Initial rotating planet with orbiting satellites.

When a person checks in, their face data is shown on the planet.

The photo then flies back to the planet surface and continues rotating.

Before the event starts, the planet disperses into particles that form the event’s theme text.

Technical choices:

Three.js was selected as the 3D engine, with tween.js for animation and a webpack‑based scaffold for development. Compared with Babylon.js, Three.js offers a longer history, simpler API and better community support for pure rendering tasks.

Key implementation details include converting 3‑D coordinates to spherical coordinates, using getWorldPosition to obtain global positions, and animating photos along curved paths to avoid intersecting the sphere.

Performance optimizations focused on reusing Material and Geometry, reducing visible objects, minimizing work inside the render() loop, using Sprite for particles, limiting side rendering to FrontSide, and optionally employing custom shaders.

After optimization the animation runs at a stable 60 fps on macOS, meeting the visual requirements for large‑screen displays.

Future plans aim to turn the prototype into a product that supports customizable themes, interactive lotteries, multi‑screen synchronization and automatic generation of event media.