Demos For Firefox 55 Release With WebVR

A Celebration of WebVR and A-Frame!

Last week, Chris van Wiemeersch contacted me in prevision of firefox 55 launch and asked me if I wanted to make some demos. I got a bit carried away and did three over the weekend! 😜 I like firefox, their vision on open source and openness. I love A-Frame too. A-Frame makes it so easy for non-experts to build 3d scenes.

So these demos are all in A-Frame and AR.js. It seems a bit ironic to do augmented reality demos to celebrate virtual reality, I understand the confusion :) So I was thinking on how to do virtual reality with AR.js and realized AR.js tracking could be use efficiently in VR too!

Tweet about Magical door between AR and VR

One demo is about ‘walking in virtual reality’. If you use tango, you can actually walk inside a virtual world, like you would with htc-vive. The other is a ‘Magical door between AR and VR’. It goes a bit further, you can still walk in a virtual world, but now, the real world remains present at all times. It doesn’t break usual conventions too much, so the brain sees it as more immersive.

The code of all those demos is available on github. Enjoy and here are the details of each demo.

Walking in Virtual Reality

This one is actually Virtual Reality. It uses AR.js tracking to control the camera in VR. On tango, this allows you to actually walk directly in a virtual world. Like you would on htc-vive, but without wires everywhere :) — tweet

Magical Door Between AR and VR

This magical door is a visualisation of a VR world in augmented reality, like a portal. In fact, the door acting as portal to another world is well known in fiction.

You put a door in augmented reality, and you see a virtual world thru this door. When you go thru this door you are in the virtual world and you can turn around and see the real world thru the door. This door to VR is a 2-way portal between AR and VR.

There is quite a few fiction stories using the portal to another world. Let’s start with “The Dark Tower” books by Stephen King. There is even a movie recently released, and a tv series planed for next year. Another classic is “Monster Inc” animation movie. Monsters would go thru the portal to get into the real world and scare children. In a more distant past, there is the famous monolith from 2001 Space Odyssey to communicate with another world. Its dimensions are related to golden ratio as noted by Ron Royston.

Cute Fox Model in A-Frame With AR.js

It is a simple one, full augmented reality. It is recorded on tango using AR.js. It is just some text with a fox model from blocks by Rachael Hosein. Blocks is a 3d tool made by google to help you model objects in VR. It aims to be easy to use, and makes the models downloadable. This is great to create and share content in AR/VR.

Model from Blocks

Hope you enjoyed these demos to celebrate WebVR, Firefox and A-Frame. I had quite a bit of fun doing them :) Additionally I discovered new ways to display Virtual Reality with AR.js. It is definitely interesting! I will explore further and keep sharing my findings.

Until next time! And please don’t forget to share if you like this post :)