Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
More Ways to Make Your Users Sick
About WebVR and UX Design
@fischa...
geildanke.com @fischaelameer
You should care about WebVR,
because you care about your users.
@fischaelameergeildanke.com @ F...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts WebVR API
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts WebVR API UX Design & VR
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality is tricking our eyes and brain
to think of a 2D ima...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality changes the 

way we relate to technology.
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Understanding Spatial Relationships
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Multi Tasking
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Simulations
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
What is VR Bad At?

@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality
Hardware and Concepts
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Google Cardboard Samsung Gear VR...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Oculus Rift HTC Vive Playstation...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
https://en.wikipedia.org/wiki/Vi...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Stereoscopic Images
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
IPD = Interpupillary distance
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Tracking
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation
Position
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation
Position
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
https://github.com/mrdoob/three.js
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebGL
https://github.com/mrdoob/three.js
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
three.js
Ric...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
x: 0, y: 1.6, z: 0
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
x: 0, y: 1.6, z: 0
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveC...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveC...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveC...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveC...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VRDisplay.isConnected
VRDisplay.isPresenting
VRDisplay.getEyeParam...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.request...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.request...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
}
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let pose = vrDisplay.getPose();
console.log( pose.orientation );
/...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let leftEyeParameters = vrDisplay.getEyeParameters( 'left' );
cons...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://caniuse.com/#search=webvr
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
https://github.com/googl...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL & static image fallbacks
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL
Touch & Gyroscope Input
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices
Progressive Loading
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<a-box> <a-cone> <a-cylinder> <a-dodecahedron>
...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
geildanke.com @fischaelameer
<a-video> <a-videos...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
React VR by Facebook
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
React VR by Facebook
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View }...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View }...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View }...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Box Cylinder CylindricalPanel Plane Sphere
geildanke.com @fischaela...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React ...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad WebGL
three.js WebVR Polyfill
A-Frame by Mozill...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web AudioWebGL
three.js WebVR Polyfill
A-Frame ...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web Audio Web SpeechWebGL
three.js WebVR Polyfi...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
UX Design for VR
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://me...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Presence
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
h...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Ergonomics
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
It was the pioneer days; people had to make their own interrogation...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
It was the pioneer days; people had to make their own interrogation...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
It was the pioneer days; people had to make their own interrogatio...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
70°
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
130°
Comfortably bending 30° to each side
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
230°
Stretching 80° to each side
https://www.youtube.com/watch?v=0...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
0.5m
20m
https://www.youtube.com/watch?v=00vzW2-PvvE
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
~20px
~10ppd
< 20px
60ppd
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm
https://www.youtube.com/watch?v=ES9jArHRFHQ
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm = distance-independent millimeter
https://www.youtube.com/watc...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different de...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep ...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/
http://www.kotaku.co.uk/2016/12/1...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/
http://www.kotaku.co.uk/2016/12/1...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the 

well-being of your users!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_o...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_o...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZ
https://giphy.com/gifs/leroypatters...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZ
https://giphy.com/gifs/leroypatters...
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the 

well-being of your users!
geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
http://www.uxofvr.com/
https://webvr.rocks/
General information
ht...
geildanke.com @fischaelameer
Thank you!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Upcoming SlideShare
Loading in …5
×

More Ways to Make Your Users Sick – A talk about WebVR and UX Design

715 views

Published on

Since the early years of tech, engineers and designers tried to overcome the separation between their product and their users. What if I tell you, you do not have to worry about this anymore? With the emergence of VR, your users are finally in your applications. This changes the way people interact with the digital world dramatically. And it increases your power over other people's lives. But with great power comes great responsibility – this is why my talk will focus on Virtual Reality in the web and what you as a developer or designer can do, if you do not want to harm your users. We will begin with a short introduction into the basic concepts of virtual reality, like stereoscopic images and tracking. Then we will take a look at the current status of the WebVR ecosystem, like the WebVR API and the Gamepad API. This will lead us to the topic I'm most passionate about: a good user experience in VR applications. As developers we are confronted with various questions: How can we avoid triggering simulation sickness or what can we do to prevent triggering phobias or seizures?

Published in: Technology
  • Be the first to comment

  • Be the first to like this

More Ways to Make Your Users Sick – A talk about WebVR and UX Design

  1. 1. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer More Ways to Make Your Users Sick About WebVR and UX Design @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
  2. 2. geildanke.com @fischaelameer You should care about WebVR, because you care about your users. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
  3. 3. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer VR Concepts
  4. 4. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer VR Concepts WebVR API
  5. 5. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer VR Concepts WebVR API UX Design & VR
  6. 6. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Virtual Reality is tricking our eyes and brain to think of a 2D image to be in 3D.
  7. 7. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Virtual Reality changes the 
 way we relate to technology.
  8. 8. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 VR Is Good For Understanding Spatial Relationships
  9. 9. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 VR Is Good For Multi Tasking
  10. 10. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 VR Is Good For Simulations
  11. 11. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 What is VR Bad At?

  12. 12. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
  13. 13. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
  14. 14. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Virtual Reality Hardware and Concepts
  15. 15. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Mobile VR Desktop VR Standalone VR Google Cardboard Samsung Gear VR Google Daydream View
  16. 16. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Mobile VR Desktop VR Standalone VR Oculus Rift HTC Vive Playstation VR
  17. 17. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Mobile VR Desktop VR Standalone VR https://en.wikipedia.org/wiki/Virtual_Boy
  18. 18. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Stereoscopic Images
  19. 19. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  20. 20. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  21. 21. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  22. 22. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer IPD = Interpupillary distance
  23. 23. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  24. 24. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  25. 25. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  26. 26. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Tracking
  27. 27. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  28. 28. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Rotation
  29. 29. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Rotation Position
  30. 30. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7
  31. 31. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7
  32. 32. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  33. 33. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Rotation Position
  34. 34. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser https://github.com/mrdoob/three.js
  35. 35. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebGL https://github.com/mrdoob/three.js
  36. 36. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js
  37. 37. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js three.js Ricardo Cabello
  38. 38. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  39. 39. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  40. 40. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  41. 41. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  42. 42. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer x: 0, y: 1.6, z: 0
  43. 43. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer x: 0, y: 1.6, z: 0
  44. 44. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  45. 45. 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();
  46. 46. 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();
  47. 47. 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();
  48. 48. 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();
  49. 49. 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.' ); } });
  50. 50. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer VRDisplay.isConnected VRDisplay.isPresenting VRDisplay.getEyeParameters() VRDisplay.requestAnimationFrame()
  51. 51. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer vrDisplay.requestPresent( [ { source: myCanvas } ] );
  52. 52. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ); });
  53. 53. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer myButton.addEventListener( 'click', function() { vrDisplay.requestPresent( [ { source: myCanvas } ] ) .then( function() { vrDisplay.requestAnimationFrame( render ); }); });
  54. 54. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer function render() { vrDisplay.requestAnimationFrame( render ); }
  55. 55. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer function render() { vrDisplay.requestAnimationFrame( render ); // update display pose // update scene and meshes }
  56. 56. 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 ]
  57. 57. 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.5 console.log( leftEyeParameters.renderHeight ); // 721
  58. 58. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer function render() { vrDisplay.requestAnimationFrame( render ); // update display pose // update scene and meshes vrDisplay.submitFrame( pose ); }
  59. 59. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  60. 60. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  61. 61. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://caniuse.com/#search=webvr
  62. 62. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  63. 63. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  64. 64. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  65. 65. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  66. 66. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  67. 67. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL three.js WebVR Polyfill https://github.com/googlevr/webvr-polyfill
  68. 68. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer WebGL & static image fallbacks
  69. 69. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer WebGL Touch & Gyroscope Input
  70. 70. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Mobile and Desktop VR Devices
  71. 71. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Mobile and Desktop VR Devices Progressive Loading
  72. 72. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL three.js WebVR Polyfill
  73. 73. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL three.js WebVR Polyfill A-Frame by Mozilla
  74. 74. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Browser WebVRWebGL three.js WebVR Polyfill A-Frame by Mozilla React VR by Facebook
  75. 75. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer A-Frame by Mozilla
  76. 76. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer A-Frame by Mozilla
  77. 77. 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>
  78. 78. 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>
  79. 79. 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>
  80. 80. 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>
  81. 81. 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
  82. 82. 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>
  83. 83. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer React VR by Facebook
  84. 84. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer React VR by Facebook
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  90. 90. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Browser WebVRWebGL three.js WebVR Polyfill A-Frame by Mozilla React VR by Facebook
  91. 91. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Browser WebVRGamepad WebGL three.js WebVR Polyfill A-Frame by Mozilla React VR by Facebook
  92. 92. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Browser WebVRGamepad Web AudioWebGL three.js WebVR Polyfill A-Frame by Mozilla React VR by Facebook
  93. 93. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Browser WebVRGamepad Web Audio Web SpeechWebGL three.js WebVR Polyfill A-Frame by Mozilla React VR by Facebook
  94. 94. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 UX Design for VR
  95. 95. 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
  96. 96. 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
  97. 97. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Ergonomics
  98. 98. @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/
  99. 99. @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/
  100. 100. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
  101. 101. 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/
  102. 102. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  103. 103. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  104. 104. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  105. 105. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  106. 106. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer 70°
  107. 107. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer 130° Comfortably bending 30° to each side
  108. 108. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer 230° Stretching 80° to each side https://www.youtube.com/watch?v=00vzW2-PvvE
  109. 109. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer 0.5m 20m https://www.youtube.com/watch?v=00vzW2-PvvE
  110. 110. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer ~20px ~10ppd < 20px 60ppd
  111. 111. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  112. 112. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  113. 113. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  114. 114. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ
  115. 115. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer dmm https://www.youtube.com/watch?v=ES9jArHRFHQ
  116. 116. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer dmm = distance-independent millimeter https://www.youtube.com/watch?v=ES9jArHRFHQ
  117. 117. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com
  118. 118. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com
  119. 119. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  120. 120. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  121. 121. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  122. 122. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  123. 123. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Gaze Cues
  124. 124. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Gaze Cues
  125. 125. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Gaze Cues
  126. 126. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Gaze Cues
  127. 127. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer Gaze Cues
  128. 128. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
  129. 129. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Goodbye, UX metaphors!
  130. 130. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Goodbye, UX metaphors!
  131. 131. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 Goodbye, UX metaphors!
  132. 132. 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
  133. 133. 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
  134. 134. 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
  135. 135. 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
  136. 136. 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
  137. 137. 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
  138. 138. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
  139. 139. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com
  140. 140. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  141. 141. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
  142. 142. 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!
  143. 143. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://web.colby.edu/cogblog/2016/05/09/2451/
  144. 144. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://web.colby.edu/cogblog/2016/05/09/2451/
  145. 145. 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!
  146. 146. 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!
  147. 147. 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!
  148. 148. 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!
  149. 149. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
  150. 150. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://vtrav.com/2015/04/nose-reduces-simulator-sickness/
  151. 151. 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!
  152. 152. 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!
  153. 153. @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
  154. 154. @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
  155. 155. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 You are responsible for the 
 well-being of your users!
  156. 156. @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/
  157. 157. @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/
  158. 158. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://imgur.com/gallery/DDaNZ https://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa
  159. 159. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 https://imgur.com/gallery/DDaNZ https://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa
  160. 160. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 You are responsible for the 
 well-being of your users!
  161. 161. 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
  162. 162. geildanke.com @fischaelameer Thank you! @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

×