Inspiration The inspiration behind ChronoWeave stemmed from a desire to push the boundaries of browser-based spatial computing beyond passive 3D viewing into truly immersive, hands-first puzzle solving. We wanted to explore how time manipulation—rewinding timelines, anchoring shattered shard fragments, and guiding autonomous clockwork travelers—could feel tactile and intuitive directly inside a web browser without demanding heavy native installations.
What it does ChronoWeave is a spatial time-manipulation puzzle game built for WebXR. Players interact with a holographic 3D level stage where they scrub through a timeline ribbon, lock temporal shards into glowing gold anchors, and rebuild shattered bridges to safely guide a clockwork traveler across. It features dual support: full immersive VR mode for headsets via WebXR and an interactive 3D browser slice for seamless desktop testing and judging.
How we built it ChronoWeave was engineered using a high-performance modern web stack:
Core 3D & Spatial Engine: Developed using Three.js and @iwsdk/core to handle complex 3D rendering pipelines, spatial scene graphs, and the WebXR runtime loop.
UI & WebXR Integration: Embedded dynamic DOM overlays like the WebXR VRButton directly into the render loop to ensure secure-context entry into immersive VR and robust fallback views.
Deployment & Hosting: Continuously built and deployed via Vercel with full HTTPS secure context validation required for modern browser spatial APIs.
Challenges we ran into WebXR Runtime Initialization: Resolving missing VRButton UI elements on Vercel deployments by explicitly binding DOM injection and ensuring proper secure context initialization within the Three.js render loop.
Spatial Performance Balancing: Optimizing shader effects, glass shard fragment geometry, and timeline scrubbing feedback loops to maintain the high frame rates required for smooth, sickness-free VR immersion.
Accomplishments that we're proud of Successfully building and deploying a zero-friction, cross-platform WebXR experience that judges can instantly evaluate on both standalone VR headsets and desktop browsers.
Seamlessly integrating temporal scrubbing mechanics with spatial 3D puzzle elements in a lightweight web build.
What we learned Building ChronoWeave deepened our expertise in browser-based spatial architecture, WebXR security policies, and performance optimization techniques for Three.js applications. We mastered blending spatial UI layers with real-time 3D scenes for effortless cross-device deployment.
What's next for ChronoWeave Expanded Level Design: Introducing multi-layered temporal puzzles with complex mechanical obstacles and multiple interacting shards.
Full Hand-Tracking Gestures: Enhancing controller interactions with direct pinch-and-pull hand tracking for ultimate immersion.
Community Shareable Levels: Building a level editor so players can design and share their own spatial time-manipulation puzzles.
