Augmented Reality for Web: Latest from BabylonJS

The powerful, beautiful, and simple Web rendering engine

Did you know that we can incorporate augmented reality concepts into web applications to create video games? We can do this using BabylonJS.

Besides, it is an open-source real-time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5. With the 4.2 version, it has improved further.

So, let’s deep dive and see what awesome kinds of stuff you can do with the latest version of BabylonJS.

A Brief Overview

Source playground: https://playground.babylonjs.com/#3I55DK#0

BabylonJS was found by two of the fellow Microsoft Engineers who are David Catuhe and David Rousse. Currently, it has distributed under Apache 2.0 license.

One of the key importance of BabylonJS is that it has developed using TypeScript, which makes it even better for modern frontend development.

Since 2013 BabylonJS has come a long way as a powerful, beautiful, and simple web rendering engine.

Let’s see why BabylonJS is unique at its job?

Why BabylonJS?

  1. Simple, fast, and powerful

So, it is not a surprise that the majority of video game developers love this JavaScript library. It incorporates HTML5, WebGL, and Web Audio to power up super functional and fascinating 3D games.

2. Reliable

Over 200 developers contribute to this project each and every day to make the user experience with BabylonJS better and efficient.

They come up with many solutions for possible shortcomings and improve the tool with constant maintenance and updates.

3. Cohesive development of the tools

The current market leader Three.js has a large number of useful libraries, tools, and extensions. However, they are from third parties and whether they are kept up-to-date becomes a question.

Whereas the opposite exists with BabylonJS where all the support is managed centrally within the library itself. The bottom line is that there are alpha, beta, and development cycles in BabylonJS with clear release planning.

4. Microsoft’s support

Thus BabylonJS is born as a side project of two Microsoft engineers, it is backed directly by Microsoft.

If you ever used the cute floating emojis in Microsoft Teams, smooth transition between Microsoft PowerPoint online slideshows, you already experienced the power of BabylonJS.

Source: https://365trainingportal.com/teams-emoji-shortcuts-animated-gif/

In the coming years, its likely to have a higher demand for the usage of BabylonJS in 3D game development. For instance, there are five major companies that we can showcase as active users of this framework.

They are Frontend, Hapticmedia, Modsy, wec360, and Thisisablock.

What’s Coming New?

Source: https://blogs.windows.com/windowsdeveloper/2020/11/12/babylon-js-4-2-simplicity-reimagined/

Version 4.2 came out with a whole lot of improvements and functionalities, and here are some features which I found really helpful from the developer’s perspective.

1. New Particle Editor

BabylonJS comes with a unique particle system for creating particle effects. With the latest version, it is made far more accessible with the new Particle Editor. Your perfect particle system is just one click away from this version.

And also, for maintaining the Sprite system, there is a brand new Sprite Editor too. So, using a single command, you can create and control a Sprite system.

2. New Skeleton Viewer & Texture Inspector

Are you tired of debugging issues in applications using BabylonJS?

Well, what you need is a simple debugging tool to help you out. That’s why version 4.2 of BabylonJS comes with a new Skeleton Viewer to help you out in debugging.

And there is a newly added Texture Inspector too. Any issue with the texture of a certain piece of your creation, and you can discover all the information relevant to that problem using this Texture Inspector. It can view even single-pixels by its zooming options.

3. Save, reuse, and export custom frames

If you have ever worked with BabylonJS, you may realize the importance of custom frames.

And now, BabylonJS can save and reuse your frames and even export them. I’m pretty sure most of the developers would be delighted to hear that news. And now, there are thousands of lines in a program.

4. Playground Templates

Sometimes there may be code snippets that you reuse from time to time.

The new feature, Playground Templates helps import your most used code snippets with just a ‘CTRL + SPACE.’

Awesome!

And the list of similar features grows with the direct support for .hdr filtering, Babylon React Native, KTX + BasisU support, updated WebXR support, etc.

Those stated above are just a few out of the hundreds of new features. furthermore,

  • Version 4.2.0 carries PBR support in the node material editor.
  • Added new node material editor modes like procedural textures, post-processes, particle shaders.
  • Added customizable frames in the node material editor.
  • Support for the camera, animation, collision, particles, textures, and the playground has improved on a large scale.
  • Added HDR texture filtering tools to the sandbox
  • Added support for thin instances for faster mesh instances
  • Added support for 3D Commerce glTF extension: KHR_materials_variants, etc.

The list of recent updates is quite long, and they cannot be listed in a single article. For a complete list, you can refer to this documentation.

Tip: Build & share independent components with Bit

Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or share components between applications.

A ‘card’ React component independently developed & versioned with Bit and shared on Bit.dev.

What to Expect Next?

Source: https://libraries.io/npm/babylonjs

On the 20th of June 2021, they have announced the alpha release of BabylonJS 5.0. However, I have found some interesting features listed below.

  • Fix CubeTexture extension detection when root URL has a query string (civa86).
  • Fix issue with the Promise polyfill where a return value was expected from resolve() (Deltakosh).
  • Fix for disabledColor not working for Button (msDestiny14).
  • Fix sprites not displayed in certain cases (Popov72).
  • Fix for namespace sharing in .scss files; PropertyTab, SceneExplorer (msDestiny14) etc.

If you are willing to contribute or face any key issues, I suggest you join the official forum as a head start.

Summary

Compared to other JavaScript libraries for 3D and Augmented Reality, BabylonJS stands above as one of the best choices. However, apart from all the advantages, what makes BabylonJS at its best, is the amazing community of developers maintaining it.

So far, we talked about the features of BabylonJS, the latest update, its new features, and many more things. The future of BabylonJS seems bright with the vast community support and active users.

There are many development processes on the way with frequent bug fixes and developments. So surely they will be many more surprises awaiting.

Learn More


Augmented Reality for Web: Latest from BabylonJS was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.

The powerful, beautiful, and simple Web rendering engine

Did you know that we can incorporate augmented reality concepts into web applications to create video games? We can do this using BabylonJS.

Besides, it is an open-source real-time 3D engine using a JavaScript library for displaying 3D graphics in a web browser via HTML5. With the 4.2 version, it has improved further.

So, let’s deep dive and see what awesome kinds of stuff you can do with the latest version of BabylonJS.

A Brief Overview

Source playground: https://playground.babylonjs.com/#3I55DK#0

BabylonJS was found by two of the fellow Microsoft Engineers who are David Catuhe and David Rousse. Currently, it has distributed under Apache 2.0 license.

One of the key importance of BabylonJS is that it has developed using TypeScript, which makes it even better for modern frontend development.

Since 2013 BabylonJS has come a long way as a powerful, beautiful, and simple web rendering engine.

Let’s see why BabylonJS is unique at its job?

Why BabylonJS?

  1. Simple, fast, and powerful

So, it is not a surprise that the majority of video game developers love this JavaScript library. It incorporates HTML5, WebGL, and Web Audio to power up super functional and fascinating 3D games.

2. Reliable

Over 200 developers contribute to this project each and every day to make the user experience with BabylonJS better and efficient.

They come up with many solutions for possible shortcomings and improve the tool with constant maintenance and updates.

3. Cohesive development of the tools

The current market leader Three.js has a large number of useful libraries, tools, and extensions. However, they are from third parties and whether they are kept up-to-date becomes a question.

Whereas the opposite exists with BabylonJS where all the support is managed centrally within the library itself. The bottom line is that there are alpha, beta, and development cycles in BabylonJS with clear release planning.

4. Microsoft’s support

Thus BabylonJS is born as a side project of two Microsoft engineers, it is backed directly by Microsoft.

If you ever used the cute floating emojis in Microsoft Teams, smooth transition between Microsoft PowerPoint online slideshows, you already experienced the power of BabylonJS.

Source: https://365trainingportal.com/teams-emoji-shortcuts-animated-gif/

In the coming years, its likely to have a higher demand for the usage of BabylonJS in 3D game development. For instance, there are five major companies that we can showcase as active users of this framework.

They are Frontend, Hapticmedia, Modsy, wec360, and Thisisablock.

What’s Coming New?

Source: https://blogs.windows.com/windowsdeveloper/2020/11/12/babylon-js-4-2-simplicity-reimagined/

Version 4.2 came out with a whole lot of improvements and functionalities, and here are some features which I found really helpful from the developer's perspective.

1. New Particle Editor

BabylonJS comes with a unique particle system for creating particle effects. With the latest version, it is made far more accessible with the new Particle Editor. Your perfect particle system is just one click away from this version.

And also, for maintaining the Sprite system, there is a brand new Sprite Editor too. So, using a single command, you can create and control a Sprite system.

2. New Skeleton Viewer & Texture Inspector

Are you tired of debugging issues in applications using BabylonJS?

Well, what you need is a simple debugging tool to help you out. That’s why version 4.2 of BabylonJS comes with a new Skeleton Viewer to help you out in debugging.

And there is a newly added Texture Inspector too. Any issue with the texture of a certain piece of your creation, and you can discover all the information relevant to that problem using this Texture Inspector. It can view even single-pixels by its zooming options.

3. Save, reuse, and export custom frames

If you have ever worked with BabylonJS, you may realize the importance of custom frames.

And now, BabylonJS can save and reuse your frames and even export them. I’m pretty sure most of the developers would be delighted to hear that news. And now, there are thousands of lines in a program.

4. Playground Templates

Sometimes there may be code snippets that you reuse from time to time.

The new feature, Playground Templates helps import your most used code snippets with just a ‘CTRL + SPACE.’

Awesome!

And the list of similar features grows with the direct support for .hdr filtering, Babylon React Native, KTX + BasisU support, updated WebXR support, etc.

Those stated above are just a few out of the hundreds of new features. furthermore,

  • Version 4.2.0 carries PBR support in the node material editor.
  • Added new node material editor modes like procedural textures, post-processes, particle shaders.
  • Added customizable frames in the node material editor.
  • Support for the camera, animation, collision, particles, textures, and the playground has improved on a large scale.
  • Added HDR texture filtering tools to the sandbox
  • Added support for thin instances for faster mesh instances
  • Added support for 3D Commerce glTF extension: KHR_materials_variants, etc.

The list of recent updates is quite long, and they cannot be listed in a single article. For a complete list, you can refer to this documentation.

Tip: Build & share independent components with Bit

Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or share components between applications.

A ‘card’ React component independently developed & versioned with Bit and shared on Bit.dev.

What to Expect Next?

Source: https://libraries.io/npm/babylonjs

On the 20th of June 2021, they have announced the alpha release of BabylonJS 5.0. However, I have found some interesting features listed below.

  • Fix CubeTexture extension detection when root URL has a query string (civa86).
  • Fix issue with the Promise polyfill where a return value was expected from resolve() (Deltakosh).
  • Fix for disabledColor not working for Button (msDestiny14).
  • Fix sprites not displayed in certain cases (Popov72).
  • Fix for namespace sharing in .scss files; PropertyTab, SceneExplorer (msDestiny14) etc.

If you are willing to contribute or face any key issues, I suggest you join the official forum as a head start.

Summary

Compared to other JavaScript libraries for 3D and Augmented Reality, BabylonJS stands above as one of the best choices. However, apart from all the advantages, what makes BabylonJS at its best, is the amazing community of developers maintaining it.

So far, we talked about the features of BabylonJS, the latest update, its new features, and many more things. The future of BabylonJS seems bright with the vast community support and active users.

There are many development processes on the way with frequent bug fixes and developments. So surely they will be many more surprises awaiting.

Learn More


Augmented Reality for Web: Latest from BabylonJS was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.


Print Share Comment Cite Upload Translate
APA
JANAKA | Sciencx (2024-03-29T11:59:52+00:00) » Augmented Reality for Web: Latest from BabylonJS. Retrieved from https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/.
MLA
" » Augmented Reality for Web: Latest from BabylonJS." JANAKA | Sciencx - Tuesday July 6, 2021, https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/
HARVARD
JANAKA | Sciencx Tuesday July 6, 2021 » Augmented Reality for Web: Latest from BabylonJS., viewed 2024-03-29T11:59:52+00:00,<https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/>
VANCOUVER
JANAKA | Sciencx - » Augmented Reality for Web: Latest from BabylonJS. [Internet]. [Accessed 2024-03-29T11:59:52+00:00]. Available from: https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/
CHICAGO
" » Augmented Reality for Web: Latest from BabylonJS." JANAKA | Sciencx - Accessed 2024-03-29T11:59:52+00:00. https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/
IEEE
" » Augmented Reality for Web: Latest from BabylonJS." JANAKA | Sciencx [Online]. Available: https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/. [Accessed: 2024-03-29T11:59:52+00:00]
rf:citation
» Augmented Reality for Web: Latest from BabylonJS | JANAKA | Sciencx | https://www.scien.cx/2021/07/06/augmented-reality-for-web-latest-from-babylonjs/ | 2024-03-29T11:59:52+00:00
https://github.com/addpipe/simple-recorderjs-demo