Felipe Rodriguez
Press F to flip
WebGL, live on every venue site

The venue floor, in 3D

Every venue site on By Flip's Design draws its floor in 3D in the browser, from one public read of the API.

The Concourse Project's floor drawn in 3D: six lit sections on a dark street grid
The Concourse Project's floor, drawn in WebGL from the API's 21 zones and 6 sections.
Every venue site on By Flip's Design draws its floor like this, in the browser.
Open the live floor

What a guest sees

A guest opens a venue's Floor page and gets the room as a volume they can turn: the drawn sections, the stages and bars, the restrooms and exits, and the street outside. One finger orbits, a pinch zooms and two fingers pan, on a phone or at a desk.

How it's built

The board is one component in the shared design system, built on three.js, React Three Fiber and drei. Venue-map data goes in and clicks come out. It never fetches and never holds app state, so it draws any venue's floor with no code written for that venue.

The 3D renderer ships on its own import path, so a page that never shows the floor never downloads it.

Where the data comes from

The floor is one anonymous, cacheable read: GET /api/v1/businesses/public/{id}/venue-map. It carries sections, zones, paths and vendor placements, and never any operations data: no registers, cash or thresholds.

A bug worth telling

This read used to share a rate limit built for anonymous writes. Every venue site renders on the server from one address, so the whole fleet shared one visitor's budget, and a fully drawn floor told guests it wasn't drawn yet. It now has its own read limit of 600 requests a minute, and the page tells an unreachable map apart from an empty one.

Renderer
three.js, React Three Fiber and drei
the shared design system's venue3d module
Gestures
One finger orbits, a pinch zooms, two fingers pan
the venue3d gesture contract
Read limit
600 requests a minute per client
the API's public-read policy
All work