Progressive Web A-Painter: 3D VR in your pocket
by Thomas Balouet @thomasbalou
Nowadays, almost everybody has heard of Virtual Reality (VR). This new medium allows you to navigate into a virtual 3D environment like if you were there, allowing you to be “part of the scene”, and not just a spectator of it through a 2D screen like we used to.
But the access to VR hasn’t been mainstreamed yet. On one hand you need to have the appropriate hardware, which put some friction to the “first experience” (such hardware can go from a few tenth of euros if you have the right smartphone, to hundreds of euros if you want the high end PC/console experience). On the other hand most VR experiences are only accessible through app stores, with cost induced, and wearisome download and installation process. That’s one of the reasons why, even though everybody’s heard of it, lots of people haven’t had their first VR experience yet.
That’s where a new technology comes in handy, because it allows anybody to ACCESS VR TODAY, directly from what everybody has already: a browser. It’s called WebVR, and is developed by the main browser vendors and an increasing number of community members. Even though it’s technically still a technology in draft state, it is already accessible through the major VR devices, as well as desktop computers and mobiles (see my previous article).
Bringing the powers of the Web to Virtual Reality
The WebVR technology has itself evolved a lot in the course of last 3 years, and I’m proud of having been able to see this evolution since 2 years ago when I started working on it.
One of the biggest strength of WebVR is that it is indeed powered by the Web. And the Web itself has been evolving a lot lately, with features getting closer to what native applications (the one you download through an app store) can do. This evolution is called “Progressive Web App(PWA)”, and it’s gonna break the barrier between websites and apps.
One of the power of the Web technology, and that’s why I like it so much, is that everything can be interconnected, so if two awesome technologies are developed on the Web, you can totally bring them together, and that’s what I decided to do with WebVR and PWA.
The Web lands on you
One of the main advantages of PWA is to save the content of a Web site in order to enable a faster loading the next time you connect to it. Also it allows to access Websites while offline, and still get the last synced informations from when you had a data connection. To top it all, PWA can install a shortcut directly on the home screen of your phone, enabling direct access in full screen, without the address bar, making you even forget that you’re actually on the Web!
Progressive Web Apps are not quite new, as WebVR it is something people are working on for a few years now, but until recently it wasn’t correctly implemented on every browser, and I myself didn’t have the time to look into it. But word about it has been louder lately, and this week I decided to take some time and have a look into it.
VR painting in your browser
The VR team at Mozilla, from where WebVR originated, has been quite active in the field since then, developing a framework (A-Frame) to simplify the experience creation in WebVR. Over it, they’ve built a Web app enabling people to paint in VR, straight from their browser: A-Painter.
People started playing with A-Painter, has you can see in the image at the top of this article. Recently, Diego Marcos from the Mozilla team created a way to embed those painting in any A-Frame VR experience. Thinking about it, I decided to use this to enable people to review their VR paintings easily, to share them, and to show it out to people, even with no data!
I created a Progressive Web App to enable people to view and share A-Painter models easily. You can try it out from the URL below:
https://tbalouet.github.io/pwa-frame-painter/
At first, you’ll have an empty landscape showing up, waiting for you to add some model.
Loading a model into the scene:
To load a model from an URL into the scene, you have to click the ‘+’ button on top of the app, paste in the model’s URL (you’ll find a list of some of them at the end of this article), and then press “Load”. The app will reload with your model directly inserted in the scene! Or you can directly edit the app URL by adding: ?url=MY_MODEL_URL at the end of it
From your desktop computer to your mobile:
If you want to bring it with you, and get the full potential of those Web Apps, the best way is to access it from your mobile. But typing URLs on your mobile can be tedious. Well I got you covered! For this, you can click the QR Code icon on top of the app (next to the “+” symbol), and then scan the QR Code which appeared with the Samsung Internet Browser QR Code scanner (directly accessible from the menu in the browser’s beta version), and you’ll be automatically redirected to your desktop’s browser’s URL on your mobile!
From the Web to your mobile’s front row:
Finally, one of the advantages of this kind of Web App is that you can add it to your mobile’s home screen (on Android only at the moment). For that, all you have to do is to access your browser’s menu and click “Add to home screen”. A shortcut to the Web application will be automatically added, and therefore you can access it directly from there, in just one touch, as you would do with a traditional application.
Next steps
I wanted to make a quick prototype to see what was doable. I really enjoyed doing it, but at the moment the app is quite simple.
In the future, I’d like to embed a system to enable the user to save it’s favorite models (without having to paste the URLs each time), but also suggest featured creations for them to discover.
Creations link
If you haven’t done any creation yet, feel free to try those one from the A-Frame community, to get a taste of what’s possible to do!
Model 1, Model 2, Model 3, Model 4, Model 5, Model 6
Conclusion
The Web has been there for quite some time now, and hasn’t stopped to evolve since. We’re now getting closer to what native application used to be the only one to offer.
Thanks to WebVR and PWA, you can now watch VR on your mobile in a few clicks, and access it offline directly from your mobile’s home screen. And guess what, the Web platform isn’t done surprising you ;)
