How It Works
Not a Catalog, a Design Engine
Traditional configurators work like a menu: pick option A, swap to image B. Behind the scenes, every combination is a pre made 3D model or a pre rendered photograph. Adding a new option means creating new assets for every combination. 10 profiles × 3 metals × 7 finishes = 210 models to manage, before you add diamonds.
The Wedding Band Builder works differently. There are no pre made ring models. Instead, the engine builds every ring from scratch, in real time, in the customer's browser.
The Parametric Pipeline
1. Profile Shape → 3D Geometry
Every ring starts as a 2D cross section curve: the profile. D-Shape, Flat, Comfort Fit, Knife Edge, and others are mathematical curves, not 3D files. The engine extrudes this curve along a circular path at the customer's chosen ring size, producing the 3D geometry on the fly.
When the customer adjusts the width slider, the profile stretches. When they change the ring size, the circular path scales. The 3D ring updates in milliseconds.
Diagram
2D profile curve → extrusion along circular path → 3D ring mesh
2. Materials & Finishes
Metals aren't texture swaps. Each material is a PBR (physically based rendering) material with calibrated reflectance, roughness, and color, tuned to match real gold alloys. White gold has the subtle warmth of palladium-alloyed gold. Rose gold has the pink hue of copper content. Diamonds use real time refraction through computed facets, not a static sparkle texture.
Surface finishes modify the material's surface properties: hammered creates displacement, brushed adds directional micro-texture, polished increases reflectance. These combine naturally with any metal.
3. Multi Color
Two-tone and three-tone rings aren't painted on. The engine mathematically divides the ring geometry into zones and assigns different materials to each zone. The separation is in the geometry itself, producing clean, accurate boundaries, just like a real manufactured ring.
4. Diamonds
Diamond settings are generated algorithmically. The engine calculates how many stones fit in the chosen span and spacing, positions them around the band, and renders each one with accurate brilliance. Changing the setting type from Channel to Prong rearranges the entire configuration instantly.
5. Pricing
The price isn't looked up from a table. It's calculated from the ring's actual 3D volume:
- The engine computes the ring's volume in cubic millimeters using the real geometry
- Volume is multiplied by the metal's density to get weight in grams
- Weight is multiplied by the metal's price per gram
- Diamond cost is calculated from actual carat weight (derived from stone diameter)
- Making charges, setting labor, finish surcharges, and markup are applied
When a customer widens the band by 0.5mm, the price changes because the volume changed, not because a lookup table said so.
What This Means for Your Business
No 3D Model Management
You don't upload, version, or maintain thousands of 3D ring models. You configure options (which profiles, metals, and finishes to offer) and the engine generates every possible combination.
Large Design Space from Finite Configuration
8 profiles × 3 metals × 7 finishes × 3 partitions × 4 diamond settings, plus continuous dimension parameters. Each combination is generated, priced, and spec-sheet-ready. You don't predefine them. They exist on demand.
Real Dimensions for Manufacturing
Because every ring is actual 3D geometry (not a photograph), the engine knows the exact width, height, inner diameter, and volume in real millimeters. The spec sheet reports manufacturing-ready dimensions, not approximations from a size chart.
Rendering Quality
The engine uses physically based rendering (PBR) with image-based lighting (IBL), real time reflections, and sub pixel anti-aliasing. The scene updates in real time as the customer interacts.
Under the Hood
For technical teams evaluating the platform:
- Engine: WebGL 2.0, runs in all modern browsers without plugins
- Rendering: Physically based (PBR) with IBL, real time shadows, and post-processing
- SDK: TypeScript, framework agnostic, ~50KB gzipped (excluding 3D engine)
- Integration: script tag, iframe, or npm package
- API: event-driven, supports headless mode for fully custom UIs
- Performance: 60fps on modern devices, adaptive quality on mobile
→ Quick Start to add the configurator to your site in 5 minutes