Download - WebVR - JAX 2016
![Page 1: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/1.jpg)
WebVRVirtual Reality in your browsers…
Carsten Sandtner (@casarock)
![Page 3: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/3.jpg)
![Page 4: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/4.jpg)
![Page 5: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/5.jpg)
Short History Of VR
![Page 7: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/7.jpg)
Project Headsight1961
![Page 8: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/8.jpg)
Sega VR1991
![Page 9: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/9.jpg)
Virtua Racer1992
CC
BY-
SA 3
.0, h
ttps:
//com
mon
s.w
ikim
edia
.org
/w/in
dex.
php?
curid
=141
1188
4
![Page 11: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/11.jpg)
Pop-Cultural References
Tron (1982), Star Trek (1987), Matrix (1999)
![Page 12: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/12.jpg)
VR Today
![Page 13: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/13.jpg)
Oculus RiftDK1: 2013 DK2: 2014
Consumer Version: 2016 Imag
e by
Ocu
lus
VR, L
LC
![Page 14: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/14.jpg)
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
![Page 15: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/15.jpg)
HTC ViveApr. 2016
Imag
e ©
by
HTC
Cor
pora
tion
![Page 16: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/16.jpg)
Playstation VROct. 2016
Imag
e ©
by
Sony
Com
pute
r Ent
erta
inm
ent I
nc.
![Page 17: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/17.jpg)
Microsoft HololensMore AR, not really VR
DevKit: 2016
![Page 18: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/18.jpg)
VR In A Nutshell
![Page 19: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/19.jpg)
http
s://t
witt
er.c
om/g
uyst
ufff/
stat
us/7
1307
5541
7383
9360
0/vi
deo/
1
![Page 20: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/20.jpg)
![Page 21: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/21.jpg)
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
![Page 22: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/22.jpg)
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
![Page 23: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/23.jpg)
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
![Page 24: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/24.jpg)
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
![Page 25: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/25.jpg)
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
![Page 26: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/26.jpg)
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
![Page 27: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/27.jpg)
What Is WebVR?
![Page 28: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/28.jpg)
DisclaimerCurrently an Editors Draft!
https://mozvr.github.io/webvr-spec/
![Page 29: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/29.jpg)
Available APIs• Navigator.getVRDevices
• VRDevice/HMDVRDevice
• PositionSensorVRDevice
• VRPositionState
• VREyeParameters
• VRFieldOfView/VRFieldOfViewReadOnly
![Page 30: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/30.jpg)
Get VR Devices
navigator.getVRDevices().then(function(devices) { // Handle found Devices here... });
![Page 31: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/31.jpg)
(HMD) VR Device
for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof HMDVRDevice) { gHMD = devices[i]; break; } }
![Page 32: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/32.jpg)
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; } } }
![Page 33: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/33.jpg)
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); }
![Page 34: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/34.jpg)
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 { ... }
![Page 35: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/35.jpg)
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); }
![Page 36: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/36.jpg)
„Learn WebGL And Start Creating VR …“
![Page 37: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/37.jpg)
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); }
![Page 38: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/38.jpg)
„… or use a Boilerplate or Frameworks!“
![Page 39: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/39.jpg)
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>
![Page 40: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/40.jpg)
„Don’t reinvent the squared wheel!“
![Page 41: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/41.jpg)
WebVR Boilerplatethree.js + webVRControls
https://github.com/borismus/webvr-boilerplate
![Page 42: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/42.jpg)
Mozilla A-FrameBuilding blocks for the virtual reality web
![Page 43: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/43.jpg)
– https://aframe.io/
„Use markup to create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.“
![Page 44: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/44.jpg)
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>
![Page 45: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/45.jpg)
![Page 46: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/46.jpg)
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>
![Page 47: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/47.jpg)
![Page 48: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/48.jpg)
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>
![Page 49: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/49.jpg)
![Page 50: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/50.jpg)
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>
![Page 51: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/51.jpg)
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'}); });
![Page 52: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/52.jpg)
![Page 53: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/53.jpg)
![Page 54: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/54.jpg)
Input Devices?
![Page 55: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/55.jpg)
Imag
e ©
201
5 M
icro
soft
![Page 56: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/56.jpg)
Imag
e by
Ocu
lus
VR, L
LC
![Page 57: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/57.jpg)
Imag
e ©
by
HTC
Cor
pora
tion
![Page 58: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/58.jpg)
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
![Page 59: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/59.jpg)
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
![Page 60: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/60.jpg)
Great Experiences
![Page 62: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/62.jpg)
– 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.“
![Page 63: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/63.jpg)
http://www.360syria.com/
![Page 64: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/64.jpg)
http://inspirit.unboring.net/
![Page 65: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/65.jpg)
http://a-way-to-go.com/
![Page 66: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/66.jpg)
https://www.washingtonpost.com/video/mars/public/
![Page 67: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/67.jpg)
Conclusion
![Page 68: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/68.jpg)
VR is amazing
![Page 69: WebVR - JAX 2016](https://reader037.vdocuments.mx/reader037/viewer/2022100221/587bef511a28ab765a8b67e7/html5/thumbnails/69.jpg)
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!