What it is

A sneaker configurator for Sola, a fictional running brand. You style nine parts of the Sola 01 Runner (upper, toe cap, eyestays, heel counter, side wave, lining and collar, laces, midsole, outsole), each with its own materials and colours, start from one of five colourways, pick an EU size, then share the build as a link, save a studio image, or see the exact pair at true size on your floor in AR.

Engineering decisions

• There is no model file. The shoe is built in code at load time, in metres at EU 42 (29 cm). The upper is one parametric surface over the footprint: one coordinate runs round the outline from the heel, the other climbs from the sole edge to a topline that dips under the ankle and opens into the lacing gap. The front of the last is rounder than the back, so the toe box tapers instead of looking like a box.
• Each overlay panel (toe cap, heel counter, eyestays, side waves) is its own small grid over a region of that surface, lifted off it along the normal and given a cut edge wall, so panels read as stacked leather rather than paint. Triangles are turned to agree with the computed normals, so every panel shades correctly whatever its region's direction.
• Midsole and outsole are lofts round the footprint with toe spring, a flared base, a bulging wall and a sculpted groove at the heel. The tongue and the heel pull tab are strips with thickness along curves; the padded collar, eyestay bindings and laces are tubes. Eyelets sit on the surface at fixed spots, the laces cross between them and finish in a bow with aglets.
• Detail pass: every overlay panel (toe cap, heel counter, eyestays, side waves) carries rows of tonal stitches, small dashes laid along an inset path over the surface and merged into one thread mesh per part (darker thread on light parts, lighter on dark). The midsole has a crisp sidewall line all round and a heel that flares at the ground, wrapped by a heel clip in the heel counter's material; the tongue is thicker and sits lower behind the collar.
• Materials are generated on canvases: engineered mesh holes, rib knit, leather grain, suede nap, reflective dots, foam speckle, sidewall ribs and a hex tread. UVs are in metres, so every texture has a real tile size. Suede uses sheen, patent a clear coat, reflective a metallic finish. Each part has one physical material that is restyled and recoloured in place, so a change never rebuilds geometry.
• Lighting is a room environment baked once through PMREMGenerator plus a key and a rim light, with a soft shadow on the high tier and a contact shadow texture on both tiers.
• Picks live in a pure module (config.ts): parts, materials, colours, colourways, price, size scaling and a two-characters-per-part share code. The address bar always holds the build and size, so a QR code or a copied link opens the same pair. Unit tests cover the code round trip, fallbacks and prices.
• Clicking the shoe raycasts to the part under the pointer and opens it in the list. Opening a part glides the camera to the view that shows it and gives that part a short glow.
• AR reuses the shared XR helpers from Kasvi and Lunde: WebXR immersive-ar with hit test, anchors and light estimation on Android, and a USDZ of the current build exported in the browser for AR Quick Look on iPhone. The model is scaled to the chosen size first.
• Save image renders the current view and composes it with the name, build code, size and price on a 2D canvas.

Performance

• Rendering is on demand: frames are drawn only while the camera glides, a colour fades or a part glows, after 5 s idle there is a slow sway, and the loop stops while the page is hidden or the viewer is off screen.
• The light tier uses fewer segments, no shadow maps, no sheen or clear coat and a lower pixel ratio.