more ways to make your users sick – a talk about webvr and ux design
TRANSCRIPT
![Page 1: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/1.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
More Ways to Make Your Users SickAbout WebVR and UX Design
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
![Page 2: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/2.jpg)
geildanke.com @fischaelameer
You should care about WebVR,because you care about your users.
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
![Page 5: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/5.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts WebVR API UX Design & VR
![Page 6: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/6.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality is tricking our eyes and brain to think of a 2D image to be in 3D.
![Page 7: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/7.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality changes the way we relate to technology.
![Page 8: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/8.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For Understanding Spatial Relationships
![Page 9: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/9.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For Multi Tasking
![Page 10: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/10.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For Simulations
![Page 12: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/12.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
![Page 13: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/13.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
![Page 14: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/14.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality Hardware and Concepts
![Page 15: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/15.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Google Cardboard Samsung Gear VR Google Daydream View
![Page 16: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/16.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Oculus Rift HTC Vive Playstation VR
![Page 17: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/17.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
https://en.wikipedia.org/wiki/Virtual_Boy
![Page 22: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/22.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
IPD = Interpupillary distance
![Page 34: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/34.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
https://github.com/mrdoob/three.js
![Page 35: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/35.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebGL
https://github.com/mrdoob/three.js
![Page 36: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/36.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
![Page 37: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/37.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
three.js
Ricardo Cabello
![Page 45: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/45.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 46: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/46.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 47: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/47.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 48: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/48.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 49: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/49.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ) { if ( displays.length > 0 ) { vrDisplay = displays[ 0 ]; } else { console.log( 'No VR Displays found.' ); }});
![Page 50: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/50.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VRDisplay.isConnectedVRDisplay.isPresenting
VRDisplay.getEyeParameters()VRDisplay.requestAnimationFrame()
![Page 51: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/51.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );
![Page 52: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/52.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] );});
![Page 53: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/53.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ) .then( function() { vrDisplay.requestAnimationFrame( render ); });});
![Page 54: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/54.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
}
![Page 55: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/55.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
// update display pose // update scene and meshes
}
![Page 56: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/56.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 57: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/57.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 58: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/58.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() { vrDisplay.requestAnimationFrame( render );
// update display pose // update scene and meshes
vrDisplay.submitFrame( pose );}
![Page 61: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/61.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://caniuse.com/#search=webvr
![Page 67: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/67.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
https://github.com/googlevr/webvr-polyfill
![Page 68: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/68.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL & static image fallbacks
![Page 69: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/69.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL
Touch & Gyroscope Input
![Page 70: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/70.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices
![Page 71: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/71.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices
Progressive Loading
![Page 72: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/72.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
![Page 73: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/73.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla
![Page 74: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/74.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 77: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/77.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 78: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/78.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 79: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/79.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 80: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/80.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 81: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/81.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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>
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
![Page 82: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/82.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 85: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/85.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 86: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/86.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 87: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/87.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 88: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/88.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 90: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/90.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 91: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/91.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad WebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 92: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/92.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web AudioWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 93: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/93.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web Audio Web SpeechWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook
![Page 95: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/95.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
![Page 96: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/96.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Presence
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
![Page 98: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/98.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
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 99: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/99.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
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 101: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/101.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 107: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/107.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
130°
Comfortably bending 30° to each side
![Page 108: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/108.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
230°
Stretching 80° to each side
https://www.youtube.com/watch?v=00vzW2-PvvE
![Page 109: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/109.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
0.5m
20m
https://www.youtube.com/watch?v=00vzW2-PvvE
![Page 110: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/110.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
~20px
~10ppd
< 20px
60ppd
![Page 114: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/114.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 115: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/115.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm
https://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 116: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/116.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm = distance-independent millimeter
https://www.youtube.com/watch?v=ES9jArHRFHQ
![Page 132: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/132.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 133: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/133.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 134: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/134.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 135: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/135.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 136: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/136.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 137: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/137.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 138: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/138.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
![Page 139: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/139.jpg)
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
![Page 142: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/142.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 143: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/143.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/
![Page 144: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/144.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/
![Page 145: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/145.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 146: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/146.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 147: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/147.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 148: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/148.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 149: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/149.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
![Page 150: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/150.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
![Page 151: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/151.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 152: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/152.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 153: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/153.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/http://www.kotaku.co.uk/2016/12/16/the-state-of-virtual-reality-in-2016
![Page 154: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/154.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/http://www.kotaku.co.uk/2016/12/16/the-state-of-virtual-reality-in-2016
![Page 155: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/155.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the well-being of your users!
![Page 156: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/156.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_over/https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/
![Page 157: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/157.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_over/https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/
![Page 158: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/158.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZhttps://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa
![Page 159: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/159.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZhttps://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa
![Page 160: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/160.jpg)
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the well-being of your users!
![Page 161: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/161.jpg)
geildanke.com @ FRONTEND CONF ZURICH 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 162: More Ways to Make Your Users Sick – A talk about WebVR and UX Design](https://reader031.vdocuments.mx/reader031/viewer/2022011722/5aaab4ec7f8b9af22b8b4643/html5/thumbnails/162.jpg)
geildanke.com @fischaelameer
Thank you!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017