Annexe A — comment c'est fait
A believable machine, from primitives.
Ondes Audio is a fictional 1974 Parisian synthesizer marque, presented as a print catalogue that happens to contain a living instrument. This annex explains the concept, the design system, and the signature technique — a hardware product built entirely from Three.js primitives, with every surface drawn in code.
01 · Concept & direction
The premise: a boutique analog synthesizer maker that could have existed in 1974 — Moog-era engineering with French salon manners. The design language is a period print catalogue: cream paper, espresso ink, hairline double rules, dot-leader spec tables, plates numbered Planche 01–05, and bilingual copy (French panel labels, English body — an "export edition" printed in Paris).
The tension that makes it work: everything reads as static 1970s print, but the centrepiece is interactive 3D and the catalogue actually makes sound. Technical romance: waveforms described like weather, specifications that end in jokes, a warranty measured in generations.
02 · Palette & type
Bricolage Grotesque — variable: wght 200–800 · wdth 75–100 · opsz 12–96
ONDES 77 — la vague nouvelle
Three voices of warm current.
Karla — body, 200–800 + italic
Karla carries the catalogue prose at 17px and the panel legends on the machine itself — the same family is silk-screened onto the 3D faceplate texture, so the web page and the instrument are typeset as one document.
03 · Signature technique — the procedural ONDES 77
The synthesizer is 100% procedural — no GLB, no modelling software. Walnut end-cheeks are extruded 2D profiles; knobs are lathe geometries; the knurled grip is a deliberately low-poly cylinder with flat shading (18 facets read as ribs). The believability comes from two tricks:
1 — One layout object drives both worlds. A single PANEL table
defines every control's position, label, and tooltip. The same coordinates place the 3D
knobs and draw the silk-screen print onto a 2200×1000 canvas that becomes the
faceplate texture — so legends always sit exactly under their knobs, like a real screen-printed panel:
// plate local space: x ∈ [-2.2, 2.2], z ∈ [-1, 1] → canvas 2200×1000
const px = (x) => (x + 2.2) * 500, pz = (z) => (z + 1.0) * 500
// the same entry prints the legend AND positions the mesh
{ id: 'fc', kind: 'knob', x: -0.34, z: -0.38, label: 'FRÉQUENCE',
name: 'Filtre — Fréquence',
tip: 'Where the light enters. Close it and the room gets warm.' }
// knobs: a lathe profile — skirt, ribbed grip, domed cap
const body = new THREE.Mesh(new THREE.LatheGeometry(profile, 44), bakelite)
const grip = new THREE.Mesh(
new THREE.CylinderGeometry(0.117, 0.121, 0.068, 18), bakeliteDark)
grip.material.flatShading = true // 18 facets ≈ knurling
2 — Studio lighting, not game lighting. A three-point rig (warm key with soft shadows, cool fill, bright rim for the walnut edge) over a PMREM room environment, ACES tone mapping, and a painted radial-gradient contact shadow. The key light's colour temperature lerps warm→cool as you scroll from the salon into the technical plates. Scroll drives the machine between beauty poses; a constrained inertial drag lets you turn it in your hands, and a raycaster turns every control into a hotspot with its own one-line poem.
The VU needle is real: when a drone plays, the Web Audio analyser's RMS drives the needle (fast attack, slow release, a little tremble at high level), the panel lamp warms up — and the SECTEUR switch physically throws itself on. Press the mood again and the switch drops, the lamp cools, the needle falls to rest. Clicking the 3D switch while a drone plays cuts the power honestly. The machine listens to itself.
04 · Asset pipeline
Three images were generated (Higgsfield MCP, model nano_banana_pro, 2K),
then optimized to responsive WebP with sharp. The instrument itself ships no textures —
walnut grain, faceplate print and VU dial are drawn on canvases at runtime.
05 · Iteration diary
Pass 1 — structure
The QA harness runs WebGL on a software rasterizer, and one stalled full-page capture can kill the GL context and blocklist WebGL for every later viewport in the same browser. Hardened the site against hostile GPUs: a probe with retry, a stub fallback (the catalogue works with no WebGL at all), a soft-GL mode that renders on demand and blits frames to a 2D canvas so screen captures never touch the GL surface. Also: killed CSS smooth-scroll (it made programmatic screenshots land mid-glide), compacted the mobile page by ~1,150px, and re-posed all three desktop beauty angles.
Pass 2 — craft
Typographic and layout details: a superscript that escaped its flexbox, nav links that wrapped mid-word at tablet width, outline buttons that lost contrast when the walnut passed beneath them (buttons are paper now). Scripted interactive verification: drones toggle exclusively, the analyser feeds the needle (RMS 0.26 while ORAGE plays), drag-orbit clamps at ±0.85 rad, knob tooltips raycast correctly, reduced-motion loads instantly with everything legible.
Pass 3 — the fine-toothed comb
The weakest moment was the intro: a plain cream field. It is now a print proof-sheet — registration crop-marks, the wordmark, a rule that draws itself, the catalogue line — and it starts instantly, before the machine finishes building. Added the detail I wanted to be remembered: press a mood and the machine's SECTEUR switch throws itself, the témoin lamp warms, the needle wakes. Added the printed cue beside the machine so nobody misses it.