Downloaded 27 times
![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(), ) …](https://image.slidesharecdn.com/2018-07-jscamp-180725070011/75/WebXR-A-New-Dimension-For-The-Web-Writing-Virtual-and-Augmented-Reality-Apps-With-Web-Technology-92-2048.jpg)
![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} /> … ) }](https://image.slidesharecdn.com/2018-07-jscamp-180725070011/75/WebXR-A-New-Dimension-For-The-Web-Writing-Virtual-and-Augmented-Reality-Apps-With-Web-Technology-97-2048.jpg)
Uploaded byGeilDanke
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps With Web Technology
The document provides a comprehensive overview of developing applications using WebXR and React 360, detailing the process of detecting XR devices, managing sessions, and rendering 3D objects. It includes code snippets for initializing sessions, handling rendering loops, and setting up background images with React components. Additionally, it discusses best practices for user interface elements and optimizing performance for augmented and virtual reality experiences.
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps With Web Technology
- 1. @fischaelameergeildanke.com #JSCamp Writing WebXRApps with Web Technology
- 2.
- 3.
- 4. UX Design forWebXR WebXR Device API React 360
- 5.
- 6.
- 7.
- 8.
- 9. Created by LauraHernández from the Noun Project
- 10. Created by LauraHernández from the Noun Project
- 11.
- 12.
- 13. Virtual and RealWorld Coincide Mixed Reality
- 14.
- 15. WebXR Device API DetectAR/VR Devices !11
- 16. WebXR Device API DetectAR/VR Devices !11 Get Device’s Capabilities
- 17. WebXR Device API DetectAR/VR Devices !11 Get Device’s Capabilities Get Device’s Orientation/Position
- 18. WebXR Device API DetectAR/VR Devices !11 Get Device’s Capabilities Get Device’s Orientation/Position Display Images With A Fitting Frame Rate
- 19.
- 20.
- 21. WebXR Device API SupportsAugmented Reality !13
- 22. WebXR Device API SupportsAugmented Reality !13 Clean, Consistent, Predictable
- 23. WebXR Device API SupportsAugmented Reality !13 Clean, Consistent, Predictable Better Browser Optimizations
- 24. WebXR Device API SupportsAugmented Reality !13 Clean, Consistent, Predictable Better Browser Optimizations Unified Input Model
- 25. Lifetime of aWebXR App Request XR Device
- 26. Lifetime of aWebXR App Request XR Device Reveal XR Functionality
- 27. Lifetime of aWebXR App Request XR Device Reveal XR Functionality Request XR Session
- 28. Lifetime of aWebXR App Request XR Device Reveal XR Functionality Request XR Session Run Render Loop
- 29. Request a XRDevices navigator.xr.requestDevice().then(device => { if (device) { handleXRAvailable(device); } }).catch(error => console.error('Unable to request an XR device: ', error); });
- 30. Request a XRDevices navigator.xr.requestDevice().then(device => { if (device) { handleXRAvailable(device); } }).catch(error => console.error('Unable to request an XR device: ', error); });
- 31. Check XR SessionSupport 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 SessionSupport 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 XRSession 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 XRSession 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 XRSession 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 XRSession 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 letglCanvas = 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 letglCanvas = document.createElement('canvas'); let glContext = glCanvas.getContext('webgl'); function setupWebGLLayer() { return glContext.setCompatibleXRDevice(xrDevice).then(() => { xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext); }); }
- 39. Start a XRSession 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 RenderLoop 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 RenderLoop 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 RenderLoop 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 RenderLoop 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 WebXRSession function endXRSession() { if (xrSession) {xrSession.end().then(onSessionEnd);} } function onSessionEnd() { xrSession = null; window.requestAnimationFrame(onDrawFrame); }
- 45. Exit the WebXRSession function endXRSession() { if (xrSession) {xrSession.end().then(onSessionEnd);} } function onSessionEnd() { xrSession = null; window.requestAnimationFrame(onDrawFrame); }
- 50. Fallback: Magic Window letmwCanvas = 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 letmwCanvas = 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: MagicWindow
- 53. On Page Load: MagicWindow exclusive sessions are supported
- 54. On Page Load: MagicWindow exclusive sessions are supported Render a "Start VR" Button
- 55. 6DOF VR Headset Createdby Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project
- 56. 6DOF VR Headset AR-readySmartphone Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project
- 57. 6DOF VR Headset AR-readySmartphone 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 VRHeadset 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 VRHeadset 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 VRHeadset 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 VRHeadset 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 VRHeadset 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: AugmentedReality AR Session
- 64. The Future: AugmentedReality AR Session Hit Test
- 65. The Future: AugmentedReality AR Session Hit Test AR Anchors
- 66.
- 67.
- 68. React 360 Full-SphereGallery
- 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.
- 75. React 360 ApplicationReact 360 Runtime
- 76. React 360 ApplicationReact 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.
- 82.
- 83.
- 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 classHelloJSCampBarcelona 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 extendsReact.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 forWebXR Apps
- 101. Do Not Apply2D Patterns
- 102.
- 103. UX Design Best-Practises AddFeedback, Respond Immediately
- 104.
- 105.
- 106.
- 107.
- 108. It was thepioneer 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 thepioneer 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 thepioneer 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 AddFeedback, Respond Immediately Guide Users with Gaze Cues
- 116.
- 117.
- 118.
- 119.
- 120. UX Design Best-Practises AddFeedback, Respond Immediately Guide Users with Gaze Cues Provide Information in Context
- 121.
- 122.
- 123.
- 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 Safetyin AR There is No Optimal AR Environment
- 126. Comfort and Safetyin AR There is No Optimal AR Environment Consider a User’s Movement
- 127.
- 128.
- 129. Comfort and Safetyin AR There is No Optimal AR Environment Consider a User’s Movement Avoid Fatiguing your Users
- 130. Comfort and Safetyin VR Do Not Trigger Phobias
- 133. Comfort and Safetyin VR Do Not Trigger Phobias Do Not Move Things Fast Towards the Camera
- 136. Comfort and Safetyin VR Do Not Trigger Phobias Do Not Move Things Fast Towards the Camera Respect a User’s Safe Space
- 137.
- 138.
- 139.
- 140.
- 141.
- 142. Prevent Simulation Sickness DoNot Move the Horizon or the Camera
- 143. Prevent Simulation Sickness DoNot Move the Horizon or the Camera Do Not Use Acceleration
- 144.
- 145.
- 146. Prevent Simulation Sickness DoNot Move the Horizon or the Camera Do Not Use Acceleration Avoid Flicker and Blur
- 147. Prevent Simulation Sickness DoNot Move the Horizon or the Camera Do Not Use Acceleration Avoid Flicker and Blur Add a Stable Focus Point
- 148. @fischaelameergeildanke.com #JSCamp Respect YourUsers! Test Your Product on a Diverse Audience.
- 149.