v n o v i c k . c o m
The Web Developer Guide
for escaping to virtual reality
with
React VR
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
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
!
Slide 5
Slide 5 text
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
!
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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
Slide 8
Slide 8 text
v n o v i c k . c o m
JSX
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
v n o v i c k . c o m
State of WebVR in Q4 2017
Slide 13
Slide 13 text
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
!
Slide 14
Slide 14 text
v n o v i c k . c o m
Architecture
React Code Packager
WebVR
+
ThreeJS
Slide 15
Slide 15 text
v n o v i c k . c o m
Getting started
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
v n o v i c k . c o m
Code
overview
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
v n o v i c k . c o m
equirectangular
Slide 20
Slide 20 text
v n o v i c k . c o m
cubic skyboxes
Slide 21
Slide 21 text
v n o v i c k . c o m
cubemap
equirectangular
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
v n o v i c k . c o m
Moving objects in space
Z
X
Y
Slide 24
Slide 24 text
v n o v i c k . c o m
Styling with Yoga
Slide 25
Slide 25 text
v n o v i c k . c o m
Slide 26
Slide 26 text
v n o v i c k . c o m
Handling input
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
v n o v i c k . c o m
3D primitives
! Sphere
! Plane
! Box
! Cylinder(Cone)
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
v n o v i c k . c o m
Contact me for consultation
vnovick.com
Thank you