React VR: A web developer guide for escaping to virtual reality with React.

React is used in the web as well as on mobile, but can it bridge realities? In this talk we will see how Virtual Reality experiences can be developed using React VR.

We will dive into how it works under the hood, what techniques can be used to create VR experiences with React and what are major use cases for these.

Transcript

1. v n o v i c k . c o m The Web Developer Guide for escaping to virtual reality with React VR
2. v n o v i c k . c o m Vladimir Novick S o f t w a r e A r c h i t e c t & C o n s u l t a n t @VladimirNovick Web, Mobile, Virtual Reality, Augmented Reality, Mixed Reality & Internet of Things
3. v n o v i c k . c o m https:/ /goo.gl/mYiVmF React Native build mobile apps with JavaScript w Your go-to guide to creating native iOS and Android mobile applications using React and JavaScript
4. v n o v i c k . c o m Agenda ! What is React VR Underlying structure of React VR ! GeDng started with React VR ! Coordinate systems ! Styling React VR apps ! PrimiJves and 3d objects ! Lights ! ! Custom Models, materials and textu AnimaJons ! WriJng custom naJve modules ! Handling Input !
5. v n o v i c k . c o m Assumptions ! You are familiar with JavaScript and Web development You are familiar with ReactJS ! You are interested how VR experiences can be developed with React !
6. v n o v i c k . c o m What is React VR R e a c t J S T h r e e J S W e b V R
7. v n o v i c k . c o m What is ReactJS DeclaraAve Component Based Learn once A J a v a S c r i p t l i b r a r y f o r b u i l d i n g u s e r i n t e r f a c e s
8. v n o v i c k . c o m JSX
9. v n o v i c k . c o m ThreeJS J a v a S c r i p t l i b r a r y f o r d i s p l a y i n g 3 d g r a p h i c s i n t h e b r o w s e r
10. v n o v i c k . c o m WebGL J a v a S c r i p t A P I f o r r e n d e r i n g g r a p h i c s i n t h e b r o w s e r w i t h o u t a n y p l u g i n s
11. v n o v i c k . c o m WebVR E x p e r i m e n t a l J a v a S c r i p t A P I o n t o p o f W e b G L t o i n t e r a c t w i t h v i r t u a l r e a l i t y d e v i c e s
12. v n o v i c k . c o m State of WebVR in Q4 2017
13. v n o v i c k . c o m The motivation ! Use declaraJve and funcJonal programming style for developing UI vs imperaJve Get modern web developer experience also in VR ! ! Reuse React ecosystem Reuse various elements from web and naJve in VR worlds !
14. v n o v i c k . c o m Architecture React Code Packager WebVR + ThreeJS
15. v n o v i c k . c o m Getting started
16. v n o v i c k . c o m It’s Demo time h t t p s : // g i t h u b . c o m / v n o v i c k / w e l c o m e - t o - v r m a s t e r b r a n c h
17. v n o v i c k . c o m Code overview
18. v n o v i c k . c o m Pano I s u s e d f o r r e n d e r i n g 3 6 0 p a n o r a m i c i m a g e s
19. v n o v i c k . c o m equirectangular
20. v n o v i c k . c o m cubic skyboxes
21. v n o v i c k . c o m cubemap equirectangular
22. v n o v i c k . c o m Managing assets ! Use “asset” helper for referencing “static_assets” directory ! Use relaAve paths ! Use onLoad prop callback for hooking up asset load callback
23. v n o v i c k . c o m Moving objects in space Z X Y
24. v n o v i c k . c o m Styling with Yoga
25. v n o v i c k . c o m
26. v n o v i c k . c o m Handling input
27. v n o v i c k . c o m VrButton ! Disable onBuQonRelease ! onClick ! ! onBuQonPress onLongClick ! C o n v e n i e n t w r a p p e r f o r V R b u t t o n s
28. v n o v i c k . c o m It’s Demo time h t t p s : // g i t h u b . c o m / v n o v i c k / w e l c o m e - t o - v r d e m o 2 b r a n c h
29. v n o v i c k . c o m 3D primitives ! Sphere ! Plane ! Box ! Cylinder(Cone)
30. v n o v i c k . c o m Lights ! AmbientLight - general light ! DirecAonalLight - light in specific direcJon from infinity. Good to emulate sunlight ! PointLight - light in all direcJons from one specific spot ! Spotlight - originates from single point and goes in one direcJon in a cone
31. v n o v i c k . c o m Models o b j - W a v e f r o n t O B J f i l e f o r m a t m t l - M a t e r i a l f i l e t h a t s p e c i f y c o m p a c t t e x t u r e s
32. v n o v i c k . c o m It’s Demo time h t t p s : // g i t h u b . c o m / v n o v i c k / w e l c o m e - t o - v r d e m o 3 a n d d e m o 3 . 2 b r a n c h
33. v n o v i c k . c o m Animating C o m p l e t e r e u s e o f R e a c t N a t i v e A n i m a t e d A P I
34. v n o v i c k . c o m It’s Demo time h t t p s : // g i t h u b . c o m / v n o v i c k / w e l c o m e - t o - v r d e m o 4 b r a n c h
35. v n o v i c k . c o m Contact me for consultation vnovick.com Thank you