Time Machine WebXR --- Promptable Worlds
Inspiration
What if you could stand anywhere in the world and watch time unfold around you?
Cities are layered with history --- the same street corner might have seen horse carts, protests, neon nightlife, and maybe one day flying taxis. Yet we usually experience places only in the present moment.
Time Machine WebXR turns any real-world location into an immersive timeline.
Type in a place --- a landmark, street, or coordinates --- and step inside a VR world where you can explore that location across multiple eras: past, present, and future.
Our demo focuses on San Francisco's Ferry Building, a place that has watched the city transform for over a century. But the goal is bigger: anywhere on Earth can become a time machine.
No app download. No controllers required. Just put on a headset and go.
What it does
Time Machine WebXR generates immersive VR environments from any location a user prompts.
Users can enter a place name like:
- Eiffel Tower
- Times Square
- Colosseum
- Golden Gate Bridge
- Shibuya Crossing
The system then generates multiple world models of that exact location across different eras.
For the demo, we built a fully realized experience around the SF Ferry Building, letting users jump between three versions of the same place.
🕰 1920s Ferry Building\ Cobblestone streets, Model T Fords, gas lamps, dockworkers unloading ships.
🏙 Present Day\ The Ferry Building marketplace exactly as it exists today.
🚀 Future Ferry Building\ Flying vehicles, holographic displays, vertical gardens, smart infrastructure.
Users jump between eras through a floating spatial UI panel. Each transition plays a cosmic wormhole effect, giving the feeling of physically tearing through time.
A Convai-powered voice AI guide lives in the scene and answers questions naturally about the location, its history, and the world around you.
Everything runs directly in the browser via WebXR --- optimized for Pico headsets.
How we built it
AI World Generation
The environments are generated using AI-driven reconstruction pipelines.
- A location prompt resolves to Google Street View imagery
- Images are stylized into alternate eras using Gemini image editing
- Each stylized image set is reconstructed into a 3D Gaussian splat world using World Labs Marble
Each environment exports as a .spz splat file representing a full 3D
world.
Pipeline:
Location Prompt\ → Street View imagery\ → AI image transformation (past / future)\ → World Labs Marble reconstruction\ → Gaussian Splat 3D world\ → WebXR experience
Real-Time Gaussian Splat Rendering
We render splats directly in WebXR using SparkJS 2.0.
A custom loader enables:
- GPU accelerated world loading
- seamless environment swaps
- animated fly-in / fly-out transitions
Entire 30MB worlds can swap at runtime without dropping XR frames.
Spatial UI & Locomotion
Interaction is powered by IWSDK (ElixrJS), an ECS framework for WebXR.
Features include:
- floating spatial UI panels
- teleport locomotion
- object grabbing
- gaze interactions
UI is defined declaratively in .uikitml and compiled with Vite.
AI Voice Guide
A Convai-powered conversational avatar exists inside the scene.
Users can speak naturally:
"What did this place look like 100 years ago?"\ "Why is the Ferry Building important?"\ "What might this city look like in 2100?"
The agent understands context and responds in real time.
Time Travel Transitions
Between era jumps, users pass through a cosmic wormhole animation.
This creates a sensation of:
- leaving one timeline
- traveling through space-time
- arriving in another world
Stack
- Vite + TypeScript
- SparkJS --- Gaussian splat rendering
- IWSDK (ElixrJS) --- WebXR ECS framework
- World Labs Marble --- AI 3D reconstruction
- Gemini image editing API --- era stylization
- Convai --- conversational voice AI
- ngrok --- headset testing over HTTPS
Challenges we ran into
Splat quality gap
Gemini image editing produces lower-resolution tiles than the original Street View imagery, creating blurrier splats in historical and future worlds.
We experimented with:
- Real-ESRGAN
- FLUX.2 image editing
Runtime world swapping
Loading large splat files mid-session without blocking the XR render loop required:
- async streaming
- GPU memory pooling
- careful state transitions
WebXR HTTPS requirements
Testing on wireless headsets requires:
- HTTPS
- ngrok tunneling
- certificate trust handling
This turned out to be one of the most fiddly parts of development.
Headset browser quirks
Pico's browser handles ngrok interstitials differently than desktop browsers, requiring extra steps during every test cycle.
Accomplishments we're proud of
- Real-time Gaussian splat world swapping entirely in the browser
- A complete AI world generation pipeline
- A conversational AI guide living inside the VR environment
- A wormhole transition that genuinely feels like time travel
No Unity. No Unreal. No native app.
Just the web.
What we learned
- AI world reconstruction quality depends heavily on input image resolution
- Gaussian splats are a powerful representation for web-scale 3D worlds
- WebXR in the browser is production-ready
- Conversational AI works well when embedded as a spatial character in VR
What's next for The Time Machine
🌍 Prompt any location\ Turn any Google Street View location into a time machine.
Examples:
- Eiffel Tower
- Colosseum
- Times Square
- Machu Picchu
- Great Wall of China
🖼 Higher-resolution splats
Switch from Gemini to FLUX.2 image editing to produce full 4MP tiles and sharper worlds.
🤝 Multiplayer time travel
Explore different timelines with friends in the same WebXR session.
📱 Mobile AR mode
Overlay past and future versions of places directly onto the real world.
🗺 AI-guided historical tours
Let the AI guide narrate key historical moments as you explore each era.
Built With
- api
- convai
- elixrjs
- gemini
- httpx
- iwsdk
- labs
- maps
- marble
- ngrok
- pico
- pillow
- places
- pro
- python
- sparkjs
- street
- typescript
- view
- vite
- vr
- webxr
- world
Log in or sign up for Devpost to join the conversation.