Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Viktor Turskyi - How to create a VR application with React

269 views

Published on

-

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Viktor Turskyi - How to create a VR application with React

  1. 1. React 360 OdessaJS 2018 Viktor Turskyi
  2. 2. Viktor Turskyi ● CEO at WebbyLab ● 14 years in software development ● React in production from 2013 ● 60+ projects with ReactJs (React/React native)
  3. 3. 1968 – Sword of Damocles
  4. 4. 1993 – SEGA announce new VR glasses
  5. 5. Oculus Rift
  6. 6. HTC Vive
  7. 7. Playstation VR
  8. 8. Gear VR
  9. 9. Oculus Go
  10. 10. Google Cardboard
  11. 11. Daydream VR
  12. 12. Release
  13. 13. Software
  14. 14. Position Tracking
  15. 15. What is React? https://reactjs.org/
  16. 16. What is React Native? Image from: https://www.infoq.com/articles/react-native-introduction
  17. 17. React 360
  18. 18. Image from: https://www.fourkitchens.com/blog/development/react-vr-early-look-facebooks-foray-vr/
  19. 19. Simple demo app
  20. 20. Simple demo (video)
  21. 21. Hot reload and entities (video)
  22. 22. Virtual Forest (<100 SLOC) Source: youtube (Christian Nwamba)
  23. 23. Core components (react-native) ● View ● Image ● Text
  24. 24. React 360 components ● Entity ● VrButton
  25. 25. React 360 modules ● VideoModule ● AudioModule
  26. 26. React 360 APIs ● Environment ● Animated ● ControllerInfo ● AsyncStorage
  27. 27. 2D and 3D layouts ● Surface for 2D (NEW) ● Location for 3D
  28. 28. React360 vs ReactVR ● Introduced “Environment” API ● Introduced Surfaces for 2D layouts ● “VideoPano”, “Sound” components replaced with “VideoModule” and “SoundModule” ● “Model” renamed to “Entity” ● Removed “Box”, “Cylinder”, “CylindricalPanel”, “AmbientLight”, “DirectionalLight”, “PointLight”, “SpotLight” ● etc
  29. 29. Let’s create a virtual tour for OdessaJs
  30. 30. LIVE DEMO
  31. 31. What is Web VR? JavaScript API for accessing VR devices Navigator.getVRDisplays() Window.onvrdisplayconnected (disconnected) VRDisplay VRDisplayCapabilities VRPose VREyeParameters VRStageParameters
  32. 32. Is React360/VR production ready? Oculus UI for GearVR (native renderer, not available) Rift Core 2.0 (native renderer, not available)
  33. 33. WebVR Browser support
  34. 34. Why? ● Faster iteration by using web technology and workflows ● Learn once, write anywhere—use the same code to drive content across all platforms ● Debugging within the browser ● Deep integration with Facebook News Feed for maximum distribution
  35. 35. Links https://reactjs.org/ https://facebook.github.io/react-360/ https://developer.oculus.com/webvr/
  36. 36. Viktor Turskyi viktor@webbylab.com Twitter - koorchik Github - koorchik WebbyLab https://webbylab.com

×