Babylon Native

Babylon.js
Mar 18, 2019 · 3 min read

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

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

Written by

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

More From Medium

Related reads

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade