Babylon Native: The Journey So Far
“Enabling cross-platform native apps with the power of Babylon.js” — This was the goal behind Babylon Native when the team first announced the project last year in March. Ten months later, this undertaking is now a reality with a first preview that will be available at the end of February, along with the 4.1 release of Babylon.js.
We’ve presented the project to quite a few partners and are actively working with some of them for cross-platform development. This article shares some of our learnings so far, mostly for people new to the project.
A Different Approach to Render 3D Cross-Platform
To better understand where Babylon Native sits, let’s start by looking into different ways to render 3D cross platform using Web technologies.
- 3D in the browser — You can use a JavaScript framework like Babylon.js which renders a 3D application within a browser. Browsers runs on standard like WebGL, WebXR, Web Audio which ensure the cross-platform aspect of your code.
- 3D embedded with browser technologies — You can package your Web site into a Progressive Web app, an Electron app or an embedded WebView. In this case, as it is enabled by browser technologies, it still relies on cross-platform standards like WebGL, WebXR, Web Audio etc.
- 3D in native applications —In Babylon Native, you still use Web technologies (e.g. JavaScript) to code your application but, this time, it runs on native APIs. The Babylon Native Runtime runs your application on platform native graphics APIs (DirectX on Windows, Metal on iOS/MacOS, OpenGL on Android and Vulkan in the future).
Use Cases and Advantages
During our discussions with early partners, this approach has driven a lot of interest for various reasons. Below are some of the use cases and advantages that came up.
- Single code base across Web and Mobile apps — Being able to write once and re-use the code, came up very often as it reduces cost of developing and maintaining multiple applications.
- glTF consistency and conformance — Support for the latest PBR material extensions and continued conformance will come right out of the box by using Babylon.js. This is particularly important for 3D representation of product in e-commerce scenarios where customers need the highest level of fidelity. For instance, the PBR Sheen material needs to accurately represent the fabric of a couch (imagine being able to picture it in your living room via AR before ordering it online).
- File size for mobile apps — A large file size can impact the adoption of a mobile application (for instance on iOS, after 200MB the user is presented with a warning message of a large app size before downloading over-the-air). Babylon Native should be about a few tens of MB, the biggest piece being by far the JavaScript engine (approx. 20MB).
- Broad developer access — The use of Web technologies to develop an application allows a broader set of developers and content creators to take advantage of the platform. Development iteration time is shorter and the application code can even be updated and reloaded on the fly since there is no compilation.
Building Apps with Babylon Native
Babylon Native works by running Babylon.js inside a JavaScript context, therefore most of the code written to work in Babylon.js will work in Babylon Native. Besides a few exceptions, you’ll benefit from all the features and rapid evolution of the Babylon.js framework in your native applications.
What you may have to adapt is some of the UI code. Babylon.js comes with certain UI capabilities, particularly including 3D UI for XR and other purposes, which will also work in Babylon Native. However, Babylon Native is not intended to ever include an implementation of the DOM, so depending on how you choose to implement the UI, you might have to incorporate additional technologies.
The team is currently working on a solution for integration between Babylon Native and React Native.
React-based technologies share many paradigms with Babylon Native, and the two libraries can work together very well. However, they are not tied together. What UI technology you include is entirely up to you, whether it makes use of React, React Native, handcrafted native UI, or any other technology.
Getting Your Hands on It
There is still a lot of work to be done before being production ready, but you can already take a look at it to better understand the project — and start thinking if it could be part of your future plans.
It’s our sincere hope that Babylon Native will make it easier and faster to leverage powerful and beautiful 3D in cross-platform native apps. No matter the platform, we can’t wait to see what you create!
Thomas Lucchini — Babylon.js Team
