-

1. React 360
OdessaJS 2018
Viktor Turskyi

2. Viktor Turskyi
● CEO at WebbyLab
● 14 years in software development
● React in production from 2013
● 60+ projects with ReactJs
(React/React native)

4. 1968 – Sword of Damocles

5. 1993 – SEGA announce new VR
glasses

6. Oculus Rift

7. HTC Vive

8. Playstation VR

9. Gear VR

10. Oculus Go

11. Google Cardboard

12. Daydream VR

13. Release

14. Software

15. Position Tracking

16. What is React?
https://reactjs.org/

17. What is React Native?
Image from: https://www.infoq.com/articles/react-native-introduction

19. React 360

20. Image from: https://www.fourkitchens.com/blog/development/react-vr-early-look-facebooks-foray-vr/

22. Simple demo app

25. Simple demo (video)

26. Hot reload and entities (video)

27. Virtual Forest (<100 SLOC)
Source: youtube (Christian Nwamba)

28. Core components (react-native)
● View
● Image
● Text

29. React 360 components
● Entity
● VrButton

30. React 360 modules
● VideoModule
● AudioModule

31. React 360 APIs
● Environment
● Animated
● ControllerInfo
● AsyncStorage

32. 2D and 3D layouts
● Surface for 2D (NEW)
● Location for 3D

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

34. Let’s create a virtual tour for OdessaJs

35. LIVE DEMO

36. What is Web VR?
JavaScript API for accessing VR devices
Navigator.getVRDisplays()
Window.onvrdisplayconnected (disconnected)
VRDisplay
VRDisplayCapabilities
VRPose
VREyeParameters
VRStageParameters

37. Is React360/VR production ready?
Oculus UI for GearVR (native renderer, not
available)
Rift Core 2.0 (native renderer, not available)

38. WebVR Browser support

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

40. Links
https://reactjs.org/
https://facebook.github.io/react-360/
https://developer.oculus.com/webvr/

41. Viktor Turskyi
viktor@webbylab.com
Twitter - koorchik
Github - koorchik
WebbyLab
https://webbylab.com