Babylon Native

Babylon Native 922 (github.com/BabylonJS/BabylonNative (https://github.com/BabylonJS/BabylonNative 922 ), MIT) runs the same Babylon.js 89,603 JavaScript inside native apps on Windows (Win32, UWP, HoloLens 2), macOS, iOS, visionOS, Android and Linux. It hosts a JavaScript engine through Node's N-API (Chakra 305,369 , V8 86,723 or JavaScriptCore, depending on the platform) and replaces WebGL with the bgfx rendering library: Direct3D 11 by default on Windows, Direct3D 12 or Vulkan on request, Metal on Apple devices. Babylon React Native 36,878 (@babylonjs/react-native 2.0.5, May 2026, MIT) wraps it as a React Native view.

Its README is candid: "a public preview in source form only", with no backward-compatibility promise yet. Meshes, materials, glTF, animations, physics and XR work; .env environments, GUI text, thin instances (not regular instances) and some post-processes are partial; audio, particles and KTX textures are not yet supported; and the Inspector, Node Material Editor 89,603 and 2D controls never will be. So BookNest's store would lose its dust motes, ambient sound and details panel. Reach for it when one scene must ship in a web page and a native app, especially AR on iOS through React Native; for a web-only shop, the browser is the platform.

Babylon Native's layers from the same JavaScript down to Direct3D, Vulkan and Metal, with what the store would keepHTMLLive

<!doctype html>
<style>
  body { margin: 0; background: #f7f3ec; font: 13px system-ui, sans-serif; color: #333; }
  canvas { width: 100%; max-width: 600px; height: 360px; display: block; touch-action: none; outline: none; }
</style>
<canvas id="view"></canvas>
<script src="https://cdn.jsdelivr.net/npm/babylonjs@9.28.0/babylon.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babylonjs-gui@9.28.0/babylon.gui.min.js"></script>
<script>
const canvas = document.getElementById('view');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color4.FromHexString('#f7f3ecff');
const camera = new BABYLON.ArcRotateCamera('cam', -Math.PI / 2 - 0.2, 1.2, 11, new BABYLON.Vector3(-1.2, 1.4, 0), scene);
camera.attachControl(canvas, true);
new BABYLON.HemisphericLight('sky', new BABYLON.Vector3(0.3, 1, -0.6), scene);
const ui = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('ui');
const layer = (name, text, y, width, hex, x = -2.5) => {
  const slab = BABYLON.MeshBuilder.CreateBox(name, { width, height: 0.55, depth: 1.2 }, scene);
  slab.position.set(x, y, 0);
  slab.material = new BABYLON.StandardMaterial(name, scene);
  slab.material.diffuseColor = BABYLON.Color3.FromHexString(hex);
  const block = new BABYLON.GUI.TextBlock('', text);
  Object.assign(block, { color: 'white', fontSize: 11, resizeToFit: true, outlineWidth: 2, outlineColor: '#333' });
  ui.addControl(block);
  block.linkWithMesh(slab);
};
layer('js', 'your Babylon.js code (the same as on the web)', 3.1, 5, '#1f5f8b');
layer('napi', 'JS engine via N-API: Chakra, V8 or JavaScriptCore', 2.4, 5, '#5b3f99');
layer('bgfx', 'bgfx replaces WebGL', 1.7, 5, '#3f7d3a');
[['Direct3D 11/12', -4.2], ['Vulkan', -2.5], ['Metal', -0.8]].forEach(([api, x], i) => layer('api' + i, api, 1.0, 1.6, '#e09a10', x));
layer('os', 'Windows · macOS · iOS · visionOS · Android · Linux', 0.3, 5, '#6d4c33');

// What BookNest's store would keep, from the README's status
const FEATURES = [['meshes, materials, glTF', 'works'], ['animations, physics, XR', 'works'],
  ['.env, GUI text, thin instances', 'partial'], ['particles (dust motes)', 'not yet'],
  ['audio (ambient sound)', 'not yet'], ['Inspector, NME, 2D GUI panel', 'never']];
const COLORS = { works: '#3f7d3a', partial: '#e09a10', 'not yet': '#b5452f', never: '#555555' };
const panel = Object.assign(new BABYLON.GUI.StackPanel(), { width: '210px', left: '-10px', horizontalAlignment: 1 });
ui.addControl(panel);
panel.addControl(Object.assign(new BABYLON.GUI.TextBlock('', 'status: public preview'), { height: '24px', fontSize: 13, color: '#333', fontWeight: 'bold' }));
for (const [name, status] of FEATURES) {
  const row = Object.assign(new BABYLON.GUI.TextBlock('', `● ${name}: ${status}`), { height: '22px', fontSize: 11,
    color: COLORS[status], textHorizontalAlignment: 0 });
  panel.addControl(row);
}
engine.runRenderLoop(() => scene.render());
addEventListener('resize', () => engine.resize());
</script>

MENU