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. Lower the cost of developing and maintaining multiple cross-platform rendering engines

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.

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?

We are currently using a subset of ANGLE to transpile GLSL to HLSL for DirectX. We are still determining what happens for other rendering APIs.
[Update: We are now using glslang and SPIRV-Cross to do this.]

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.]

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?

We want to have open discussions and get some early feedback. Is this useful? Is there something we are missing? We look forward to discussing this!

Gary Hsu — Babylon.js Team

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