Creating a 3D Scene Using Babylon.js

[00:00:00]
>> Let's talk about how we are going to create a 3D scene. Most of the JavaScript developers or front end developers are not very used to creating, working with the Web GL API. And I've seen some very smart friends of mine being intimidated by it. So I would like to explain all of the things that goes into a 3D experience.

[00:00:24]
And these things are same for all of the libraries or engines that you might use. So first, to create a 3D experience, you have to create a scene object, which is a kind of like a grouping thing. And you can think of it as a stage just like the one I'm in.

[00:00:48]
The next thing that you need is the camera, which will be the angle that you're going to render the user's experience. And if you are creating this experience for a headset, that will be the headset itself and then the users point of view. We need some lighting to be able to see what's on our stage.

[00:01:12]
And finally, we need some actors and 3D objects in our environments. And an object is made of two things. One of them is the geometry description. So this defines if it's a cube or if it's the different objects and also the material. So if you look at the right hand side of it, this is the geometry description with the lines.

[00:01:44]
And then on the right side we have the materials and to create this and have interesting object that we can see you have to put them together in a mesh. So we call that object a mesh. And material is the information that explains how the light is reflected off of something.

[00:02:12]
So if you have a very shiny surface, if you define very shiny surface, the lights will reflect more. And you can define to break the lights, with some bumps and some texture also. So this is the experience where you can could actually look at both of the objects.

[00:02:38]
So you can see all of these triangles and the points that they meet, we call them vertices and the lines are the edges. We are not going to do anything. Thankfully all of these things are rendered by the libraries. But it's good to know what we are talking about.

[00:02:59]
Especially in terms of the performance, if we have a lot of these triangles, that means that our experience is going to be run little bit slower. But if you have less of them then you would have a little bit hoarse shape. And in this example you can kind of notice that it's not a circle.

[00:03:24]
And there's some hard edges on the site. There are multiple libraries and engines that we could use on the web. One of them is BabylonJS. BabylonJS is an open source project, but it is part of Microsoft, but it will always be an open source project. And to create a scene with Babylon first we have the Babylon scene objects and then it gets the engine itself as the arguments.

[00:04:00]
And we can create a camera in this case, what we have is arc rotate camera, which means that it's going to rotate an arc. And fievel the attributes that we give is the camera name and the angles that it's going to move right left or up down. And the positioning.

[00:04:22]
So, the way we define position is through X, Y and Z. I'm missing the word, X, Y and Z, point definition numbers. And in this case, vector three is in 000 which means that we are at exactly center of our whole scene. The second thing we have is the lighting.

[00:04:51]
Here we have the hemispheric light. Hemispheric light is a very diffused lighting, there is no shadows and you can think of it is a very soft in equal light. Again we give the name and then we give a location. So because this is the lighting light source we put on the y axis low, higher.

[00:05:20]
Finally, Babylon gives us a method, matched Boolean methods to create our boxes. So what it does under the hood is creating that material for us, and then creating the shape of the box. And find we return the scene. BabylonJS has this very cool playgrounds where you can actually edit the code on your own line.

[00:05:50]
And save it and run it and when you're done you can also download it and run it in your local environments. And we can see the coach that is running over here on the right side. Usually you can see this both together but because of the size of my screen, they are separated.

[00:06:14]
One really cool thing about playground is also it gives us very helpful tips when you're trying to write your BabylonJS code. If you press on control and space then you get this clue kind of thing opens up. And you can start writing any of these. And when you click on it, it gives you a default values for the name, for the vector and as the scene that you're working on currently.

[00:06:54]
So which is really cool. You don't have to remember any of it or write it all by yourself. Here I have a note this is a scene object gets the engine as an input, but you don't have to worry about it when you are writing it on playgrounds.