Babylon React Native: Bringing 3D and XR to React Native Applications

Mixed Reality in Power Apps Mobile

What is Babylon React Native?

  1. Provides a simple solution for combining 3D rendering with platform native screen space UI via platform agnostic code.
  2. Provides a mature developer toolset that does a lot of the heavy lifting of hosting a JavaScript engine, including developer features like fast refresh and debugging support.
Babylon React Native Tech Stack
N-API, JSI, and JavaScript Engine Stack
  1. JavaScript engine support — all JavaScript engines supported by JSI are supported by Babylon React Native. This includes the React Native specific Hermes JavaScript engine. Note however that at this time, the JSI-based implementation of N-API is not fully complete, and some functionality might not work yet.
  2. Debugging — any React Native module using JSI is not compatible with React Native’s remote debugging. Remote debugging works by running the JavaScript code on the device where the debugger is running (e.g. the desktop computer) rather than the device where the React Native app is running (e.g. the mobile device). This really only works for relatively slow, asynchronous communication between the C++ and JavaScript code (not sufficient for real time 3D rendering!). Fortunately Hermes implements the Chromium Inspect API, which means when using Hermes, app code can run directly on the device and be debugged from a separate (desktop) computer (often referred to as direct debugging).

How is Babylon React Native used?

Simple Usage Example

What about XR (augmented/mixed/virtual reality)?

Babylon React Native Demo

What’s next?

Resources

--

--

--

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Kotlin multi-platform parser usable from a JVM or JavaScript

Fix seeing “0” in the JSX

Data sanitization Node.JS( MongoDB/MongoDB Operator Injection)

How to create an input with an inner label in ReactJs and Styled-Components

[Action required] Your RSS.app Trial has Expired — Wed Jan 05 2022

How to Debug Jest Tests in VS Code

Writer of the Week: Lorenzo Zarantonello

Typed errors with discriminated unions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/

More from Medium

EAS + LogRocket: Unlimited Possibilities for Your Expo Apps

Introducing Gesture Handler 2.0

Chain React Conf vs COVID — 2022