Engineering a 3D Customizer & AR Experience for a Jewelry eCommerce Web App

#webdev #threejs #frontend #augmentedreality

For my university project, my team and I tackled a massive UX challenge in retail: How do you replicate the premium, tactile experience of buying high-end jewelry inside a standard web browser?

We partnered with a real-world client for a jewelry shop to design and build a fully production-ready eCommerce platform from scratch. The core innovation of this project? A fully interactive, real-time 3D customizer interface linked with an Augmented Reality (AR) "Try-On" preview that allows clients to configure rings and visualize them instantly.

Static 2D images don't cut it anymore when customers are making high-ticket investments. They want to see exactly how yellow gold reflects light compared to platinum, and how different diamond cuts look in real life.

Bringing this level of high-fidelity interactive graphics into a web browser—without crashing mobile devices—required an intricate pipeline spanning asset modeling, web rendering, and AR tracking. Here is the technical breakdown of how we built it.

1. Sourcing, Creating, and Optimizing the 3D GLTF Models

The foundation of any 3D web application is the asset pipeline. Jewelry assets typically originate from heavy CAD industrial software used for manufacturing. These raw files are completely unusable for the web, often sitting at millions of polygons and exceeding 50MB per file.

To fix this, we built a custom modeling and optimization pipeline:

Sourcing & Remeshing: We imported the raw design geometry into Blender. We systematically retopologized the meshes—reducing the dense geometric polycount of ring bands and prong settings while maintaining clean edge loops.
Baking High-Fidelity Details: Instead of keeping physical geometry for micro-details, we baked high-poly details into 2D Normal Maps. This tricked the lighting engine into rendering intricate structural grooves without the geometric overhead.
PBR Texturing: Inside Blender, we set up Physically Based Rendering (PBR) materials. We defined explicit map channels for Roughness (keeping metals highly reflective but not perfectly mirrors) and Metalness (set to 1.0 for true metallic surfaces).
The GLTF/GLB Export: We exported the finalized assets into the GLTF/GLB format (often called the "JPEG of 3D"). It packages the mesh, node hierarchies, and material configurations into a single, highly compressed binary delivery stream. We then ran it through Google's Draco compression engine, shrinking the final files from dozens of megabytes to under 2MB for fast web loading.

2. Integrating the Models into the Frontend Engine

Once the GLTF models were optimized, we loaded them into our frontend code context using a WebGL graphics engine. We bypassed standard DOM limitations and hooked straight into the user's GPU using Three.js.

To make the jewelry look luxury-grade, flat digital color fills weren't enough. We mapped a high-dynamic-range image (HDRI) acting as an Environment Map (envMap). The metal surfaces dynamically compute real-time reflections from this hidden studio map as the user rotates the piece.

Here is how we handled dynamic material switching on our loaded GLTF models when a user selects a different metal option in the UI:

// Configuration values for realistic physical materials
const metalOptions = {
  yellowGold: { color: '#f3cf7a', roughness: 0.15, metalness: 1.0, clearcoat: 0.5 },
  whiteGold:  { color: '#e5e5e5', roughness: 0.12, metalness: 1.0, clearcoat: 0.6 },
  platinum:   { color: '#f5f5f5', roughness: 0.08, metalness: 1.0, clearcoat: 0.8 }
};

export const applyCustomMetal = (gltfScene, selectedMetal) => {
  if (!gltfScene) return;

  const config = metalOptions[selectedMetal];

  // Traverse the GLTF node tree to find the metal mesh elements
  gltfScene.traverse((child) => {
    if (child.isMesh && child.name.includes("Ring_Band")) {
      child.material.color.set(config.color);
      child.material.roughness = config.roughness;
      child.material.metalness = config.metalness;
      if (child.material.clearcoat !== undefined) {
        child.material.clearcoat = config.clearcoat;
      }
      child.material.needsUpdate = true;
    }
  });
};

Engineering the Augmented Reality (AR) Features
A 3D viewer on a screen is great, but letting a user project the ring onto their physical environment bridges the physical retail gap entirely. We developed a web-native AR feature that requires no app installation.

To support cross-platform mobile AR (iOS and Android), we implemented a dual-engine workflow leveraging open web standards:

Android (Scene Viewer Integration)
For Android devices, we utilized Google's native AR capabilities. By embedding our optimized GLTF/GLB files into an intent stream, the browser triggers the device's native camera overlay to handle environmental surface plane tracking and anchor the ring in physical space.

I wrapped this logic cleanly using web components to ensure universal mobile responsiveness,
 <model-viewer src="models/custom_ring.glb" ios-src="models/custom_ring.usdz" ar ar-modes="webxr scene-viewer quick-look" camera-controls alt="A 3D customizable ring model with AR preview"> <button slot="ar-button" class="custom-ar-btn"> 💍 View in Your Space (AR) </button> </model-viewer>

Key Takeaways from the Build
Building this platform for our university project proved that advanced interactive graphics and web-native AR are no longer futuristic gimmicks—they are vital modern business assets.

The true challenge of modern frontend engineering isn’t just getting complex pieces of code to run; it's about building efficient pipelines. Mastering asset conversion from heavy CAD files down to lightweight GLTF assets and writing seamless cross-platform AR wrappers ensures that high-fidelity experiences remain accessible to everyone, right from their mobile browser.

Have you ever worked with interactive 3D elements, asset compression pipelines, or WebXR in a production web application? Let's discuss your favorite optimization tricks in the comments below!