Presentation check :

  1. hide URL (fullscreen F11)
  2. check that reveal timer is configured properly (default: 30min)
  3. have water available

Beyond the screen

WebXR: when immersive content enters the Web

(Mozilla Tech Briefing: Mixed Reality 2018)

Fabien Benetou @Utopiah, WebXR developer

I can't ...

go to Mars, I can't scuba dive in the Marianne trenches, I can't juggle 4-dimensional toys, I can't hike in hyperbolic space, I can't organize my thoughts by moving them in space,

VR in itself does not matter.

How it impacts your daily life and the daily life of those around you when you come back does matter.

What's VR? Fooling your senses, giving up temporarily control to explore another reality

How does it work?

Why does open source matter in VR? You're basically strapping a state of the art all black device full of electronics running on software

fabien@holodeck:~$ sudo su
[sudo] password for fabien: 
Sorry, try again.
[sudo] password for fabien: 
Sorry, try again.
[sudo] password for fabien: 
sudo: 3 incorrect password attempts

Why I'm contributing to Mozilla? Because I have to know how it works and that, whenever I need, I can modify a piece, something fundamental in your daily life yet even more in VR since you as a developer and artist literally shape a new reality

fabien@holodeck:~$ sudo su
[sudo] password for fabien: 

How I'm contributing : A-Frame/A-painter PRs, issues, docs, participated to All Hands Hawaii and All Hands Austin, Dev Road Show Asia... but mostly just chatting on Slack!

~200 WebVR demos

... and now that I spent all that time learning, building, creating I want to SHARE what I made!

But... wait a second, can you do 3D on the web?

But... wait another second, can you really do VR on the web?

But not just VR headsets

Actually the web is better than native, it is not a "low resolution port".

  • ✓ Yes you can do WebVR PWAs.
  • ✓ Yes you can do VR-to-VR transitions (without passing by the store, with passing data!)

Warning! epileptic? Please close your eyes for a minute...

Going from one experience to the next, without leaving VR.

Great but... how?

What if ... we didn't even need to know anything to make VR content?

A-painter (also as prototyping tool)

A-Frame inspector


Why A-Frame works cf The future of Virtual and Augmented Reality for the web by Jordan Santell, ColdFront17


Live coding, aka how to look silly in public.

(that's THE moment that is going to make us late ;)

Turtles 🐢 Shaders all the way down

A-Frame repository

Summary of the tools:

A-Frame + A-Frame inspector + A-Frame repository + A-painter + A-whatever-you-want ?

Past recurrent Q&As:

  • Mobile? Even iOS?
  • Performance? GPU usage? What GPU should I buy?
  • How much does a cardboard cost?
  • Will 360 videos replace traditional films?
  • What are the usages of VR?
  • Is VR just for training/education?

...finally Is AR better than VR?

...finally Is AR better than VR?

Yes! No! It depends!

Second and last part:

  • limitations of native AR
  • WebAR, the definition
  • deconstructing experiments
  • references

limitations of native AR

limitations of native AR (bis)

WebAR, the definition

Starting with Argon Browser, 2011 (project started in 2009) GeorgiaTech

hardware support: all-ish

  • meta2
  • iOS 11 on iPhone 6S & above
  • ... arguably anything with a camera

browser support: all-ish

browsers: XR Viewer

A VR and AR Project by Mozilla

XR Viewer, behind the magic

A-Frame-XR basics, positioning

 <a-scene hit-test>

A-Frame-XR basics, measurements

 pointA.distanceTo(pointB); //thanks to threejs Vector3 utils

A-Frame-XR basics, vertical movement


 <script src=""></script>
 <script src=""></script>
 <script src="../resources/hit-test.js"></script>
 <script src="../resources/proximity.js"></script>
 <script src="../resources/tap-event.js"></script>

 <a-scene hit-test>
  <a-sphere radius="0.01" position="0 0.005 -0.5"></a-sphere>


Live coding, aka how to look silly in public, again!

(We're already late so... ;)

Again, why open source matters with early stage exploration of a new medium...

HYPER-REALITY by Keiichi Matsuda

what's yet to come

  • higher pixel density for VR
  • better tracking for AR
  • better unification WebXR
  • better transition between R, AR, VR...

Third and last part (Aha! I did lie a bit there...)


Neither just WebVR or WebAR but WebXR

status of the specifications

AR extensions and modifications #254

Now rather than "just" an AR issues in the WebVR specification.

references (chronologically-ish)

  • introduction to VR
  • introduction to WebVR
  • introduction to AR
  • introduction to WebAR (with some demos as videos)
  • transition to WebXR
    • clarification on the W3C specs
    • example like PIMXR
  • clarify again at the end what makes the web special for both
    • browser enabling distribution across platform
    • URL as a way to customize


Notes: On stage AFrameXR demo with Odyssey (have to find a way to stream! even if webcam showing own screens) and XR viewer. Inspiration from 34c3 to highlight the importance of FLOSS (eg shoutout to OpenHMD) E.g. personal big data

laptop + Samsung Odyssey (inside out tracking, it will work with 6DoF without complex setup) + iPhone 6S then I'll connect to network A-painter, ask somebody from the audience or the team to paint a fox or something like that. Using networked a-painter on the presentation laptop will show the painting down live. Then I'll use what has been painting (or a backup, just in case) in the XR Viewer using the webcam of the presenting laptop. The goal there is :

  1. to show VR and AR in action
  2. to show the difference between VR and AR
  3. to show that now 6DoF setup are compact and simple
  4. to show that VR and AR even though distinct can easily communicate
  5. to show that VR can be social (could share the link to the networked A-painter page to the audience but I'm always worried about network quality...) alt

obviously re-iterating that all that is happening in the browser as is quite obvious for you but often half way through visual demos I find quite a few people tend to forget.

On the other hand illustration that regardless of your intelligence it's hard to imagine even simple things related to perceptions

Goals :

  1. 3D and VR not only works but can be PRETTY on the web
  2. progressive enhancement, instant delivery, instant edition, the web is more than just another platform
  3. VR/AR is NOT hard, all it takes is few lines of HTML-ish
  4. Extra for this Mozilla one: meta, aka what NOT to do e.g. Codiax2017