Diese Präsentation wurde erfolgreich gemeldet.

Goodbye, Flatland! An introduction to React VR and what it means for web developers

1

Teilen

1 von 111
1 von 111

Goodbye, Flatland! An introduction to React VR and what it means for web developers

1

Teilen

Herunterladen, um offline zu lesen

Beschreibung

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

Transkript

  1. 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. 2. geildanke.com @fischaelameer You should care about WebVR.
  3. 3. geildanke.com @fischaelameer VR Concepts
  4. 4. geildanke.com @fischaelameer VR Concepts ReactVR
  5. 5. geildanke.com @fischaelameer VR Concepts ReactVR UX Design & VR
  6. 6. geildanke.com @fischaelameer Virtual Reality is tricking our eyes and brain to think of a 2D image to be in 3D.
  7. 7. geildanke.com @fischaelameer Virtual Reality changes the 
 way we relate to technology.
  8. 8. geildanke.com @fischaelameer Virtual Reality Concepts
  9. 9. geildanke.com @fischaelameer Stereoscopic Images
  10. 10. geildanke.com @fischaelameer
  11. 11. geildanke.com @fischaelameer
  12. 12. geildanke.com @fischaelameer
  13. 13. geildanke.com @fischaelameer IPD – Interpupillary distance
  14. 14. geildanke.com @fischaelameer
  15. 15. geildanke.com @fischaelameer
  16. 16. geildanke.com @fischaelameer
  17. 17. geildanke.com @fischaelameer Tracking
  18. 18. geildanke.com @fischaelameer
  19. 19. geildanke.com @fischaelameer Rotation
  20. 20. geildanke.com @fischaelameer Rotation Position
  21. 21. geildanke.com @fischaelameer
  22. 22. geildanke.com @fischaelameer Rotation Position
  23. 23. geildanke.com @fischaelameer Browser https://github.com/mrdoob/three.js
  24. 24. geildanke.com @fischaelameer Browser WebGL https://github.com/mrdoob/three.js
  25. 25. geildanke.com @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js
  26. 26. geildanke.com @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js three.js Ricardo Cabello
  27. 27. geildanke.com @fischaelameer Browser WebVRWebGL https://facebookincubator.github.io/react-vr/index.html three.js ReactVR
  28. 28. geildanke.com @fischaelameer
  29. 29. geildanke.com @fischaelameer
  30. 30. geildanke.com @fischaelameer
  31. 31. geildanke.com @fischaelameer x: 0, y: 0, z: 0
  32. 32. geildanke.com @fischaelameer x: 0, y: 0, z: 0
  33. 33. geildanke.com @fischaelameer
  34. 34. geildanke.com @fischaelameer npm install -g react-vr-cli react-vr init GEILDANKE_REACTVR_PANO cd GEILDANKE_REACTVR_PANORAMA npm start
  35. 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. 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. 37. geildanke.com @fischaelameer
  38. 38. geildanke.com @fischaelameer
  39. 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. 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. 41. geildanke.com @fischaelameer
  42. 42. geildanke.com @fischaelameer
  43. 43. geildanke.com @fischaelameer Goodbye, UX metaphors!
  44. 44. geildanke.com @fischaelameer Goodbye, UX metaphors!
  45. 45. geildanke.com @fischaelameer Goodbye, UX metaphors!
  46. 46. geildanke.com @fischaelameer Lightning UI Button GalleryImages GalleryImage Room Wall index.vr.js
  47. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. geildanke.com @fischaelameer x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  57. 57. geildanke.com @fischaelameer y x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  58. 58. geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  59. 59. geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  60. 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. 61. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  62. 62. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  63. 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. 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. 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. 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. 67. geildanke.com @fischaelameer
  68. 68. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  69. 69. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  70. 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. 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. 72. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  73. 73. geildanke.com @fischaelameer View Image Core Components Pano Mesh React VR Components AmbientLight, PointLight,
  74. 74. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components AmbientLight, PointLight,
  75. 75. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components AmbientLight, PointLight, DirectionalLight, SpotLight
  76. 76. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight
  77. 77. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight Sound
  78. 78. geildanke.com @fischaelameer UX Design for VR
  79. 79. geildanke.com @fischaelameer Comfort Interpretability Usefulness Delight Beau Cronin https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
  80. 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. 81. geildanke.com @fischaelameer Ergonomics
  82. 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. 83. geildanke.com @fischaelameer
  84. 84. geildanke.com @fischaelameer
  85. 85. geildanke.com @fischaelameer
  86. 86. geildanke.com @fischaelameer
  87. 87. geildanke.com @fischaelameer 70°
  88. 88. geildanke.com @fischaelameer 130° Comfortably bending 30° to each side
  89. 89. geildanke.com @fischaelameer 230° Stretching 80° to each side https://www.youtube.com/watch?v=00vzW2-PvvE
  90. 90. geildanke.com @fischaelameer 0.5m 20m https://www.youtube.com/watch?v=00vzW2-PvvE
  91. 91. geildanke.com @fischaelameer ~20px ~10ppd < 20px 60ppd
  92. 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. 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. 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. 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. 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. 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. 98. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com
  99. 99. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com
  100. 100. geildanke.com @fischaelameer
  101. 101. geildanke.com @fischaelameer
  102. 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. 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. 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. 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. 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. 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. 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. 109. geildanke.com @fischaelameer You are responsible for the 
 well-being of your users!
  110. 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. 111. geildanke.com @fischaelameer https://geildanke.com/en/vr Thank you! @fischaelameer

Beschreibung

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

Transkript

  1. 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. 2. geildanke.com @fischaelameer You should care about WebVR.
  3. 3. geildanke.com @fischaelameer VR Concepts
  4. 4. geildanke.com @fischaelameer VR Concepts ReactVR
  5. 5. geildanke.com @fischaelameer VR Concepts ReactVR UX Design & VR
  6. 6. geildanke.com @fischaelameer Virtual Reality is tricking our eyes and brain to think of a 2D image to be in 3D.
  7. 7. geildanke.com @fischaelameer Virtual Reality changes the 
 way we relate to technology.
  8. 8. geildanke.com @fischaelameer Virtual Reality Concepts
  9. 9. geildanke.com @fischaelameer Stereoscopic Images
  10. 10. geildanke.com @fischaelameer
  11. 11. geildanke.com @fischaelameer
  12. 12. geildanke.com @fischaelameer
  13. 13. geildanke.com @fischaelameer IPD – Interpupillary distance
  14. 14. geildanke.com @fischaelameer
  15. 15. geildanke.com @fischaelameer
  16. 16. geildanke.com @fischaelameer
  17. 17. geildanke.com @fischaelameer Tracking
  18. 18. geildanke.com @fischaelameer
  19. 19. geildanke.com @fischaelameer Rotation
  20. 20. geildanke.com @fischaelameer Rotation Position
  21. 21. geildanke.com @fischaelameer
  22. 22. geildanke.com @fischaelameer Rotation Position
  23. 23. geildanke.com @fischaelameer Browser https://github.com/mrdoob/three.js
  24. 24. geildanke.com @fischaelameer Browser WebGL https://github.com/mrdoob/three.js
  25. 25. geildanke.com @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js
  26. 26. geildanke.com @fischaelameer Browser WebVRWebGL https://github.com/mrdoob/three.js three.js Ricardo Cabello
  27. 27. geildanke.com @fischaelameer Browser WebVRWebGL https://facebookincubator.github.io/react-vr/index.html three.js ReactVR
  28. 28. geildanke.com @fischaelameer
  29. 29. geildanke.com @fischaelameer
  30. 30. geildanke.com @fischaelameer
  31. 31. geildanke.com @fischaelameer x: 0, y: 0, z: 0
  32. 32. geildanke.com @fischaelameer x: 0, y: 0, z: 0
  33. 33. geildanke.com @fischaelameer
  34. 34. geildanke.com @fischaelameer npm install -g react-vr-cli react-vr init GEILDANKE_REACTVR_PANO cd GEILDANKE_REACTVR_PANORAMA npm start
  35. 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. 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. 37. geildanke.com @fischaelameer
  38. 38. geildanke.com @fischaelameer
  39. 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. 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. 41. geildanke.com @fischaelameer
  42. 42. geildanke.com @fischaelameer
  43. 43. geildanke.com @fischaelameer Goodbye, UX metaphors!
  44. 44. geildanke.com @fischaelameer Goodbye, UX metaphors!
  45. 45. geildanke.com @fischaelameer Goodbye, UX metaphors!
  46. 46. geildanke.com @fischaelameer Lightning UI Button GalleryImages GalleryImage Room Wall index.vr.js
  47. 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. 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. 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. 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. 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. 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. 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. 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. 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. 56. geildanke.com @fischaelameer x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  57. 57. geildanke.com @fischaelameer y x <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  58. 58. geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  59. 59. geildanke.com @fischaelameer y x z <Wall scale={[5, 3, 0.2]} translate={[0, 0, -5]} />
  60. 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. 61. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  62. 62. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  63. 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. 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. 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. 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. 67. geildanke.com @fischaelameer
  68. 68. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  69. 69. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  70. 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. 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. 72. geildanke.com @fischaelameer 3D Coordinate System, Units & Scaling Flexbox Layout Animations (Animated API) React VR Components
  73. 73. geildanke.com @fischaelameer View Image Core Components Pano Mesh React VR Components AmbientLight, PointLight,
  74. 74. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components AmbientLight, PointLight,
  75. 75. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components AmbientLight, PointLight, DirectionalLight, SpotLight
  76. 76. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight
  77. 77. geildanke.com @fischaelameer View Image Text Core Components Pano Mesh React VR Components VrButton AmbientLight, PointLight, DirectionalLight, SpotLight Sound
  78. 78. geildanke.com @fischaelameer UX Design for VR
  79. 79. geildanke.com @fischaelameer Comfort Interpretability Usefulness Delight Beau Cronin https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
  80. 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. 81. geildanke.com @fischaelameer Ergonomics
  82. 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. 83. geildanke.com @fischaelameer
  84. 84. geildanke.com @fischaelameer
  85. 85. geildanke.com @fischaelameer
  86. 86. geildanke.com @fischaelameer
  87. 87. geildanke.com @fischaelameer 70°
  88. 88. geildanke.com @fischaelameer 130° Comfortably bending 30° to each side
  89. 89. geildanke.com @fischaelameer 230° Stretching 80° to each side https://www.youtube.com/watch?v=00vzW2-PvvE
  90. 90. geildanke.com @fischaelameer 0.5m 20m https://www.youtube.com/watch?v=00vzW2-PvvE
  91. 91. geildanke.com @fischaelameer ~20px ~10ppd < 20px 60ppd
  92. 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. 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. 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. 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. 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. 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. 98. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com
  99. 99. geildanke.com @fischaelameerIcon made by Freepik from www.flaticon.com
  100. 100. geildanke.com @fischaelameer
  101. 101. geildanke.com @fischaelameer
  102. 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. 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. 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. 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. 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. 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. 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. 109. geildanke.com @fischaelameer You are responsible for the 
 well-being of your users!
  110. 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. 111. geildanke.com @fischaelameer https://geildanke.com/en/vr Thank you! @fischaelameer

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

×