Babylon.js Practice and Libraries Q&A

[00:00:00]
>> So I have a little exercise for you, if you open the same playgrounds, and move your mouse around the box, and click and drag and see if you are able to interact with it. And afterwards uncomment line 5 and save, or play the playground example just to get you a little familiar with Babylon.

[00:00:23]
And we have a question, any thoughts on Babylon versus Three.js? And I do get asked this question a lot. We will cover Three.js, as well. I will show you three different libraries actually. And the third one is a frame. And both Babylon and Three.js are doing exactly the same thing.

[00:00:44]
I am not aware of the differences, there must be, but the tooling is a little bit different. That is one thing that might change your decision on using one versus the other. So Babylon.js has these really interesting node-based editors. So if you have ever worked with Unity or Unreal Engine, you might be familiar with these.

[00:01:16]
So you can plug different parts of the codes into each other, and then something that would take a lot of code writing would be much easier to do with these node editors. They also have particle editor that you can go into, and yeah, so those are the things that I really enjoy.

[00:01:48]
Three.js does have a editor as well, but I didn't find it as useful because for some reason when I downloade it there was some things that it was really hard to understand and the positioning was not working perfectly. And what about GreenSock? I heard that one is really popular among a lot of companies.

[00:02:18]
As far as I remember GreenSock was a animation tool. There are lots of paid tools as welll, kind of would be like GreenSock, Etwall is one of them. It allows you to do things that are not currently very possible implemented in in WebXR APIs to which is really, really neat.

[00:02:44]
But the cost is high as far as I've heard.
>> I have a question about Node Editor. Is it just for materials?
>> No, the Particle Editor is kind of similar to, and I believe the point is to make everything possible with these Node Editors. And let's see the material literature.

[00:03:14]
Okay, so yeah, this is their new documentation page for Babylon.js, and it's really nicely organized. So if you go onto the tools, you can see the asset libraries that you can use and utility functions, and all tutorials. And if you click on any of the documentation, you also get the examples and where you can see them.

[00:03:49]
Well, maybe not in this one. So they have the Node Material Editor, Particle Editor, Sprite Editor, Texture Inspector, and the new thing that they just released is the Skeleton Viewer which is really neat. So when you go to the documentation on the right side, they have the examples that you can click on and see how it works.

[00:04:15]
For those of you who are not familiar with what the skeleton will be, is when you're creating an animation like this cool guy over here, the way you move things kind of naturally is by adding some of the underlying bone structure in a way. And you you would also paint like how much that bone structure would move some parts of the model.

[00:04:48]
But if you have any issues with this skeleton, it's really hard to debug it. You have to go back to the tool that you created this animation maybe, and see it. But if there is something specific to your application, it's really hard to figure it out. So with this tool, you can capture it, and debug it, and see all of the information over here.

[00:05:18]
So we have the skeleton group, and we can dive into specifics of the Yeti over here. And then you can see all of the information, transformations, and animations over here. So tooling is one and they are both written with TypeScript right now, the Three.js and Babylon.js, which I'm a huge fan of.

[00:05:52]
So there's no difference there too. Three.js has been around for a little bit longer, I believe, and they have a little bit more resources when you go to stack overflow.
>> Sorry, I got too wrapped up in what you were saying, which line were we supposed to comment on?

[00:06:13]
>> Line 5, I'm actually going to do it here too, so [LAUGH]. So before that line, as you can see I'm trying to move it and it's not possible. I have no way of interacting with the object. And if I add this line and then save it, and then run it, then now I can drag and move the 3D objects.

[00:06:38]
So this is attaching to controls to camera, and allows you to do anything you like. The question was how to make a material from scratch on Babylon.js. So let's take a look at what we have here. First, we have a Vector3 position which is translated into the Word position.

[00:07:08]
World position is the relative information actually. And we have the View X Projection, and we have some RGBA, and VertexOutput. Let's see. This is a very new editor actually just came out last week. So I'm going to give it a try for the first time too. And now we could see what is being displayed is using the material that we are creating here.

[00:07:46]
There should be a place that we create a new one, like this one. Actually, can we just get back to this one because I haven't played with this, this is very new? I'll take a look, and then maybe after the break. So the question was when we are creating the box object, and if we give height -2 what happens?

[00:08:16]
[LAUGH] That is a specific situation, I've never tried to, let's put it to work here and see how it looks. I'm going to close In spector Editor and move this one a bit. So one of the exercise was to play with the box and have a width and a height.

[00:08:43]
But in this case, our friend Patrick here decide to try the negative version, and let's see what happens. So it actually went the other way, as far as I can tell. So if you ever worked with a 3D tool, what you do is basically extrude an object on one direction, and usually up, but in this case it's extruding towards the bottom.

[00:09:12]
Lighting is a default lighting, but I think what it does is it took the surface on one side and then pull it back. That's why it looks hollow. And another question is where do I get an XR add-on to Chrome? I have all of the things that you will need for this section under the Resources.

[00:09:37]
So one of the things that you would need to have to run the server is Node.js. And if you are not working on a device, there are a few tools that, well, there's one tool that you could use which is WebXR Emulator, and you can find it for from the Chrome extension store and add it to your developer tools.

[00:10:03]
Then you might have this WebXR device emulators available to you. And if you do Ctrl+Shift+J or Cmd+Shift+J, and open up your developer tools on Chrome, you might see the WebXR here. If you're not seeing it, what you can do is click on this hamburger menu on the right side and look for the more tools, and it might be on that site.

[00:10:35]
And possibly after you download it, you might need to read restart your browser. In this case, this experience doesn't have any WebXR yet, but the idea is that without having to wear a headset, you are able to move back and forth. You have the hand controls, so the experience should move at the same time as well.

[00:11:00]
And also, you have options for different kinds of headsets that you can choose from, Google Cardboard is one, Oculus is another one. But unfortunately there's no AR version of it yet. And for those of you who are using any iOS device, WebXR currently is not available on the Safari.

[00:11:25]
And what you can do is download this application called the WebXR Viewer from the Apple store, so you have the link on our Resources page.
>> Sorry, did you say there's no WebXR for augmented reality?
>> There is, the extension is not covering augmented reality. Basically the way you move the headsets like that it doesn't work for headsets.

[00:11:54]
And also there are not very many augmented reality headsets out there. That's one reason that we don't have the tools. But since you are a Unity developer, you can download the HoloLens 2 Emulator and use it with Unity.