Work archive05 · 3D web / Music product
Ongoing product · React Three Fiber · Blender
JazzTorA Toronto jazz listening room
A real-time 3D room for Toronto jazz: a turntable you actually play, a map of the city’s jazz venues, and a museum you walk into. Every object is modelled in code.
Product idea
Music apps are lists. Listening is a room.
JazzTor swaps the streaming dashboard for one continuous 3D room. Pull a record, drop the needle, and the music keeps playing as the camera glides to the map table or into the museum.
The turntable, cabinet, lamp, console, and curtains are real geometry generated by Blender scripts—never a flat picture pretending to be 3D.
Highlights
Tactile, cultured, and fast enough to feel real.
A turntable you actually operate.
Pull a sleeve, place the record, swing the tonearm, drop the needle—or press one hidden play button. Rotation, progress, and VU meters stay in sync.
Toronto’s jazz map on a brass-railed table.
Real streets, shoreline, and parks from OpenStreetMap, with venues you can filter by live room, concert hall, or historic site.
A museum you walk into—freely.
Walk with WASD or a touch stick, with collisions and a floor-plan minimap. Five legendary horns—Miles Davis, Coltrane, Armstrong, Gillespie, and Charlie Parker—sit in the room and the galleries, each with a sourced placard.
Smooth on a laptop, rich on a gaming PC.
The app picks a quality tier from the GPU, then steps down if frames drop: 75 fps on an RTX 2080 SUPER, 47–64 fps on Intel integrated graphics.
How I used AI
AI as the production team. Me as the director.
Design bible first
Wrote the visual rules and 12 image-prompt studies before any code, so every agent session aimed at the same room.
Agents write the pipeline
Directed AI coding agents to build the Blender generation scripts and the React scene, then reviewed each render against the bible.
Bugs become written fixes
Turned visual defects—like an upside-down city mirrored in the lake—into specific fix briefs, then re-ran the same 78 checks.
Running build
Day, dusk, and the rooms in between.
Technical foundation
Procedural 3D, compressed for the web.
- Front end
- React · react-three-fiber · three.js · zustand
- 3D pipeline
- Blender scripts → GLB → Draco geometry + KTX2 textures
- Map data
- OpenStreetMap (Overpass) roads, shoreline, and parks · Nominatim geocoding
- QA
- Headless Edge via Playwright · 29 QA + 49 functional checks on two GPUs
Ongoing project
A working local build, not a public service yet.
JazzTor runs locally in the browser. Event listings on the map are marked as samples until a live events source is connected, and only licensed recordings play. The instruments are 3D interpretations made from photographs, not scans, and each placard says so.