WebGL-powered product configurator with real-time 3D rendering, custom shaders, and physics-based interactions for a hardware startup.
Voxel Labs manufactures precision-machined aluminum desk accessories — monitor stands, laptop risers, cable management systems. Their products are beautiful objects, but photography alone couldn't convey the material quality, the weight, or the way light plays across anodized aluminum surfaces. Every competitor in the premium desk accessories space was using the same flat-lay photography on the same white backgrounds.
They needed a way for customers to interact with the products before buying — to rotate them, change finishes, see them on their own desk. Not a generic 3D viewer, but a crafted experience that felt as premium as the products themselves.
I built a custom WebGL product configurator using Three.js with a physically-based rendering pipeline. The 3D models were sourced from Voxel's CAD files and optimized for web delivery — each model is under 2MB with normal maps baked from the high-poly originals, preserving every chamfer and surface detail.
The key technical challenge was material rendering. Anodized aluminum has a distinctive look — it's not chrome-shiny, not matte, but somewhere in between with a subtle grain texture. I wrote custom GLSL fragment shaders that simulate the anodization process: a base metallic layer with a transparent oxide coating that shifts color slightly at glancing angles (the Fresnel effect). The environment map uses an HDRI captured in their actual showroom.
Users can rotate products with pointer drag, zoom with scroll or pinch, and select finishes from a palette. When switching finishes, the material transition is animated — a wave of the new color sweeps across the surface like anodization spreading across metal. It's a detail that takes 400ms but communicates the craft of the process.
The lighting responds to pointer position. Moving your cursor shifts the key light angle, letting you inspect how the finish catches light from different directions. On mobile, gyroscope data drives the same effect — tilt your phone to see how the aluminum reflects.
Performance was non-negotiable. I implemented progressive loading: the page opens with a high-quality static image, the 3D model loads behind it, and the transition to interactive is seamless — the camera angle matches the photo exactly. On devices that can't handle WebGL (flagged by a capabilities check), the experience falls back to a pre-rendered turntable animation.
"We've watched people in our showroom pull out their phones and use the configurator while standing next to the actual product. They trust the digital version — that's how accurate it is."
Product return rate dropped from 12% to 3.5% — customers knew exactly what they were getting. The configurator has been used over 340,000 times since launch. Average time on product pages increased from 28 seconds to 2 minutes 15 seconds. Voxel's Series A investors specifically cited the web experience as a competitive moat.
The AR preview feature, which uses WebXR to place products on the user's desk through their phone camera, is used in 18% of mobile sessions and has the highest conversion rate of any interaction on the site.
Want to see more?
