Michaela gives an introduction to WebVR. She covers hardware, concepts, the API and UX design challenges.

1. geildanke.com @fischaelameer
An Introduction to WebVR
How to make your user sick in 60 seconds.
or

2. geildanke.com @fischaelameer
You should care about WebVR.

3. geildanke.com @fischaelameer
Hardware & Concepts

4. geildanke.com @fischaelameer
Hardware & Concepts WebVR API

5. geildanke.com @fischaelameer
Hardware & Concepts WebVR API UX Design & VR

6. @fischaelameergeildanke.com
Virtual Reality is tricking our eyes and brain
to think of a 2D image to be in 3D.

7. @fischaelameergeildanke.com
Virtual Reality changes the
way we relate to technology.

8. geildanke.com @fischaelameer
Mobile VR Desktop VR Standalone VR
Google Cardboard Samsung Gear VR Google Daydream View

9. geildanke.com @fischaelameer
Mobile VR Desktop VR Standalone VR
Oculus Rift HTC Vive Playstation VR

10. geildanke.com @fischaelameer
Mobile VR Desktop VR Standalone VR
https://en.wikipedia.org/wiki/Virtual_Boy

11. @fischaelameergeildanke.com
Virtual Reality Concepts

12. @fischaelameergeildanke.com
Stereoscopic Images

13. geildanke.com @fischaelameer

14. geildanke.com @fischaelameer

15. geildanke.com @fischaelameer

16. geildanke.com @fischaelameer
IPD = Interpupillary distance

17. geildanke.com @fischaelameer

18. geildanke.com @fischaelameer

19. geildanke.com @fischaelameer

20. @fischaelameergeildanke.com
Tracking

21. geildanke.com @fischaelameer

22. geildanke.com @fischaelameer
Rotation

23. geildanke.com @fischaelameer
Rotation
Position

24. geildanke.com @fischaelameer

25. geildanke.com @fischaelameer
Rotation
Position

26. geildanke.com @fischaelameer
Browser
https://github.com/mrdoob/three.js

27. geildanke.com @fischaelameer
Browser
WebGL
https://github.com/mrdoob/three.js

28. geildanke.com @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js

29. geildanke.com @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
three.js
Ricardo Cabello

30. geildanke.com @fischaelameer

31. geildanke.com @fischaelameer

32. geildanke.com @fischaelameer

33. geildanke.com @fischaelameer

34. geildanke.com @fischaelameer
x: 0, y: 1.6, z: 0

35. geildanke.com @fischaelameer
x: 0, y: 1.6, z: 0

36. geildanke.com @fischaelameer

37. geildanke.com @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();

38. geildanke.com @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();

39. geildanke.com @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();

40. geildanke.com @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();

41. geildanke.com @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ) {
if ( displays.length > 0 ) {
vrDisplay = displays[ 0 ];
} else {
console.log( 'No VR Displays found.' );
}
});

42. geildanke.com @fischaelameer
VRDisplay.isConnected
VRDisplay.isPresenting
VRDisplay.getEyeParameters()
VRDisplay.getPose()
VRDisplay.requestPresent()
VRDisplay.submitFrame()
VRDisplay.requestAnimationFrame()

43. geildanke.com @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );

44. geildanke.com @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] );
});

45. geildanke.com @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] )
.then( function() {
vrDisplay.requestAnimationFrame( render );
});
});

46. geildanke.com @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
}

47. geildanke.com @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// update display pose
// update scene and meshes
}

48. geildanke.com @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 ]

49. geildanke.com @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

50. geildanke.com @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// update display pose
// update scene and meshes
vrDisplay.submitFrame( pose );
}

51. geildanke.com @fischaelameer

52. geildanke.com @fischaelameer

53. geildanke.com @fischaelameer
https://iswebvrready.org/

54. geildanke.com @fischaelameer
Browser
WebVRWebGL
three.js

55. geildanke.com @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
https://github.com/googlevr/webvr-polyfill

56. geildanke.com @fischaelameer
Browser
WebVRWebGL
three.js
three.js VRControls three.js VREffect
WebVR Polyfill
Ricardo Cabello
https://github.com/mrdoob/three.js

57. geildanke.com @fischaelameer
Browser
WebVRWebGL
three.js
three.js VRControls three.js VREffect
WebVR Manager
WebVR Polyfill
Boris Smus
https://github.com/borismus/webvr-boilerplate

58. geildanke.com @fischaelameer
WebGL & static image fallbacks

59. geildanke.com @fischaelameer
WebGL
Touch & Gyroscope Input

60. geildanke.com @fischaelameer
Mobile and Desktop VR Devices

61. geildanke.com @fischaelameer
Mobile and Desktop VR Devices
Progressive Loading

62. geildanke.com @fischaelameer
Browser
WebVRWebGL
three.js
three.js VRControls three.js VREffect
WebVR Polyfill
WebVR Manager

63. geildanke.com @fischaelameer
Browser
WebVRGamepad WebGL
three.js
three.js VRControls three.js VREffect
WebVR Polyfill
WebVR Manager

64. geildanke.com @fischaelameer
Browser
WebVRGamepad Web AudioWebGL
three.js
three.js VRControls three.js VREffect
WebVR Polyfill
WebVR Manager

65. geildanke.com @fischaelameer
Browser
WebVRGamepad Web Audio Web SpeechWebGL
three.js
three.js VRControls three.js VREffect
WebVR Polyfill
WebVR Manager

66. geildanke.com @fischaelameer

67. @fischaelameergeildanke.com
UX Design for VR

68. geildanke.com @fischaelameer
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc

69. geildanke.com @fischaelameer
Presence
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc

70. @fischaelameergeildanke.com
Ergonomics

71. geildanke.com @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/

72. geildanke.com @fischaelameer

73. geildanke.com @fischaelameer

74. geildanke.com @fischaelameer

75. geildanke.com @fischaelameer

76. geildanke.com @fischaelameer
70°

77. geildanke.com @fischaelameer
130°
Comfortably bending 30° to each side

78. geildanke.com @fischaelameer
230°
Stretching 80° to each side
https://www.youtube.com/watch?v=00vzW2-PvvE

79. geildanke.com @fischaelameer
0.5m
20m
https://www.youtube.com/watch?v=00vzW2-PvvE

80. geildanke.com @fischaelameer
~20px
~10ppd
< 20px
60ppd

81. geildanke.com @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

82. geildanke.com @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

83. geildanke.com @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

84. geildanke.com @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

85. geildanke.com @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

86. geildanke.com @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

87. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com

88. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com

89. geildanke.com @fischaelameer

90. geildanke.com @fischaelameer

91. geildanke.com @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!

92. geildanke.com @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!

93. geildanke.com @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!

94. geildanke.com @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!

95. geildanke.com @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!

96. geildanke.com @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!

97. geildanke.com @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!

98. geildanke.com @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/

99. geildanke.com @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/

100. geildanke.com @fischaelameer

101. geildanke.com @fischaelameer

102. geildanke.com @fischaelameer
Goodbye, UX metaphors!

103. geildanke.com @fischaelameer
Goodbye, UX metaphors!

104. @fischaelameergeildanke.com
The Future of WebVR

105. @fischaelameergeildanke.com
You are responsible for the
well-being of your users!

106. geildanke.com @fischaelameer
https://twitter.com/Tojiro
https://twitter.com/joshcarpenter
https://twitter.com/borismus
https://twitter.com/thealphamike
Amazing people to follow
https://webvr-slack.herokuapp.com/
https://www.reddit.com/r/WebVR/
Community
http://www.uxofvr.com/
https://mozvr.com/
https://iswebvrready.org/
General information
https://github.com/clayallsopp/react-vr
https://w3c.github.io/webvr/
https://aframe.io/
https://github.com/borismus/webvr-boilerplate
https://github.com/googlevr/webvr-polyfill
https://threejs.org/
API, frameworks, libraries https://twitter.com/Lady_Ada_King
https://twitter.com/arturitu
https://twitter.com/snickersnax

107. geildanke.com @fischaelameer
https://geildanke.com/en/vr
Thank you!
@fischaelameer