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.
React 360
OdessaJS 2018
Viktor Turskyi
Viktor Turskyi
● CEO at WebbyLab
● 14 years in software development
● React in production from 2013
● 60+ projects with Re...
1968 – Sword of Damocles
1993 – SEGA announce new VR
glasses
Oculus Rift
HTC Vive
Playstation VR
Gear VR
Oculus Go
Google Cardboard
Daydream VR
Release
Software
Position Tracking
What is React?
https://reactjs.org/
What is React Native?
Image from: https://www.infoq.com/articles/react-native-introduction
React 360
Image from: https://www.fourkitchens.com/blog/development/react-vr-early-look-facebooks-foray-vr/
Simple demo app
Simple demo (video)
Hot reload and entities (video)
Virtual Forest (<100 SLOC)
Source: youtube (Christian Nwamba)
Core components (react-native)
● View
● Image
● Text
React 360 components
● Entity
● VrButton
React 360 modules
● VideoModule
● AudioModule
React 360 APIs
● Environment
● Animated
● ControllerInfo
● AsyncStorage
2D and 3D layouts
● Surface for 2D (NEW)
● Location for 3D
React360 vs ReactVR
● Introduced “Environment” API
● Introduced Surfaces for 2D layouts
● “VideoPano”, “Sound” components ...
Let’s create a virtual tour for OdessaJs
LIVE DEMO
What is Web VR?
JavaScript API for accessing VR devices
Navigator.getVRDisplays()
Window.onvrdisplayconnected (disconnecte...
Is React360/VR production ready?
Oculus UI for GearVR (native renderer, not
available)
Rift Core 2.0 (native renderer, not...
WebVR Browser support
Why?
● Faster iteration by using web technology and
workflows
● Learn once, write anywhere—use the same
code to drive cont...
Links
https://reactjs.org/
https://facebook.github.io/react-360/
https://developer.oculus.com/webvr/
Viktor Turskyi
viktor@webbylab.com
Twitter - koorchik
Github - koorchik
WebbyLab
https://webbylab.com
Viktor Turskyi - How to create a VR application with React
Viktor Turskyi - How to create a VR application with React
Viktor Turskyi - How to create a VR application with React
Viktor Turskyi - How to create a VR application with React
Viktor Turskyi - How to create a VR application with React
Upcoming SlideShare
Loading in …5
×

Viktor Turskyi - How to create a VR application with React

-

Related Books

Free with a 30 day trial from Scribd

See all
  • 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

×