Writing 3D applications for the browser is possible since some years due to the WebGL API. But since Virtual Reality and Augmented Reality are getting more popular, web developers and designers now have a serious reason to get to know the 3D web, its APIs and design patterns.

1. @fischaelameergeildanke.com #JSCamp
Writing WebXR Apps
with Web Technology

2. React 360

3. WebXR Device API
React 360

4. UX Design for WebXR
WebXR Device API
React 360

5. WebXR

6. WebXR
WebVR

7. WebXR
WebVR WebAR

8. WebXR
WebVR WebAR

9. Created by Laura Hernández from the Noun Project

10. Created by Laura Hernández from the Noun Project

11. Completely DigitalVirtual Reality

12. Virtual Overlay
Augmented Reality:

13. Virtual and Real World Coincide
Mixed Reality

14. WebXR
WebVR WebAR

15. WebXR Device API
Detect AR/VR Devices
!11

16. WebXR Device API
Detect AR/VR Devices
!11
Get Device’s Capabilities

17. WebXR Device API
Detect AR/VR Devices
!11
Get Device’s Capabilities
Get Device’s Orientation/Position

18. WebXR Device API
Detect AR/VR Devices
!11
Get Device’s Capabilities
Get Device’s Orientation/Position
Display Images With A Fitting Frame Rate

19. WebVR API

20. WebVR API
WebXR Device API

21. WebXR Device API
Supports Augmented Reality
!13

22. WebXR Device API
Supports Augmented Reality
!13
Clean, Consistent, Predictable

23. WebXR Device API
Supports Augmented Reality
!13
Clean, Consistent, Predictable
Better Browser Optimizations

24. WebXR Device API
Supports Augmented Reality
!13
Clean, Consistent, Predictable
Better Browser Optimizations
Unified Input Model

25. Lifetime of a WebXR App
Request XR Device

26. Lifetime of a WebXR App
Request XR Device
Reveal XR Functionality

27. Lifetime of a WebXR App
Request XR Device
Reveal XR Functionality
Request XR Session

28. Lifetime of a WebXR App
Request XR Device
Reveal XR Functionality
Request XR Session
Run Render Loop

29. Request a XR Devices
navigator.xr.requestDevice().then(device => {
if (device) {
handleXRAvailable(device);
}
}).catch(error =>
console.error('Unable to request an XR device: ', error);
});

30. Request a XR Devices
navigator.xr.requestDevice().then(device => {
if (device) {
handleXRAvailable(device);
}
}).catch(error =>
console.error('Unable to request an XR device: ', error);
});

31. Check XR Session Support
let xrDevice = null;
function handleXRAvailable(device) {
xrDevice = device;
xrDevice.supportsSession({exclusive: true}).then(() => {
addWebXRButtonToPage();
}).catch((error) => {
console.log('Session not supported: ' + error);
});
}

32. Check XR Session Support
let xrDevice = null;
function handleXRAvailable(device) {
xrDevice = device;
xrDevice.supportsSession({exclusive: true}).then(() => {
addWebXRButtonToPage();
}).catch((error) => {
console.log('Session not supported: ' + error);
});
}

33. Request a XR Session
function beginXRSession() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('xrpresent');
document.body.appendChild(canvas);
xrDevice.requestSession({exclusive: true, outputContext: context})
.then(onSessionStarted)
.catch((error) => {console.log('requestSession failed: ' + error);});
}

34. Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}

35. Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}

36. Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}

37. Setup an XRLayer
let glCanvas = document.createElement('canvas');
let glContext = glCanvas.getContext('webgl');
function setupWebGLLayer() {
return glContext.setCompatibleXRDevice(xrDevice).then(() => {
xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext);
});
}

38. Setup an XRLayer
let glCanvas = document.createElement('canvas');
let glContext = glCanvas.getContext('webgl');
function setupWebGLLayer() {
return glContext.setCompatibleXRDevice(xrDevice).then(() => {
xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext);
});
}

39. Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}

40. Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}

41. Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}

42. Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}

43. Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}

44. Exit the WebXR Session
function endXRSession() {
if (xrSession) {xrSession.end().then(onSessionEnd);}
}
function onSessionEnd() {
xrSession = null;
window.requestAnimationFrame(onDrawFrame);
}

45. Exit the WebXR Session
function endXRSession() {
if (xrSession) {xrSession.end().then(onSessionEnd);}
}
function onSessionEnd() {
xrSession = null;
window.requestAnimationFrame(onDrawFrame);
}

50. Fallback: Magic Window
let mwCanvas = document.createElement('canvas');
let mwContext = mwCanvas.getContext('xrpresent');
document.body.appendChild(mwCanvas);
function beginMagicWindowXRSession() {
xrDevice.requestSession({exclusive: false, outputContext: mwContext})
.then(OnSessionStarted)
.catch((error) => {console.log('requestSession failed: ' + error);});
}

51. Fallback: Magic Window
let mwCanvas = document.createElement('canvas');
let mwContext = mwCanvas.getContext('xrpresent');
document.body.appendChild(mwCanvas);
function beginMagicWindowXRSession() {
xrDevice.requestSession({exclusive: false, outputContext: mwContext})
.then(OnSessionStarted)
.catch((error) => {console.log('requestSession failed: ' + error);});
}

52. On Page Load:
Magic Window

53. On Page Load:
Magic Window
exclusive sessions are supported

54. On Page Load:
Magic Window
exclusive sessions are supported
Render a
"Start VR" Button

55. 6DOF VR Headset
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

56. 6DOF VR Headset
AR-ready Smartphone
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

57. 6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

58. Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

59. Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
WebXR Polyfill
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

60. Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Magic Window
WebXR Polyfill
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

61. Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Magic Window
Gyroscope
WebXR Polyfill
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

62. Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Magic Window
Gyroscope
WebXR Polyfill
Static Image
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project

63. The Future: Augmented Reality
AR Session

64. The Future: Augmented Reality
AR Session Hit Test

65. The Future: Augmented Reality
AR Session Hit Test AR Anchors

66. React 360
https://facebook.github.io/react-360/

67. React 360
https://aframe.io/
A-Frame

68. React 360 Full-Sphere Gallery

69. $ npm install -g react-360-cli
React 360 Full-Sphere Gallery

70. $ npm install -g react-360-cli
$ react-360 init HelloJSCampBarcelona
React 360 Full-Sphere Gallery

71. $ npm install -g react-360-cli
$ react-360 init HelloJSCampBarcelona
$ cd HelloJSCampBarcelona
React 360 Full-Sphere Gallery

72. $ npm install -g react-360-cli
$ react-360 init HelloJSCampBarcelona
$ cd HelloJSCampBarcelona
$ npm start
React 360 Full-Sphere Gallery

73. $ npm install -g react-360-cli
$ react-360 init HelloJSCampBarcelona
$ cd HelloJSCampBarcelona
$ npm start
React 360 Full-Sphere Gallery
http://localhost:8081/index.html

74. React 360 Application

75. React 360 Application React 360 Runtime

76. React 360 Application React 360 Runtime
Renders 3D Objects
Keeps A High Frame Rate
Web Worker Environment

77. .
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
└── static_assets
React 360 Full-Sphere Gallery

78. .
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
└── static_assets
React 360 Full-Sphere Gallery

79. .
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
└── static_assets
React 360 Full-Sphere Gallery

80. .
├── __tests__
├── client.js
├── index.html
├── index.js
├── node_modules
├── package.json
├── rn-cli.config.js
└── static_assets
React 360 Full-Sphere Gallery

81. <body>
<div id="container"></div>
<script src="./client.bundle?platform=vr"></script>
<script>
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container')
);
</script>
</body>
index.html

82. <body>
<div id="container"></div>
<script src="./client.bundle?platform=vr"></script>
<script>
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container')
);
</script>
</body>
index.html

83. <body>
<div id="container"></div>
<script src="./client.bundle?platform=vr"></script>
<script>
React360.init(
'index.bundle?platform=vr&dev=true',
document.getElementById('container')
);
</script>
</body>
index.html

84. client.js
import { ReactInstance } from 'react-360-web'
function init(bundle, parent, options = {}) {
const r360 = new ReactInstance(bundle, parent,
{ fullScreen: true, …options })
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {}),
r360.getDefaultSurface()
)
r360.compositor.setBackground(r360.getAssetURL(‘360_world.jpg'))
}
window.React360 = { init }

85. client.js
import { ReactInstance } from 'react-360-web'
function init(bundle, parent, options = {}) {
const r360 = new ReactInstance(bundle, parent,
{ fullScreen: true, …options })
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {}),
r360.getDefaultSurface()
)
r360.compositor.setBackground(r360.getAssetURL(‘360_world.jpg'))
}
window.React360 = { init }

86. client.js
import { ReactInstance } from 'react-360-web'
function init(bundle, parent, options = {}) {
const r360 = new ReactInstance(bundle, parent,
{ fullScreen: true, …options })
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {}),
r360.getDefaultSurface()
)
r360.compositor.setBackground(r360.getAssetURL(‘360_world.jpg'))
}
window.React360 = { init }

87. client.js
import { ReactInstance } from 'react-360-web'
function init(bundle, parent, options = {}) {
const r360 = new ReactInstance(bundle, parent,
{ fullScreen: true, …options })
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {}),
r360.getDefaultSurface()
)
r360.compositor.setBackground(r360.getAssetURL(‘360_world.jpg'))
}
window.React360 = { init }

88. client.js
import { ReactInstance } from 'react-360-web'
function init(bundle, parent, options = {}) {
const r360 = new ReactInstance(bundle, parent,
{ fullScreen: true, …options })
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {}),
r360.getDefaultSurface()
)
r360.compositor.setBackground(r360.getAssetURL(‘360_world.jpg'))
}
window.React360 = { init }

89. index.js
export default class HelloJSCampBarcelona extends React.Component {
render() {
return (
<View style={styles.panel}>
<View style={styles.greetingBox}>
<Text style={styles.greeting}>Welcome to React 360</Text>
</View>
</View>
)
}
}
AppRegistry.registerComponent('HelloJSCampBarcelona', () =>
HelloChainReactPortland)

92. client.js
…
r360.renderToSurface(
r360.createRoot('HelloJSCampBarcelona', {
photos: [
{ uri: './static_assets/1.jpg', title: 'Boat', format: '2D' },
{ uri: './static_assets/2.jpg', title: 'Beach', format: '2D' },
{ uri: './static_assets/3.jpg', title: 'OnsieJS', format: '2D' },
],
}),
r360.getDefaultSurface(),
)
…

93. index.js
<View style={styles.wrapper}>
<Background uri={current.uri} format={current.format} />
<View style={styles.controls}>
<VrButton onClick={this._prevPhoto} style={styles.button}>
<Text style={styles.buttonText}>{'<'}</Text>
</VrButton>
<View><Text style={styles.title}>{current.title}</Text></View>
<VrButton onClick={this._nextPhoto} style={styles.button}>
<Text style={styles.buttonText}>{'>'}</Text>
</VrButton>
</View>
</View>

94. index.js
<View style={styles.wrapper}>
<Background uri={current.uri} format={current.format} />
<View style={styles.controls}>
<VrButton onClick={this._prevPhoto} style={styles.button}>
<Text style={styles.buttonText}>{'<'}</Text>
</VrButton>
<View><Text style={styles.title}>{current.title}</Text></View>
<VrButton onClick={this._nextPhoto} style={styles.button}>
<Text style={styles.buttonText}>{'>'}</Text>
</VrButton>
</View>
</View>

95. index.js
class Background extends React.Component {
constructor(props) {
super()
Environment.setBackgroundImage(props.uri, {format: props.format})
}
componentWillReceiveProps(nxtPrps) {
if (nxtPrps.uri !== this.props.uri ||
nxtPrps.format !== this.props.format) {
Environment.setBackgroundImage(nxtPrps.uri, {format: nxtPrps.format})
}
}
render() { return null }
}

96. index.js
state = { index: 0 }
_prevPhoto = () => {
let next = this.state.index - 1;
if (next < 0) { next += this.props.photos.length }
this.setState({ index: next })
}
_nextPhoto = () => {
this.setState({ index: this.state.index + 1 })
}

97. index.js
render() {
const current = this.props.photos[
this.state.index % this.props.photos.length
]
return (
<View style={styles.wrapper}>
<Background uri={current.uri} format={current.format} />
…
)
}

100. UX Design for WebXR Apps

101. Do Not Apply 2D Patterns

102. No Established Patterns Yet

103. UX Design Best-Practises
Add Feedback, Respond Immediately

104. Add Feedback

105. Add Feedback

106. Add Feedback

107. Add Feedback

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

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

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

115. UX Design Best-Practises
Add Feedback, Respond Immediately
Guide Users with Gaze Cues

116. Add Gaze Cues

117. Add Gaze Cues

118. Add Gaze Cues

119. Add Gaze Cues

120. UX Design Best-Practises
Add Feedback, Respond Immediately
Guide Users with Gaze Cues
Provide Information in Context

121. DoDon’t

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

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

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

125. Comfort and Safety in AR
There is No Optimal AR Environment

126. Comfort and Safety in AR
There is No Optimal AR Environment
Consider a User’s Movement

127. https://giphy.com/gifs/hyperrpg-vr-ouch-3oKIPAKenYskqXzYnC

128. https://giphy.com/gifs/hyperrpg-vr-ouch-3oKIPAKenYskqXzYnC

129. Comfort and Safety in AR
There is No Optimal AR Environment
Consider a User’s Movement
Avoid Fatiguing your Users

130. Comfort and Safety in VR
Do Not Trigger Phobias

133. Comfort and Safety in VR
Do Not Trigger Phobias
Do Not Move Things Fast Towards the Camera

136. Comfort and Safety in VR
Do Not Trigger Phobias
Do Not Move Things Fast Towards the Camera
Respect a User’s Safe Space

137. https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/

138. https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/

139. https://www.techradar.com/

140. https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/

141. https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/

142. Prevent Simulation Sickness
Do Not Move the Horizon or the Camera

143. Prevent Simulation Sickness
Do Not Move the Horizon or the Camera
Do Not Use Acceleration

144. https://web.colby.edu/cogblog/2016/05/09/2451/

145. https://web.colby.edu/cogblog/2016/05/09/2451/

146. Prevent Simulation Sickness
Do Not Move the Horizon or the Camera
Do Not Use Acceleration
Avoid Flicker and Blur

147. Prevent Simulation Sickness
Do Not Move the Horizon or the Camera
Do Not Use Acceleration
Avoid Flicker and Blur
Add a Stable Focus Point

148. @fischaelameergeildanke.com #JSCamp
Respect Your Users!
Test Your Product on a Diverse Audience.

149. @fischaelameergeildanke.com #JSCamp
Get Involved!
https://github.com/immersive-web/webxr
https://github.com/facebook/react-360
https://github.com/mozilla/aframe-xr