AltiLeap - AR Art Experience

AltiLeap - Augmented Reality Art Experience

Web AR & Three.js App, Blender 3D Production, Real-Time Unreal Installation

2023 / AIA Wealth Management Center

Real-time 3D koi assets moving between a WebGL AR viewport and a physical LED wall. The technical execution required matching virtual world-space coordinates with the physical LED screen dimensions to ensure a frameless visual transition.

Rather than relying on arbitrary visual placement, the AR tracking matrix was aligned directly to the venue's CAD blueprints. This physical-to-virtual registration ensured the digital assets exited the mobile screen at the exact vector they entered the LED physical installation.

Mobile sensor tracking feeds WebGL viewport coordinates, driving localized interactive responses that mirror the visual timing of the main LED background installation.

Augmented Reality Experience

"AltiLeap" built a unified 3D pipeline bridging mobile web (Three.js, AR.js) and Unreal Engine. This setup required technical standards for asset topology and PBR material workflows, allowing the same base mesh to function across two fundamentally different rendering constraints: low-power mobile browsers and high-performance LED hardware.

Baseline 3D models were created and manually retopologized in Blender to meet strict WebGL polygon budgets. By aligning the WebAR local origin with the LED wall's physical center in the 3D workspace, the mesh transforms naturally crossed the boundary between the browser's AR camera view and the physical screen space during runtime.

Organic koi rigged and animated in Blender. Keyframes were baked directly into GLTF bone transforms to avoid runtime calculation overhead in the web browser.

Packed PBR textures designed to minimize mobile memory footprint during web rendering.

The identical base mesh and skeletal rig were imported into Unreal Engine to drive the LED visuals. Stripped the WebGL PBR materials and replaced them with custom Unlit shaders. Vertex data from the skeletal mesh was passed directly to Niagara, emitting particle trails that followed the baked Blender animations on the LED wall.

Niagara particle systems utilized the skeletal mesh surface as emission modules.

To streamline the WebAR workflow, asset quality was controlled at the source. Defining explicit technical limits prior to export eliminated downstream friction between art and engineering, resulting in a predictable and repeatable pipeline for mobile deployment.

CLIENT

AIA

MY ROLE

Lead Designer — UX Design & Development

TEAM

Creative Director Chris Cheung

Technical Director Jeff Wong

Project Manager Daisy Lee

Designer Sandy Chan

Developer Jason Chan