Cross platform Augmented Reality development with React Native

Software Architect & Consultant

Web / Mobile / VR / AR / IoT / Blockchain

Augmented Reality

reality 2.0

reality 2.0

1901 First recorded AR reference 
(L. Frank Baum - "The Master Key")
1952 Sensorama
Morton Heilig
1968 Sword of Damocles 

Ivan Sutherland

1982 AR for weather broadcasters
Dan Reitan
1992 Virtual Fixtures
Louis Rosenberg
1996 First AR markers
​CyberCode

How it all started

1998 – NASA develops AR dashboard for X38
1999 Eye tap - wearable AR glasses
Steve Mann
2008 AR used by BMW for commercial purposes

2010 – Kinnect

2012 – Google Glass​

90's - 2000's

2013 – AR is used in car manufacturing
2016 AR/VR investment reaches 1.1 billion 
2016 Microsoft Hololens/Meta 2

2016 – Pokemon Go

2017 – Apple anounced ARKit, Google - ARCore
2018 Magic Leap (light field technology)

Recent years

2019 - 2021

Exponential growth of all AR/VR related tech

How it all started

How we can create AR apps today

iOS

Android

So how do we do cross platform development?

Let's see it in Action

So how do I create awesome AR apps

Getting started with Viro

yarn add @viro-community/react-viro

link native libraries

Basic anatomy of an app

Loading...

AR Scene

Loading...

wraps every AR scene

setting up lights

positioning UI

Recognizing markers

Coordinate system

Right handed coordinate system

  • Positive Z is behind the viewer
  • Axis directions are changed when applied rotation prop
  • To determine positive rotation use "thumb" rule

Lights and Materials Demo

Ambient light

"Sun-like light"

Spotlight

Creating animations

Creating materials

Textures

3d models

.obj

.fbx

.gltf

3d model primitive

loading resources

Skeletal animations

Rendering shadows

Detecting planes

Portals

Portal scene wrapper

Portal wrapper

Portal 3d model

360 image

Particles

and more

So is it the best solution for cross platform AR development?

It depends on your use case

  • Not maintained
  • Limited capabilities

Unity & ARFoundation

DEMO

Unity as a native library

Bridging desired behavior using React Native bridging capabilities

So what type of apps you can create today

  • Location based AR
  • Games
  • Retail apps
  • Indoor navigation
  • Tools
  • Visual assistance
  • Travel
  • and much more

Cross platform Augmented Reality development with React Native

By vladimirnovick

Cross platform Augmented Reality development with React Native

AR is a really fascinating technology. We can see more and more AR apps emerge on iOS and Android. We can also see more and more companies adopt React Native as great solution for Cross platform development using JavaScript, but getting native app performance. In this talk Vladimir Novick will explain how we can bridge AR capabilities into React Native apps.

  • 941