Introduction to WebXR with Babylon.js

Rate this content

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.

86 min
19 Apr, 2022

AI Generated Video Summary

This workshop focuses on mixed reality development using Babylon JS and WebXR. Participants will learn how to create a Babylon JS application with WebXR, build the Babylon.js environment, and add physics to the scene. They will also explore troubleshooting and creating a new repository, as well as creating character icons, buttons, and pop-up images. The workshop emphasizes the importance of documentation and provides opportunities for exploration. The code can be run on various platforms with WebXR support.

1. Introduction to WebXR and Babylon JS

Short description:

Welcome to the WebXR and Babylon JS workshop. We'll be requiring Visual Studio code and Node.js. My name is Gustavo Corbido, a Cloud Advocate for Spatial Computing at Microsoft. Today, we'll focus on mixed reality development using Babylon JS. The first module is themed around the latest Space Jam movie release.

Hello, everyone. Welcome to the WebXR and Babylon JS workshop. My name is Gustavo Corbido. I'll be your presenter today. And I'll give you a little bit of background of what WebXR and Babylon JS in just a minute. But in case you haven't been able to see, we'll be requiring to have Visual Studio code installed and Node.js installed for this workshop. And I pasted a message in the chat already, including the links to download those in case you don't have them. I'll just paste it again.

As I said, my name is Gustavo Corbido. I am a Cloud Advocate for Spatial Computing at Microsoft. I've been working here for a little longer than a year now. And my job basically encompasses providing developers access to content that will hopefully help them and support them in their learning journeys when it comes to spatial computing. That is extended realities, mixed reality, augmented reality and virtual reality. Today, we're going to be focusing on two aspects of mixed reality world WebEx R experiences, which will provide you with the necessary understanding for mixed reality development as well.

The workshop will be split into modules between them. I'll give a little bit of a ten to fifteen minute break for all you to catch up with, stretch your legs, and so on. And we'll be both of them will be using Babylon JS as the as the basic framework for this. So, before we start, the first module we're going to be working on, it's one that we developed in partnership with Warner Brothers during their Space Jam, the latest Space Jam movie release. So, it's going to be themed around gonna be kind of funny. It's going to feel like you're working with things that you probably worked with as a kid, again. And we're going to be creating a Babylon JS application for this.

2. Building a Babylon JS Application with WebXR

Short description:

We're going to create a Babylon JS application using WebXR, a technology that allows creating VR and AR experiences in a browser. Babylon.js is a JavaScript framework for building 3D games and experiences. It provides a playground to try out creations in the browser without downloading anything. In this workshop, we'll build a scene to display Space Jam movie players and their icons. We'll set up the development environment by cloning a repository and running NPM install, NPM run build, and NPM start.

And we're going to be creating a Babylon JS application for this. So, as a little introduction to as to what WebXR is, WebXR is a technology that you can use to create virtual reality and augmented reality experiences in a browser by taking advantage of WebGL. And WebGL is basically allows the browser to use our computer's GPU and enables us to build 3D experiences.

Some of these cross-reality applications are specific to a device or a platform. But WebXR is not given that it's working through the web, through the browser. So, the content that we create in WebXR is actually cross-platform and it can work on multiple devices as well. And all we need to do to create a WebXR app is basically a JavaScript with a little HTML and CSS included into it. So, you'll see this as we start building our project in this unit.

Now, there are multiple WebXR frameworks available. The one we're gonna be using today is called Babylon.js. And this is basically a complete JavaScript framework that allows us to build three-dimensional games and experiences with WebGL, WebVR, and Web Audio. And it now has Babylon Native which actually lets us bring these experiences a little beyond the browser. The ability for us to use JavaScript to create a three-dimensional experience makes building new metaverse worlds even more accessible to all types of developers. And it's actually a great way to start building and learning the whole realm of extended realities through the web. Thankfully, now, Babylon.js has something called the Babylon.js Playground which allows us to try out our creations in the browser without having to download anything. So this is something I highly recommend for anyone that wants to try out Babylon.js after the workshop. As you can honestly just build everything on the web, test everything on the web, and if you want to download or save your projects, you can. I'll leave a link to the Babylon.js Playground in the chat so that you all can save it if you want to use it in the future.

So today, we're going to be building a scene to display some of the players in the Space Jam movie. And we're going to be displaying an icon for each one of the characters. An efficiency rating that's going to be predetermined. in a way that you can interact with it in either VR or AR, depending on where you want to build it. So the first thing we're going to be doing is setting up our developing environment. So for this, we're going to be creating a plain Babylon.js experience, so we can start from zero. But we're going to be using a GitHub template, given that some of the assets that we want to have should be easier to get to a repo. So once we get into the link that I just shared, you should be prompted onto a page similar to this, which is creating a new repository from the given template. Basically, just give any name that you want your repository. In this case, I'm just going to give it... And make sure to include all branches when creating these repository from templates. So this is basically all you have to do is just click on the green button here, and it'll generate your repository. From there, that's the first step that we're going to go through.

Now that we have the repository set up, our next step is to clone this repository. I'm sure most of you, if you're an experienced developer, you know how to do this through a terminal. I'm going to be doing it directly through Visual Studio Code, given that I want to be working on this environment from now. So basically, what you can do in Visual Studio Code is just call for the command palette, which is going to be Ctrl plus Shift and P. And here we can just write git clone. And since we want to clone from GitHub, I should have copied the repository's address first. So you can just go to Code, copy the cloning URL here, and paste it into Visual Studio Code and that should clone it without an issue. Select the folder you want to import it to, and just click on Open once this opens up down here. So this should give us the general repository in our computer, our local computer.

Now first thing I want to do here is to open our terminal and VS code, so I'm just going to open a new terminal and we want to run. Want to run the started projects just so that we can see how it looks so first thing we're going to do is write down NPM install so that we can install all the packages that are included in the repository that we just cloned. And once this is done we're going to be doing a run build so we can check it out, check how this is going to be looking like at the moment. Alright, so now that everything has been installed we do NPM run build. We can run our current iteration, wait until it finishes running, then we're going to do an NPM start and we're going to check it out on our local host. All right. It's been started. We're going to do NPM start. Now that's been compiled, we should be able to go to our browser and go directly into local host. And we should be seeing something like this.

3. Building the Babylon.js Environment

Short description:

This is our starting Babylon.js environment. We're going to look at the different files in our repository, including HTML, CSS, and index.js. We'll focus on the TypeScript version and use webpack as a module bundler. The code imports necessary packages from Babylon and creates a canvas for the game scene.

This is our starting Babylon.js environment. So this is going to be our starting scene, which is this little simple sphere. All right. So now we're going to get started to actually building some things here.

So if we go back to our Visual Studio Code, we can close this, but just do Control-C. Just do Control-C and we can terminate the current job so we don't have it running while we're working on this. So we're going to start by looking at the different things we have in our repository. So the first thing we have is gonna be our HTML and CSS file. So we have our HTML file basically. We don't have to do anything with it, but it's good to give it a look to see where we're starting. So we have a RenderCanvas and basically our script is included in our index.js. The only thing that we need to make sure is that we have an inline-style in here, because that's the minimal CSS that we will need. And the only HTML that we really need is just the canvas element and the script tagged to it. The next thing we wanna look into is our index.js file. This is basically the TypeScript file that's gonna create the main scene. Babylon can be run in both TypeScript and JavaScript. We're gonna be going over the TypeScript version this time. And basically, what this is doing is it wants to run the npm run build. This is sent out into JavaScript and saved to the distanced folder. And then the files then create a call with the script tag and the index.html part. In this case, we're using webpack, which is an open-source JavaScript module bundler. And it will generate just a static asset that represents the modules that we're building. And the configuration for this webpack, it's in the webpack config file. And this describes just how to bundle the assets in this folder. It's not something we need to take care, too much attention into. So now the code that we see here is basically a general code for Babylon. Basically, it's how we import the needed packages from Babylon to create our game scene. And they create the canvas from the HTML tag, and from the HTML then to the body section. This basically just creates the engine variable passed into the Babylon engine. And then when we run it, we can see what's happening in our general part. That's basically the first part I want to work with here.

The first thing I want to do is create a scene. Basically, we can create a scene. You can see here right... So... One second, sorry. I'm just comparing some here with... So... Just one second. Something is not going alongside the documentation that we have. All right. So what we're going to be doing is basically I'm just going to clear out this index.ts file. We're going to be adding our own code into it. I should have imported differently, but that's fine. So the first thing I want to add is our imports. I'll just save it somewhere else just in case. All right. So the first thing I want to do is start imports into our index.ts. So we're going to do import.

4. Creating Scene, Camera, Light, and Environment

Short description:

We import the necessary native packages from Babylon.js, declare variables for the engine, and create a scene using the createScene function. The scene is the main element displayed in Babylon.js, and it includes a camera that allows us to view the scene. We set up the camera's rotation and attach its control to the canvas. Next, we add a light to the scene to avoid a pitch-black screen. We set the intensity of the light to 0.7. Finally, we create our default environment using a specific function from Babylon.js.

So we're going to do import. Basically it's going to be telling all the native packages that we need to import from Battle.js. So in this case, we're going to be importing the scene. It's very light. Free. I'm going to be going over each one of these in a second.

All of these found. We're going to declare a canvas. We're just going to declare the basic variables for the engine, so it's going to be our variable variable. This should be enough for now for initial Save it for now. Beautiful. And we're going to be getting some errors at this time, but that's fine since we're still not moving forward completely from here.

And now we're going to be creating our scene. So basically the scene is what you see in Babylon JS. It is going to be the main thing that we are showing. So beforehand what we are seeing with a sphere in the center, that's the scene that we're working on. And we're going to be doing this by using the create scene function, which is what's going to be initializing the scene, it passes the engine, and creates a camera. Camera is basically the element that allows us to see what's in the scene. This is the point of view of the game player in this sense. So for that we're going to be… We want it to rotate, and this is going to be done by the alpha and beta numbers. This is something we don't have to worry too much about. I'm just going to use the values that I had from earlier. It's going to be the current scene. We want to make sure that we set up how the camera is going to be able to rotate based on the wheel that we have, so we don't want it to rotate like crazy. So for this, we're just going to add a delta percentage of 0.01, it's just going to make sure that it doesn't rotate too much when we're trying to go around it. And we want to attach the control of the camera to our canvas so that it doesn't move freely.

The next thing we need to create is add the light. Basically, the cool thing about our virtual reality is that it's a blank state. So we want to build anything on top of that, and there won't be any light until we add it. So basically, if you try to run it without a light, it's just going to look like a completely pitch black screen. So to this, we just create a new light. I'm going to call it light 1. This might be a new vector. 3 coordinates. All right. Let's see. Now once the light is created, we want to make sure we have some intensity to it so it's not too crazy. I'm just going to add 0.7. These values are free to play with. These are values that I've obviously tested before. But depending on what you're working on, these values might change. If you create the intensity of the light, it can be too overwhelming to look at, or it can be too bright. You just want to make sure you have a normal value in there. The next thing that we want to do is basically create our default environment. And this is something that we can use a specific function from BiodynamicJS to get the basics for that environment. You don't have to build it out completely. So for that, we're just going to create a constant environment. Scene.create. I'll just bring the basics that we need.

5. Creating Default XR Experience

Short description:

We create a default XR experience that initializes the basic experience helper, creates an HTML UI button to enter XR, initializes the input source and controller, and enables pointer selection and teleportation features. We pair four meshes and return the scene.

And then we're going to create a default XR experience asynchronous to this. This provides basically our basic experience helper, initializes it, it creates an HTML UI button to enter XR, initializes the input source that will initialize the controller. Oh, and it will also enable the pointer selection and teleportation features in the sense of if you need to move through the application. So for this, we just create our constant XR. Here's asynchronous. For this, we're just going to pair four meshes. That should be it for now. Finally, we're just going to return our scene. And I believe this should be fine for now. Let me go look to my working one. All right. Yeah. We're looking fine so far.

6. Adding Physics and Rendering the Scene

Short description:

To add physics to the world, we can use plugins for physics engines in Babylon.js, such as Cannon, OIMO, Energy, and Ammo. In this case, we'll use Cannon. We enable physics in the scene by creating a variable for the Cannon plugin and setting its properties. We also create a gravity vector to simulate gravity. Next, we render the scene by creating an engine, a scene, and resizing the engine to fit the scene. We handle exceptions and ensure the engine is not null. Finally, we run the engine to render the scene and add an event listener to resize the engine as needed.

All right. So with the synchronous function, we're basically having our camera lights and environment, and it makes reality experience. It doesn't have physics or any way to be rendered yet. So that's the next step that we're going to be moving into now.

So now the next thing that we want to add is physics into the world, and there's plugins for physics engines available for use in Babylon.js. We have Cannon, we have OIMO, we have Energy, and we have Ammo. In this case, we're going to be using Cannon, but the other ones are, you can find more about them in the Babylon.js site, which I can actually link to the chat right now.

Basically, the Canon.js engine is written completely JavaScript, and if you're unfamiliar with what a physics engine is, it's basically they provide an approximate simulation of physical systems like mass, gravity, friction, and restitution to our scene. So in our code, we're going to be adding our variable Canon after light intensity. So under light intensity, we're going to create our variable for our Canon plug-in. And here, we're just going to give it a value of true to our delta for roll state. Iterations. And we're enabling the physics in the scene to the new physics component of our scene. Gravity vector, we're just going to create a new vector 3 here with 0, negative 3, and 0 for our values. And that's the physics engine that we're using. So now it should have a sense of gravity and physics in the scene.

The next thing we need to do is basically rendering the scene. And for this we need to create the engine, create a scene, or render the scene by using the engine. And then we basically just resize the engine to the size of the scene. So under this function that we just created, we're going to be adding the following code. This is what's going to be rendering the scene throughout the whole project. So we're going to do a try, creating our engine, show exceptions, see if anything happens, if anything's wrong. There's some exceptions here. I don't think we should run into that issue. And here we should basically just, just in case something comes up from this. Now if there's no engine, then we want to throw, engine should not be null. Solution just in case. And we want to create the scene. Basically use the create scene function here. On scene. On scene. The scene to render. Scene. Basically here we should have the whole create a scene call. And then the next thing is just render our scene by using our engine so. In this case, we're just gonna do Function. Render. It's true. Scene to render. As long as we declared a scene to render, we should be able to render it. And the next thing is just to resize our engine. And this is just in case the engine just looks too big and we don't want it to. We don't want it to look bad. We want to make sure that it fits where our workspace basically. So we're just going to add an event listener. Window. Resize type and our function will just be resize the engine to our Windows and... Right, should still have... We should have some errors here.

7. Troubleshooting and New Repository Creation

Short description:

We encountered some errors while trying to run the code. We decided to revert to the original version and provide you with a more polished version. You can create a new repository from a different template and use CodeTour to guide you through the process. The code in this version includes further steps, but the overall idea remains the same. We import various elements from Babylon, such as the scene, light, vector 3, engine, camera, physics engine, mesh builder, materials, Photodome, and physics imposter.

Still put the double take here just to make sure because I think I'm getting some errors here. Oh no, so we're just changing this. All right, so first way to try it out is just trying to run this. So here I should be able to... Do it on npm start. We're getting errors, we should know them here.

All right, I see we're trying something else right now. I'm not reading those, that's fine. This we're gonna be working with further down the line. But I wanna make sure that that's not the issue we're having here. So we're gonna go back to the repository we created from the template. So, any changes that we created out of here, I'm gonna undo. So, I'm gonna start this to the original stuff. And apologies for this. It's just that we are running into something that we're not running into before. I'm just gonna copy this just in case we need. I'm just gonna copy the original part that we had. And we're gonna have to create a repository from the template again. So I believe the code should be the same, but let me do a double tick before we try. So I believe our code should be the same, but I'm just going to do a double tick. I believe this version should be a little bit more polished. I'll give you this link in a second. I just want to make sure that I'm running through the right steps. I'm running it on the opposite end. Thank you. Yes, this is a little bit more of a completed version, technically.

So, I'm going to give you the link to get the new repository. Apologies for that. It's why we always have a back-up plan. So, from the link I gave you, you should be able to create from a different template. You're going to be creating a repository from a different template, and then that's the one we're going to be working on. And, we're going to have CodeTour, in this case, to help us go through it a little bit a little bit. Nice there. So, here. Let's see. Yeah, it should have the code working fine. This version should have the code with a little further steps. I'll just update you on the ones that we haven't come through yet. But basically, the idea is the same. It's still the same process. Just skipping the errors that we had before. I don't think we necessarily need to use code here. That's fine. So as I said, basically, we have our- first we have to get the inputs that we're going to be using. We need our scene. We need our light. We need our vector 3. We need our engine, our camera, our physics engine, our mesh builder, which is going to help us build the elements inside the scene, the materials that we're going to be adding into that, Photodome is going to be allowing us to have a background image, and then our physics imposter for the physics procedures. Again, we're importing all of these from Babylon.

8. Building a 3D Scene with Babylon.js and Physics

Short description:

We import the necessary elements from Babylon, including the canon engine and the wood procedural texture. We declare our canvas variable and load the three-dimensional engine and scene. We create our default engine and scene, adding the camera, lights, and environment for the Mixed Reality experience. We set up the camera's rotation and attach its control to the canvas. The light is a hemispheric light covering the whole scene, placed at the coordinate 010 with an intensity of 0.7. We add the canon physics engine and enable physics with the canon plugin. The gravity force is set, and the default environment is created. Next, we generate the wood floor using a mesh builder and the wood procedural texture. We add a physics imposter to define the physics of the ground mesh. Finally, we declare the wood materials based on the wood procedural texture and add them to the gym floor.

Again, we're importing all of these from Babylon. We are importing our canon engine, canon. Our procedural texture of wood is something we're going to be adding to create the floor. It's probably something you noticed on our thing here. We have a texture already added into the floor. Beyond this, we're going to be moving into our canvas. Again, we just declare our canvas variable as an HTML canvas element. We load our three-dimensional engine, our scene to render. We create our default engine. And from there, we basically move on to create our scene. Again, our scene, we're creating a synchronous function, and this is basically adding our camera, lights and environment and the Mixed Reality experience. We create our scene using our previously declared engine. Remember that we're going to be rendering that after. We have our camera variable, basically with our rotational variables, where we are going to be our rotational speed, and where we're going to be focusing it on, and which scene is going to be rendered at. So basically how we want it to rotate, or a real delta percentage, so it doesn't rotate like crazy, and where we attach the control of the camera, which in this case is the canvas. Again, our light is a hemispheric light, which means it's going to be covering the whole scene instead of being directional to one specific place, and we're placing it at the coordinate 010. Again, our light intensity is going to be 0.7, so it's 70% of intensity, so it's not too bright, it's not too dark. We're going to be adding our physics engine in the form of a canon plug-in, we're just calling it from the canon plug-in that we imported beforehand. We're enabling our physics through the canon plug-in, and we're setting our gravity force. We created our environment thanks to the default environment function. This allows us to create it without having to build it out completely, and then from there, this is where the next steps we're going to be jumping into. So I'll jump into those in a second as well as a photo don. We created our XR experience here, and then we basically call the default engine to load our scene. We created the scene, and then we render it through the engine. And finally, we resize our engine. So it's basically the same code with a couple extra steps added. Now, our next steps is basically generating our wood floor. That's where we stand up here. So basically, we're going to be using what's called a mesh builder, and this is a function within Babylon that allows us to create elements or objects inside our scene. And then we're going to be using our procedural or wood procedural texture that we imported from Babylon to create a wood-like texture into it. Finally, we add a physics imposter into the gem floor, which is going to define the physics of this mesh with parameters that are going to be mutated in the ground. So basically that code is what we're adding here. So we basically created our variables. It's going to call the gem floor in this case, since we're talking about a gem in this sense of basketball. From there, we call a mesh builder, we create the ground, so that it knows it's a ground type. We call it ground and we add the different dimensions that we want it for. So in this case, we're adding a width of 60 and a height of 60, so it's a decent sized square. And we're placing it on our scene. The next thing that we did is position it. Basically, these coordinates that we have here are going to be affecting how our ground is positioned in the scene. So if you modify them, the ground is going to move from one point to the other. You know the drill. The next thing is declaring our wood materials. Materials are components of a scene that can be attached to an object to give it either color, give it a texture. What gives the object a more realistic appearance. In this case, we're creating what's called standard material. And that standard material we're going to be basing it off of our wood procedural texture that we imported before. So basically, from our texture, we're scaling it a little bit so it's a little bigger. And we're diffusing that into our wood material. And then we're adding that material into our gym floor down here.

9. Adding Materials and Photo Dome Background

Short description:

This part focuses on adding materials to the floor mesh to make it look more realistic. It also explains the process of adding a physics imposter to simulate the ground. Additionally, it covers the creation of a photo dome background using a 360-degree photo as a texture. The code instantiates the photo dome class with an image URL and sets the size and resolution.

From here, this is basically adding... This is basically pasting the material on top of the floor. Or rather, assigning this value to the floor so that it looks a little more realistic in this sense. Materials you can create from images as well. You can even import assets that you think look nicer and import them into it. And assign it to any mesh that we create.

Finally, the last thing is that we're adding our physics imposter into the gym floor so that this can simulate a ground. That was in here, not too important right now. The main thing we want to make sure here is that it acts as a ground, and that's why we are adding this component. The one thing we want to make sure is that once this has been created, we replace it on the floor mesh in our default XR experience. Beforehand we had it as environment ground here. This is what we had before. It was actually one of the errors we were getting. Once we've defined this gym floor variable, the floor of our scene, we can use replaces by gym floor. That way we can ensure that once we run this in an Extended Reality experience matter, we're going to be actually positioned in this ground instead of being positioned somewhere else.

Next thing is the photo dome background is what we're creating here. So I'm going to go over this. Basically, you can create a world around you in different ways. In this sense we're going to be using what's called a photo dome, which takes a photo, like preferably like a 360 degree photo, and it's going to be using as a texture to create a background material and then invert a sphere shape. So it's kind of like placing us inside the sphere right. And with this we can basically wrap a sphere with an image and it's going to be looking like a basketball. You can wrap it in the inverted shape of an image and make it a background, which is what we're going to be doing right now. And basically the code that we see here, it just instantiates our photo dom class, passes an image URL, and sets a size and resolution. So, this code belongs to, like, after the code that we wrote before to create the Gym floor. In this case we're using this image, which should be here. And if it loads, this is the image that we should be seeing on the background once we run our project. I know that right now it's not showing, but I'll address that in a second. And basically, we call it my dom in this case, and we add the resolution and the size into the scene.

Now let me see. Because it's currently not loading. Everything is fine except the photo dump. So I'm going to add the original link, the original URL here and see if that's going to help us load it. Refresh here. It should be loading. Running out of options here. You should play around with the rest of this, but I'll. Well, technically should be running. That's how it was running beforehand. Let's go to for them. So I'm trying to figure out what's not loading around since I'm not getting any errors now. Basically I'll just showcase it here. This is kind of how it should be looking. Should be basically an inverted sphere inside of our project. I don't know exactly why it's not running. Maybe something we will address further on. Currently the code is looking fine. Apologies again for this. This is what happens when we have too many demos. Sometimes some of them don't want to fully go through. Basically that's the idea.

10. Creating Character Icons and Popup Images

Short description:

We're going to create the character icons using the Berlin JS GUI library. The GUI 3D manager and GUI cylinder panel will be used to manage the group of holographic button icons. We'll add the XR environment experience by importing the necessary packages and creating an environment class. The class will include a scene, engine, and players from a JSON file. With the environment set up, we can create clickable player icons. We'll use the cellular panel from the Babylon.js builder and create a cylindrical panel to wrap the images around the user. The main button panel will be created with a margin and control. An anchor will be added to ensure the main panel remains fixed. We'll listen to HTTP native 2 and create 8 columns and 2 rows for the player icons. Finally, we'll add code for the popup image that displays the player's stat card, name image, and player efficiency rating (PR).

I should be creating the dome inside of the sphere and placing us inside. Now the next thing I'm going to move forward with given that we've already created a scene and set up the default experience in our physics, we're going to be building out the character icons that we want to display. So in this we're going to be using the Berlin JS GUI library. And for this we're going to be using our GUI 3d manager and our GUI cylinder panel to manage your group of holographic button icons. So this is how we're going to add the XR environment experience into it. So, for this we're going to be adding some code. Oh, up here. So we're going to be adding, below these, I believe, should be fine. So we're importing. that's going. Word is going to be in abstract. Okay. So all these packages should be imported after so. The next thing we're going to do is create our environment class and private variables into the constructor so we're going to be needing to pass the scene and for it all to adjacent data to an array. So, from here, basically, we should...let me see. Sorry. So, I believe we should be having all this...I'm just going to say what we can export it into. So we have to set the amount. Basically we're going to be exporting our class environment, with a private scene, or a private engine, private players, and our constructor of the scene engine, and so on. However, I don't know if I have this file here. Oh no, I do have it. Okay, we're good. That scared for a second. Right, so, basically what we're doing here is we're exporting our environment class, and the private variables to map in the constructor, and this is just passing... basically we just need to pass the engine and scene into the class, and from here we just import the JSON data into the array, which is what we're adding down here. So we pass our scene, we pass our engine, and we pass our players. Now we should have an environment with a scene, an engine to render the scene, and data from the JSON file, so now we can create the player icons and make them actually clickable. Let's see if this is going to give me any errors here. All right, no, we're good. All right, so now we're going to be creating our character buttons, and for this we're going to be, again, we're going to be bringing our cellular panel from our Babylon.js builder, and from there we're going to start working, so I'm just going to start writing bounding here. So this should be on their environment file, so create character bonus function inside the environment class that we're exporting. Manager here for the icon grid. So it's going to be a variable, main manager. This is going to be our kubectl national manager. We're going to create a cylindrical panel so the images can wrap around the user. So basically imagine that you're trying to select different players and you have them all in front of you. This is what we're trying to achieve from here. So we're going to create our main button panel, a cylinder panel. Then we're going to add a margin, and add control into the panel. Then we're going to create an anchor so that the main panel doesn't move, basically we're going to do a link to transform this node into the anchor. This is basically telling Balon that we want to stick to this anchor once the main button is like this so it doesn't move anywhere. We want to listen to this HTTP native 2. And how many players do we have? We have at least 16 players so it should be 8 columns of 2 rows each so I'm going to add 8 columns. And for rows we're going to be adding 2. We basically just adding block layout to these, just to make sure that they have an actual layout, otherwise they're not gonna work. So this should have a position for each of the characters within the main panel and we'll hopefully be seeing that soon. Oh, did I make that? Oh, vector 3, oops, sorry. All right, and the next thing is to create our characters popup images. So now for this we will be adding code for the popup image that contains like our PR value of player. So when a player icon is selected, their stat card and their name image and the PR, which is the player efficiency rating that we have in our data should be showing.

11. Adding Buttons and Pop-up Images

Short description:

We add the necessary buttons and pop-up images to the scene, ensuring they appear when clicked. The mesh panel is added to the mesh manager and anchored accordingly. The player container is set and added to the mesh panel. The icons and pop-up images should be visible and intractable. Meshes are created for each button and stored in an array. When a pop-up image is selected, the player container is hidden. The players container is hidden instead of all the players, and a close button is added. A for loop is used to create a button for each player in the JSON file. Finally, when a button is selected, the pop-up image appears with the higher efficiency rating. Our players should now show up in the environment, and their stats should pop up when selected. We just need to initialize our custom environment in the DXR experience.

So if we see here, we have our basically character name, our character image, and our player efficiency rating for each one of these. And we want to make sure that these show up when you click on them or when you have the button in front of you. So for this, we're going to be adding, I don't know if we should be adding this at the end of this. So we're going to be, which is going to be directly again managing this specific buttons that we're adding, the specific pop-up images that we're adding into this. So again, and we're going to add our mesh panel to the mesh manager and anchor it to it. So, let's put the location, since this is what it's going to be when we click on them. We want it to be a little closer to the player so that's why we have different coordinates. And finally we want to set the player container and add it to the mesh panel so we're going to be getting the information here. So place cats container. Do we. So. This is visible. It's not seen out all times or only when we click on it. So this is just that it's not showing initially because the idea is that these are going to become intractable and that's the next thing we're going to do. We're going to do now. So now that we have a place for HR character icons and the pop-up images show up large should be showing up large in the center of the screen. In fact, I believe that if I save this issue, I have any errors and So I do then I just have to keep moving. I don't think this should be changing much. I just want to make sure. Really I haven't added anything yet. All right. So now I want to make sure to do that. This icons are intractable and look through the players and create a button for each player based on the JSON data. So Underneath here, we're just going to be adding our new meshes. So this is going to be the mesh for each one of the buttons. So we're going to create a mesh. Value of null for now. This is just going to create an array of meshes that we're going to be accessing later. We're going to store them. What we want to do now is choose that when a pop-up image is selected, we want to hide the player container. Cleaner. We're gonna make sure that it's not visible, when we select the image, and once the button is there, also, it should ensure that we have it. This should ensure that once we select one of the images, the players container should close. We should be hiding the player containers instead of all the players and have the close button there. Now the next thing is for us to look through the players in the JSON file so we can create a button for each one of them. So for this we're going to do a for loop. And so this is just going to be navigating through each one of the players. And we want to make sure that we have the commands for each one of them. Maybe a new three holographic button. Add a button to it. And now we're going to add the flexible button. Html. URL. And then the final thing is for us to once the button is selected, we want it to trigger the pop-up image to appear now with the higher efficiency rating. So I've done an observable asynchronous function. Displaced as container image URL. In this case, now it's going to be visible. We're going to do a scaling so that it pops up instead of just like staying the same size right. And with this code in place we should be having our players show up in the environment so when we select them their stats should be popping up. And the next thing we have to do is just initialize our custom environment in DXR experience.

12. Initializing Custom Environment

Short description:

To initialize our custom environment, we need to add an initial function called helper functions. We'll add this function right after the constructor. We made a mistake by importing everything into the index file, but the environment class should be in its own file. We'll create a new file called fcs and paste everything there. We'll modify the code to create a new environment instance and replace the default environment scene with our new one. We'll pass the scene and instance to the new environment. We'll import the environment class from a different file and make sure the file is named environment.ts.

So it's like the last thing we can do before we can actually try running this. And that's basically just replacing our default environment in our file to the new one that we're gonna be creating. So let me see. For ours to initialize our custom environment, we should be adding an initial function called helper functions. So we're still inside our environment. So here we're going to be adding an initial function. This is going to be creating our character buttons, basically a helper functions first initialization thing.

Okay. And well typically this should be decided after the constructor so I'm just going to add it right after our constructor. And now let me see one thing. Oh I think I might have one second because I think I might have skipped one step because I just noticed that I imported all this into the index file and I don't think I needed to put it there. I am sorry I completely blanked out on this. I'll admit I'm a little bit nervous in this sense, but basically… …our environment class has to be basically brought up as a class of its own, not inside of the fiendX file. So basically we're just going to create a new file we're going to call fcs and here we're going to paste everything from there. And that's my bad there. And I should have some imports in here I believe. Let me do a double check though. No, I mean, we did the export, so it should be fine. I want to disregard this for now. Not 100% sure on this because I did not see this happening there. I'll just delete that class for now and just have it here. I believe doing the export should be fine given that I was running into errors before. Let me see. Now in our file here, we should be modifying this from this environment, which is the situation here. Let me see. We need to create a new environment instance because beforehand we used a default environment. Let's find where it was at. Okay. Here we are. So we call it EMV. So in this case we're going to be replacing, we're going to be replacing our environment scene that we created before with the new environment that we developed. And in this case, we're going to be passing our scene and instance to it. So here we should be doing a new scene engine. And given that we have it here, I believe that might work. Otherwise we'll see. Let's might need to add that as an extra one. I'm so sorry about that slip of on my end. We definitely need to import this class from a different file. I should have the environment. I'm sorry, this is me being dumb. I don't know if we need to have this here yet or not. We have an environment from Babel. So I'm just re-doing it. I'm just exporting here. Okay, no, we're fine. I know where I messed up. Sorry about that. This is definitely environment.ts. Not yet. Yes yes, thank you Rafael.

13. Creating the Environment Class

Short description:

I noticed some missing inputs and made some mistakes, but now everything should be fine. I apologize for the confusion. We need to create an environment.ts file with the necessary inputs and write the code for the environment class. Once imported, the scene and buttons should work correctly. Thank you for pointing out the errors. The project provides many opportunities for exploration.

I actually just noticed that I also missed some of the inputs here. So you need to have a backup to check up on things. Completely right. Should be fine now and here I don't need this monstrosity anymore.

My bad, I completely forgot about creating the file and then when I created it, I forgot about the in-person and that made me second guess everything I was doing. So with this in mind, then here I should need the TS. There we go. There should be fine. There we go. I'm completely sorry about that.

So basically when I was starting to write the environment class, the Explorer of the environment class, I should have created a new file and for it to be a class. And the thing is that since I forgot about adding my inputs, I completely thought and second guessed what I was doing there. But yeah, basically what we would do is create an environment.ts file where you're going to add the inputs, in this case are going to be your scene, engine, assets manager, vector three or transfer node, scene loader and mesh. We're going to import our player. We're going to import our GUI. These are the inputs I added here instead of adding into my environment of class file. So from there basically we can write down the code for the environment class, and from there we should be fine with importing it in our index.ts file. So this is technically still running. So if we open it now, now it's working fine.

So now we can see the different, we can see the DOM actually working out and we can see different buttons that we created. So this buttons, if you click on them, oh, I have a little error there. They should be showing a number. I'll look into it in a second. But basically we created this whole scene here and you can see that we can rotate around them. We can play around with different buttons. And once we click them, you can see that they're magnified. So let me double check on the code. Environment, I believe. So player, pair, VR. VR. Oh, oops. It should have been curly braces. If we double check that now, oh, I need to reset this. Oh, we lost the outside image. I'll wait for this to finish loading. It's taking a little longer than necessary. Oh, you're so right. I did not do back ticks. Thank you so much. There we go. Yeah, now I need just to do this. Thank you very much, Rafael. You've been super helpful, so I appreciate it. Especially once one gets nervous doing this presentation. Okay, it's not loading yet, even though I'm pretty sure it's written properly. Okay, PR, yeah, it's fine. Code is fine. I saved it in time. Oh yeah, basically that's the general idea of Battle. And it provides this with a lot of different opportunities for us to work around this.

14. Exploring Documentation and Running the Code

Short description:

I recommend checking out the documentation on their website for in-depth and useful information. The Babylon.js documentation provides a playground to build scenes in real time and test the engine's capabilities. It's a great tool to practice and learn, allowing you to create your own scenes and download them. This engine is a strong introduction to WebXR. There were some inconveniences with running the workshop, but the easiest and simplest method is recommended. This concludes the general introduction to WebXR and Babylon. The code can be run on headsets with a WebXR supporting browser, as well as on Android and iOS platforms with different browser options.

I definitely recommend checking out documentation from their website, because they have a very, very in-depth and useful documentation. Oh, this is still not showing for some reason, but it's fine. I believe that code was looking decent now. Yeah, and maybe direct you all, let me direct you all to Ballinger's website and documentation as well. So there's a lot of great opportunities for learning here. They have a whole section on getting started with Babylon that I believe is very, very insightful and very, very simple to follow, and that's another way of like testing the capabilities of this engine.

I share in the chat the documentation for Babylon.js. This is something that, again, you can test on the playground. The playground allows us to build things in real time. We can show you how the, how the playground looks. But basically this allows us to run scenes live on the browser. And you can play around and create your own scene here, add as many things as you can, as you want to then download into it. So I believe this is a great, a great tool to practice and learn. And, and yeah, I mean, there's a lot of things you can build here. And it's, it's honestly a very strong engine and a very good introduction to WebXR.

Again, I would like to apologize for some of the inconveniences with this. We had two methods of running the workshop. I was trying to run the more in-depth one, but generally the easiest one and the simplest one is the best one to go by. Besides that, that's pretty much the general idea, the general introduction to both WebXR and Babylon. I'll add that with this code, like if you want it to run this experience in a headset, you could. The only difference is that you would have to have a WebXR supporting a browser and selling your headset to run it, but this can also be run in either Android or iOS, depending on the platform that you have. And they can be run in different browsers as well on there. I believe iOS only can only be run on WebXR viewer, but I believe Android has some more options for that. So yeah, that's the general idea of this.

Watch more workshops on topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
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.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
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. 
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.