Babylon Lite, c'est le moteur dont on rêvait depuis toujours. Enfin rendu possible par la techno d'aujourd'hui et plus de dix ans à se prendre des murs (et à en tirer des leçons).
Pendant des années, on s'est demandé à quoi ressemblerait Babylon si on repartait d'une feuille blanche, sans le moindre bagage legacy à trimballer, en construisant directement sur les API GPU modernes et une toolchain moderne, et en distillant tout ce que 13 ans de Babylon.js nous ont appris. Babylon Lite, c'est exactement ça : un moteur exclusivement WebGPU, tree-shakable, orienté données, conçu pour le plus petit bundle possible et des performances de bête de course, tout en crachant un rendu pixel pour pixel identique à Babylon.js.
Sur l'ensemble de notre galerie de parité, construire la même scène en Babylon Lite, c'est environ 19× moins de JavaScript gzippé à télécharger, des frames rendues environ 3,6× plus vite, un démarrage environ 2,5× plus rapide, et environ 5× moins de mémoire que Babylon.js. Le tout en dessinant exactement la même image. (Ce sont des médianes sur toute la suite ; les graphes scène par scène plus bas vous donnent les chiffres bruts si vous êtes du genre à tout vérifier. On vous voit.)
Babylon.js et Babylon Lite, main dans la main
Soyons hyper clairs sur un point : ce n'est PAS un remplacement, et Babylon.js ne va nulle part. Les deux moteurs continueront d'avancer côte à côte, et on est à fond derrière les deux. Pas de drame, pas de « on abandonne l'ancien ». Promis.
Ils optimisent simplement pour des choses différentes, ce qui vous laisse choisir le bon outil pour le bon boulot :
| Si vous voulez… | Choisissez |
|---|---|
| L'empreinte la plus minuscule possible et des perfs maximales, WebGPU-natif, n'embarquez-que-ce-que-vous-utilisez | Babylon Lite |
| Un moteur rapide, flexible, sans parti pris avec le plus large éventail de fonctionnalités, WebGL + WebGPU, et une rétrocompatibilité béton | Babylon.js |
Babylon.js a été pensé autour de l'usabilité au sens large : des API simples, une expérience développeur soignée, une montagne de fonctionnalités, et une compatibilité long terme à travers d'innombrables cas d'usage. Ça reste sa force.
Babylon Lite a un autre centre de gravité. Il est bâti autour de la taille minimale et de la performance maximale, avant tout le reste. Il est volontairement plus étroit et plus dogmatique, et la rétrocompatibilité n'est pas un objectif de premier rang. C'est précisément le deal qui finance la taille et la vitesse.
C'est quoi, Babylon Lite ?
Babylon Lite, c'est un moteur 3D repensé de zéro pour le web moderne :
- WebGPU exclusif. Zéro fallback WebGL, aucun wrapper legacy, aucune couche d'abstraction pour les vieilles API. Tout est construit autour des paradigmes WebGPU: render pipelines, compute shaders, bind groups, command buffers.
- Pas de classes : que de la donnée + des fonctions. Caméras, lumières, meshes et matériaux sont de simples objets d'état. Le comportement vit dans des fonctions autonomes et tree-shakables (
getViewMatrix(camera),addToScene(scene, entity), …). Rien ne traîne de référence cachée, ce qui veut dire sérialisation triviale, zéro dépendance circulaire, et élimination du code mort poussée à fond. - Tree-shakable de façon obsessionnelle. Chaque fonctionnalité optionnelle est un module isolé, importé dynamiquement uniquement quand une scène l'utilise vraiment. Les fonctionnalités non utilisées coûtent zéro octet. Une scène simple embarque une poignée de Ko ; une scène PBR + IBL ne paie que pour ce qu'elle touche.
- Toolchain moderne. Bâti sur Vite, avec minification WGSL dans les bundles de prod et du TypeScript strict et moderne de bout en bout.
Visuellement compatible : pixel-perfect avec Babylon.js
Babylon.js a été chouchouté pendant 13 ans pour produire l'un des plus beaux rendus du web. C'est littéralement dans notre mission statement : construire l'un des moteurs de rendu web les plus puissants, beaux, simples et ouverts au monde. Avec Babylon Lite, on est fiers de continuer à porter le flambeau.
C'est la partie dont on est le plus fiers. Avec le même setup de scène, Babylon Lite et Babylon.js rendent exactement les mêmes pixels. On ne copie pas le code de Babylon.js : on comprend les maths et on écrit le minimum de code qui reproduit pile la même image. Chaque scène ci-dessous est validée contre une référence « golden » Babylon.js avec un pixel-diff automatisé en CI.
Comment on mesure ça : chaque scène est rendue dans les deux moteurs, et on calcule la différence absolue moyenne (MAD) par canal de couleur (échelle 0-255) contre une capture golden immuable de Babylon.js. Chaque scène doit rester sous un seuil serré — la médiane sur notre suite est un MAD de 0,05, autrement dit indiscernable à l'œil nu. Les diffs tournent en CI sur le backend Vulkan SwiftShader de Chrome, donc la parité est vérifiée à chaque changement, pas juste matée une fois au pif.
Même modèle, mêmes lumières, même IBL : résultat identique. Le temps CPU par frame raconte la suite de l'histoire : la même image, dessinée en une fraction du temps. Vous obtenez le rendu qualité Babylon.js avec l'empreinte et la vitesse de Lite.
Les chiffres (parce qu'on sait que vous les attendiez)
Mesuré en live sur toute notre suite de tests de parité (100+ scènes), en comparant la même scène exacte construite dans chaque moteur.
Taille du bundle
Ce que vous téléchargez réellement, c'est du JavaScript gzippé, donc c'est le chiffre qu'on met en avant. En moyenne, Babylon Lite embarque ~19× moins de JavaScript gzippé que la scène Babylon.js équivalente (et ~30× moins non compressé). Pour la scène PBR BoomBox montrée plus haut, ça fait 34 Ko contre 675 Ko gzippés (84,5 Ko contre 2,8 Mo bruts). Sur des scènes ciblées, l'écart atteint 50× plus petit. Oui oui, vous avez bien lu.
Dans tous les graphes, le vert c'est Babylon Lite et le bleu c'est Babylon.js, et les barres plus courtes, c'est mieux.
Performance
Babylon Lite rend les frames ~3 à 4× plus vite (temps CPU RAF), démarre ~2,5× plus vite, et utilise grosso modo 5× moins de mémoire — tout ça en dessinant l'image identique.
Démos en live
Les captures statiques ne racontent qu'une partie de l'histoire. On a aussi construit une galerie de démos autonomes, bundlées pour la prod : de vraies applis interactives qui tournent en live dans votre navigateur sur Babylon Lite, chacune affichant la taille exacte qu'elle embarque (moteur + code de la démo, point barre).
Explorez les démos live sur babylonjs.com/lite-demos
D'un DOOM (id Tech 1) propre, codé en clean-room et 100 % sans GPL, et un LibreQuake E1M1 jouable, à un bac à sable voxel en streaming, une carte de stratégie isométrique façon Freeciv, un shader raymarché sans scène Torus States, une démo OffscreenCanvas qui continue de rendre dans un Web Worker pendant que le thread principal est bloqué, un platformer façon Mario, Tetris, et le Littlest Tokyo chacun tourne sur WebGPU et a été tree-shaké sans pitié. Beaucoup embarquent toute l'expérience dans un bundle minuscule : le player DOOM, par exemple, c'est environ 43 Ko gzippés. (Oui, DOOM tourne dessus. Évidemment que DOOM tourne dessus.)
Porter depuis Babylon.js
Déplacer une scène vers Babylon Lite est censé donner une impression de déjà-vu. L'API est différente : pas de classes, et le comportement vit dans des fonctions autonomes plutôt que dans des méthodes, mais elle reste similaire dans sa forme et son nommage, donc les concepts se transposent direct. On prépare une documentation costaude pour vous aider à porter vos scènes, avec des guides côte à côte, une carte de l'API, et des tonnes d'exemples.
Voici exactement la même scène PBR BoomBox (celle montrée plus haut) dans les deux moteurs :
Babylon.js
import { WebGPUEngine } from "@babylonjs/core/Engines/webgpuEngine";
import "@babylonjs/core/Helpers/sceneHelpers";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
import { CubeTexture } from "@babylonjs/core/Materials/Textures/cubeTexture";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { Scene } from "@babylonjs/core/scene";
import "@babylonjs/loaders/glTF";
const engine = new WebGPUEngine(canvas, { antialias: true, adaptToDeviceRatio: true });
await engine.initAsync();
const scene = new Scene(engine);
const light = new HemisphericLight("hemi", new Vector3(0, 1, 0), scene);
light.intensity = 1.0;
await SceneLoader.ImportMeshAsync("", "https://playground.babylonjs.com/scenes/", "BoomBox.glb", scene);
scene.environmentTexture = new CubeTexture(
"https://assets.babylonjs.com/core/environments/environmentSpecular.env",
scene
);
scene.createDefaultCamera(true, true, true);
scene.createDefaultEnvironment({ createSkybox: true, createGround: true, skyboxSize: 1000 });
engine.runRenderLoop(() => scene.render());
Babylon Lite
import {
createEngine,
createSceneContext,
createDefaultCamera,
createHemisphericLight,
loadGltf,
loadEnvironment,
addToScene,
attachControl,
registerScene,
startEngine,
} from "babylon-lite";
const engine = await createEngine(canvas);
const scene = createSceneContext(engine);
addToScene(scene, createHemisphericLight([0, 1, 0], 1.0));
addToScene(scene, await loadGltf(engine, "https://playground.babylonjs.com/scenes/BoomBox.glb"));
await loadEnvironment(scene, "https://assets.babylonjs.com/core/environments/environmentSpecular.env", {
groundTextureUrl: "https://assets.babylonjs.com/core/environments/backgroundGround.png",
skyboxUrl: "https://assets.babylonjs.com/core/environments/backgroundSkybox.dds",
skyboxSize: 1000,
});
const cam = createDefaultCamera(scene);
attachControl(cam, canvas, scene);
await registerScene(engine, scene);
await startEngine(engine);
Remarquez que la forme est la même : créer un moteur, construire une scène, ajouter une lumière, charger un glTF, mettre en place l'environnement et la caméra, puis lancer. La différence, c'est que Lite vous file de la donnée brute plus des fonctions tree-shakables au lieu de classes et de méthodes et c'est exactement ce qui permet au bundler de virer tout ce que vous n'utilisez pas.
Foire aux questions
Sur quels navigateurs ça tourne ? Babylon Lite est WebGPU-only, donc ça tourne partout où WebGPU est dispo : Chrome et Edge 113+, et les versions récentes de Firefox et Safari. Pas de fallback WebGL, et c'est voulu.
Est-ce que les fonctionnalités de Babylon.js arriveront dans Lite ? Oui. Rapprocher Lite de la parité fonctionnelle avec Babylon.js est notre priorité numéro un. Les fonctionnalités débarquent sous forme de modules isolés et tree-shakables, donc le moteur grossit sans faire gonfler votre bundle.
Je peux mélanger Babylon.js et Babylon Lite dans un seul projet ? Ce sont deux moteurs séparés, donc une scène donnée est construite avec l'un ou l'autre. Comme les API se ressemblent dans la forme, les concepts et les assets (glTF, .env, textures) se transposent direct quand vous choisissez le moteur qui colle au projet.
C'est prêt pour la prod ? L'API est stable ? Lite est jeune et l'API va continuer d'évoluer à mesure qu'on comble l'écart fonctionnel. C'est entièrement open source et utilisable dès aujourd'hui. On adorerait des early adopters, avec la réserve décrite juste en dessous.
Babylon Lite garantit-il la rétrocompatibilité ? Non. Et c'est l'une des plus grosses différences avec Babylon.js. Babylon.js considère la rétrocompatibilité comme sacrée ; votre code continue de marcher d'une version à l'autre. Pour Babylon Lite, la rétrocompatibilité n'est explicitement pas un objectif de premier rang : les breaking changes sont autorisés quand ils protègent la taille du bundle, la performance ou le tree-shaking. On fera ces changements avec précaution, on les communiquera clairement, et on évitera de remuer pour rien, mais attendez-vous à ce que monter de version Lite puisse demander des ajustements de code, et pinnez une version en conséquence. C'est un compromis assumé : la liberté de casser fait partie de ce qui garde Lite petit et rapide.
« Pixel-perfect », ça veut dire strictement identique ? Ça veut dire visuellement indiscernable, garanti par un seuil MAD automatisé par scène en CI (voir plus haut). L'objectif, c'est un rendu qualité Babylon.js que vous ne pouvez pas distinguer à l'œil.
La suite
Ce n'est que le début. Notre feuille de route à partir d'ici :
- Parité fonctionnelle avec Babylon.js. On va continuer de combler l'écart, en amenant Babylon Lite au même niveau de fonctionnalités que Babylon.js, pour qu'un nombre croissant de scènes puissent être construites en Lite sans compromis.
- Un Lite Viewer. Un viewer ultra-léger en drop-in pour montrer modèles et scènes avec la plus petite empreinte possible.
- Un Lite Playground et un Sandbox. Les outils que vous adorez dans l'écosystème Babylon, réimaginés pour Lite, pour prototyper, partager et glisser-déposer des assets en quelques secondes.
Et tout aussi important : les mois qui viennent, on va surtout écouter la communauté. On veut savoir ce qui manque, ce dont vous auriez besoin avant de dégainer Lite, et où il devrait aller ensuite. Vos retours façonneront directement la roadmap.
En résumé
- Babylon.js : rapide, flexible, sans parti pris, compatible au max. Le choix par défaut pour la plupart des projets.
- Babylon Lite : WebGPU-only, sans classes, tree-shakable sans pitié. Quand il vous faut le plus petit bundle et les meilleures perfs, avec un résultat pixel-identique.
Deux moteurs, une seule famille, qui avancent ensemble. Choisissez celui qui colle à votre projet et basculez de l'un à l'autre en sachant que les pixels ne bougeront pas.
Allez jeter un œil
Babylon Lite est open source et dispo dès maintenant. Explorez le code, parcourez la galerie de scènes, jouez avec les démos live, et suivez le développement :
github.com/BabylonJS/Babylon-Lite
Démos live : babylonjs.com/lite-demos
Deltakosh.