CAFE DESTINO

01Context

A first-person browser recreation of a local café, paired with a guided camera route through the same real-time scene.

02Problem

Build a detailed, warmly lit interior and street frontage that visitors can explore in real time, while keeping navigation responsive across devices.

03Constraints

1. 01Keep storefront, interior, outdoor, and transparent surfaces correctly ordered as the camera crosses the entrance.
2. 02Support detailed shadows, ambient occlusion, reflections, bloom, and anti-aliasing within a real-time frame budget.
3. 03Make first-person movement, seating and menu interactions, scene settings, and the cinematic route share one scene model.
4. 04Keep the in-world television and its positional audio independent from core movement and scene rendering.

04Architecture

Vite serves a modular Three.js WebGL app assembled from the Blender recreation and scene-specific JavaScript modules. A custom scene pass draws interior, storefront, outdoor, and transparent layers into a shared depth buffer before ambient occlusion, bloom, tone mapping, and edge smoothing. Visitors can move through the scene directly or follow a Catmull–Rom camera route. HLS.js provides the in-world television streams.

Layered scene renderer

Orders interior, storefront, outdoor, and transparent geometry so each part is drawn with the lights that can reach it.

Walking and collision

Uses a two-metre spatial grid to shortlist nearby geometry before the existing box and triangle checks resolve movement and contacts.

Cinematic camera route

Moves between authored camera positions and look targets with a smooth curve and eased orientation, including captioned stops inside the café.

Adaptive graphics

Tracks missed frame intervals, lowers render resolution when the frame budget slips, and raises it gradually after a stable period.

Television and scene details

Maps HLS.js channel video onto the café's television, with spatial audio, while separate modules provide textures, signage, and interactive fixtures.

05Decisions

06Trade-offs

07Performance

• ↯Reuse static shadow depth and update only for relevant moving casters.
• ↯Adjust internal render scale in response to measured frame misses instead of altering the camera's motion timing.
• ↯Use a cell-based index to narrow movement and ground queries before the exact collision tests run.

08Challenges

• #Keep transparent glass and the interior visible as the camera moves across the doorway while retaining correct depth and light layering.
• #Balance warm night lighting with readable detail on the signboard, counter, floor tiles, and wall art.
• #Move the cinematic path through the entrance and around the counter without clipping into the glass panel or furniture.

09Learnings

• →Real-time scene quality benefits from separating lighting layers by the surfaces each light can reach.
• →Adaptive resolution can protect motion smoothness while preserving the scene's update timing.
• →A spatial broad phase can reduce collision work without replacing precise geometry checks.

10Retrospective

A future pass could add alternate guided routes for the counter and window seating, while keeping the current street-to-interior path as the default introduction.