Menu
Home
People
Places
Arts
History
Plants & Animals
Science
Life & Culture
Technology
Reference.org
Babylon.js
open-in-new
<h2 id="history-and-progress">History and progress</h2> <p>It was initially released in 2013 under <a href="/facts/Microsoft_Public_License/wRewF7Ja">Microsoft Public License</a>, having been developed by two <a href="/facts/Microsoft/nGIDDXdx">Microsoft</a> employees in their free time as a side-project. David Catuhe created the 3D <a href="/facts/Game_engine/lojx7lTG">game engine</a>, while David Rousset implemented <a href="/facts/Virtual_reality/0psDGsxT">VR</a>, Gamepad and <a href="/facts/Indexed_Database_API/PJE0oQWq">IndexedDB</a> support. The two were aided by artist Michel Rousseau, who contributed several 3D scenes. Babylon.js is based on an earlier game engine for <a href="/facts/Silverlight/SYKe8yL1">Silverlight</a>'s <a href="/facts/Windows_Presentation_Foundation/KTs9FcFn">WPF</a> based 3D system.<a class="footnote-ref" id="fnref:1" href="#fn:1"><sup>1</sup></a><a class="footnote-ref" id="fnref:2" href="#fn:2"><sup>2</sup></a> Catuhe's side-project then became his full-time job, and his team's primary focus.<a class="footnote-ref" id="fnref:3" href="#fn:3"><sup>3</sup></a> In 2015, it was presented at the WebGL Conference in Paris.<a class="footnote-ref" id="fnref:4" href="#fn:4"><sup>4</sup></a> Following its promotion<a class="footnote-ref" id="fnref:5" href="#fn:5"><sup>5</sup></a><a class="footnote-ref" id="fnref:6" href="#fn:6"><sup>6</sup></a> and application in games,<a class="footnote-ref" id="fnref:7" href="#fn:7"><sup>7</sup></a> video game publisher <a href="/facts/Ubisoft/Pnw08RvF">Ubisoft</a> released an <a href="/facts/Assassin%27s_Creed/rymvqwvl">Assassin's Creed</a> title built atop the library in 2014.<a class="footnote-ref" id="fnref:8" href="#fn:8"><sup>8</sup></a> As of 2024, the project has more than 500 contributors.<a class="footnote-ref" id="fnref:9" href="#fn:9"><sup>9</sup></a> </p><p>Its use has developed into a variety of fields such as: </p> <ul><li>virtual worlds<a class="footnote-ref" id="fnref:10" href="#fn:10"><sup>10</sup></a></li> <li>crime data visualization<a class="footnote-ref" id="fnref:11" href="#fn:11"><sup>11</sup></a></li> <li>education in medicine<a class="footnote-ref" id="fnref:12" href="#fn:12"><sup>12</sup></a><a class="footnote-ref" id="fnref:13" href="#fn:13"><sup>13</sup></a></li> <li>fashion avatars<a class="footnote-ref" id="fnref:14" href="#fn:14"><sup>14</sup></a></li> <li>managing <a href="/facts/Kinect/dD5P9XDW">Kinect</a> on the web<a class="footnote-ref" id="fnref:15" href="#fn:15"><sup>15</sup></a></li> <li>military training<a class="footnote-ref" id="fnref:16" href="#fn:16"><sup>16</sup></a></li> <li>modelling historic sites<a class="footnote-ref" id="fnref:17" href="#fn:17"><sup>17</sup></a><a class="footnote-ref" id="fnref:18" href="#fn:18"><sup>18</sup></a></li> <li>Product design<a class="footnote-ref" id="fnref:19" href="#fn:19"><sup>19</sup></a><a class="footnote-ref" id="fnref:20" href="#fn:20"><sup>20</sup></a></li> <li><a href="/facts/Resource_Description_Framework/WMufyukm">RDF graphs</a><a class="footnote-ref" id="fnref:21" href="#fn:21"><sup>21</sup></a></li> <li>urban underground infrastructure modelling<a class="footnote-ref" id="fnref:22" href="#fn:22"><sup>22</sup></a></li></ul> <h2 id="technical-description">Technical description</h2> <p>The source code is written in <a href="/facts/TypeScript/W9J27V1N">TypeScript</a> and then <a href="/facts/Compiler/WNfCDFJe">compiled</a> into a <a href="/facts/JavaScript/XhhIIEsl">JavaScript</a> version. The JavaScript version is available to end users via <a href="/facts/Npm_(software)/wJg3ebn2">NPM</a> or <a href="/facts/Content_delivery_network/SVuID7jd">CDN</a> 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 <a href="/facts/HTML5/HBAxEAr6">HTML5</a> standard and <a href="/facts/WebGL/Avkp0Wb7">WebGL</a> to undertake the <a href="/facts/3D_rendering/6SqukntK">3D rendering</a>. </p> <h2 id="modeling-methodology">Modeling methodology</h2> <p>The 3D <a href="/facts/3D_modeling/6V3Ry9AJ">modeling process</a> used is that of polygon modeling with triangular faces to be <a href="/facts/3D_modeling/6V3Ry9AJ">represented</a> by shell models.<a class="footnote-ref" id="fnref:23" href="#fn:23"><sup>23</sup></a> Limited use of <a href="/facts/Constructive_solid_geometry/Dcs2fzyU">constructive solid geometry</a> is possible, though only as a transitional method to create the union, subtraction, and intersection of shell models.<a class="footnote-ref" id="fnref:24" href="#fn:24"><sup>24</sup></a> Once created, models are <a href="/facts/3D_rendering/6SqukntK">rendered</a> on an <a href="/facts/HTML_5/HBAxEAr6">HTML 5</a> <a href="/facts/Canvas_element/E6IPUWf1">canvas element</a> using a <a href="/facts/Shader/qfhkKFwA">shader</a> program which determines the pixel positions and colors on the canvas using the polygon models, the <a href="/facts/Texture_mapping/9gDTsuXN">textures</a> applied to each model, the scene <a href="/facts/Virtual_camera_system/fCkGL0Gj">camera</a> and lights together with the 4 x 4 world <a href="/facts/Matrix_(mathematics)/qa8FI4ko">matrices</a> for each object which stores their position, rotation and scale.<a class="footnote-ref" id="fnref:25" href="#fn:25"><sup>25</sup></a> The technique used to produce <a href="/facts/Photorealism/HLAHwEvb">photo realistic</a> images is that of <a href="/facts/Physically_based_rendering/bRK5alKl">physically based rendering</a><a class="footnote-ref" id="fnref:26" href="#fn:26"><sup>26</sup></a> along with <a href="/facts/Video_post-processing/cDPyuE2W">post-processing</a> methods.<a class="footnote-ref" id="fnref:27" href="#fn:27"><sup>27</sup></a> In order to simulate collisions between models and other real world physical actions, one of two <a href="/facts/Physics_engine/lAsEdSA4">physics engines</a> need to be added as plugins: <a href="/facts/Cannon.js/GxNtA9Y3">Cannon.js</a> and Oimo.<a class="footnote-ref" id="fnref:28" href="#fn:28"><sup>28</sup></a> Animation involving, for example, changes in position or color of models is accomplished by <a href="/facts/Key_frame/SeHhpINL">key frame</a> animation objects called "animatables," while full character animation is achieved through the use of <a href="/facts/Skeletal_animation/Bab11dVJ">skeletons with blend weights</a>.<a class="footnote-ref" id="fnref:29" href="#fn:29"><sup>29</sup></a><a class="footnote-ref" id="fnref:30" href="#fn:30"><sup>30</sup></a> </p> <h2 id="see-also">See also</h2> <ul> <li>Free and open-source software portal</li></ul> <ul><li><a href="/facts/List_of_3D_graphics_libraries/Xvw27Nt9">List of 3D graphics libraries</a></li> <li><a href="/facts/List_of_WebGL_frameworks/KzzFPT5j">List of WebGL frameworks</a></li> <li><a href="/facts/JavaScript_library/vjUJ5DGC">JavaScript library</a></li> <li><a href="/facts/Web_framework/8f1CVHDX">Web framework</a></li></ul> <h2 id="further-reading">Further reading</h2> <ul><li>Elster, Josh (2022). <i>Going the Distance with Babylon.js: Building extensible, maintainable, and attractive browser-based interactive applications from start to finish</i>. Packt Publishing. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-1801076586.</li> <li>Chenard, Julian (2017). <i>Learning Babylon.js: Learn the basics of the 3D framework Babylon.js by creating a whole game!</i>. Independently published. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-1520730448.</li> <li>Moreau-Mathis, Julien (2016). <a href="https://www.packtpub.com/game-development/babylonjs-essentials"><i>Babylon.js Essentials</i></a>. Packt Publishing. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-1785884795.</li> <li>Chenard, Julien (2015). <a href="http://learningbabylonjs.com/"><i>Learning BabylonJS</i></a> (e-book).</li> <li>Cozzi, Patrick (2015). <a href="https://www.crcpress.com/WebGL-Insights/Cozzi/p/book/9781498716079">"WebGL Engine Design in Babylon.js"</a>. <i>WebGL Insights</i>. <a href="/facts/CRC_Press/duTuH4hz">CRC Press</a>. <a href="/facts/ISBN_(identifier)/15AdSPa9">ISBN</a> 978-1498716079.</li> <li>Chenard, Julian; Moreau-Mathis, Julien (2016). <a href="http://www.programmez.com/magazine/article/realiser-un-jeu-3d-avec-babylonjs">"Réaliser un jeu en 3D avec BabylonJS"</a> [Creating a 3D Game with BabylonJS] (PDF). <i>Programmez!</i> (in French).</li> <li>Bousquié, Jérôme (2015). <a href="http://www.programmez.com/magazine/article/la-3d-sur-le-web-avec-babylonjs">"La 3D sur le Web avec BabylonJS"</a> [3D on the Web with BabylonJS] (PDF). <i>Programmez!</i> (in French).</li> <li>Catuhe, David (2014). <a href="http://www.programmez.com/magazine/article/sous-le-capot-dun-moteur-3d-babylonjs">"Sous le capot d'un moteur 3D"</a> [Under the Hood of a 3D Engine] (PDF). <i>Programmez!</i> (in French).</li></ul> <h2 id="external-links">External links</h2> <ul><li><a href="https://www.babylonjs.com/">Official website</a></li></ul> <h2 id="references">References</h2> <ol> <li id="fn:1"><p>Elliot, Iain (2013-08-15). "Babylon.js - A WebGL Game Engine From Microsoft". i-programmer.info. Retrieved 2018-09-06. <a href="http://www.i-programmer.info/news/144-graphics-and-games/6243-babylonjs-a-webgl-game-engine-from-microsoft.html" target="_blank">http://www.i-programmer.info/news/144-graphics-and-games/6243-babylonjs-a-webgl-game-engine-from-microsoft.html</a> <a href="#fnref:1" class="footnote-back-ref">↩</a></p></li> <li id="fn:2"><p>Dumand, Mickael (2014-11-28). "Interview de David Rousset sur babylon.js" [An Interview with David Rousset on Babylon.js]. ekino (in French). Archived from the original on 2016-09-12. Retrieved 2018-09-07. <a href="https://web.archive.org/web/20160912004200/http://www.ekino.com/interview-david-rousset-babylonjs/" target="_blank">https://web.archive.org/web/20160912004200/http://www.ekino.com/interview-david-rousset-babylonjs/</a> <a href="#fnref:2" class="footnote-back-ref">↩</a></p></li> <li id="fn:3"><p>Irwin, Emma (2021-02-21). "Microsoft Open Source success story—Babylon". Retrieved 2021-04-18. <a href="https://cloudblogs.microsoft.com/opensource/2021/02/22/microsoft-open-source-success-story-babylon/" target="_blank">https://cloudblogs.microsoft.com/opensource/2021/02/22/microsoft-open-source-success-story-babylon/</a> <a href="#fnref:3" class="footnote-back-ref">↩</a></p></li> <li id="fn:4"><p>Rousseau, Jean-Michel; Rousseau, David (2015-10-12). "BabylonJS et ses dernières fonctionnalités" [BabylonJS and its latest features]. webglparis.com (in French). Retrieved 2018-09-12. <a href="http://www.webglparis.com/#videos2015" target="_blank">http://www.webglparis.com/#videos2015</a> <a href="#fnref:4" class="footnote-back-ref">↩</a></p></li> <li id="fn:5"><p>Weber, Raanan (2015-12-01). "Babylon.js Building a Basic Game for the Web". Vol. 30, no. 13. MSDN. Retrieved 2018-09-12. {{cite magazine}}: Cite magazine requires |magazine= (help) <a href="https://msdn.microsoft.com/en-us/magazine/mt595753.aspx" target="_blank">https://msdn.microsoft.com/en-us/magazine/mt595753.aspx</a> <a href="#fnref:5" class="footnote-back-ref">↩</a></p></li> <li id="fn:6"><p>Weber, Raanan (2016-01-01). "Game Development - Babylon.js: Advanced Features for Enhancing Your First Web Game". Vol. 31, no. 1. MSDN. Retrieved 2018-09-12. {{cite magazine}}: Cite magazine requires |magazine= (help) <a href="https://msdn.microsoft.com/en-us/magazine/mt614269" target="_blank">https://msdn.microsoft.com/en-us/magazine/mt614269</a> <a href="#fnref:6" class="footnote-back-ref">↩</a></p></li> <li id="fn:7"><p>"Babylon.js Flight Simulator". Archived from the original on 2020-08-16. Retrieved 2018-09-07. <a href="https://web.archive.org/web/20200816052419/http://flightarcade.com/learn/webgl/" target="_blank">https://web.archive.org/web/20200816052419/http://flightarcade.com/learn/webgl/</a> <a href="#fnref:7" class="footnote-back-ref">↩</a></p></li> <li id="fn:8"><p>Protalinski, Emil (2014-05-09). "Microsoft and Ubisoft launch 3D Web game Assassin's Creed Pirates, built with open-source framework Babylon.JS". The Next Web. Retrieved 2018-09-07. <a href="https://thenextweb.com/microsoft/2014/05/19/microsoft-ubisoft-launch-3d-web-game-assassins-creed-pirates-built-open-source-framework-babylon-js/" target="_blank">https://thenextweb.com/microsoft/2014/05/19/microsoft-ubisoft-launch-3d-web-game-assassins-creed-pirates-built-open-source-framework-babylon-js/</a> <a href="#fnref:8" class="footnote-back-ref">↩</a></p></li> <li id="fn:9"><p>"Contributors". GitHub. Retrieved 2018-09-06. <a href="https://github.com/BabylonJS/Babylon.js/graphs/contributors" target="_blank">https://github.com/BabylonJS/Babylon.js/graphs/contributors</a> <a href="#fnref:9" class="footnote-back-ref">↩</a></p></li> <li id="fn:10"><p>Nolan, Ben (2018-08-02). "Developing a Virtual World for multiple devices". medium.com. Retrieved 2018-09-05. <a href="https://medium.com/@bnolan/developing-a-virtual-world-for-multiple-devices-73e378997353" target="_blank">https://medium.com/@bnolan/developing-a-virtual-world-for-multiple-devices-73e378997353</a> <a href="#fnref:10" class="footnote-back-ref">↩</a></p></li> <li id="fn:11"><p>Button, Brian (2018-05-24). "Visualizations of Boston, Massachusetts crime data". Retrieved 2018-09-09. <a href="https://boston.ma.illuminated.city/#analytics" target="_blank">https://boston.ma.illuminated.city/#analytics</a> <a href="#fnref:11" class="footnote-back-ref">↩</a></p></li> <li id="fn:12"><p>Lurie, Jonathan (30 March 2018). "MRI obliquing with webgl2 3D texture - Pixpipe & BabylonJS". YouTube. Retrieved 2018-09-09. <a href="https://www.youtube.com/watch?v=lcYsGEzI3zA" target="_blank">https://www.youtube.com/watch?v=lcYsGEzI3zA</a> <a href="#fnref:12" class="footnote-back-ref">↩</a></p></li> <li id="fn:13"><p>Batista, Arthur V.; Lemos, Robson R.; Rudolph, Cristiane M.; Bueno, Bruna S.; Fiuza, Patricia J. (2018). "A Web3D Serious Game for Human Anatomy Education" (PDF). p. 4. Retrieved 2018-09-09. <a href="http://arthurvolpato.com/_projects/A%20Web%203d%20Serious%20Game%20for%20Anatomy%20Education.pdf" target="_blank">http://arthurvolpato.com/_projects/A%20Web%203d%20Serious%20Game%20for%20Anatomy%20Education.pdf</a> <a href="#fnref:13" class="footnote-back-ref">↩</a></p></li> <li id="fn:14"><p>"3D Clothing Demo with BabylonJS". 20 September 2016. Retrieved 2018-09-09. <a href="https://html5gamedevelopment.com/3d-clothing-demo-with-babylonjs/" target="_blank">https://html5gamedevelopment.com/3d-clothing-demo-with-babylonjs/</a> <a href="#fnref:14" class="footnote-back-ref">↩</a></p></li> <li id="fn:15"><p>Moreno, Francisco; Ramirez, Esmitt; Sans, Francisco; Carmona, Rhadamés (2015-10-23). "An Open Source Framework to Manage Kinect on the Web". 2015 Latin American Computing Conference (CLEI). p. 7. doi:10.1109/CLEI.2015.7359995. ISBN 978-1-4673-9143-6. S2CID 2798664. Retrieved 2018-09-09. <a href="978-1-4673-9143-6" target="_blank">978-1-4673-9143-6</a> <a href="#fnref:15" class="footnote-back-ref">↩</a></p></li> <li id="fn:16"><p>Maxwell, Douglas; Heilmann, Michael (2017). "Leveraging HTML5 and WebGL to Address Information Assurance Barriers for Simulation Based Training in the U.S. Military" (PDF). modsimworld.org. p. 8. <a href="http://www.modsimworld.org/papers/2017/Leveraging_HTML5_and_WebGL_to_Address_Information_Assurance_Barriers_for_Simulation_Based_Training_in_the_US_Military.pdf" target="_blank">http://www.modsimworld.org/papers/2017/Leveraging_HTML5_and_WebGL_to_Address_Information_Assurance_Barriers_for_Simulation_Based_Training_in_the_US_Military.pdf</a> <a href="#fnref:16" class="footnote-back-ref">↩</a></p></li> <li id="fn:17"><p>Goussu, Laurence. "Digital Pompéi". The National Institute for Research in Computer Science and Control (Inria). Retrieved 2018-09-07. <a href="https://www.inria.fr/en/news/mediacentre/digital-pompei-a-massive-3d-model-rendered-in-microsoft-edge" target="_blank">https://www.inria.fr/en/news/mediacentre/digital-pompei-a-massive-3d-model-rendered-in-microsoft-edge</a> <a href="#fnref:17" class="footnote-back-ref">↩</a></p></li> <li id="fn:18"><p>"Sponza Palace". Retrieved 2018-09-12. <a href="https://www.babylonjs.com/demos/sponza/" target="_blank">https://www.babylonjs.com/demos/sponza/</a> <a href="#fnref:18" class="footnote-back-ref">↩</a></p></li> <li id="fn:19"><p>Cardoza, Christina; Moore, Madison (2017-07-14). "SD Times news digest". SD Times. Retrieved 2018-09-07. <a href="https://sdtimes.com/box/day-action-net-neutrality-box-elements-microsofts-babylon-js-3-0/" target="_blank">https://sdtimes.com/box/day-action-net-neutrality-box-elements-microsofts-babylon-js-3-0/</a> <a href="#fnref:19" class="footnote-back-ref">↩</a></p></li> <li id="fn:20"><p>"XBox Design Lab". Xbox. Archived from the original on 2016-08-19. Retrieved 2018-09-12. <a href="https://web.archive.org/web/20160819060913/https://xboxdesignlab.xbox.com/en-US/customize" target="_blank">https://web.archive.org/web/20160819060913/https://xboxdesignlab.xbox.com/en-US/customize</a> <a href="#fnref:20" class="footnote-back-ref">↩</a></p></li> <li id="fn:21"><p>Viola, Fabio; Roffia, Luca; Antoniazzi, Francesco; D’Elia, Alfredo; Aguzzi, Cristiano; Cinotti, Tullio Salmon (2018-08-17). "Interactive 3D Exploration of RDF Graphs through Semantic Planes". Future Internet. 10 (8): 5–8. doi:10.3390/fi10080081. hdl:11585/640472. <a href="https://doi.org/10.3390%2Ffi10080081" target="_blank">https://doi.org/10.3390%2Ffi10080081</a> <a href="#fnref:21" class="footnote-back-ref">↩</a></p></li> <li id="fn:22"><p>Rodríguez, Juan Manuel Jurado; Alvarado, Lidia Ortega; Higueruela, Francisco R. Feito (2018). "3D underground reconstruction for real-time and collaborative virtual reality environment" (PDF). World Society for Computer Graphics. pp. 40, 43. Retrieved 2018-09-09. <a href="http://wscg.zcu.cz/WSCG2018/2018-papers/!!_CSRN-2802-6.pdf" target="_blank">http://wscg.zcu.cz/WSCG2018/2018-papers/!!_CSRN-2802-6.pdf</a> <a href="#fnref:22" class="footnote-back-ref">↩</a></p></li> <li id="fn:23"><p>Chenard, Julian. "Tree Generator - How to use VertexData object". Pixel Codr. Archived from the original on 2019-08-27. Retrieved 2018-11-27. <a href="https://web.archive.org/web/20190827070524/http://pixelcodr.com/tutos/trees/trees.html" target="_blank">https://web.archive.org/web/20190827070524/http://pixelcodr.com/tutos/trees/trees.html</a> <a href="#fnref:23" class="footnote-back-ref">↩</a></p></li> <li id="fn:24"><p>Feldspar, Craig. "Constructive Solid Geometry in Babylon.js". GitHub. Retrieved 2018-11-27. <a href="https://github.com/CraigFeldspar/BabylonCSG" target="_blank">https://github.com/CraigFeldspar/BabylonCSG</a> <a href="#fnref:24" class="footnote-back-ref">↩</a></p></li> <li id="fn:25"><p>Catuhe, David (November 2016). "Building Shaders with Babylon.js". Smashing Magazine. Retrieved 2018-11-27. <a href="https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/" target="_blank">https://www.smashingmagazine.com/2016/11/building-shaders-with-babylon-js/</a> <a href="#fnref:25" class="footnote-back-ref">↩</a></p></li> <li id="fn:26"><p>Ryan, Patrick (2018-01-08). "Art Pipeline for glTF". Khronos Group. Retrieved 2018-11-27. <a href="https://www.khronos.org/blog/art-pipeline-for-gltf" target="_blank">https://www.khronos.org/blog/art-pipeline-for-gltf</a> <a href="#fnref:26" class="footnote-back-ref">↩</a></p></li> <li id="fn:27"><p>Moreau-Mathis, Julien (2016). Babylon.js Essentials. Packt Publishing. ISBN 978-1785884795. <a href="978-1785884795" target="_blank">978-1785884795</a> <a href="#fnref:27" class="footnote-back-ref">↩</a></p></li> <li id="fn:28"><p>Rousset, David (2015-06-11). "WebGL Physics and Collision Detection Using BabylonJS and Oimo.js". Game Development. Retrieved 2018-11-27. <a href="https://gamedevelopment.tutsplus.com/tutorials/webgl-physics-and-collision-detection-using-babylonjs-and-oimojs--cms-24114" target="_blank">https://gamedevelopment.tutsplus.com/tutorials/webgl-physics-and-collision-detection-using-babylonjs-and-oimojs--cms-24114</a> <a href="#fnref:28" class="footnote-back-ref">↩</a></p></li> <li id="fn:29"><p>Moreau-Mathis, Julien (2016). Babylon.js Essentials. Packt Publishing. ISBN 978-1785884795. <a href="978-1785884795" target="_blank">978-1785884795</a> <a href="#fnref:29" class="footnote-back-ref">↩</a></p></li> <li id="fn:30"><p>Beaulieu, Andy (2014-05-26). "babylon.js: physics and character animation". Spritehand. Retrieved 2018-09-06. <a href="http://www.spritehand.com/2014/08/babylonjs-physics-and-character.html" target="_blank">http://www.spritehand.com/2014/08/babylonjs-physics-and-character.html</a> <a href="#fnref:30" class="footnote-back-ref">↩</a></p></li> </ol>