PocketZen WebXR

SCAN QR TO PLAY!
So zen!

SCAN QR ON YOUR PHONE TO PLAY

Project: PocketZen WebXR
I created a pocket zen garden where users can collect coins while listening to zen music, offering a relaxing and immersive experience.

I wanted to incorporate the Niantic Sponsor Track, creating a WebXR experience that utilizes Niantic Studio’s beta visual editor to transform the world around users.

Inspiration

Inspired by the calming, mindful practice of zen gardens, I wanted to create an interactive experience where users could enjoy a relaxing virtual environment while collecting virtual items (coins) and listening to zen music. The goal was to provide a space for people to unwind and be present, much like the real-life practice of arranging stones and sand in a zen garden.

What it does

PocketZen WebXR is an interactive virtual zen garden where users can explore, collect coins, and enjoy a peaceful atmosphere with zen music. The coins are scattered throughout the scene, and players can collect them as they explore the environment. Once they collect 10 coins, they are presented with a "You Win!" message, creating a sense of accomplishment.

Additionally, this experience is designed to be immersive by utilizing Niantic Studio's beta visual editor to transform the environment and integrate it into the real world using WebXR.

How we built it

We built PocketZen using 8thWall's WebXR platform and Niantic's Studio for visual editing. The experience was structured to integrate dynamic elements like coin collection and interactive zen music. The visual editor allowed us to enhance the spatial design, turning the user's physical surroundings into part of the zen garden. We also integrated event listeners to track coin collection and display feedback to users, enhancing their interactive experience.

Challenges we ran into

One of the biggest challenges was getting precise UI positioning for the score and messages. The UI needed to appear at the bottom center of the screen to be visible and easy to read during the experience. Also, maintaining smooth performance on different devices required optimization of resources, particularly for visual elements and interactive assets in the virtual garden.

Accomplishments that we're proud of

Successfully integrating a coin collection mechanic with smooth UI updates.
Leveraging Niantic Studio's visual editor to seamlessly blend the virtual zen garden with the real world, creating a truly immersive experience.
Providing a calming, interactive experience that users can engage with to relax and unwind.

What we learned

WebXR offers a lot of flexibility, but fine-tuning interactive elements and UI requires careful attention to detail.
The Niantic Studio beta visual editor is a powerful tool for creating immersive experiences, but it has a learning curve when integrating custom scripts and interactions.
Users are more engaged when the experience is both visually relaxing and interactive, offering a good balance of exploration and reward (e.g., coin collection).

What's next for PocketZen WebXR

Add more interactive elements such as moving objects (e.g., flowing water, wind, or moving trees) to further enhance the immersive experience.
Integrate more ambient sounds to provide an even more relaxing atmosphere (e.g., wind, birds chirping).
Explore incorporating AR elements, allowing users to interact with the zen garden in their physical environment using their mobile devices or AR glasses.
Add a QR code to make it easy for users to access the experience directly via their smartphones.