Unleashing Next-Gen 3D Web Experiences with Babylon.js 6.0

Rate this content
Bookmark
In this session, we will explore the latest major release of Babylon.js that has brought significant advancements to web-based game development.

We will look into the new major features that were added to Babylon.js 6.0,  including fluid rendering and texture decals, which elevate visual fidelity to new heights, performance priority mode, accessibility support for 3D scenes, and the integration of the world-class Havok physics engine into the engine, unlocking unparalleled realism in web-based games.

We will also have a sneak peek into our plans for the next major version, as we continue to push the boundaries of what's possible in 3D web experiences.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Babylon.js is an open-source 3D rendering engine designed to create powerful, beautiful, and simple GPU-accelerated 3D experiences and games on the web. It supports a range of web standards including WebGL, WebGPU, Web Audio, and WebXR.

Babylon.js is written in TypeScript and transpiled to JavaScript, allowing developers to write code in both JavaScript and TypeScript.

Babylon.js provides several tools including the Playground for live coding, the Inspector for debugging, the Node Material Editor for creating shader materials, and the UI Editor for designing 2D-accelerated user interfaces.

You can start using Babylon.js by visiting their website to access documentation, tutorials, and the Playground. Babylon.js is also available for download via NPM and its CDN.

Yes, Babylon.js maintains backward compatibility, ensuring that code written for earlier versions continues to work in newer versions without modification.

Babylon.js 6.0 introduced several key features including integration with the Havok physics engine, performance priority modes, accessible screen reader support, and enhanced WebGPU support.

Babylon Native is an extension of Babylon.js that allows developers to use the same code for web experiences in native environments like Android, iOS, and Windows.

Yes, as an open-source project, Babylon.js welcomes contributions. Developers can contribute through GitHub by submitting pull requests or participating in discussions.

The Node Material Editor (NME) in Babylon.js is a tool that allows users to create custom shader materials using a block-based visual interface, simplifying the process of shader programming.

Babylon.js 7.0 is expected to introduce new features such as the Node Geometry Editor for procedural mesh generation, the Flow Graph for advanced scene interactivity, and experimental support for pure ES modules.

Raanan Weber
Raanan Weber
20 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Babylon.js is an open-source 3D rendering engine that aims to be powerful, beautiful, simple, and open. It supports WebGL, WebGPU, and canvas accelerated UI, and offers features like physics integration and WebXR abstraction. The engine provides tools like the Playground and Inspector for debugging and editing scenes. Babylon Native brings the power of Babylon Engine to Native platforms, and the latest release integrates the Havok physics engine for improved performance. Version 7.0 will introduce new features like the Node Geometry Editor and Flow Graph, and will revamp the API and audio engine.

1. Introduction to Babylon.js

Short description:

Hello everyone. My name is Ranaan and I'll be presenting Babylon.js, the open source 3D rendering engine. Our goal at Babylon.js is to create the most powerful, beautiful, simple and open web rendering engine. Babylon is a fully featured web rendering engine written in Typescript and built on top of open web standards. It is always backward-compatible and offers a wide range of features, including support for WebGL, WebGPU, canvas accelerated UI, advanced material system, physics integration, WebXR abstraction, and more. We provide powerful tools like the Playground, a side by side code editor, and the Inspector, a debugging tool for your scene.

Hello everyone. My name is Ranaan and I'll be presenting Babylon.js, the open source 3D rendering engine.

First, a bit about me. I am a software developer at Microsoft. I am Babylon.js' Web tech lead and a core contributor since roughly 2014. I am a director responsible for Babylon's infrastructure, its build system, the WebEx our abstraction, and a few other features along the way.

But let's talk Babylon. Our goal at Babylon.js is to create the most powerful, beautiful, simple and open web rendering engine. We want to provide any developer, designer, and hobbyist all of the tools needed to create GPU-accelerated 3D experiences and games on the web, without the need to deeply understand 3D rendering while allowing experienced developers the tools to get the most out of these APIs.

So Babylon is a fully featured web rendering engine. It is written in Typescript, transpiled to JavaScript, and it is built on top of open web standards. Standards like WebGL and WebGPU for rendering, Web Audio and Video for media consumptions, and other standards like WebXR, WebRTC, WebAssembly, in general, every API that starts with web, we want to support it. Babylon is always backward-compatible, which is a guiding principle for the team when developing new features or modifying older ones. Our code, written in Babylon 3, will still work in Babylon 6, 7, or 10. The framework is roughly 10 years old and is being used in production websites throughout the web.

Apart from our core package, we offer different packages like loaders, serializers, materials, UI, and others, including all of our editors and tools. Everything is open-source and we publish them on both NPM and on our CDN. Out of the box, we have full support for WebGL 1 and 2, WebGPU. We have canvas accelerated UI, advanced material system, physics integration, WebXR abstraction, device input system, and many, many other features. You can visit our website and doc page to see a full list of the features.

Babylon has a set of powerful, powerful tools to allow you to make the best out of the engine. The first tool is the Playground. The Playground is a side by side code editor and lets you see your scene you're working right in your browser. It's based on Monaco, which is the editor used in, among other, VS Code. You can write code in either JavaScript or TypeScript, and you have full access to all of Babylon's features and published packages. The Playground allows you to save your code, share it with others, and even download your scene and host it yourself. The Playground is available at playground.babylonjs.com and is a perfect place to get you started with the engine and understand its capabilities. It includes many, many different examples.

The second tool is the Inspector. The Inspector is a debugging tool for your scene.

2. Babylon.js Tools

Short description:

You can enable and disable features using a simple UI. The Inspector allows you to edit your scene graph, meshes, materials, and textures. The Node Material Editor lets you create shader materials with an intuitive UI. The UI Editor enables you to create 2D-accelerated UI for your Babylon experience.

You can enable and disable features using a very simple UI. See or edit your scene graph, check your meshes, your materials, your textures in your scene and transform them to your needs. The Inspector can be enabled on any Babylon scene. You need just a few lines of code. And it is integrated in the Playground to simplify debugging your Playground scenes.

The third tool I want to talk about is the Node Material Editor. Node Materials Editor or NME allows you to create shader materials using a set of blocks available in our core library. Using a very intuitive UI, you can create materials, save them as JSON files or directly on our free snippet server and add them to your scene using a single line of code.

The last tool I want to show here is the UI Editor. This is the tool that you're seeing right now. The UI Editor allows you to create 2D-accelerated UI for your Babylon experience. Using all of the features of our powerful UI library, you can add, remove, and transform different types of UI elements, and just like the NME, save them as downloadable JSON or on our snippet server and then use them directly in your scene. Using that couldn't be simpler. Simply parse the JSON or provide the snippet ID to integrate the UI in your scene and hook up any callbacks you need by using Babylon's simple device input API. All of those tools, as you can see, are integrated in the Playground, so if you add a node material or a UI, you can edit them directly in the Playground.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.