A talk about React VR, WebVR and UX design for VR web applications, given at ReactConf 2017, Santa Clara, CA.

1. geildanke.com @fischaelameer
MICHAELA LEHR
Founder · Geil,Danke! · Frontend Developer, UX Designer
@fischaelameer
Goodbye, Flatland!
An introduction to React VR
and what it means for web developers

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

3. geildanke.com @fischaelameer
VR Concepts

4. geildanke.com @fischaelameer
VR Concepts ReactVR

5. geildanke.com @fischaelameer
VR Concepts ReactVR UX Design & VR

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

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

8. geildanke.com @fischaelameer
Virtual Reality Concepts

9. geildanke.com @fischaelameer
Stereoscopic Images

10. geildanke.com @fischaelameer

11. geildanke.com @fischaelameer

12. geildanke.com @fischaelameer

13. geildanke.com @fischaelameer
IPD – Interpupillary distance

14. geildanke.com @fischaelameer

15. geildanke.com @fischaelameer

16. geildanke.com @fischaelameer

17. geildanke.com @fischaelameer
Tracking

18. geildanke.com @fischaelameer

19. geildanke.com @fischaelameer
Rotation

20. geildanke.com @fischaelameer
Rotation
Position

21. geildanke.com @fischaelameer

22. geildanke.com @fischaelameer
Rotation
Position

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

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

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

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

27. geildanke.com @fischaelameer
Browser
WebVRWebGL
https://facebookincubator.github.io/react-vr/index.html
three.js
ReactVR

28. geildanke.com @fischaelameer

29. geildanke.com @fischaelameer

30. geildanke.com @fischaelameer

31. geildanke.com @fischaelameer
x: 0, y: 0, z: 0

32. geildanke.com @fischaelameer
x: 0, y: 0, z: 0

33. geildanke.com @fischaelameer

34. geildanke.com @fischaelameer
npm install -g react-vr-cli
react-vr init GEILDANKE_REACTVR_PANO
cd GEILDANKE_REACTVR_PANORAMA
npm start

35. geildanke.com @fischaelameer
/GEILDANKE_REACTVR_PANO
!"" index.vr.js
!"" node_modules
!"" package.json
!"" postinstall.js
!"" rn-cli.config.js
!"" static_assets
# %"" vr-mountain.jpg
%"" vr
!"" client.js
%"" index.html

36. geildanke.com @fischaelameer
import React from 'react';
import { AppRegistry, asset, Pano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component {
render() {
return (
<View>
<Pano source = { asset('vr-mountain.jpg') }/>
</View>
);
}
};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
index.vr.js

37. geildanke.com @fischaelameer

38. geildanke.com @fischaelameer

39. 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/

40. 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/

41. geildanke.com @fischaelameer

42. geildanke.com @fischaelameer

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

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

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

46. geildanke.com @fischaelameer
Lightning
UI
Button
GalleryImages
GalleryImage
Room
Wall
index.vr.js

47. geildanke.com @fischaelameer
import React from 'react';
import { AppRegistry, asset, View } from 'react-vr';
import Images from './Images';
import Lightning from './Lightning';
import Room from './Room';
import UI from './UI';
import World from './World';
class GEILDANKE_REACTVR_GALLERY extends React.Component {
render() {
return (
<View>
<Lightning />
<World />
<Room />
<Images />
<UI />
</View>
);
}
};
AppRegistry.registerComponent('GEILDANKE_REACTVR_GALLERY', () => GEILDANKE_REACTVR_GALLERY);
index.vr.js

48. geildanke.com @fischaelameer
import React from 'react';
import { AmbientLight, PointLight, View } from 'react-vr';
class Lightning extends React.Component {
render() {
return(
<View>
<AmbientLight intensity = { 1.2 } />
<PointLight intensity = { 0.25 }
style = {{
color: '#ffffff',
transform: [{ translate : [ 0, 4, 0.25 ] }] }} />
</View>
);
}
}
module.exports = Lightning;
Lightning.js

49. geildanke.com @fischaelameer
import React from 'react';
import { AmbientLight, PointLight, View } from 'react-vr';
class Lightning extends React.Component {
render() {
return(
<View>
<AmbientLight intensity = { 1.2 } />
<PointLight intensity = { 0.25 }
style = {{
color: '#ffffff',
transform: [{ translate : [ 0, 4, 0.25 ] }] }} />
</View>
);
}
}
module.exports = Lightning;
Lightning.js

50. geildanke.com @fischaelameer
import React from 'react';
import { AmbientLight, PointLight, View } from 'react-vr';
class Lightning extends React.Component {
render() {
return(
<View>
<AmbientLight intensity = { 1.2 } />
<PointLight intensity = { 0.25 }
style = {{
color: '#ffffff',
transform: [{ translate : [ 0, 4, 0.25 ] }] }} />
</View>
);
}
}
module.exports = Lightning;
Lightning.js

51. geildanke.com @fischaelameer
…
render() {
let scale = this.props.scale,
translate = this.props.translate,
wall = null,
wallMat = {mesh:asset('wall.obj'), mtl:asset('wall.mtl'), lit: true},
windowMat = {mesh:asset('window.obj'), mtl:asset('window.mtl'), lit: true};
if (this.props.hasWindow && this.props.hasWindow === true) {
wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={windowMat} />;
} else {
wall = <Mesh style={{transform: [{translate: translate}, {scale: scale},],}} source={wallMat} />;
}
return (
wall
);
}
…
Wall.js

52. geildanke.com @fischaelameer
…
import Wall from './Wall';
class Room extends React.Component {
render() {
return(
<View>
<Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} />
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
<Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} />
</View>
);
}
}
…
Room.js

53. geildanke.com @fischaelameer
…
import Wall from './Wall';
class Room extends React.Component {
render() {
return(
<View>
<Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} />
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
<Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} />
</View>
);
}
}
…
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
Room.js

54. geildanke.com @fischaelameer
…
import Wall from './Wall';
class Room extends React.Component {
render() {
return(
<View>
<Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} />
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
<Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} />
</View>
);
}
}
…
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
Room.js

55. geildanke.com @fischaelameer
…
import Wall from './Wall';
class Room extends React.Component {
render() {
return(
<View>
<Wall scale={[5, 0.2, 10]} translate={[0, -2.9, -5.02]} />
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
<Wall hasWindow scale={[5, 3, 0.02]} translate={[0, 0, 4.98]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[-5.02, 0, -5.02]} />
<Wall hasWindow scale={[0.02, 3, 10]} translate={[5.02, 0, -5.02]} />
</View>
);
}
}
…
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
Room.js

56. geildanke.com @fischaelameer
x
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />

57. geildanke.com @fischaelameer
y
x
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />

58. geildanke.com @fischaelameer
y
x
z
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />

59. geildanke.com @fischaelameer
y
x
z
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />

60. geildanke.com @fischaelameer
y
x
z 1 unit = 1 meter
1
1
1
<Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />

61. geildanke.com @fischaelameer
3D Coordinate System, Units & Scaling
Flexbox Layout
Animations (Animated API)
React VR Components

62. geildanke.com @fischaelameer
3D Coordinate System, Units & Scaling
Flexbox Layout
Animations (Animated API)
React VR Components

63. geildanke.com @fischaelameer
…
let texture = this.props.texture,
imageWidth = this.props.width;
<Image
style={{
margin: 0.05,
width: imageWidth,
height: imageWidth,
}}
source={texture}
/>
…
GalleryImage.js

64. geildanke.com @fischaelameer
…
for (let i = 0; i < iMax; i += 1) {
images.push(
<GalleryImage
key={i}
texture={config[i].texture}
index={i}
length={this.numberOfImages}
width={this.imageWidth} />
);
}
…
GalleryImages.js

65. geildanke.com @fischaelameer
…
for (let i = 0; i < iMax; i += 1) {
images.push(
<GalleryImage
key={i}
texture={config[i].texture}
index={i}
length={this.numberOfImages}
width={this.imageWidth} />
);
}
…
…
<View>
{images}
</View>
…
GalleryImages.js

66. geildanke.com @fischaelameer
…
for (let i = 0; i < iMax; i += 1) {
images.push(
<GalleryImage
key={i}
texture={config[i].texture}
index={i}
length={this.numberOfImages}
width={this.imageWidth} />
);
}
…
…
<View
style={{
flexDirection: 'row',
}}
>
{images}
</View>
…
GalleryImages.js

67. geildanke.com @fischaelameer

68. geildanke.com @fischaelameer
3D Coordinate System, Units & Scaling
Flexbox Layout
Animations (Animated API)
React VR Components

69. geildanke.com @fischaelameer
3D Coordinate System, Units & Scaling
Flexbox Layout
Animations (Animated API)
React VR Components

70. geildanke.com @fischaelameer
GalleryImages.js
…
class GalleryImages extends React.Component {
constructor(props) {
super();
this.state = {
scrollValue: new Animated.Value(0),
};
}
componentWillMount() {
Animated.timing(
this.state.scrollValue,
{
toValue: 60,
duration: 2000,
easing: Easing.linear,
}
).start();
}
…

71. geildanke.com @fischaelameer
GalleryImages.js
…
class GalleryImages extends React.Component {
constructor(props) {
super();
this.state = {
scrollValue: new Animated.Value(0),
};
}
componentWillMount() {
Animated.timing(
this.state.scrollValue,
{
toValue: 60,
duration: 2000,
easing: Easing.linear,
}
).start();
}
…
…
<Animated.View
style={{
flexDirection: 'row',
transform: [
{translateX: this.state.scrollValue},
],
}}
>
{images}
</Animated.View>
…

72. geildanke.com @fischaelameer
3D Coordinate System, Units & Scaling
Flexbox Layout
Animations (Animated API)
React VR Components

73. geildanke.com @fischaelameer
View
Image
Core Components
Pano
Mesh
React VR Components
AmbientLight, PointLight,

74. geildanke.com @fischaelameer
View
Image
Text
Core Components
Pano
Mesh
React VR Components
AmbientLight, PointLight,

75. geildanke.com @fischaelameer
View
Image
Text
Core Components
Pano
Mesh
React VR Components
AmbientLight, PointLight,
DirectionalLight, SpotLight

76. geildanke.com @fischaelameer
View
Image
Text
Core Components
Pano
Mesh
React VR Components
VrButton
AmbientLight, PointLight,
DirectionalLight, SpotLight

77. geildanke.com @fischaelameer
View
Image
Text
Core Components
Pano
Mesh
React VR Components
VrButton
AmbientLight, PointLight,
DirectionalLight, SpotLight
Sound

78. geildanke.com @fischaelameer
UX Design for VR

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

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

81. geildanke.com @fischaelameer
Ergonomics

82. 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/

83. geildanke.com @fischaelameer

84. geildanke.com @fischaelameer

85. geildanke.com @fischaelameer

86. geildanke.com @fischaelameer

87. geildanke.com @fischaelameer
70°

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

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

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

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

92. 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

93. 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

94. 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

95. 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

96. 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

97. 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

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

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

100. geildanke.com @fischaelameer

101. geildanke.com @fischaelameer

102. 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!

103. 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!

104. 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!

105. 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!

106. 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!

107. 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!

108. 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!

109. geildanke.com @fischaelameer
You are responsible for the
well-being of your users!

110. geildanke.com @fischaelameer
http://www.uxofvr.com/
https://iswebvrready.org/
General information
https://webvr-slack.herokuapp.com/
https://www.reddit.com/r/reactvr/
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://facebookincubator.github.io/react-vr/index.html
https://facebookincubator.github.io/react-vr/docs/getting-started.html
https://github.com/facebookincubator/react-vr

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