WebVR - JAX 2016

WebVRVirtual Reality in your browsers…

Carsten Sandtner (@casarock)

about:meCarsten Sandtner

@casarock

Head of Software Development //mediaman GmbH

Short History Of VR

View Master~1939

http

s://fl

ic.k

r/p/h

kLi6

g

Project Headsight1961

Sega VR1991

Virtua Racer1992

CC

BY-

SA 3

.0, h

ttps:

//com

mon

s.w

ikim

edia

.org

/w/in

dex.

php?

curid

=141

1188

4

Virtual Boy1995

http

s://fl

ic.k

r/p/6

Vn8W

N

Pop-Cultural References

Tron (1982), Star Trek (1987), Matrix (1999)

VR Today

Oculus RiftDK1: 2013 DK2: 2014

Consumer Version: 2016 Imag

e by

Ocu

lus

VR, L

LC

Google Cardboard2014

By E

van-

Amos

http

s://c

omm

ons.

wik

imed

ia.o

rg/w

/inde

x.ph

p?cu

rid=4

5580

283

HTC ViveApr. 2016

Imag

e ©

by

HTC

Cor

pora

tion

Playstation VROct. 2016

Imag

e ©

by

Sony

Com

pute

r Ent

erta

inm

ent I

nc.

Microsoft HololensMore AR, not really VR

DevKit: 2016

VR In A Nutshell

http

s://t

witt

er.c

om/g

uyst

ufff/

stat

us/7

1307

5541

7383

9360

0/vi

deo/

1

Mobile Based Setup

http

s://d

evel

oper

.moz

illa.o

rg/e

n-U

S/do

cs/W

eb/A

PI/W

ebVR

_API

/Web

VR_c

once

pts

Computer Based Setup

http

s://d

evel

oper

.moz

illa.o

rg/e

n-U

S/do

cs/W

eb/A

PI/W

ebVR

_API

/Web

VR_c

once

pts

Sensors

http

s://d

evel

oper

.moz

illa.o

rg/e

n-U

S/do

cs/W

eb/A

PI/W

ebVR

_API

/Web

VR_c

once

pts

Field Of View

http

s://d

evel

oper

.moz

illa.o

rg/e

n-U

S/do

cs/W

eb/A

PI/W

ebVR

_API

/Web

VR_c

once

pts

Concepts For VR Apps

http

s://d

evel

oper

.moz

illa.o

rg/e

n-U

S/do

cs/W

eb/A

PI/W

ebVR

_API

/Web

VR_c

once

pts

Concepts For VR Apps

• Eye strain

• Motion Sickness

• Latency

• FPS

• Degrees of Freedom ( DoF )

• Cone of focus

• 3D Positional Audio -> Web Audio API!

http

s://m

edia

.gip

hy.c

om/m

edia

/3o6

gaVA

xUrX

lEFY

pWw

/gip

hy.g

if

What Is WebVR?

DisclaimerCurrently an Editors Draft!

https://mozvr.github.io/webvr-spec/

Available APIs• Navigator.getVRDevices

• VRDevice/HMDVRDevice

• PositionSensorVRDevice

• VRPositionState

• VREyeParameters

• VRFieldOfView/VRFieldOfViewReadOnly

Get VR Devices

navigator.getVRDevices().then(function(devices) { // Handle found Devices here... });

(HMD) VR Device

for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }

Position Sensor

// If device found, get Position Sensor. if (gHMD) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof PositionSensorVRDevice

&& devices[i].hardwareUnitId === gHMD.hardwareUnitId) {

gPositionSensor = devices[i]; break; } } }

Position State

var posState = gPositionSensor.getState(); if (posState.hasPosition) { posPara.textContent = 'Position: x' + (posState.position.x) + ' y' + (posState.position.y) + ' z' + (posState.position.z); }

if (posState.hasOrientation) { orientPara.textContent = 'Orientation: x' + (posState.orientation.x) + ' y' + (posState.orientation.y) + ' z' + (posState.orientation.z); }

Eye Parameters

if (gHMD.getEyeParameters !== undefined) {

var eyeParamsL = gHMD.getEyeParameters('left'); var eyeParamsR = gHMD.getEyeParameters('right');

eyeTranslationL = eyeParamsL.eyeTranslation; eyeTranslationR = eyeParamsR.eyeTranslation; eyeFOVL = eyeParamsL.recommendedFieldOfView; eyeFOVR = eyeParamsR.recommendedFieldOfView;

} else { ... }

Field Of View

function setCustomFOV(up, right, down, left) { var testFOV = new VRFieldOfView(up, right, down, left);

gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);

var lEye = gHMD.getEyeParameters('left'); var rEye = gHMD.getEyeParameters('right'); console.log(lEye.currentFieldOfView); console.log(rEye.currentFieldOfView); }

„Learn WebGL And Start Creating VR …“

Stereoscopic Rendering in WebGL

/* https://hacks.mozilla.org/2015/09/stereoscopic-rendering-in-webvr/ */ function update() { // ... other stuff happens here ... // left eye gl.viewport(0, 0, canvas.width / 2, canvas.height); mat4.multiply(mvpMatrix, leftEyeProjectionMatrix, leftEyeViewMatrix); gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix); gl.drawElements(mode, count, type, offset);

// right eye gl.viewport(canvas.width / 2, 0, canvas.width / 2, canvas.height); mat4.multiply(mvpMatrix, rightEyeProjectionMatrix, rightEyeViewMatrix); gl.uniformMatrix4fv(uniforms.uMVPMatrixLocation, false, mvpMatrix); gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);

requestAnimationFrame(update); }

„… or use a Boilerplate or Frameworks!“

three.js WebVR Renderer

<script src="js/three.min.js"></script> <script src="js/effects/VREffect.js"></script> <script src="js/controls/VRControls.js"></script>

<script> ... var effect = new THREE.VREffect( renderer ); ...

effect.render( scene, camera ); </script>

„Don’t reinvent the squared wheel!“

WebVR Boilerplatethree.js + webVRControls

https://github.com/borismus/webvr-boilerplate

Mozilla A-FrameBuilding blocks for the virtual reality web

– https://aframe.io/

„Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“

Hello World

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, World!</title> <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-box id=„mybox" color=„#6173F4" width=„1" height="1" depth=„1" position="1 1 1“ rotation="0 0 0“ scale="1 1 1"> </a-box> <a-sky color="#bbb"></a-sky> </a-scene> </body> </html>

Animated Box

<!DOCTYPE html> <html> <head>. . .</head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> </a-box> </a-scene> </body> </html>

Pointer

<!DOCTYPE html> <html> <head>. . .</head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 1" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> </a-box>

<a-camera position="0 0 0"> <a-cursor color="#0000ff"> </a-camera> </a-scene> </body> </html>

Add Events

<!DOCTYPE html> <html> <head>. . .</head> <body> <a-scene> <a-box id="mybox" color="#6173F4" width="1" height="1" depth="1" position="1 1 -5" rotation="0 0 0" scale="1 1 1"> <a-animation attribute="rotation" repeat="indefinite" to="0 180 0"></a-animation> <a-event name="mouseenter" color="#ff0000"></a-event> <a-event name="mouseleave" color="#6173F4"></a-event> </a-box> <a-camera position="0 0 0"> <a-cursor color="#0000ff"> </a-camera> <a-sky color="#bbb"></a-sky> </a-scene> </body> </html>

Add Events (Pure JS)

var box = document.querySelector(‚#mybox');

box.addEventListener('mouseenter', function () { box.setAttribute('material', {color: '#ff0000'}); });

box.addEventListener('mouseleave', function() { box.setAttribute('material', {color: '#6173F4'}); });

Input Devices?

Imag

e ©

201

5 M

icro

soft

Imag

e by

Ocu

lus

VR, L

LC

Imag

e ©

by

HTC

Cor

pora

tion

By E

van-

Amos

- O

wn

wor

k, C

C B

Y-SA

3.0

, http

s://c

omm

ons.

wik

imed

ia.o

rg/w

/inde

x.ph

p?cu

rid=1

8936

731

By E

van-

Amos

- O

wn

wor

k, C

C B

Y-SA

3.0

, http

s://c

omm

ons.

wik

imed

ia.o

rg/w

/inde

x.ph

p?cu

rid=1

8936

731

Great Experiences

http://vizor.io

– http://vizor.io/

„You don’t need to be a game developer to create VR content on the web. With Vizor's visual editor,

anyone can create and share their own VR experiences in a web browser, and it’s free.“

http://www.360syria.com/

http://inspirit.unboring.net/

http://a-way-to-go.com/

https://www.washingtonpost.com/video/mars/public/

Conclusion

VR is amazing

WebVR is amazing…

… but it’s not ready (Editors Draft, Browser support)

… and has high Hardware Requirements!

… HMD Devices are not cheap. (Except: Google Cardboard)

… and it’s a pleasure to create content!

WebVR is amazingCarsten Sandtner

@casarock

sandtner@mediaman.de