Babylon.js

{{Short description|Real-time 3D rendering engine for JavaScript}}

{{Infobox software

| logo = Babylon logo v4.svg

| author = David Catuhe

{{cite web

|url=https://www.linkedin.com/in/dcatuhe

|title=David Catuhe - Group Engineering Manager - Microsoft

|website=linkedin.com

|access-date=11 March 2021

|quote= ... Creator and leader of Babylon.js open source project ...

}}

| developer = Microsoft

{{cite web

|url=https://winbuzzer.com/2020/02/28/microsoft-unveils-babylon-js-4-1-a-powerful-open-source-web-rendering-engine-xcxwbn/

|title=Microsoft Unveils Babylon.js 4.1, a Powerful Open Source Web Rendering Engine

|website=winbuzzer.com

|date=28 February 2020

|access-date=18 April 2021

}} and contributors

{{LSR

|url=https://github.com/BabylonJS/Babylon.js/graphs/contributors

|title=Contributors to BabylonJS/Babylon.js · GitHub

|website=github.com

|access-date=11 March 2021

}}

| released = {{Start date and age|2013}}

| latest release version = 8.2.0

| latest release date = {{Start date and age|2025|04|10}}

| repo = https://github.com/BabylonJS/Babylon.js

| programming language = TypeScript, JavaScript

| genre = 3D engine

| license = Apache License 2.0

| website = {{URL|https://www.babylonjs.com/}}

}}

Babylon.js is a JavaScript library and 3D engine for displaying real time 3D graphics in a web browser via HTML5. The source code is available on GitHub and distributed under the Apache License 2.0.

==History and progress==

It was initially released in 2013 under Microsoft Public License, having been developed by two Microsoft employees in their free time as a side-project. David Catuhe created the 3D game engine, while David Rousset implemented VR, Gamepad and IndexedDB support. The two were aided by artist Michel Rousseau, who contributed several 3D scenes. Babylon.js is based on an earlier game engine for Silverlight's WPF based 3D system.{{cite web| url=http://www.i-programmer.info/news/144-graphics-and-games/6243-babylonjs-a-webgl-game-engine-from-microsoft.html |title= Babylon.js - A WebGL Game Engine From Microsoft |last=Elliot |first = Iain |date=2013-08-15 |website=i-programmer.info | access-date=2018-09-06}}{{cite web |url=https://www.ekino.com/interview-david-rousset-babylonjs/ |title=Interview de David Rousset sur babylon.js |trans-title=An Interview with David Rousset on Babylon.js |language=French |last=Dumand |first=Mickael |date=2014-11-28 |website=ekino |access-date=2018-09-07 |archive-date=2016-09-12 |archive-url=https://web.archive.org/web/20160912004200/http://www.ekino.com/interview-david-rousset-babylonjs/ |url-status=dead }}

Catuhe's side-project then became his full-time job, and his team's primary focus.{{cite web|url=https://cloudblogs.microsoft.com/opensource/2021/02/22/microsoft-open-source-success-story-babylon/|title=Microsoft Open Source success story—Babylon|last=Irwin|first=Emma|date=2021-02-21|access-date=2021-04-18}}

In 2015, it was presented at the WebGL Conference in Paris.{{cite web| url=http://www.webglparis.com/#videos2015 |title= BabylonJS et ses dernières fonctionnalités |trans-title=BabylonJS and its latest features |language=French|last1=Rousseau |first1 = Jean-Michel |last2 = Rousseau |first2 = David |date=2015-10-12 |website=webglparis.com | access-date=2018-09-12}} Following its promotion{{Cite web |last=Weber |first=Raanan |date=January 2016 |title=Game Development - Babylon.js: Advanced Features for Enhancing Your First Web Game |url=https://learn.microsoft.com/en-us/archive/msdn-magazine/2016/january/game-development-babylon-js-advanced-features-for-enhancing-your-first-web-game |access-date=2025-04-13 |website=learn.microsoft.com |language=en-us}}{{Cite web |last=Weber |first=Raanan |date=December 2015 |title=Game Development - Babylon.js: Building a Basic Game for the Web |url=https://learn.microsoft.com/en-us/archive/msdn-magazine/2015/december/game-development-babylon-js-building-a-basic-game-for-the-web |access-date=2025-04-13 |website=learn.microsoft.com |language=en-us}} and application in games,{{cite web | url=http://www.flightarcade.com/learn/webgl | title=Babylon.js Flight Simulator | access-date=2018-09-07 | archive-date=2020-08-16 | archive-url=https://web.archive.org/web/20200816052419/http://flightarcade.com/learn/webgl/ | url-status=dead }} video game publisher Ubisoft released an Assassin's Creed title built atop the library in 2014.{{cite web| url=https://thenextweb.com/microsoft/2014/05/19/microsoft-ubisoft-launch-3d-web-game-assassins-creed-pirates-built-open-source-framework-babylon-js/ |title= Microsoft and Ubisoft launch 3D Web game Assassin's Creed Pirates, built with open-source framework Babylon.JS |last = Protalinski | first = Emil |date=2014-05-09 |publisher= The Next Web | access-date=2018-09-07}} As of 2024, the project has more than 500 contributors.{{cite web |author= |title=Contributors |url=https://github.com/BabylonJS/Babylon.js/graphs/contributors |access-date=2018-09-06 |publisher=GitHub}}

Its use has developed into a variety of fields such as:

virtual worlds{{cite web| url=https://medium.com/@bnolan/developing-a-virtual-world-for-multiple-devices-73e378997353 |title= Developing a Virtual World for multiple devices |last=Nolan |first = Ben |date=2018-08-02 |website=medium.com | access-date=2018-09-05}}
crime data visualization{{cite web| url=https://boston.ma.illuminated.city/#analytics |title= Visualizations of Boston, Massachusetts crime data | last1 = Button | first1 = Brian |date = 2018-05-24| access-date=2018-09-09}}
education in medicine{{cite web| url=https://www.youtube.com/watch?v=lcYsGEzI3zA |title= MRI obliquing with webgl2 3D texture - Pixpipe & BabylonJS |last = Lurie | first = Jonathan |website= YouTube |date= 30 March 2018 | access-date=2018-09-09}}{{cite news | last1 = Batista | first1 = Arthur V. | last2 = Lemos | first2 = Robson R. | last3 = Rudolph | first3 = Cristiane M. |last4=Bueno |first4=Bruna S. |last5=Fiuza |first5=Patricia J. |title = A Web3D Serious Game for Human Anatomy Education| page= 4 |url = http://arthurvolpato.com/_projects/A%20Web%203d%20Serious%20Game%20for%20Anatomy%20Education.pdf |year= 2018| access-date=2018-09-09}}
fashion avatars{{cite web| url=https://html5gamedevelopment.com/3d-clothing-demo-with-babylonjs/ |title= 3D Clothing Demo with BabylonJS |author= |date= 20 September 2016 | access-date=2018-09-09}}
managing Kinect on the web{{cite book |last1=Moreno |first1=Francisco |last2=Ramirez |first2=Esmitt |last3=Sans |first3=Francisco |last4=Carmona |first4=Rhadamés |title=2015 Latin American Computing Conference (CLEI) |date=2015-10-23 |chapter=An Open Source Framework to Manage Kinect on the Web |chapter-url = https://www.researchgate.net/publication/284171406 |page= 7 |doi= 10.1109/CLEI.2015.7359995 |isbn=978-1-4673-9143-6 |s2cid=2798664 |access-date=2018-09-09}}
military training{{cite news | last1 = Maxwell | first1 = Douglas | last2 = Heilmann | first2 = Michael |title = Leveraging HTML5 and WebGL to Address Information Assurance Barriers for Simulation Based Training in the U.S. Military| page= 8 |url = http://www.modsimworld.org/papers/2017/Leveraging_HTML5_and_WebGL_to_Address_Information_Assurance_Barriers_for_Simulation_Based_Training_in_the_US_Military.pdf | website= modsimworld.org |year= 2017}}
modelling historic sites{{cite web| url=https://www.inria.fr/en/news/mediacentre/digital-pompei-a-massive-3d-model-rendered-in-microsoft-edge |title= Digital Pompéi |last = Goussu | first = Laurence | publisher= The National Institute for Research in Computer Science and Control (Inria) | access-date=2018-09-07}}{{cite web| url=https://www.babylonjs.com/demos/sponza/ |title= Sponza Palace |author= | access-date=2018-09-12}}
Product design{{cite web| url=https://sdtimes.com/box/day-action-net-neutrality-box-elements-microsofts-babylon-js-3-0/ |title= SD Times news digest |last1 = Cardoza |first1= Christina |last2= Moore|first2= Madison | publisher= SD Times |date=2017-07-14 | access-date=2018-09-07}}{{cite web | url=https://xboxdesignlab.xbox.com/en-US/customize | title=XBox Design Lab | author= | website=Xbox | access-date=2018-09-12 | archive-date=2016-08-19 | archive-url=https://web.archive.org/web/20160819060913/https://xboxdesignlab.xbox.com/en-US/customize | url-status=dead }}
RDF graphs{{cite journal |last1=Viola |first1=Fabio |last2=Roffia |first2=Luca |last3=Antoniazzi |first3=Francesco |last4=D’Elia |first4=Alfredo |last5=Aguzzi |first5=Cristiano |last6=Cinotti |first6=Tullio Salmon |date=2018-08-17 |title=Interactive 3D Exploration of RDF Graphs through Semantic Planes |journal=Future Internet |volume=10 |issue=8 |pages=5–8 |doi= 10.3390/fi10080081 |doi-access=free |hdl=11585/640472 |hdl-access=free }}
urban underground infrastructure modelling{{cite news | last1 = Rodríguez | first1 = Juan Manuel Jurado | last2 = Alvarado | first2 = Lidia Ortega | last3 = Higueruela | first3 = Francisco R. Feito |title = 3D underground reconstruction for real-time and collaborative virtual reality environment| pages= 40, 43 |url = http://wscg.zcu.cz/WSCG2018/2018-papers/!!_CSRN-2802-6.pdf | publisher= World Society for Computer Graphics |year= 2018| access-date=2018-09-09}}

On 27 March 2025, Babylon.js 8.0 is released.{{Cite web |last=Blog |first=Windows Developer |last2=Lucchini |first2=Jason Carter, Thomas |date=2025-03-27 |title=Announcing Babylon.js 8.0 |url=https://blogs.windows.com/windowsdeveloper/2025/03/27/announcing-babylon-js-8-0/ |access-date=2025-03-31 |website=Windows Developer Blog |language=en-US}}

Technical description

The source code is written in TypeScript and then compiled into a JavaScript version. The JavaScript version is available to end users via NPM or CDN who then code their projects in JavaScript accessing the engine's API. The Babylon.js 3D engine and user code is natively interpreted by web browsers supporting the HTML5 standard and WebGL to undertake the 3D rendering.

Modeling methodology

The 3D modeling process used is that of polygon modeling with triangular faces to be represented by shell models.{{cite web |url = http://www.pixelcodr.com/tutos/trees/trees.html |title = Tree Generator - How to use VertexData object |last = Chenard |first = Julian |website = Pixel Codr |access-date = 2018-11-27 |archive-date = 2019-08-27 |archive-url = https://web.archive.org/web/20190827070524/http://pixelcodr.com/tutos/trees/trees.html |url-status = dead }} Limited use of constructive solid geometry is possible, though only as a transitional method to create the union, subtraction, and intersection of shell models.{{cite web| url=https://github.com/CraigFeldspar/BabylonCSG |title= Constructive Solid Geometry in Babylon.js |last = Feldspar |first = Craig |website=GitHub | access-date=2018-11-27}} Once created, models are rendered on an HTML 5 canvas element using a shader program which determines the pixel positions and colors on the canvas using the polygon models, the textures applied to each model, the scene camera and lights together with the 4 x 4 world matrices for each object which stores their position, rotation and scale.{{cite web| url=https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/ |title= Building Shaders with Babylon.js |last = Catuhe |first = David |website=Smashing Magazine | access-date=2018-11-27|date= November 2016 }} The technique used to produce photo realistic images is that of physically based rendering{{cite web| url=https://www.khronos.org/blog/art-pipeline-for-gltf |title= Art Pipeline for glTF |last = Ryan |first = Patrick |website=Khronos Group| access-date=2018-11-27|date= 2018-01-08 }} along with post-processing methods.{{cite book | last = Moreau-Mathis | first = Julien | title = Babylon.js Essentials |url = https://www.packtpub.com/game-development/babylonjs-essentials | publisher = Packt Publishing | year = 2016 | isbn = 978-1785884795 }} In order to simulate collisions between models and other real world physical actions, one of two physics engines need to be added as plugins: Cannon.js and Oimo.{{cite web| url=https://gamedevelopment.tutsplus.com/tutorials/webgl-physics-and-collision-detection-using-babylonjs-and-oimojs--cms-24114 |title= WebGL Physics and Collision Detection Using BabylonJS and Oimo.js |last=Rousset |first = David |date = 2015-06-11 |website=Game Development | access-date=2018-11-27}} Animation involving, for example, changes in position or color of models is accomplished by key frame animation objects called "animatables," while full character animation is achieved through the use of skeletons with blend weights.{{cite web| url=http://www.spritehand.com/2014/08/babylonjs-physics-and-character.html |title= babylon.js: physics and character animation |last=Beaulieu |first = Andy |date = 2014-05-26 |website=Spritehand | access-date=2018-09-06}}