Goodbye, Flatland! An introduction to WebVR and what it means for web developers
-
Upload
geildanke -
Category
Technology
-
view
272 -
download
0
Transcript of Goodbye, Flatland! An introduction to WebVR and what it means for web developers
![Page 1: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/1.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Goodbye, Flatland!An introduction to WebVR and what it means
for web developers
geildanke.com @ EnterJS 2017 @fischaelameer
![Page 2: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/2.jpg)
geildanke.com @fischaelameer
You should care about WebVR,because you care about your users.
geildanke.com @ EnterJS 2017 @fischaelameer
![Page 5: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/5.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
VR Concepts WebVR API UX Design & VR
![Page 6: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/6.jpg)
@fischaelameergeildanke.com @ EnterJS 2017
Virtual Reality is tricking our eyes and brain to think of a 2D image to be in 3D.
![Page 7: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/7.jpg)
@fischaelameergeildanke.com @ EnterJS 2017
Virtual Reality changes the way we relate to technology.
![Page 23: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/23.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
https://github.com/mrdoob/three.js
![Page 24: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/24.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebGL
https://github.com/mrdoob/three.js
![Page 25: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/25.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
![Page 26: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/26.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
three.js
Ricardo Cabello
![Page 34: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/34.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );let videoTexture = new THREE.VideoTexture( video );let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {requestAnimationFrame( render );renderer.render( scene, camera );
}
render();
![Page 35: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/35.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );let videoTexture = new THREE.VideoTexture( video );let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {requestAnimationFrame( render );renderer.render( scene, camera );
}
render();
![Page 36: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/36.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );let videoTexture = new THREE.VideoTexture( video );let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {requestAnimationFrame( render );renderer.render( scene, camera );
}
render();
![Page 37: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/37.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );let videoTexture = new THREE.VideoTexture( video );let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {requestAnimationFrame( render );renderer.render( scene, camera );
}
render();
![Page 38: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/38.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ) { if ( displays.length > 0 ) { vrDisplay = displays[ 0 ]; } else { console.log( 'No VR Displays found.' ); }});
![Page 39: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/39.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
VRDisplay.isConnectedVRDisplay.isPresenting
VRDisplay.getEyeParameters()VRDisplay.requestAnimationFrame()
![Page 40: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/40.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );
![Page 41: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/41.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] );});
![Page 42: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/42.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ) .then( function() { vrDisplay.requestAnimationFrame( render ); });});
![Page 43: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/43.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
}
![Page 44: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/44.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
// update display pose // update scene and meshes
}
![Page 45: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/45.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let pose = vrDisplay.getPose();
console.log( pose.orientation );// [ 0, 0, 0, 1 ]// [ -0.0000724312, -0.06752134, 0.0028374712, 0.9977243 ]console.log( pose.position );// null// [ 0.05234, -0.043485, 0.0003243 ]
![Page 46: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/46.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
let leftEyeParameters = vrDisplay.getEyeParameters( 'left' );
console.log( leftEyeParameters.offset );// [ -0.03, 0, 0 ]console.log( leftEyeParameters.renderWidth );// 640.5console.log( leftEyeParameters.renderHeight );// 721
![Page 47: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/47.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
// update display pose // update scene and meshes
vrDisplay.submitFrame( pose );}
![Page 51: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/51.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
https://github.com/googlevr/webvr-polyfill
![Page 55: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/55.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Mobile and Desktop VR Devices
Progressive Loading
![Page 56: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/56.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
![Page 57: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/57.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla
![Page 58: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/58.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 61: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/61.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
<head> <script src="aframe.js"></script></head><body> <a-scene> <a-assets> <video id="video" src="video.mp4" autoplay loop></video> </a-assets> <a-videosphere src="#video"></a-videosphere> </a-scene></body>
![Page 62: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/62.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
<head> <script src="aframe.js"></script></head><body> <a-scene> <a-assets> <video id="video" src="video.mp4" autoplay loop></video> </a-assets> <a-videosphere src="#video"></a-videosphere> </a-scene></body>
![Page 63: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/63.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
<head> <script src="aframe.js"></script></head><body> <a-scene> <a-assets> <video id="video" src="video.mp4" autoplay loop></video> </a-assets> <a-videosphere src="#video"></a-videosphere> </a-scene></body>
![Page 64: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/64.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
<head> <script src="aframe.js"></script></head><body> <a-scene> <a-assets> <video id="video" src="video.mp4" autoplay loop></video> </a-assets> <a-videosphere src="#video"></a-videosphere> </a-scene></body>
![Page 65: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/65.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
<a-box> <a-cone> <a-cylinder> <a-dodecahedron><a-icosahedron> <a-octahedron> <a-ring> <a-sphere><a-tetrahedron> <a-torus-knot> <a-torus>
geildanke.com @ EnterJS 2017 @fischaelameer
![Page 66: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/66.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
A-Frame by Mozilla
geildanke.com @fischaelameer
<a-video> <a-videosphere> <a-image> <a-sound><a-gltf-model> <a-obj-model> <a-text><a-light> <a-sky> <a-cursor>
<a-box> <a-cone> <a-cylinder> <a-dodecahedron><a-icosahedron> <a-octahedron> <a-ring> <a-sphere><a-tetrahedron> <a-torus-knot> <a-torus>
![Page 69: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/69.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
import React from 'react';import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component { render() { return ( <View> <VideoPano source={{uri: 'video.mp4'}} /> </View> ); }};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook
![Page 70: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/70.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
import React from 'react';import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component { render() { return ( <View> <VideoPano source={{uri: 'video.mp4'}} /> </View> ); }};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook
![Page 71: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/71.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
import React from 'react';import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component { render() { return ( <View> <VideoPano source={{uri: 'video.mp4'}} /> </View> ); }};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook
![Page 72: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/72.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Box Cylinder CylindricalPanel Plane Sphere
geildanke.com @fischaelameer
AmbientLight DirectionalLight PointLight SpotLight
Model Sound VrButton
Pano Video VideoPano
React VR by Facebook
![Page 75: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/75.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
![Page 76: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/76.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
Presence
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
![Page 78: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/78.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
It was the pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever.It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious.Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk.
http://www.commercekitchen.com/whedon-ipsum/
![Page 84: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/84.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
130°
Comfortably bending 30° to each side
![Page 85: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/85.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
230°
Stretching 80° to each side
https://www.youtube.com/watch?v=00vzW2-PvvE
![Page 86: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/86.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
0.5m
20m
https://www.youtube.com/watch?v=00vzW2-PvvE
![Page 91: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/91.jpg)
geildanke.com @ EnterJS 2017 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 92: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/92.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
dmm
https://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 93: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/93.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
dmm = distance-independent millimeter
https://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 96: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/96.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 97: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/97.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 98: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/98.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 99: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/99.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 100: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/100.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 101: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/101.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable
![Page 102: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/102.jpg)
geildanke.com @ EnterJS 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
![Page 103: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/103.jpg)
geildanke.com @ EnterJS 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
![Page 106: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/106.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 107: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/107.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 108: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/108.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 109: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/109.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 110: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/110.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 111: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/111.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 112: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/112.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!
![Page 113: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/113.jpg)
@fischaelameergeildanke.com @ EnterJS 2017
You are responsible for the well-being of your users!
![Page 116: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/116.jpg)
@fischaelameergeildanke.com @ EnterJS 2017
You are responsible for the well-being of your users!
![Page 117: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/117.jpg)
geildanke.com @ EnterJS 2017 @fischaelameer
http://www.uxofvr.com/
https://webvr.rocks/
General information
https://webvr-slack.herokuapp.com/
Community
https://www.reddit.com/r/WebVR/
https://w3c.github.io/webvr/
https://github.com/googlevr/webvr-polyfill
https://threejs.org/
API, frameworks, libraries
https://facebook.github.io/react-vr/
https://aframe.io/
https://geildanke.com/en/vr/
Geil,Danke!
https://bit.ly/webvrcomet
![Page 118: Goodbye, Flatland! An introduction to WebVR and what it means for web developers](https://reader035.fdocuments.in/reader035/viewer/2022062412/5aaab4ec7f8b9af22b8b4649/html5/thumbnails/118.jpg)
geildanke.com @fischaelameer
Thank you!
geildanke.com @ EnterJS 2017 @fischaelameer