This document discusses developing augmented reality (AR) and virtual reality (VR) applications using React Native. It provides an overview of AR and VR history and technologies. It then discusses using the Viro React library to build cross-platform AR, VR, and XR applications in React Native. It covers components for 3D objects, lighting, and particle effects. Examples are provided for basic component layout and using 3D models, lighting, and particle effects in a Viro application. Considerations for when to use Viro React are discussed.

1. Developing AR & VR
Applications using
React-Native

2. Pulkit Kakkar
Organizing Team
Facebook Developer Circle: Delhi-NCR
Independent Developer
@pulkitkkr0
www.linkedin.com/in/pulkitkkr
pulkitkkr@gmail.com
&

3. Agenda
WhenHowWhyWhat
All About the XR
*X ∈ { A, V, M }

4. History of UI & UX
Punch Cards
Key Boards
Mouse

5. History of UI & UX
Touch Based
UIs
Voice Controlled
UIs

6. “The Future is XR ”

7. Adaptive
filters and
Snapchat
2D Filters
Doodle
Google
Glass
Pokémon
Go
“AR Revolutions”

8. Is it all about just Entertainment ?
Medical Army Training

9. AR and it’s Applications

10. Types of AR Systems
Marker-Based Marker-Free

11. Available AR Libraries
2) Unity-3D / Unreal
• Need to learn C# scripting
• Available ArCore & ArKit Binding
• Really powerful, best if developing a game
• Not much powerful for Uis when compared to React
1) React-Native ARKit / ARCore
• Experimental
• Wrapper around Native Code
3) React-360
• Only for VR
• Limited 3D Models Support

12. Cross Platform
Development
• Write once, run anywhere across all mobile AR
(ARKit, ARCore) and VR (Cardboard iOS/Android,
GearVR, Daydream)
React Native
Framework
• Create apps using React Native, making it easy
for web developers to get started.
Powerful
Renderer
• Create stunning scenes with PBR, HDR, Realtime
Lighting, Physics, Particles, and more.
Rapid iteration
• Use the free Viro Testbed app to view your app
and see your changes quickly. No need to wait
for recompile. It's like refreshing a browser.
Docs
• Extensive developer support and
documentation.

13. Getting Started with Viro
1) react-native init ViroSample --version=0.55.1
2) cd ViroSample
3) npm install -S -E react-viro
4) Get your API Keys from https://viromedia.com/
5) Modify App.js to add your API Keys
OR
1) npm i –g react-viro-cli
2) react-viro “ProjectName”

14. Cross-Reality Components Nomenclature
Viro
Components
VR
<ViroVRComponent>
AR
<ViroARComponent>
XR
<ViroComponent>

15. Basic Componential Layout
<ViroScene>
- React-Native View
- Node(s) to ViroNavigators
- contains UI controls, 3D
objects, lights, and more
<ViroText>
- Adds Text Like <Text> or
<h1> - <h6>
- Styled Like React-Native in
general

16. Positioning Systems
Right Handed System
- Negative Z inside
- axis direction changed with
rotation prop
- to determine +ve rotation
use thumb rule
Left handed System
- positive Z-axis Inside

17. 3-D Objects
• Viro have a really powerful 3-D Rendering Engine which
runs on native thread and uses graphical hardware chip of
device
• It’s Lag free but need to use optimized 3-d Files and
preferably low-poly files for mobile devices

18. Supported 3-D File Formats
.obj Files
- No animations
- No Conversion script required
- need .mtl materials or list of
textures
.fbx Files
- transformed to .vrx using script
at ./bin/ViroFBX
- supports skeletal animations
- use <ViroDirectionalLight>
.gltf Files
- new format
- JSON >> BIN >> PNG

19. Sources for 3-D models Files
Unity Assets Store
- https://assetstore.unity.com/
- hundreds of thousands of paid
and free models abailable
Mixamo
- Great project for making
avatars
- Animate them with hudreds of
free and premium animations
- https://www.mixamo.com
SketchFab
- a great place to search for free
models
- https://www.sketchfab.com
Self Modeling
- for Basics use MS Paint 3d
- Blender with textures
- Advanced Modeling MAYA 3d
Google Low-Poly
- A great open initiative by google
- Free low poly models
- Best suited models for low grade
HMDs & Mobile AR Devices
Turbo Squid
- Another great place for free 3d
Models
- https://www.turbosquid.com

20. 3-D Objects Code Demonstration

21. Lightnings and it’s types
You illuminate scenes in Viro by adding lights to your ViroNode(s)
object.
Ambient Light
- illuminate all objects
- illuminate from all directions
- use <ViroAmbientLight>
Directional Light
- illuminates all objects in
range
- specified direction
- use <ViroDirectionalLight>
Spot Light
- illuminate all objects in
range
- illuminated in cone
specified by inner & outer
angle
- use <ViroSpotLight>
Point Light
- emitted from object
- diverging sphere
- use <ViroOmniLight>

22. Lightnings Demonstration
Point Light Spot Light

23. Lightnings Demonstration
Directional Light

24. Lightening Code Demonstration

25. Particle Effects
Viro's particle system enables developers to create and configure
quad emitters for building complex and intricate particle effects.
Some examples are smoke, rain, confetti, and fireworks.
Image Source
representing the
particles to emit
State the rate at
which the particle
emits and lives for
Start the emitter

26. When to use ViroReact ?
1) ARCore and ARKit Limitation are not an issue
2) Not a Graphic Intensive UI
3) Not building a full fledged Game
4) Not targeting High End HMDs (VR) or standalone AR
HMDs
5) Targeting Both AR & VR and maximizing cross-platform
code sharing

27. Thank You
Let’s build the future of UI/UX Together
@pulkitkkr0
www.linkedin.com/
in/pulkitkkr
pulkitkkr@gmail.com