VELARI Tipo 12
A real-time WebGL car configurator, designed as an auction catalogue entry rather than a product page.
About this project
A self-initiated piece rather than client work. The brief I set myself was to see whether a real-time WebGL scene could carry the feel of a printed auction catalogue instead of the usual dark, neon-accented product page. The first build was exactly that dark product page, and it looked like everything else. I rebuilt the interface as an auction lot listing: bone paper instead of black, a serif setting the prose and the figures, hairline rules instead of cards, and one spot red used the way a second plate is used in letterpress. The car sits on the same sheet of paper as the type. Switching to night does not turn on dark mode — it moves you into the glossy plate section bound into the middle of a catalogue, and the page follows the car. The rendering is where most of the work went. Paint is a metallic basecoat under a clearcoat, with a metallic-flake normal map generated on a canvas at runtime, because without flake a metallic under an HDRI reads as coloured chrome. Bloom operates on raw linear HDR, where a softbox reflection in clearcoat reaches values of thirty to fifty, so its high-pass shader is clamped — lowering the bloom strength does not fix it, because the failure scales with the environment map rather than the setting. The contact shadow is the model's baked plate re-keyed into a texture whose alpha is inverted luminance, which is what makes its strength and tint animatable at all. Camera presets are expressed relative to the car's measured bounding box and to the direction it actually faces, derived from its wheel groups rather than an assumed axis, so a different model frames itself correctly. Framing the car beside the headline is a lens shift through the projection matrix, not a camera move. Quality is guessed from device signals then corrected from measured frame time, rendering stops entirely once opaque sections cover the canvas, reduced-motion is honoured in both CSS and JavaScript, and a static image replaces the canvas where WebGL is unavailable. There is no build step and no runtime dependency beyond three pinned CDN modules. Every asset is CC0, MIT or Unsplash-licensed, so the project cost nothing to build and nothing to host.


