Page 1 of 14
System Requirements Document for fierce-project
1. Introduction
fierce-project is an immersive VR experience that turns a single photograph of the Annaba building facade (الواجهة البحرية لمبنى عنابة) into a living, navigable real-time 3D scene. The product intent is literal and fidelity-bound: the glass facade, its mullion grid, the lighting, and the signage plate must move and read exactly as they appear in the source photograph, while the camera orbits the building as a continuous hero motion on a VR platform.
The audience is twofold: remote visitors/clients who want to see the building without being physically present, and a presenter (the project owner) who runs the experience live in front of an audience. Both need the same thing — a credible, awe-inducing, interactive twin of the real building where the glass, the light and the sign are the artefact, and the motion is the material.
Page 2 of 14
2. System Overview
The current delivery is a first-party, browser-delivered WebGL experience with four application-owned surfaces: a public Landing entry, the VR Tour stage where the 3D building lives, and two information destinations — Sign Info and Entrance Info — reached by interacting with the signage plate and the entrance canopy inside the scene. All four surfaces are publicly reachable (access_requirement: none); no account, login, or identity continuity is required or inferred, because the accepted journeys are single-session, non-durable viewings with no commitment, entitlement, or value transfer bound to a participant.
Actors are the two accepted human personas (remote visitor/client, presenter) plus the VR device/platform as a non-persona runtime actor. The system reconstructs the Annaba facade as a real-time 3D scene with photographic texture maps for glass, stone and sign; runs a continuous camera orbit; and exposes exactly two interactive hotspots (signage plate, entrance canopy) that open information.
Narrow exclusions: this is not a SaaS dashboard, not a game, and not a generic product UI. No blue–indigo-on-white template. No abstract or invented building — fidelity to the photograph is non-negotiable. No dense sci-fi HUD telemetry. No account management, no multi-user collaboration, no editing of the building, and no content beyond the sign and entrance information.
Page 3 of 14
2a. Product Interpretation and Delivery Boundary
The experience is delivered as a first-party web application that runs a real-time WebGL scene and enters VR on a compatible headset. The public entry (Landing) is anonymously reachable and explains the experience before it starts; the VR Tour stage and the two info destinations are also anonymously reachable, because nothing in the accepted behavior requires a durable, privately owned, resumable state. There is no sign-in, no invitation, no provisioning, and no provider-owned identity surface.
Current boundary: the four surfaces above, the photo-faithful 3D reconstruction, the camera orbit, the two hotspots and their information, and the VR runtime. Future boundary: anything not listed as current — additional buildings, multi-user sessions, saved tours, analytics, or content authoring — is out of scope for this generation and must not appear in current pages or acceptance.
2b. Source Content Inventory
The authoritative content source is the photograph of the Annaba building facade. Verified factual entities and details to preserve:
- Building identity / signage text: «الواجهة البحرية لمبنى عنابة» (the sea-facing facade of the Annaba building), rendered as a large white Arabic wordmark across the glass band, with a small blue emblem at the right end of the wordmark.
- Facade structure: a curved, dark-clad upper fascia band with recessed circular downlights; below it a continuous glazed band (the glass facade) with a visible vertical mullion grid; diagonal light-coloured struts/braces crossing the glass in a repeating pattern; a lower dark-clad band with a second row of recessed circular downlights.
- Entrance zone: a projecting entrance canopy/box with a louvred grille panel, supported by dark piers, with a glazed storefront beneath and a metal handrail/balustrade at the lower right.
- Lighting: warm-white recessed downlights in the dark fascia bands; daylight sky reflected in the glass; interior ceiling lights visible through the glazing.
- Sky/context: pale blue-grey daylight sky above the building.
- Reflections: the glass reflects the sky and surrounding structures, including a tall tower reflection visible in the lower-left glazing.
2c. Page Content and Component Coverage
Page 4 of 14
Landing
- Information/state: the public entry to the experience — what the VR tour is, that it is the Annaba building facade, who it is for (remote visitors and presenters), and that the scene moves with a camera orbit and two interactive hotspots.
- Primary action: «ابدأ الجولة» (start the tour) — the single ember-orange pill CTA cut into a hairline teal outline, entering the VR Tour.
- Supporting actions: a short "what you will see" cue (glass facade, lighting, signage); a VR-compatibility note (headset/platform availability).
- Domain entities: the building (Annaba facade), the tour, the two hotspots (sign, entrance).
- Component responsibilities: full-bleed near-black 3D stage with the building slightly right of centre; asymmetric left type column (max 46ch) with the oversized RTL headline «المبنى كما هو. حيّاً.»; bottom HUD strip with three tabular readouts (facade panels, orbit angle, hotspots) in IBM Plex Mono; the CTA pill.
- States: loading (scene/texture load with a teal progress tick), empty (no scene yet — headline + CTA only), success (scene live, CTA active), error (scene failed to load — a still-image fallback of the photograph with a retry), recovery (retry reloads the scene; reduced-motion shows the static framed view).
VR Tour
- Information/state: the main stage — the photo-faithful 3D twin of the Annaba facade with its glass mullion grid, diagonal struts, signage plate, entrance canopy, and lighting; the camera orbits the building on a smooth spline with subtle handheld float.
- Primary action: enter VR on a compatible headset; orbit the camera around the building.
- Supporting actions: orbit-speed control; hotspots toggle; the single "photo ↔ data" morph toggle; gaze/hover on the two hotspots.
- Domain entities: the building scene, the camera orbit, the two hotspots, the photo/data morph state.
- Component responsibilities: the canvas IS the page (100dvh, no scroll); floating bottom control bar (orbit speed, hotspots toggle, enter VR); right-side collapsible info drawer; circular gaze reticles (44px); the 14s caustic light-sweep shader on the glass panels; the particle field sampled from the facade's own reflection map for the morph.
- States: loading (scene + texture maps loading), empty (scene not yet started), success (orbit running, hotspots pulsing on the 2.4s breath), error (WebGL/VR unavailable — still-image fallback with a message), recovery (fallback view, retry, or reduced-motion static framed view).
Sign Info
- Information/state: the information associated with the signage plate — the wordmark «الواجهة البحرية لمبنى عنابة» and its context on the facade.
- Primary action: read the sign information; return to the VR Tour.
- Supporting actions: back to the scene; the sticky 3D thumbnail of the sign hotspot.
- Domain entities: the signage plate, its text, its position on the facade.
- Component responsibilities: 720px-max reading column on the dark ground; sticky 3D thumbnail of the hotspot above the text; tabular metadata in IBM Plex Mono; Arabic copy in IBM Plex Sans Arabic.
- States: loading (thumbnail loading), empty (no info available), success (info displayed), error (thumbnail failed — text still shown), recovery (retry thumbnail; text remains readable).
Page 5 of 14
Entrance Info
- Information/state: the information associated with the entrance — the canopy, louvred grille, piers, glazed storefront and handrail as seen in the photograph.
- Primary action: read the entrance information; return to the VR Tour.
- Supporting actions: back to the scene; the sticky 3D thumbnail of the entrance hotspot.
- Domain entities: the entrance canopy, its structural elements, its position on the facade.
- Component responsibilities: 720px-max reading column on the dark ground; sticky 3D thumbnail of the hotspot above the text; tabular metadata in IBM Plex Mono; Arabic copy in IBM Plex Sans Arabic.
- States: loading (thumbnail loading), empty (no info available), success (info displayed), error (thumbnail failed — text still shown), recovery (retry thumbnail; text remains readable).
Page 6 of 14
3. Functional Requirements
FR-1 — Photo-faithful 3D reconstruction of the Annaba facade (explicit)
As a remote visitor/client, I should see the Annaba building facade reconstructed in 3D with exactly the details of the source photograph — the glass facade, its mullion grid, the diagonal struts, the lighting, and the signage plate — so that the scene reads as the actual building.
- Actor: remote visitor/client; presenter.
- Trigger/input: entering the VR Tour.
- Observable result: the 3D scene shows the glass facade, mullion grid, struts, lighting and signage matching the photograph.
- Access state: public, no account.
- Failure/recovery: if the scene or texture maps fail to load, a still-image fallback of the photograph is shown with a retry.
- Continuation: the visitor proceeds to orbit the camera or interact with hotspots.
FR-2 — Continuous camera orbit around the building (explicit)
As a remote visitor/client, I should have the camera orbit around the building as it is, so that I can see the facade from every angle.
- Actor: remote visitor/client; presenter.
- Trigger/input: the tour running; orbit-speed control.
- Observable result: the camera moves on a smooth spline around the building with subtle handheld float, revealing the same details from every angle.
- Access state: public, no account.
- Failure/recovery: if motion is unavailable, a static framed view is shown.
- Continuation: the visitor continues the orbit or opens a hotspot.
FR-3 — Interactive signage hotspot (explicit)
As a remote visitor/client, I should be able to click/tap the signage plate in the scene to reveal information about it.
- Actor: remote visitor/client; presenter.
- Trigger/input: gaze/hover/click on the signage plate hotspot.
- Observable result: the hotspot pulses on a 2.4s breath, expands on gaze/hover with a 180ms ease-out, and opens the Sign Info destination.
- Access state: public, no account.
- Failure/recovery: if the hotspot does not register, the visitor can retry gaze/click; the scene remains usable.
- Continuation: the visitor reads the sign information and returns to the tour.
FR-4 — Interactive entrance hotspot (explicit)
As a remote visitor/client, I should be able to click/tap the entrance in the scene to reveal information about it.
- Actor: remote visitor/client; presenter.
- Trigger/input: gaze/hover/click on the entrance canopy hotspot.
- Observable result: the hotspot pulses on a 2.4s breath, expands on gaze/hover with a 180ms ease-out, and opens the Entrance Info destination.
- Access state: public, no account.
- Failure/recovery: if the hotspot does not register, the visitor can retry gaze/click; the scene remains usable.
- Continuation: the visitor reads the entrance information and returns to the tour.
FR-5 — VR platform delivery (explicit)
As a remote visitor/client, I should be able to run the experience on a compatible VR device and platform.
- Actor: remote visitor/client; presenter.
- Trigger/input: entering VR from the VR Tour.
- Observable result: the scene runs in VR on a compatible headset.
- Access state: public, no account.
- Failure/recovery: if VR is unavailable, the experience remains usable in the browser with a still-image fallback.
- Continuation: the visitor continues the tour in VR or in the browser.
FR-6 — Presenter live demonstration (explicit)
As a presenter (project owner), I should be able to run the moving, interactive scene reliably during a live presentation.
- Actor: presenter.
- Trigger/input: starting the tour and running it in front of an audience.
- Observable result: the VR experience runs live and credibly, reflecting the glass facade, lighting and signage.
- Access state: public, no account.
- Failure/recovery: if the scene fails mid-presentation, the still-image fallback keeps the presentation readable.
- Continuation: the presenter resumes the tour or continues with the fallback.
FR-7 — Photo ↔ data morph (explicit, from creative direction signature moves)
As a remote visitor/client, I should be able to press the HUD's single toggle to dissolve the building into a particle field sampled from its own reflection map and reassemble it.
- Actor: remote visitor/client; presenter.
- Trigger/input: the HUD morph toggle.
- Observable result: the facade dissolves into a particle field of its own geometry and reassembles, proving fidelity.
- Access state: public, no account.
- Failure/recovery: if the morph is unavailable, the photo-faithful state remains.
- Continuation: the visitor toggles back to the photo-faithful state.
FR-8 — Live HUD readouts (explicit, from creative direction signature moves)
As a remote visitor/client, I should see live tabular readouts (facade panels, orbit angle, hotspots) that update as the camera moves.
- Actor: remote visitor/client; presenter.
- Trigger/input: camera movement.
- Observable result: the bottom HUD strip numerals update in IBM Plex Mono.
- Access state: public, no account.
- Failure/recovery: if readouts are unavailable, the scene remains usable.
- Continuation: the visitor continues the orbit.
Page 7 of 14
4. User Personas
زائر / عميل يشاهد المبنى عن بُعد (Remote visitor / client)
- Product context: someone exploring the Annaba building facade remotely through a live VR experience, without being physically present.
- Primary goal: watch the scene with the camera orbiting the building at exactly the details of the photograph, and interact with scene elements (the sign or the entrance) to reveal information.
- Distinct accepted responsibilities: starting the tour from the Landing; orbiting the camera around the building; selecting the signage or entrance hotspot; reading the resulting information; returning to the tour.
- Relevant inputs/decisions: whether to start the tour; which hotspot to open; whether to toggle the photo ↔ data morph; whether to enter VR.
- Interactions with other accepted participants: shares the same scene and hotspots with the presenter; the presenter may be running the tour while the visitor watches.
- Observable success: a clear, interactive presentation of the building without needing to attend in person.
العارض التقديمي (صاحب المشروع) (Presenter / project owner)
- Product context: someone using the experience to present the building live in front of others.
- Primary goal: run the moving, interactive scene reliably during a presentation.
- Distinct accepted responsibilities: launching the tour; keeping the orbit and hotspots running; demonstrating the sign and entrance interactions; recovering quickly if the scene fails.
- Relevant inputs/decisions: when to start the tour; which hotspot to demonstrate; whether to use the morph toggle; whether to enter VR for the audience.
- Interactions with other accepted participants: presents the same scene to the remote visitor/client; both see the same hotspots and information.
- Observable success: a live, credible VR experience that reflects the glass facade, lighting and signage.
5. Core User Flows
Page 8 of 14
Flow A — Remote visitor starts and explores the tour
- The remote visitor/client opens the Landing page (public, no account).
- The Landing shows the full-bleed near-black 3D stage with the Annaba building slightly right of centre, the oversized RTL headline «المبنى كما هو. حيّاً.», and the bottom HUD strip.
- The visitor reads the short cue about the glass facade, lighting and signage, and the VR-compatibility note.
- The visitor selects the ember-orange pill «ابدأ الجولة».
- The VR Tour opens; the scene loads the photo-faithful 3D twin of the facade with its mullion grid, struts, signage plate and entrance canopy.
- The camera begins its smooth spline orbit around the building with subtle handheld float; the glass panels run the 14s caustic light-sweep shader.
- The visitor adjusts orbit speed from the floating bottom control bar and watches the HUD readouts (facade panels, orbit angle, hotspots) update.
- The visitor optionally presses the HUD morph toggle; the facade dissolves into a particle field sampled from its own reflection map and reassembles.
- The visitor continues the orbit or moves to a hotspot.
Flow B — Remote visitor opens the signage information
- From the VR Tour, the visitor gazes/hovers on the signage plate hotspot.
- The hotspot pulses on its 2.4s breath and expands with a 180ms ease-out.
- The visitor selects the hotspot; the Sign Info destination opens.
- Sign Info shows the sticky 3D thumbnail of the sign hotspot above a 720px-max reading column with the wordmark «الواجهة البحرية لمبنى عنابة» and its context.
- If the thumbnail fails to load, the text remains readable and a retry is offered.
- The visitor returns to the VR Tour and continues the orbit.
Page 9 of 14
Flow C — Remote visitor opens the entrance information
- From the VR Tour, the visitor gazes/hovers on the entrance canopy hotspot.
- The hotspot pulses on its 2.4s breath and expands with a 180ms ease-out.
- The visitor selects the hotspot; the Entrance Info destination opens.
- Entrance Info shows the sticky 3D thumbnail of the entrance hotspot above a 720px-max reading column describing the canopy, louvred grille, piers, glazed storefront and handrail.
- If the thumbnail fails to load, the text remains readable and a retry is offered.
- The visitor returns to the VR Tour and continues the orbit.
Flow D — Presenter runs a live demonstration
- The presenter opens the Landing page (public, no account) in front of an audience.
- The presenter selects «ابدأ الجولة» to open the VR Tour.
- The presenter enters VR on a compatible headset and lets the camera orbit the building.
- The presenter demonstrates the signage hotspot, opening Sign Info, and the entrance hotspot, opening Entrance Info.
- The presenter optionally uses the morph toggle to show the photo ↔ data gesture.
- If the scene fails mid-presentation, the still-image fallback of the photograph keeps the presentation readable; the presenter retries or continues with the fallback.
- The presenter ends the demonstration and returns to the Landing or closes the experience.
Page 10 of 14
6. Visuals Colors and Theme
The creative direction is authoritative: Refik Anadol — data made physical, a real-time 3D building that breathes like an art installation. Dark, luminous, cinematic, museum-grade. The source photograph is the ground truth for the building; the light is the material.
Palette (dark mode):
- Background:
#05070C (deep near-black navy, ~70% of every screen)
- Surface:
#0E141E (panels, info drawers, HUD chips, 12–14%)
- Text:
#F2F5F8 (all body and headline text, ≥7:1 contrast on the ground)
- Primary:
#2FD4C6 (luminous teal — glass reflections, facade edge-lines, gauge strokes, active gaze reticles)
- Accent:
#FF7A2F (ember orange — signage hotspot, «ابدأ الجولة» control, one progress tick; never more than ~3% of a screen)
- Muted:
#7E8CA0 (metadata, timestamps, inactive labels only — never body copy)
- No blue–indigo anywhere; the light is teal and ember, like a night facade photographed long-exposure.
Typography:
- Headings: Space Grotesk, weight 500–600, tracking -0.02em; uppercase for HUD micro-labels at 11–12px with 0.18em tracking; display headlines mixed-case at huge scale with tight leading (0.95). Never bold-black.
- Arabic copy (العنوان، معلومات اللافتة، معلومات المدخل): IBM Plex Sans Arabic at matching weights so RTL and LTR sit in one system.
- Body: IBM Plex Sans.
- Scale: 1.333 modular — display 44px mobile / 72px tablet / 104px desktop; h2 28/40/56; h3 20/24/28; body 16/17/18 with 1.65 line-height; HUD label 11/12/12 uppercase; data numerals tabular via IBM Plex Mono at 13/14/14.
Shape language: soft-edged glass slabs and thin luminous strokes; 14–18px radii on info panels; 1px #2FD4C6 at 35% opacity as panel borders; hairline 1px rules at 12% white for data rows; circular gaze reticles (44px) and dial rings echoing instrument bezels. No drop-shadow stacks — depth comes from glow (0 0 40px rgba(47,212,198,0.18)) and darkness. Section boundaries are full-bleed horizontal light-lines, never rounded card grids.
Layout: single-viewport stage logic. Landing: full-bleed dark scene with an asymmetric left column of type (max 46ch) and a bottom HUD strip; the 3D facade bleeds behind and past the type. VR Tour: the canvas IS the page — 100dvh, no scroll, with a floating bottom control bar (orbit speed, hotspots toggle, enter VR) and a right-side collapsible info drawer. Sign Info and Entrance Info are 720px-max reading columns on the dark ground with a sticky 3D thumbnail of the hotspot above the text. Everything collapses to one column at 375px: type 44px max, drawer becomes a bottom sheet at 88dvh, control bar becomes a 3-icon row with 48px touch targets.
Imagery: the source photograph is the ground truth — the Annaba glass facade, its mullion grid, the signage plate and the entrance canopy reconstructed as a real-time 3D scene with photographic texture maps for glass, stone and sign. Additional imagery is generative: particle fields sampled from the facade's own reflection map, light-flow ribbons tracing the building's silhouette, and topographic light-lines on the ground plane. No stock people, no clip art, no gradient blobs.
Page 11 of 14
7. Signature Design Concept
The first screen is a full-bleed, near-black 3D stage: the Annaba building sits slightly right of centre, lit only by its own glass reflections in luminous teal, occupying ~62% of viewport height, with a slow light-sweep crossing the facade. On the left, an oversized Space Grotesk headline «المبنى كما هو. حيّاً.» set at 104px desktop / 44px mobile, flush-left, overlapping the building's negative space but never covering it at 375px. Below it a single ember-orange pill «ابدأ الجولة» cut into a thin teal outline. A bottom HUD strip shows three tabular data readouts (facade panels, orbit angle, hotspots) in IBM Plex Mono. No centred stack, no subheadline paragraph, no blue button, no blob.
The signature moves are: a real-time 3D twin of the Annaba facade whose glass panels run a 14s caustic light-sweep shader, with the photo's exact mullion grid, sign and entrance canopy texture-mapped so the camera orbit reveals the same details from every angle; a photo ↔ data morph that dissolves the building into a particle field sampled from its own reflection map and reassembles it; gaze-and-hover hotspots on the signage plate and entrance canopy that pulse on a 2.4s breath and expand into a 1px teal-bordered glass drawer with tabular metadata in IBM Plex Mono; and the single ember-orange pill CTA as the only warm colour on the entire first screen.
8. Interaction Model & Motion Direction
Interaction Model: Animated
Motion Tempo: cinematic
Hero Dimensionality: webgl
Page 12 of 14
Landing Hero Motion Brief
- Focal subject: the Annaba building facade as a real-time 3D twin, slightly right of centre, lit by its own glass reflections in luminous teal, with a slow light-sweep crossing the facade.
- Input → transformation → outcome thesis: as the camera orbits and the light-sweep crosses the glass, the facade's mullion grid, signage plate and entrance canopy stay photo-faithful while the light moves across them — the building reads as the actual structure, alive.
- Motion vocabulary: cinematic and continuous — a 14s caustic/reflection shader sweeping across mullions, a smooth spline camera orbit with subtle handheld float, a photo ↔ data morph where the facade dissolves into a particle field of its own geometry and reassembles, and hotspots pulsing on a 2.4s breath and expanding on gaze/hover with a 180ms ease-out.
- Composed first frame: full-bleed near-black stage; building slightly right of centre at ~62% viewport height; oversized RTL headline «المبنى كما هو. حيّاً.» flush-left at 104px desktop / 44px mobile; ember-orange pill «ابدأ الجولة» cut into a hairline teal outline; bottom HUD strip with three tabular readouts in IBM Plex Mono.
- Reduced-motion state: all loops stop and become static framed views, with a visible still-image fallback of the photograph.
Landing Hero 3D Scene Brief — DIRECTION-DERIVED
A crafted real-time WebGL/R3F scene of the Annaba facade: the glass band with its mullion grid and diagonal struts, the dark fascia bands with recessed downlights, the signage plate with the wordmark «الواجهة البحرية لمبنى عنابة», and the entrance canopy with its louvred grille and piers — all texture-mapped from the source photograph. The scene shows the product's defining state: the photo-faithful building under a slow teal light-sweep, with the camera orbit as the hero motion and the two hotspots as the only interactive objects.
9. Non-Functional Requirements
- Fidelity: the scene must match the details of the source photograph precisely — glass facade, mullion grid, struts, lighting, signage plate, entrance canopy. (explicit)
- VR platform: the experience is built for a VR platform and must run on a compatible VR device. (explicit)
- Performance: the real-time scene must sustain a smooth camera orbit and the 14s shader loop without stutter, since the presenter runs it live. (required_inference — needed for the accepted live-demonstration outcome)
- Accessibility: all readable text, the sign, the entrance and every control stay whole and inside the viewport at 375px, 768px and 1280px; under
prefers-reduced-motion all loops stop and a still-image fallback is shown. (explicit, from creative direction)
- Fallback: a still-image fallback of the photograph must be available whenever the 3D scene or VR runtime is unavailable. (required_inference — needed for the accepted failure/recovery outcome)
- No account requirement: all four surfaces are publicly reachable with no sign-in, because no accepted journey requires durable, privately owned state. (required_inference)
Page 13 of 14
10. Tech Stack
- Frontend: React with a real-time WebGL renderer (React Three Fiber / Three.js) for the 3D scene, camera orbit, shaders and hotspots.
- VR runtime: WebXR on a compatible VR device/platform.
- Styling: CSS with the palette, typography and shape tokens defined in Section 6; IBM Plex Sans Arabic for RTL copy.
- Assets: photographic texture maps derived from the source photograph for glass, stone and sign; generative particle/light-flow fields derived from the facade's reflection map.
- Backend: none required for the current accepted behavior — the experience is a client-delivered real-time scene with no durable server-side state.
- Deployment: static hosting of the built client application.
11. Assumptions and Constraints
- Assumption: a compatible VR device and platform are available to run the experience. (required_inference)
- Assumption: the source photograph of the Annaba building facade is available as the reference for building the matching scene. (required_inference)
- Assumption: the sign and entrance information to be displayed on interaction is available. (required_inference)
- Constraint: the scene must match the details of the photograph precisely — glass facade, lighting, signage. (explicit)
- Constraint: the experience is built for a VR platform. (explicit)
- Constraint: no blue–indigo-on-white template; the ground is
#05070C and the light is teal + ember. (explicit, creative direction)
- Constraint: the Annaba facade must not be replaced with an abstract or invented building — fidelity to the photograph is non-negotiable. (explicit, creative direction)
- Constraint: readable text and needed content stay whole at 375/768/1280px; crops and bleeds are for decoration only. (explicit, creative direction)
- Out of scope (current): additional buildings, multi-user sessions, saved tours, analytics, content authoring, account management.
Page 14 of 14
12. Glossary
- Annaba facade (الواجهة البحرية لمبنى عنابة): the sea-facing glass facade of the Annaba building, the subject of the source photograph and the 3D reconstruction.
- VR Tour: the main stage where the photo-faithful 3D building lives, with the camera orbit and the two hotspots.
- Hotspot: one of the two interactive objects in the scene — the signage plate and the entrance canopy.
- Photo ↔ data morph: the toggle that dissolves the building into a particle field sampled from its own reflection map and reassembles it.
- Caustic light-sweep: the 14s shader loop that sweeps light across the glass panels' mullions.
- HUD strip: the bottom bar of tabular readouts (facade panels, orbit angle, hotspots) in IBM Plex Mono.
- Still-image fallback: the static photograph shown when the 3D scene or VR runtime is unavailable or under reduced motion.
No comments yet. Be the first!