Sneaker Lab — Real-Time 3D Product Configurator ✦
A product configurator that runs entirely in the browser. The interaction was the easy part. The engineering that mattered was the weight.
3DWebGL
✦The Sneaker Lab configurator — six colourways, three materials and live pricing, all rendered in real time in the browser.
What it does
Orbit the sneaker, switch between six colourways and three materials, export a render, and watch priced options update the cart total as you go. Everything is client side: no page reloads, no plugin, no server round trip between choices.
The weight problem
The source model was 16.7 MB.
On a mid-range Android on mobile data, that is not a slow experience. It is an abandoned one — the visitor leaves before the first frame renders.
I brought it to 2.4 MB. An 86% reduction. Three things got it there:
Measure before touching anything. I ran gltf-transform inspect first to see the split between geometry and textures. On most models the textures are the problem and the geometry is not, and Draco only compresses geometry — so compressing the wrong half and declaring victory is the most common mistake in this work.
Re-author the textures rather than re-compressing them. A 2048px roughness map doing the work of a 512px one is pure waste. Each map got looked at for what it was actually describing before deciding what resolution it needed.
Treat quantisation bits as a dial, not a switch. Draco's defaults are conservative. Positions usually tolerate fewer bits than expected and normals almost always do. I pushed each until banding appeared, then stepped back one.
It holds 60fps on a mid-range Android, not only on a laptop.
The colour problem
Multiplying a tint over a baked texture is the fastest way to make an expensive model look cheap. The weave flattens, and the baked shadows go muddy. A red colourway stops looking like the same shoe in red and starts looking like a red silhouette.
So the tint pass does not touch colour as a single value. It separates luminance from chroma and replaces only the chroma, leaving luminance alone — which is where the weave, the stitching and the baked ambient occlusion actually live. The change is then masked by each texel's own saturation, so parts that were never coloured stay that way: white midsoles stay white, metal eyelets stay metal.
One model, any colourway, at runtime, with the material detail intact. No second texture set, and nothing extra to download.
Why it matters commercially
A configurator that will not load on a phone is a showreel, not a product. The people who abandon it are the ones who were about to buy. That is why the 2.4 MB number is the one I lead with rather than the shader work.
Highlights
