React and XR
webXR and Native XR
Disclaimer
I am here on my own behalf and my views reflect only my own
and not my employer. Everything that will be demonstrated
here will be free and open source. All contents will be available
for free on gitHub.com.
Why react?
- Virtual DOM, Tree Reconciliation, Memory Optimizations
- The use of reusable, compassable, and stateful components
- The nature of reactive updates
- Many things you do in react can be ported over to native
- You can share buisness logic between web and native clients
What do I need to start? No need for expensive tools!
- Node
- git
- your favorite ide (Visual Code Studio)
- patience and passion
webXR and React
When should I use aFrame?
- You need quick access to lowlevel threeJS quickly.
- You would like to utilize custom shaders, post-processing effects
- You can quickly leverage packages the community built
- Your need an intricate vr environment
- You can easily add redux and redux-sagas to maintain state!
What can I do with react and aFrame?
- Interactive Stories and Games
- Immersive environments that are multiuser
- You can utilize ARJS with aFrame
- PWAs that appear native
Pros and Cons of aFrame and React
- Pro lots of freedom to rapidly prototype
- Pro you can easily setup complex environments
- Pro great support for GLTF
- Con setup can be tedious
- Con you may spend lots of time optimizing
When should I use React360?
- When you want to build an interactive story that communicates to the user by utilizing video, images, and minimal amounts of 3d.
- When you want to display audio and video quickly in an webVR setting.
- React360 is perfect for marketing material and vr video delivery.
- React360 has excellent support for flexbox so it is perfect for projecting 2d in vr scenes
React360 is perfect for story telling and marketing
- React360 is well suited for broadcast and video content
- React360 is perfect for journalism and vr documentaries
- React360 is perfect for ephemeral vr conent
Just how does React360 work?
React360 is built on ReactNative
React 360’s architecture mirrors that of React Native, with the React application code running in a background thread — in this case, a Web Worker in the web browser. When the application’s React components are rendered, React 360 utilizes the React Native bridge to serialize any necessary UI changes and pass them to the main thread, which in this case is the browser’s main JavaScript runtime. Here, React 360 utilizes a library from Oculus called OVRUI to translate the payload of pending UI updates into Three.js commands, rendering a 3D scene using WebGL.Here is a high level view of React360 runtime
Pros and Cons of React360
- Pro excellent command line interface
- Pro excellent choice for video or panoramic content delivery
- Pro great for creating a mashup where data visualization is important
- Pro performance is well above average
- Pro great support for GLTF
- Con native modules can be a challenge
- Con you may find it difficult to do things that are easy to do in aFrame
What about react-native and native XR?
What can I build with expo?
- Simple 3d Games with threeJS
- AR apps that can utilize a camera!
- Virtually an 2d Application
Why expo?
- Quickly prototype and share via snack or qrCode!
- Expo wraps around many of the best react-native pacakges in the community
- Easy setup grab a boilerplate!
Let see somethings you've made?
What about ViroReact
- You can quickly prototype responsive xr and vr experinces!
- Their application allows you to rapidly test your prototype with their app! Kind of like expo
- In general if you love react this looks like a promising work flow for react developers over unity
- Supports GLTF!