How We Built a 3D Web Shopping Experience with Babylon.js and React

Development Background

Riding the wave of the recent "metaverse" hype, the team received a request to build an interactive 3D shopping channel that would showcase products in a more immersive, entertaining way while exploring future e‑commerce experiences.

Frontend Framework Choice

The project needed a web‑only solution that could run on many devices without a native app. Commercial engines such as Unity, Egret, and Cocos2d‑js were evaluated but rejected because of licensing costs, the need to code in C#, large bundle sizes, and insufficient documentation.

Commercial use requires payment

Learning curve for C# is steep for the team

Generated bundles are too large for mobile

Documentation is sparse, making the learning curve unstable

After testing several options, the team selected babylon.js as the rendering library and built the UI layer with React.

Project Scene Construction

Rendering Layer Structure

The rendering architecture is split into two layers: a 3D scene layer (handled by Babylon.js) and a HUD layer (rendered with React DOM). This separation avoids the need to force a single resolution for both 2D and 3D content, which would otherwise cause blurry UI on many mobile devices.

Second 3D Rendering Layer

When the HUD needs to display additional 3D content, a second 3D layer is instantiated. To keep resource usage low, the team follows these rules:

Instantiate the extra 3D layer only when it must be shown and pause the original layer.

Destroy the extra layer when it is no longer needed and resume the original layer’s render loop.

Interactive Component Development

Collision Detection

Babylon.js provides built‑in collision checks, but using high‑precision designer models caused heavy computation and device heating. The team therefore generated low‑poly invisible "air‑wall" colliders automatically with a custom tool, reducing both CPU load and the chance of modeling errors.

Camera Obstacle Avoidance

To prevent the third‑person camera from clipping through geometry, two solutions were implemented:

Wrap the camera in an invisible collider that checks against scene objects, stopping the camera when a collision occurs.

Connect the camera to the character with a rod‑shaped invisible mesh; when the rod collides, the camera moves to a safe position between the character and the obstacle, yielding a more natural feel.

Asset Handoff with the Design Team

Model Format

The team standardized on the .gltf format because it minimizes non‑rendering data, reduces file size, and offers broad compatibility and extensibility (multiple textures, animations, etc.).

Model Export Workflow

Designers work in Cinema 4D, which lacks reliable glTF export. The agreed workflow is:

Export the model from C4D as FBX.

Import the FBX into Blender, which has robust glTF support.

Export the final glTF from Blender, ensuring consistent scale and preserved material information.

Preset Lighting and Shadows

Initial scenes only had directional lighting without shadows, resulting in flat visuals. Adding real‑time shadows severely impacted performance, so the team baked static shadows onto floor textures and used pre‑rendered shadow images for characters, achieving depth without the performance hit.

Rendering Optimizations

Texture Compression

Large 3K textures inflated memory usage (up to 27 MB per texture after decompression). The team replaced high‑resolution textures with lower‑resolution versions for distant objects and switched to GPU‑native compressed formats (ETC, PVRTC, ASTC) using the gltf‑transform tool.

Mesh Simplification

Using gltf‑transform, the team reduced triangle counts with parameters ratio = 0 and error = 0.0001, cutting rendering cost while preserving visual fidelity.

Batch Rendering

To lower draw‑call overhead, meshes sharing the same material are merged at load time. Animated meshes are excluded from merging to avoid altering their pivot points.

Future Iterations

Lazy and Level‑of‑Detail Loading

Lazy‑load models when the camera approaches and unload them when far away.

Use low‑poly LOD models at distance and swap to high‑poly versions when the camera gets close.

Level‑of‑Detail Rendering

Babylon.js’s built‑in LOD renderer can automatically downgrade visual effects based on frame‑rate, allowing smooth performance on lower‑end devices.

Real‑time Lighting

On capable hardware, real‑time lighting and dynamic shadows can replace baked textures, providing richer visual feedback.

Scene Building Tool

The team created an internal 3D scene builder where users upload glTF files, preview rendering, and instantly add pre‑packaged interactive components, streamlining prototyping for designers and product managers.

Conclusion

The article captures the end‑to‑end workflow of building a 3D web project from zero to production, including model handling, rendering architecture, performance tuning, and tool development, offering practical insights for developers tackling similar WebGL‑based interactive experiences.