What happens if I take a powerful 3D web engine like Babylon.js and host it inside a native desktop or mobile app? A Babylon Native app of course!

This is not a Progressive Web App where a web page is hosted in a native app. One big difference is that there is no HTML DOM. The engine layer of Babylon.js is shimmed directly to the rendering layer native to the platform without going through WebGL. It is similar to how React Native is to React but for 3D rendering.

We started experimenting with this idea recently to see how viable it is.

What was the motivation?

  1. Increase consistency and conformity of glTF rendering across various products

We are not quite ready to do it yet, but we also want to open source the code to benefit the community.
[Update: The source code is now on GitHub! and we have more info on our website]

Here is what a Babylon Native application looks like right now.

Image for post
Image for post

Besides some interface methods required to run scripts, etc., how do we access JavaScript from C++ and vice versa across all the different JavaScript engines? We want an abstraction layer that can hide the different implementations underneath. We found the answer in N-API, specifically the node-addon-api for using N-API with C++. The only issue is that the node part of the contract needs to be separated out. We are working on this with the node working group.

What about shaders?

But even without all the platform abstraction flushed out, we already have an interesting product. We can already load all of the glTF 2.0 sample models and most of the glTF asset generator test models with a test app targeting either Win32 or UWP with Chakra or V8.
[Update: We have switched from an internal rendering engine to bgfx and are actively working on bringing back all the features including UWP support.]

Image for post
Image for post
Babylon Native test app running the same exact script as this playground https://playground.babylonjs.com/#437YI8#1

Because the HTML DOM is not in the picture, this test app uses quite a bit less memory than a browser running the same JavaScript code. It will be interesting to integrate perhaps with React Native or some other cross-platform UI framework.

We anticipate that the frame rate will match or exceed what a browser can do.

Since this started as an experiment, there are also a bunch of infrastructure pieces to implement, like the build system, test framework, etc. We have these in the backlog and will flush them out.

Why blog about this?

Gary Hsu — Babylon.js Team

Written by

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

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