WhoBuilt

Lets Go 3D With React Native

Oct 21, 2020· 24 min· 1.6K views·Watch on YouTube

Speaker

Akshat Paul, an author and developer, explains how to build augmented and virtual reality apps with React Native at React Native EU 2020, hosted by Callstack.

AR, VR, and mixed reality

Paul describes virtual reality as a simulated digital environment, augmented reality as digital content layered over the real world, and mixed reality as an experience where users can interact with digital objects. He groups these under immersive technologies and uses extended reality as an umbrella term for current and future forms of real and virtual interaction.

How AR applications work

Paul outlines three parts of AR: tracking the device’s position and recognized patterns, understanding the scene by detecting surfaces and estimating light, and rendering digital objects. He names ARKit for iOS and ARCore for Android, and describes SpriteKit, SceneKit, and Metal as rendering options. Unity and Unreal are alternatives for heavier graphics, using C# and C++ respectively.

Building with Viro React

Paul presents Viro React as a React Native framework for building cross-platform AR and VR apps, with support for ARKit, ARCore, and several VR platforms. Its renderer includes lighting, physics, and particles, while Viro Media’s Test Bed supports hot reloading during development. He demonstrates an AR scene that updates text when tracking becomes normal, detects planes, and places a 3D box on a selected surface.

Choosing Viro and finding assets

Paul points to the Unity Asset Store, Unreal Marketplace, Mixamo, and Sketchfab as sources for 3D models and scenes. He recommends considering Viro for many information-focused or event applications, while noting that graphics-intensive apps, physics-heavy projects, and demanding games may need another approach. He closes by advising developers to review their code before blaming a framework when something feels clunky.

Takeaways

  • AR apps rely on tracking, scene understanding, and rendering; account for all three when planning a feature.
  • Use plane detection and light estimation to help digital objects fit the physical environment.
  • Viro React can speed up React Native AR prototyping with its Test Bed hot reload workflow.
  • For information-based or event apps, Viro may be sufficient; assess graphics and physics demands before choosing it.
  • Look for ready-made 3D assets in places such as Sketchfab or the Unity Asset Store.

Mentioned in this talk

Search inside this talk

What was claimed 8

Related talks