Immersive Web

Virtual World experiences hosted through the browser.

Added Value

Difference between AR & VR

Joseph Medley -  https://developers.google.com/web/updates/2018/05/welcome-to-immersive

WebXR today?

https://webvr.info/

Support

https://caniuse.com/#search=WebXR​

Browsers

Browser in Phones

• Chrome on "DayDream Ready":

• Pixel 3, Galaxy S9 & S9+, Pixel 2, Galaxy S8 & S8+, ZenFone AR, LG V30

• Chrome: v66+ (//flags)

• FF on Win, Nightly on Mac OS. Linux under development.

• FF

• Samsung Internet

Dedicated Browsers

• Supermedium

📦

📦

📦

• Vendors Browsers...

• Safari mobile (Polyfill)

📦

📦

📦

Browsers + OS + Motion sensors

Chrome flags

URL: chrome://flags

Activate:

- WebXR Device API

- WebXR Hit Test (not for today's demo, tho)

WebXR API Coming soon...

WebXR today!

A-Frame is

• A web framework for quickly and easily building cross-platform VR experiences
• Created by Mozilla in 2014
• Built on top of and provides a declarative structure to three.js (and WebGL + WebXR)

Headsets Support

• HTC Vive with controllers and trackers

• Oculus Rift with Touch controllers

• Google Daydream with controller

• Samsung GearVR with controller

• Google Cardboard

Matt Stow - https://slides.com/stowball/intro-to-webxr

Hello World

https://aframe.io/docs/0.8.0/introduction/​

Matt Stow - https://slides.com/stowball/intro-to-webxr

Entity

• Converts HTML to a primitive Cube Geometry.
• Not to confuse with web components :(

Components

HTML Attributes:

• Units are in meters.
• There can be multiple inline values: 

  "foo: bar; baz: quux;"

• <a-box>
• <a-camera>
• <a-circle>
• <a-collada-model>
• <a-cone>
• <a-cursor>
• <a-curvedimage>
• <a-cylinder>
• <a-dodecahedron>
• <a-gltf-model>
• <a-icosahedron>
• <a-image>
• <a-light>
• <a-link>

• <a-obj-model>
• <a-octahedron>
• <a-plane>
• <a-ring>
• <a-sky>
• <a-sound>
• <a-sphere>
• <a-tetrahedron>
• <a-text>
• <a-torus-knot>
• <a-torus>
• <a-triangle>
• <a-video>
• <a-videosphere>

Primitives

Matt Stow - https://slides.com/stowball/intro-to-webxr

• <a-box>
• <a-camera>
• <a-circle>
• <a-collada-model>
• <a-cone>
• <a-cursor>
• <a-curvedimage>
• <a-cylinder>
• <a-dodecahedron>
• <a-gltf-model>
• <a-icosahedron>
• <a-image>
• <a-light>
• <a-link>

• <a-obj-model>
• <a-octahedron>
• <a-plane>
• <a-ring>
• <a-sky>
• <a-sound>
• <a-sphere>
• <a-tetrahedron>
• <a-text>
• <a-torus-knot>
• <a-torus>
• <a-triangle>
• <a-video>
• <a-videosphere>

Primitives

Matt Stow - https://slides.com/stowball/intro-to-webxr

A-Frame inspector

Matt Stow - https://slides.com/stowball/intro-to-webxr

Ctrl + Alt + i

How to

Online:

• Glitch & A-Frame School
• Online editors: Codepen & CodesandBox

Local Development:

• JS <script> tag 😪
• npm install AFrame
• npm install -g angle

 

Share local across devices

📦

1 HTTP Server

2 Share local:

• ngrok

AR in Web

Ar.js by Jerome Etienne