Inspiration
As a XR Design Engineer, I always as the question first - whether the product is better in XR or in real life? Well having UI widgets that can show data of the environment in real-time an din precise location is definitely better in XR than any other digital device.
Inspiration also came from the time I needed such devices. In practical scenarios it's not possible to track air every few blocks, but with AR/MR/XR tech it can be! So I engineered it.
What it does
It's a web based XR app, that you can access, click on a button that detects your precise location from WIFI connection (with user's consent of course), then it welcomes the user to Enter a MR space where it will be provided with an UI that shows the air quality. Beside usual UI, it also has VFX UI, that makes it more enjoyable, and the color of the VFX also reflects that data - so it makes it functional too.
How I built it
I started with Unity, but it wasn't so accessible - so I decided to try it in WebXR. I user Cursor, Figma and my own coding knowledge in XR field to design and program it. The air quality is being fetched from the Google AQI API.
Challenges I ran into
To create a smooth and natural user experience and it took a long time to realize that the product will be more useful in WebXR than a built in App. Managing the VFX and using it more like a functional UI or data vis also needed a lot iteration.
Accomplishments that I am proud of
Making my first web-based app that shows real-time data. It feels really meaningful to provide something that can inform and navigate user. I am also proud of the UX of the product, how easy it is to just go to the link and start using it unlike my previous XR projects.
What I learned
The importance of staying updated with webXR tools when it comes to crafting data vis - it can really open new worlds! I also learned to use Google API with XR projects - it's so simple and it has so much potential!
What's next for XR-AIR
Creating more widgets and documenting case studies around. Having user tests and seeing where can the product benefit users the most.
Built With
- api
- aqi
- css
- html
- javascript
- mr
- passthrough
- three.js
- webxr
- xr

Log in or sign up for Devpost to join the conversation.