Building Fun Experiments with WebXR & Babylon.js

Rate this content
Bookmark

During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.


Check the article as well to see the full content including code samples: article

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

FAQ

WebXR is a web API that enables the creation of both virtual reality (VR) and augmented reality (AR) experiences. It supports a range of devices including Oculus Quest 2, HTC Vive, Valve Index, and HoloLens 2. WebXR is a development from WebVR, focusing on providing both VR and AR capabilities.

Babylon.js is an open-source 3D engine that runs on top of WebGL and WebGPU. It supports WebXR out of the box and is used for developing immersive 3D and XR applications. It's written in TypeScript, enhancing code quality and development experience with features like auto-completion.

To start developing with Babylon.js, you can visit the project's website and follow the documentation to learn about its features and how to use them in your projects. Babylon.js provides extensive support for 3D graphics and XR applications, making it suitable for a variety of use cases.

WebXR supports a variety of devices for immersive experiences, including VR devices like Oculus Quest 2, HTC Vive, and Valve Index, as well as AR devices such as smartphones with Android OS and Microsoft's HoloLens 2. It is also supported by Chromium-based browsers like Chrome, Microsoft Edge, and Samsung Internet on Android.

Yes, Babylon.js is licensed under the Apache 2 license, allowing it to be used freely for both personal and commercial projects. It is widely adopted in industry, including by companies like Microsoft, Adobe, Sony, and Ubisoft for various applications.

Babylon.js supports VR and AR through its integration with WebXR. It offers features like spatial audio for VR, dynamic textures for AR, and out-of-the-box support for VR controllers. Developers can easily create immersive experiences that work across multiple types of devices.

Babylon.js is primarily written in TypeScript, which offers advantages such as strong typing and object-oriented features. This makes it easier to develop complex applications with improved code quality and maintainability.

David Rousset
David Rousset
33 min
07 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

1. Introduction to Web XR and Babylon GS

Short description:

Hello, I'm David from Microsoft. Today, I'll show you web XR experiments using Babylon JS, a 3D engine running on WebGL and WebGPU. Web XR enables both VR and AR experiences on different devices. It's a replacement for web VR and currently supported in Chromium browsers. Babylon GS is an open-source framework that supports WebXR and provides great features like auto completion and spatialization in VR. It's widely used in Microsoft applications.

Hello, my name is David. I'm working at Microsoft and today I'm going to show you some web XR experiments using Babylon JS. It's going to be fun.

I'm going to show you a lot of different samples and let's have a look together what you can do today with web XR. So I'm working in the developer division of Microsoft, the people in charge of GitHub, VS Code, Visual Studio, some Azure features too. But today I'm going to talk about WebGL and web XR.

So feel free to follow me on Twitter if you've got questions after the talk. So what is web XR? So probably you've heard about that, but let's briefly define before having some demos about this technology. So web XR is a web API obviously, that can enable both virtual reality, so using Oculus Quest 2, HTC Vive headsets or Valve Index, but also AR using either smartphone, using Android OS. But also the HoloLens 2 can support the AR feature of web XR. So it's a replacement of web VR, if you heard about web VR before. So it was only doing VR and there's been some refactor around the API. And also it's supporting currently only in Chromium browser, so Microsoft Edge, Chrome of course, but also Samsung internet on Android, and also obviously, Chrome on Android. So I already talk about the various hardware supported.

And today we're going to talk about Babylon GS. So Babylon GS, this is a 3D engine I've been working on a couple of years ago with a friend of mine, so that's why it's my little baby in a way. And if you'd like to start on Babylon GS, feel free to have a link below, but we're going to see that just after that. So Babylon GS, if you don't know what Babylon GS is yet, it's a 3D open source engine running on top of WebGL, but also WebGPU today. We're supporting WebGPU. We are using Web Audio, which could be great for spatialization in VR. And we are supporting WebXR out of the box. It's an open source framework using the Apache 2 license. A lot of contribution from the community. More than half of the code source now come from the community. Completely written in TypeScript, which enables great features like auto completion and quality of the code, generally thanks to types. And it supports WebXR out of the box, also using controls already for VR. You have a lot of controls that work in 2D with mouse and VR thanks to the pointer elements. Soon we have MRTK, which is mixed reality tool kit coming to Babylon GS version 5. That will enable even more control for productivity. It's being used today by a lot of first-party applications in Microsoft, so PowerPoint, like the 3D model you have on your screen.

2. WebXR Demos and VR Experience

Short description:

SharePoint, Teams. Also, the XCloud, the cloud gaming service of Xbox is using Babylon GS for the touch control. Later on, I will publish a blog post on my blog to share the source code of all the demos. First, we're going to use the super simple, but yet super powerful feature named the XR Experience. We're using this line of code. If you don't have a VR headset, what you can install is an extension in Chrome or Edge named the WebXR extension. And if you have this extension enabled, you will have this button being there asking you to switch into a immersive mode. So very useful, you see one line of code and really have an experience running out of the box and you can exit the immersive mode to go back to the classical mode, I would say. But let's have a look how it works in a real headset like the Valve Index in my case. So let's switch back to my powerpoint presentation and this time will be a video of me inside this room reusing it. And you see that in the headset obviously, I've got a stereoscopic rendering. I'm using there the VR view of SteamVR on Windows and you see the immersive experience, so you have to one day try it using any kind of headset compatible with WebXR like Valve Index on Desktop but also Xerox Oculus Quest 2 and you have like super cool immersive experience with only one line of code once again and we manage for you all the teleportation, display of the controllers, stuff like that. So you see, super easy to enable.

SharePoint, Teams. Also, the XCloud, the cloud gaming service of Xbox is using Babylon GS for the touch control. It's being used by Adobe, some partners, Sony and the US Army or Ubisoft.

So let's jump into some fun demos. Later on, I will publish a blog post on my blog to share the source code of all the demos, but we have only 20 minutes, so let's just see what you can do with WebXR if you don't know yet what you can do with it.

First, we're going to use the super simple, but yet super powerful feature named the XR Experience. We're using this line of code. Using only one line of code, you will enable some VR experience in our case. So I'm going to jump into Chrome for now. So you see this scene, which only loads this scene valley with Hill Valley from Back to the Future 3D scene, and once the scene has been loaded in this callback code, what I'm going to ask to Babylon.js, using this single line of code, is please turn this existing experience into a VR compatible experience. You need to provide only one parameter, which is what should act as a floor to support the teleportation target we're going to see in video just after that.

If you don't have a VR headset, what you can install is an extension in Chrome or Edge named the WebXR extension, so you can search for it in your favorite search engine. And if you have this extension enabled, you will have this button being there asking you to switch into a immersive mode. So I'm going to click on this button, it's going to render, you know, for left eye and right eye for stereoscopic rendering. And to be able to simulate a VR headset, you need to press the F12 key and then you will have a new WebXR there property. So let's snap that on the right and this one on the left. And let's try to, for instance, move the headset. You see I can move on the various side to simulate the fact that you're moving, but also obviously the controller and you can also switch from Quest by default to HTC Vive. And you see that Babylon JS is getting the right model out of the box, downloading it from our CDN. So let's switch back to a Oculus Quest. So very useful, you see one line of code and really have an experience running out of the box and you can exit the immersive mode to go back to the classical mode, I would say. So super easy to have a first experience, just load a scene, add this line of code and it will work. But let's have a look how it works in a real headset like the Valve Index in my case. So let's switch back to my powerpoint presentation and this time will be a video of me inside this room reusing it. So you see that we can point on the floor and teleport, choose the orientation when you will arrive on the target. So I decided to face the door of the DeLorean there. Then I can move away and face the front of the car. And you see that in the headset obviously, I've got a stereoscopic rendering. I'm using there the VR view of SteamVR on Windows and you see the immersive experience, so you have to one day try it using any kind of headset compatible with WebXR like Valve Index on Desktop but also Xerox Oculus Quest 2 and you have like super cool immersive experience with only one line of code once again and we manage for you all the teleportation, display of the controllers, stuff like that. So you see, super easy to enable.

QnA

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.
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.
Increase the Performance of Your Games using Canvas
JS GameDev Summit 2023JS GameDev Summit 2023
8 min
Increase the Performance of Your Games using Canvas
The Talk discusses the use of the canvas element in games and web applications to improve performance. It compares the Canvas API and WebGL API, highlighting the advantages and disadvantages of each. The Canvas API allows for both CPU and GPU rendering, while WebGL API only uses GPU and hardware acceleration. Using the canvas element can significantly enhance performance, but it comes with increased complexity and development costs.

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.