First Steps in React VR

A brief introduction into React VR framework, with it’s core concepts and advanced APIs.

Presented during SwingDev's WebVR meetup.

Transcript

1. www.swingdev.io First Steps in React VR Introduction to React VR with Mirek Ciastek, SwingDev’s Front-end Developer
2. www.swingdev.io What is React VR?
3. www.swingdev.io React VR = React + VR
4. www.swingdev.io Thank you
5. www.swingdev.io React VR React VR lets you build VR apps using only JavaScript. It uses the same design as React, letting you compose a rich VR world and UI from declarative components.
6. www.swingdev.io It’s more complicated than that Main Thread React VR Runtime React Native WebGL/WebVR OVRUI Three.js WebWorker React VR Application Code React Native React Web Browser Asynchronous Bridge
7. www.swingdev.io Basic concepts
8. www.swingdev.io • JSX and React API • Props and State • Input handlers - onEnter, onExit, onMove, onInput • Fonts and Text Core features
9. www.swingdev.io 3D space • OpenGL coordinates • units in meters • rotation in degrees • Y axis points up, Z axis points to user
10. www.swingdev.io • uses Yoga layout - the same as React Native • has flexbox implementation • allows to set basic CSS attributes like - color, background-color, font-size, etc. • transforms have similar API as CSS transforms Style and transforms
11. www.swingdev.io <View> <Pano source={asset('chess-world.jpg')}/> <Text style={{ backgroundColor: '#777879', fontSize: 0.8, layoutOrigin: [0.5, 0.5], paddingLeft: 0.2, paddingRight: 0.2, textAlign: 'center', textAlignVertical: 'center', transform: [{translate: [0, 0, -3]}], }}> hello </Text> </View>
12. www.swingdev.io Project setup
13. www.swingdev.io Requirements Node.js NPM or Yarn
14. www.swingdev.io Creating project yarn global add react-vr-cli Install React VR CLI react-vr init YourProject && cd YourProject Create project directory yarn start Run the app Go to http://localhost:8081/vr
15. www.swingdev.io Project structure !"" /__tests__ !"" .babelrc !"" .flowconfig !"" .watchmanconfig !"" index.vr.js !"" package.json !"" rn-cli.config.js !"" /static_assets !"" /vr !"" client.js #"" index.html
16. www.swingdev.io Bundling project yarn bundle Run bundler Directory structure !"" /static_assets !"" index.html !"" index.bundle.js #"" client.bundle.js You can embed React VR project in <iframe />
17. www.swingdev.io Video player in VR
18. www.swingdev.io Core components • View and Scene • Image • Text
19. www.swingdev.io Elements • Box • Plane • Sphere • Cylinder • Pano • VrButton - provides click interaction out of the box
20. www.swingdev.io Lights • AmbientLight • DirectionalLight • PointLight • SpotLight
21. www.swingdev.io Stage #1
22. www.swingdev.io Media objects • Video • VideoControl • VideoPano • Sound • LiveEnvCamera
23. www.swingdev.io Stage #2
24. www.swingdev.io Interactions • Animated API • Input API • State management - Redux or MobX
25. www.swingdev.io Stage #3
26. www.swingdev.io Result See the demo Check out the code
27. www.swingdev.io Further reading • Getting started with React VR • Oculus Developer Center • Prototyping with React VR • Getting Started with WebVR • Bring Virtual Reality to Your Browser with React VR • Learn React VR (Chapter 8 | Building a VR Video App)
28. www.swingdev.io https://twitter.com/mciastek https://medium.com/@mciastek https://github.com/mciastek #webvrmeetup Where to find me:
29. www.swingdev.io Thank you