First Steps in React VR

Slide 1

Slide 1 text

www.swingdev.io First Steps in React VR Introduction to React VR with Mirek Ciastek, SwingDev’s Front-end Developer

Slide 2

Slide 2 text

www.swingdev.io What is React VR?

Slide 3

Slide 3 text

www.swingdev.io React VR = React + VR

Slide 4

Slide 4 text

www.swingdev.io Thank you

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

www.swingdev.io Basic concepts

Slide 8

Slide 8 text

www.swingdev.io • JSX and React API • Props and State • Input handlers - onEnter, onExit, onMove, onInput • Fonts and Text Core features

Slide 9

Slide 9 text

www.swingdev.io 3D space • OpenGL coordinates • units in meters • rotation in degrees • Y axis points up, Z axis points to user

Slide 10

Slide 10 text

www.swingdev.io • uses Yoga layout - the same as React Native • has ﬂexbox implementation • allows to set basic CSS attributes like - color, background-color, font-size, etc. • transforms have similar API as CSS transforms Style and transforms

Slide 11

Slide 11 text

www.swingdev.io hello

Slide 12

Slide 12 text

www.swingdev.io Project setup

Slide 13

Slide 13 text

www.swingdev.io Requirements Node.js NPM or Yarn

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

www.swingdev.io Video player in VR

Slide 18

Slide 18 text

www.swingdev.io Core components • View and Scene • Image • Text

Slide 19

Slide 19 text

www.swingdev.io Elements • Box • Plane • Sphere • Cylinder • Pano • VrButton - provides click interaction out of the box

Slide 20

Slide 20 text

www.swingdev.io Lights • AmbientLight • DirectionalLight • PointLight • SpotLight

Slide 21

Slide 21 text

www.swingdev.io Stage #1

Slide 22

Slide 22 text

www.swingdev.io Media objects • Video • VideoControl • VideoPano • Sound • LiveEnvCamera

Slide 23

Slide 23 text

www.swingdev.io Stage #2

Slide 24

Slide 24 text

www.swingdev.io Interactions • Animated API • Input API • State management - Redux or MobX

Slide 25

Slide 25 text

www.swingdev.io Stage #3

Slide 26

Slide 26 text

www.swingdev.io Result See the demo Check out the code

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

www.swingdev.io https://twitter.com/mciastek https://medium.com/@mciastek https://github.com/mciastek #webvrmeetup Where to ﬁnd me: