 This is video number three, tutorial number three in BabylonJS basics, allowing you to create games, 3D games in your web browser using HTML5 and JavaScript. Today we're gonna be looking at physics. Now BabylonJS itself does not do physics, but you can utilize other JavaScripts for physics engines, and in this case we're gonna use one called CanonJS to allow us to have physics in our scene. So if you go to CanonJS.org, you can click on their GitHub repos, which will bring you to their GitHub project. You can click on build, and here they are their most current build, and this case was built four days ago. I'll click on that. You can obviously download the whole project, but I'm just gonna download this script. I'm gonna go to raw, and I'm just gonna grab the URL for this. I'm going to go to our project folder here. I'll go to where I have the JavaScripts inside a JavaScript folder here, and I'll say wget, and I'll put in that URL. And now we've downloaded our physics engine. It's that simple. It's one script. So we're going to work from our basic scene that we created in the first week. This is week three, but I'm gonna go back to our first scene, and we're gonna start adding in some other objects, a ground plane, and start adding some physics to all that. So I'm gonna say vim. I called my file zero three dot html, and I do hope that you watched the first tutorials. This is the scene right here, the basic scene that we're gonna be working with. And the first thing I'm gonna do is I'm gonna remove that plane. I don't want that plane. And we're gonna create a ground. You might think, oh, I'll use the plane as the ground. That idea, when it comes to physics, planes are so flat, you're gonna get objects falling through them, or winging out when they hit the plane. If you're going to have a ground plane, you're going to want to use a box, something with some depth. So I'm just going to remove the three lines that were used in creating and positioning that plane. If I save this and refresh now, you can see the plane is gone. Okay, now let's create our ground plane. I'm gonna do that up here above everything else. I'm gonna say var, and I'll call it ground. And it's a box, just like our other box. So I'm gonna say Babylon, mesh.create. And again, this is case sensitive box. We'll give it a name. I'll just call it ground. And we'll say 50 for the size, and we'll say add it to our scene. Now let's rotate it, or scale it and position it. We'll say our ground. We'll go position.y equals negative 10. And remember, y in Babylon is up and down. You might be confused if you used to blender 3D where y is forward and back and z is up and down. It might mess with your head a little bit in here. Y is up and down. So basically we're just, it's created at the center of our scene. We're moving it down 10 units. So it's gonna be under our other objects. Next we're going to scale it. So we're gonna take our ground object, and we're gonna say scaling.y. So again, it's height. And we're gonna set its height to 0.1. Now, let's go ahead and save that. Refresh, it did not refresh properly. Let me look at my code real quick. Box, ground, 50. Let's go ahead and hit F12. I'm in Chrome, but in Firefox, most browsers have a console now. You can see I have an unexpected number, line 30. Let me click here. Now that's odd. Not showing anything there. Console, line 30. Okay. Oh, there we go. Some of you might have noticed. See, those consoles are great. I forgot my equal sign. So the reason that probably didn't show up is sometimes stuff down here doesn't load if you don't have the console open when the page is loaded. So anytime you're having a problem, open this and then refresh the page. So now I should be able to refresh the page. Oh, I hit F12 instead of F5. There we go. So now if I go like this, oh, there's a cube down here, a box, and that's gonna be our ground plane. Now, let's start adding some physics, but we're gonna have to import our KenJS script, which we put inside our JS folder. So let's go up here. And I'm just going to save time, copy our BabylonJS line, and just say canon.js, because that's what the file was called. Make sure that's what it's called. And if we come in here, left five. So we've added the physics engine, but we haven't connected anything. We haven't enabled the physics or applied them to any of our objects. Let's go ahead and find our ball here and we'll add physics to that. So BabylonJS allows you to use KenJS very easily. So what we're going to do first, actually up here, right after we create our scene, I'm gonna say take our scene, which we created right here. And we're going to say dot enable physics. So physics are now enabled. That will only work if you have KenJS loaded. And then we're gonna take our scene and we're gonna set the gravity. So the gravity for our entire scene. And we're gonna use vectors for that as well. We talked about this in previous tutorials. We're gonna say Babylon dot vector three. And we're going to say zero comma negative 10 comma 10 or zero. So what this is saying is, there is no gravity left and right. There is no gravity forward and back. But the Y here is up and down. We want things being pulled down at negative 10. So higher that number, the stronger things will be pulled down. If it was a positive number, things would actually be pulled up. So in your game, if you wanted to have some things start floating, everything in the scene with physics start floating, you can change that to a positive number. If you want things pulled to the right, you can adjust the X variable there. So we enabled our physics. We set a gravity, but that will only affect objects that we say to be affected by physics. Let's go ahead and take our ball object here. We'll say ball dot and we'll say set physics. And do remember, this is case sensitive. So capital P there, capital S in state. And then in here, we're gonna give it some information in a JSON format. If you've never worked with JSON, it's relatively simple. You basically have an identifier and a value. So I'm gonna say imposter. And what is an imposter? Okay. When you're doing physics in games, you don't necessarily want to calculate every little aspect of your object with a sphere. There's lots of polygons, lots of vertices. You don't wanna calculate them all. So what you normally would do is set what's usually called a bounding box. And here it's called an imposter. And it's this invisible object around your object that does the collision detection for you. It's usually a simpler object than what your actual mesh is. And for this, what I'm going to do is I'm going to say Babylon, all right, thinking physics, engine. Dot box imposter, comma, we'll give it a mass, comma, and we'll give it some friction. And we'll set that to 0.5 comma. And it'll say restitution colon 0.7. Now let's go ahead and save that. Go in here, hit F5, we got an error. Let's go ahead, open up our console. Okay, so we're getting an error here. And it says that something's not defined and it's not an R script necessarily. It's in the Babylon JS. Now it could be, we typed something wrong and it's passing the wrong information to the Babylon JS or it could be more likely what I think it is, but we'll double check here. Because if we click on here, the Babylon JS script is kind of compressed. We're not gonna be able to figure that out. We could go to the website and see what bugs have been reported for this version of Babylon JS, which in the first tutorial we downloaded was 1.13. But what I'm going to do, it might be an issue of compatibility with the version of Canon JS and the Babylon JS that I downloaded. But I do know that I have working copies and I'm pretty sure that that's gonna be what the problem is. So what I'm going to do is I'm going to go to filmsbychris.com and I do recommend trying out the newest versions of the scripts first. But if you're having issues, you can always come here, go to Codes, Github, look at my repositories, again find the one that says Game Basics and Babylon JS. This is where all my example codes are, all the tutorial codes are here and I have copies of Babylon JS and Canon JS, I know that work together. So what I'm going to do is I'm going to click on the Babylon JS here, choose raw, which gives us the raw file. I'm gonna grab the URL for that and I'm gonna go back to here. I'm going to go into our JavaScript folder and I'm going to remove everything in there, which there's only two files in there, the Babylon JS and the Canon JS script. I'm gonna say W get the Babylon JS script from my GitHub account and I'll go into the Canon JS from my account as well. I could test it how it is, but let's just get two that I know that work together to get this tutorial going. W get that URL. So we have the two files in there, let's go back out here and we'll vim03 and we'll go back to our script and refresh. There we go and we got it working here. So, sorry for that little glitch there. I just kind of did that just to get the tutorial going. Again, you can check the website, I'm sure if there's a bug there, it's been reported on the Babylon JS site, but just get things going. I'm just using the files I know work. Again, if we hit F5 now, we can see our sphere falling. It falls right through our ground there. Let's move our camera so that we can see it falling without having to move the camera because it's falling right away. Let's come here to the positioning. I'm gonna change, let's change this to 40. Have a look, that moved us out more, but we were angled up. Let's move this to four, I think might work. No, let's go the other route. Let's go down 1140. There we go, there you go. You can see it going through. Now the reason it goes through the ground plane is because we haven't set any physics for the ground plane and for objects to interact with each other, they need physics, both of them. So here we're going to go to where our ground plane is created and right under there where it's created, we'll say ground dot set physics, just like we did for our sphere. We're gonna say physics state and we will say, again, give it the JSON code for its imposter and we'll say Babylon dot physics, engine box imposter, making sure I'm spelling everything right and that should be lower case there. We'll give it a mass and the mass for the ground plane is gonna be zero because we don't want it falling at all. We'll set its friction for interacting with other objects to 0.5 and restitution to 0.7. You might ask, what is restitution and the truth is I really don't remember. But in my notes, it seems like you use 0.7 for most of it. So I apologize that I don't have an answer for that but I'm just commenting now because I'm sure some will ask, but you can see the ball fell, restitution might be its bounce, like how much it bounces, but don't quote me on that. Again, play with the numbers and you'll see a difference. So there we have our sphere falling like that. Let's go ahead, go back to our code here and what I'm going to do is I'm just going to cheat and copy our ball physics and apply it to our box. So what I did was copy this line and change that it affects our box there. Let's go here and you can see our box falling and bouncing. Let's go here and what we're going to do now is let's go ahead and go and copy some lines. Like so, oops, no, let's do that here. Okay, so what I just did was I created two more boxes but let's go ahead and rename them. Call this one one, one, one, one. We'll call this one two, two, two. And right now they're all in the same position. We want to move their Y position up. So what I'm going to do is I'm going to say this one's Y will be negative 10 and this one's Y will be negative 20. Let's see how that works out. I wonder, let's go positive numbers here. Positive is up. So there you go, you can see those boxes falling. Let's adjust their X to be a little different. Let's hit this one to nine. So they're not stacked directly above each other. There we go, so they interact a little more there. F5 to refresh to see it again. Move our camera around. And there we go, we have our basic physics on all our boxes and sears there. Again, don't want to use a flat plane for the ground because things will fall through it sometimes or sometimes wig out. But it's that simple to add physics to your scene. Again, we had the little glitch where we had something wrong with the version of Babylon.js and or Canon.js that we were using. So you can always get the versions from my GitHub account that I know work together. So that's it, that's just a quick basic look at physics. And again, we have a basic scene here. Let me shrink this down so we can see. The code is not all that long, including the HTML tags. We only have 72 lines of code and we got a bunch of objects there. And really allow this we can shorten up by throwing into functions or loops because like we created three boxes and we could kind of shorten that up and do it once in a function or a loop of some sort. I hope you enjoyed this tutorial. Again, the basics can be a little boring but I hope that you're having fun with this and I hope that you continue watching this series. And I hope you visit filmsbychris.com. This is Chris with a K, there's a link in the description and you can also get to see all these examples and codes through there on my GitHub account filmsbychris.com. I just can go up to code and click on GitHub. And you always go to filmsbychris.com for it slash scripts to see working examples on my website. I thank you for watching. I thank you for being patient. We'll be trouble shot that little glitch in the middle there. And I hope that you have a great day. I would like to take a moment to thank the following Patreon supporters for helping make this video possible.