AiR: Real-time Air Quality in Augmented Reality
Chronicles of a public health utility service made in Augmented Reality with WebXR API
In this article we’ll walk you through the how and why we built AiR, a web app allowing you to visualize the air quality of your location in real-time.
We’ll be starting from the origins of the project, passing by the struggles of developing AR on the web as browsers are late on the WebXR train to how we reverse engineered Modelviewer, a free service developed by Google and what are our next steps with this project.
But first, try it out!
Alrighty, hope your air is clean. Please tag @popular.xr on IG if you’re sharing it ;)
Enough marketing, let’s start the production chronicles with the beginning. Aka what made us want to build this?
AiR: the origins
AR has been getting bigger over the last years and its growth won’t probably stop there since Augmented Reality has the power to let users interact with digital content in a closer way to how we interact in real life
-by using our hands and voice.
It touches every industry, literally. And we believe it will be a fundamental base or layer on which society society will rely on to operate for the years to come.
So, after years specializing in doing research work or ambitious productions for top AR techs, prestigious brands and even a VR cognitive game spec’ed and scientifically validated by famous Neuroscientists in Europe.
It feels like time to start to build our own stuff rather than being constrained by the usual constraints of a production studio (marketing objectives, budgets and timelines)
Our company’s mission is to contribute to popularizing AR by building meaningful AR content and help other AR creators do so as well since you know, ,alone you go faster, together go further kind of thing. After being in the Social AR train for about 4 years, it feels like the world is ready to use AR for other purpose than entertainment and we want to explore that as more use cases means more chances to popularize AR. And as societal impact driven people, we just thought our first proprietary piece should do something useful for public health that takes the most of the AR Medium then!
A nice cherry on top in this “Let’s try our luck” kind of thinking comes with the fact it will be the first piece of AR content that we totally own -oppositely to what we build on Social AR platforms, which are legally owned by the techs on which we build on.
Blablabla, here we are: Introducing the first ever proprietary piece of PopulAR Studio, a public health utility: AiR.
Taking the most out of the medium: Making something usually invisible to the naked eye become visible and understandable in AR
Why is that taking the most of the AR medium you ask? Because we can visualize the Air Quality as air is invisible. Being able to see your air quality lives in your surrounding creates a “Here & Now” feeling which is probably more impactful than any warning you can read about air hazard on a highway billboard.
The bet by providing such a tool is to help kids’ understanding of the phenomena and hopefully drive positive behaviors towards the climate change crisis. As people tend to try to fix a problem when they can get their head around it.
To do that, on top of making the invisible visible, we need to make the understanding intuitive. So we wanted to offer the user a chance to interact with the different layers of information in the Air Quality brings the understanding at a deeper level than simply reading the same info. Here’s an interesting article comparing interactive and passive learning if you’d like to know more about this.
While this experience might not seems much, there are actually quite a lot of informations to organize in order to help the user’s understanding of its local air quality. It’s been more of a challenge than it seems to organize various informations visually and create meaningful interactions to make the understanding intuitive.
We’ll release an article explaining the UX/UI thinking for you UX/UI lover. Don’t worry, if you’d like to read about it when it’s out, there’s a form to subscribe to the publication at the end of the article 🌚
As a public health utility, it should be accessible to anyone
Let’s do a web app then.
To make this accessible by anybody without having to bother in developing multiple code bases to comply with Android and iOS tech requirements.
But also has the advantage of not demanding to our users to download an app.
Look how easy it is to install a progressive web app.
Now the web has all the advantages in theory, it comes with its fair share of challenges in reality.
The problem of WebXR so far is that only a couple of browsers are supporting it and while there’s a fair share of Chrome users, we can’t really rely on reaching users through Edge (rebranded Internet explorer) and Opera.
Let’s take a look at WebXR browser support
As you can see, Safari and Firefox are not supporting WebXR. But considering majority of web users are using Chrome, it should be fine. We could probably guide Apple users to use Chrome to get the most of the experience.
And proposing the best possible user experience to Apple users is critical considering that Apple consumers probably are the most sensitive people to user experience.
Plot twist: Chrome and Firefox apps on Apple devices are nothing else but a rebranded old version of Safari!
Which leads us to the following conclusion: we won’t be able to propose a WebXR interactive experience to Apple consumers using Chrome on their Apple device. By not allowing WebXR on Safari, Apple is basically forcing all the AR dev to dev on ARkit, their proprietary tech that only works for Apple devices so neither on the web and neither on Androids. Modern times, yay!
Now this came as a certain cameo in our quest to build a Web AR tool from scratch that would be accessible to anyone. But this is not over, there are some tech out there proposing a smooth experience on Apple browsers we could probably get inspired from but we’ll take a look at that later. For now, let’s try to understand why it is so complicated to develop a Web AR experience on Apple.
Apple’s possible conflicts of interest with WebXR
Apple is arguably the first major hardware brand that made Augmented Reality its mission back in the days. From branding the iPhoneX as the first AR iPhone to invest heavily in the development of their own AR framework called ARkit.
Now the single argument of investing massively in these developments arguably is a valid reason to prevent Web AR business wise. But it’s totally counter productive in the industry’s quest of making AR popular.
First, the web only need one code base to be delivered on both Apple and Android devices. Which makes it an obvious tech choice to business executives as it reduces drastically the cost and complexity involved in the development of their solution.
Second, even if it’s evolving drastically since the pandemic hit, there were only few developers in the AR ecosystem at the beginning, which would probably have focused their effort on the Web for the same reason that business owner picks the Web. Additionally, the Web has a set of open values that are dear to most developers.
Bottomline, it would have been a big risk to leave the Web AR possibility to run on Apple as it might have ended in a shortage of ARkit developers.
Last but not least, before 5G appearance*, only native apps where capable of delivering high resolution AR experiences. I wouldn’t be surprised to read in Apple’s PR someday that their move to block WebXR was a way to ensure to deliver high quality AR content to Apple’s consumers.
*5G networks are allowing high resolution AR on the web thanks to cloud computing rendering without experimenting latency
While this is a whole bunch of assumptions that we’re making after years of being in the industry, trying to understand it in order to drive our own decisions, one thing is sure now: if there were a couple of possible conflicts of interests preventing Apple to allow WebXR on Safari, it is now changing.
Back to our app, with Safari not allowing WebXR, we’re in the mud. But does that mean that we would eventually need two code bases to be able to deliver AiR to Apple users?
Nah. If Modelviewer -a free service from google to vizualize 3D content in AR- manages to deliver high res AR content on Safari, we should be able to do that too.
Let’s take a look at ModelViewer on Safari
TL;DR Modelviewer on Safari / ARkit quicklook: Tomato tomatoe
For reminder, we already knew that Google team has no shame in the Apple game as they are proposing a Chrome app on Apple devices that’s only a rebranded old version of Safari -rightfully since you can see how hard Apple makes it for others in the previous section of the article.
Bottomline, our thinking is: if they made their own Modelviewer on Apple, there should be some kind of similar trick. And actually there is a trick: introducing ARkit Quicklook.
You see, Apple provides a tool to be able to deliver AR content taking the most of their device rendering capability in a minimalistic, satisfying user experience called Quicklook. No need of deep ARkit understanding to set it up which is just convenient enough for all of us mere interoperability fans.
Who are we to judge Modelviewer’s approach? Nobody. But we do find that very clever from the Googlay team, as usual, so we just eventually did the same for AiR 🤓
Conclusion: It was fun and it feels great to possibly help a public health issue
Well, the current state of the Art in XR made it challenging but as there are evidence that WebXR support is coming to Safari and therefore Apple device so the future of this tech is exciting.
It’s been fun to develop a Web AR tool from scratch and to build such a tool to help people understanding of their environment.
We’re hoping that AiR will have a positive impact on kids and their understanding of pollution to hopefully build a better world.
Back to my teaching days, I was always saying there is no bad students, only bad teachers. That it’s critical to help students understanding complex situations no matter what it takes, as understanding the problem will probably spark the student’s willingness to solve it.
What’s next for AiR?
We’re full of ideas on how to make this tool more actionable but it’s been already a big investment to develop this and we funded that out of our own profits.
But it’s not an end, we now want to see how this tool is perceived by the public before deciding to put more development into this.
I think nobody will argue with the fact that Apple consumers are the most sensitive people when it comes to user experience (UX), so we obviously would like to build an interactive experience on ARkit to match the WebXR one. It would also be cool to experience this with Mixed Reality glasses as it’s a clear daily utility for people already owning that kind of device. And we have a few more ideas:
- Propose nearby locations with cleaner air quality to the user
- Add an AR GPS features to that location
- Make it a plugin to various navigation service
- Propose a “Back to the past” button for the user to be able to compare the Air Quality in realtime to any day in the past 30 years
- Develop it for various Mixed Reality headsets such as Spectacles, Hololens, Nreal, etc…
- Develop it natively: ARkit? ARCore? Lightship?
- Open source it
If you’d like to reach out for more informations or suggest any feature we haven’t listed above, please send us an email over at hello@popul-ar.com! :)
Sponsor AiR
Sponsor AiR here if you’d like to see us develop one of the feature listed above. Any amount would help.
