The Forest Hub

A unified WebXR world seamlessly combining procedural entertainment, immersive retail, and a living nature ecosystem.

Comment

Inspiration

We wanted to prove that the Metaverse doesn't have to be a collection of isolated, heavy applications. Our inspiration came from the idea of a "Seamless Web" — a world where you can transition from a high-energy entertainment experience to a functional retail environment and then to a relaxing nature walk, all without ever seeing a loading screen. We wanted to push the limits of the Meta Immersive Web SDK to see if we could build a persistent, multi-utility open world entirely through code.

What it does

"The Forest Hub" is a unified WebXR open world that combines three distinct modules into one seamless experience:

  • Entertainment Zone: A procedurally animated robot avatar performs a dance routine driven by real-time math functions (sine/cosine waves). Users can pause the performance using a spatial trigger button.
  • Lifestyle Zone: A fully functional VR Supermarket. We implemented a raycasting interaction system that allows users to "buy" products, which triggers a physics-like transfer from the shelf to the checkout counter.
  • Environment Zone: A procedurally generated forest that streams high-fidelity GLTF assets (a Giant Fox) to demonstrate how heavy assets can coexist with lightweight code-generated geometry.

How we built it

We built this using the Meta Immersive Web SDK and Three.js.

  • Procedural Engine: The forest, shelves, and architectural structures are generated by algorithms at runtime. This ensures instant load times on standalone headsets because we aren't downloading static map files.
  • Animation: The robot's movement is driven by custom JavaScript math logic, eliminating the need for heavy skeletal animation files.
  • Asset Streaming: We integrated GLTFLoader to pull external 3D models (the Fox) dynamically from the cloud, mixing them with our procedural world.
  • Interaction: We utilized the WebXR Gamepad API to map controller inputs to our custom interaction engine (Raycaster).

Challenges we ran into

The biggest challenge was Performance Optimization. Merging three distinct systems (an animation loop for the robot, a raycasting loop for the shop, and a heavy asset loader for the forest) into a single render loop initially caused frame drops. We had to carefully manage our scene graph and optimize the geometry generation to ensure the experience remained smooth (90Hz) on the Quest 3 emulator. Another challenge was getting the raycaster to accurately detect products on the shelves without accidentally triggering other objects in the scene.

Accomplishments that we're proud of

  • Zero-Install Experience: We built a massive-feeling world that loads almost instantly in the browser.
  • Math-Based Animation: Successfully creating a lifelike dancing character using only code and math, without any pre-made animation files.
  • Unified Systems: Successfully merging an e-commerce mechanic, an entertainment mechanic, and an open-world environment into a single cohesive codebase without conflicts.

What we learned

We learned the incredible power of Procedural Generation for WebXR. By generating assets with code instead of downloading models, we can create infinite variations of worlds with near-zero bandwidth cost. We also learned how to effectively use the Three.js Raycaster for precision interactions in VR, moving beyond simple gaze-based cursors to full controller-based selection.

What's next for The Forest Hub

  • Multiplayer Social: We plan to add WebSocket integration so multiple users can meet in the dance hall or shop together.
  • Payment Integration: Connecting the supermarket checkout counter to a real payment gateway (like Stripe) to enable actual purchases in VR.
  • More Biomes: Expanding the procedural engine to generate other environments like Deserts or Cities based on user preference.

Built With

Share this project:

Updates