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

(FOSDEM 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
fabien@holodeck:~$

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: 
root@holodeck:/home/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?

http://caniuse.com/#feat=webvr

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

A-Frame

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

A-Frame

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 https://www.shadertoy.com/

https://github.com/wizgrav/aframe-effects

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

https://github.com/mozilla-mobile/webxr-ios

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

aframe-xr

https://github.com/mozilla/aframe-xr

 <script src="https://rawgit.com/mozilla/aframe-xr/master/vendor/aframe-v0.7.1.js"></script>
 <script src="https://rawgit.com/mozilla/aframe-xr/master/dist/aframe-xr.js"></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>
 <a-scene>  

aframe-xr

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 XR modes e.g AR to VR and back
  • bringing aframe-xr to A-Frame

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

WebXR

Neither just WebVR or WebAR but WebXR

status of the specifications

AR extensions and modifications #254

Now https://github.com/immersive-web/webxr/ rather than "just" an AR issues in the WebVR specification.

Don't trust your perceptions, build useful interfaces.

Slides

https://fabien.benetou.fr/Testing/FOSDEM12018?action=reveal or just search WebXR FOSDEM 2018

references

(chronologically-ish)