 Hi guys. Can you hear me? At the back? Audible? Awesome. Okay. So I see a few of us walking in. And so how was the lunch? No response? Like it was probably it was pretty good. Already Okay. So in this talk, we will talk about how many of you are game developers? Game developers? Oh, no one, no one, no one, no one. Okay. That's that's not so good. But what we'll do is we'll try and keep it as simple as that that how many of your JavaScript developers? Okay. So all of you can be a game developer at the end of the session. So that that should be our goal now. Okay. And we will use absolutely all these tools that we will use is free of cost available and it's open source library that I'm going to talk about so you can use it from any of the dev environment that you have set up right now and you can create beautiful games and you can sell that you can package that into native containers as well. You might have heard about codewa or you know, you can do it in different ways. Codewa is one of the ways but you can actually put it on store as well. So in this talk, we will check that out how we can do such stuff and we'll also understand how many of you know about WebGL WebGL. Okay. So all you all of you know about it but you probably haven't used it used it as an developed anything on top of that. Okay. So a little bit about me before we get started. I'm a shake and I work as a technical evangelist at Microsoft and that's where I tweet Narayan Abhishek. So any questions post the session, you can tweet me over there and I'll respond back. Right. And a thing which I missed out and why I'm a game developer. So I'm basically a geek and not just on a particular technology or a product, but anything, anything which interests me or for instance a couple of years back, no, interested me. So I probably looked into that. So whatever sounds nice, I just have a look into it and game certainly was one of the things which I play a lot. So it made complete sense to look into some of those libraries which is available for gaming or 3D development, which people can use. And primarily I work on web games and and a vivid gamer talk about any game with me. Right. So in today's topic, we'll talk about 3D accelerated graphics with HTML5 and WebGL and how this thing came into picture with the standards that's awesome and which will work across devices. And then we'll talk about a library called Babylon.js and we'll move to Babylon only when we understand the complexities of WebGL. So we'll start with that. And then we'll look into performance considerations, not a lot of gamers here. So I'll try and skip that part. This is primarily focused for when you're creating a 3D game and you really want to boil down to performance stuff so that it works on even the simplest or the latest of the Android phones. So you would look into such considerations but that's okay now. We'll just learn how to write 3D code here or render 3D graphics here. Right. So this is a section one and all of you know about it. WebGL is JavaScript API based on OpenGL ES2 standards and it was standardized by Chronoscorp and it works perfectly well with Codewa. I have tested it and I have deployed it on Android Tablet as well, which was Lollipop. So it just works really well there. And it works across browsers. Whoever follows the standard, all the standard based browsers, Mozilla, Chrome, you see this eSign? What's this? Any guesses? Wow. Okay. So that's our Internet Explorer. That's a browser called Edge which came up from Microsoft and the intention of this browser was to always keep updated just like an app which comes from the store, just like Chrome, so that we can push in weekly updates with the web standards. So this certainly does better than what Internet Explorer did earlier. And let's get into WebGL. And what you need to do while you use WebGL. So all you have is a canvas, HTML canvas, and then you need to do everything. You need to create shaders. So how things work in a game? Can someone guess what's the basic element or geometric shape using which all 3D objects are made up of in game? Triangle? Triangle? That's correct. Triangle. So imagine if you see a 3D human being in any game, it's actually composed of small triangles. And what you need to know about is the vertex where you place that triangle in 3D and you place multiple of those triangles and then you finally make any geometrical shape made be a cube. It's made up out of triangles and stuff like that. So you need to write shaders. Basically, shaders are those guys which will create those triangles. And then it'll, you know, there are two kinds of shaders. One primarily puts the vertex where these triangles needs to hold. And then the other one puts how you put mesh on top of that, the lighting and stuff. Because without that, you won't be able to see anything. You'll only see lines, triangle drawn. So these are those shaders which you would have to write yourself while using WebGL. So that's a little bit of a pain. And if we, all of us had to be a game developer at the end of the day, it certainly will be a difficult task to go the WebGL route. You have to work on geometry. You really need to be good at maths. That's my learning. So I should have done a little better while I was in my school. And then you have to manage the render loop. So game works in a loop. If you see 60 FPS frames per second in a game or 30 FPS, it's basically a loop which runs, which updates your code, updates your logic, updates your code, the code part is updating the UI. So you have a UI update loop and then you have a logic update loop. So this works in loop 60 times in a second. And that's how you play games and you can interact with mouse or touch and stuff like that. That's a very basic of how games are done. So let's have a look at the simple code. And this code is not to scare you. So when I looked into WebGL first, it was a little scary. I thought game development is like real far away. And the tool which I'm using here is just for my comfort level. It's Visual Studio. There's a community version of Visual Studio, which is available for free. You can use that as well. And this gives you a very nice, I would say debugging experience for me. I'll show you that later. So that's why I use this. But you can absolutely use any code editor, anything, notepad plus sublime text, anything with WebGL or rather the baby lawn library that we'll talk about. So what you see in this project is I have a very simple two files index HTML, index JS, and in the HTML file, we start with a script. You see a shader vs script shader FS two different shaders here and which will do a lot of mathematical calculations on where to... I'll probably zoom in. Is this fine? Okay. Or let me do this. Okay. So here's a lot of calculations that you need to do for finding out the positions of the object that you will draw. So for each triangle, like if you're drawing a complex object which contains like 100 of those triangles composed of those, you got to run this loop to get the positions of each of those vertices of the triangle, right? So that's one thing which doesn't look so complex here. But there's a script reference index JS and let's try and have a look in there. So in this, just for simplicity purpose, I have put some of those basic steps that you need to go through to create a very basic triangle in WebGL. And you start with the canvas that you have as part of your HTML. We call it render canvas. There's an element that we'll use to render the three stuff. And there's a width setting, height setting of that. And then you go and initialize the WebGL. All simple till here. Right. Now, this is how it's different from other JavaScript programming. It's like how you work in C++ and you compile the code. A lot of things like that happens here with the shader. It's compiled and there's a lot of code for the shader which the node type basically triangle. So three nodes types and it gets the context of it. And then you have those shader initializations here. Looks complex. And then compilation of shaders into the program. Is that what happens? Linker which links this shaders with the shaders and it's quite, you know, I mean to me it looks pretty complex. If I have to, I focus less on my business idea or the game idea and I focus more on, you know, how to get things done here. Right. And it works fine. So when I run this, it's certainly, you know, bunch of code does only this. It's kind of painful like you put in so much effort and then you get this. But certainly if you need a very high deep level of control this is the way you go because you have a lot of control over how you want to render things. But if you want to create a quick game, certainly this WebGL route would take you a little longer time unless you are a guru in this. So we will try and get back, simplify this code and render better stuff little later with Babylon. So in this process we just quickly drew vertex, a triangle and then gave a color to it which was RGB 100 and then it looked somewhat like that. But in real 3D scenarios what would happen is you would need to have a wireframe of a body and this wireframe if you see these stuff over there, actually these are nothing but those triangles which we talked about. So all these wireframes built out of triangles so you will have vertex coordinates for each of those triangles put in a particular file. It can be any 3D file. There are a lot of formats around. So you can use any of those there's 3D, Studio Max, Maya, all of these guys emit this kind of a structure. So this is the basic wireframing and then we have a concept of rasterization so make it look little better. You have to fill in colors between those triangles and then there's a process of flat shading. You give flat colors to that and it looks exactly not like this. It looks little better than this but on the projector it's coming out as this but you do this flat color shading in each of those triangles to make it look more real and then you do a garage shading. It's a guy who invented this shading and which kind of blends those triangles and makes it look real good and then finally you do a texture mapping. So you have a 2D texture like a JPEG and you map it on top of that wherever you want and this is how the monkey looks like now post the texture mapping. So it's like how we have skin here. So that's the texture for this 3D object and this is how the 3D stuff works and when you're using WebGL you have to take care of each of these processes. So shaders, mattresses, mattes everywhere like too complex so actually let's take the easy way which is Babylon.js and get rid of WebGL and a little bit about Babylon. You can see a lot of releases it's completely open source. If you want to add something to it like export a library to this guy you can do that you can work on top of this. This was created by few of our colleagues in France and they actively work on it so you can see it's a good traction that the Web game development community has over this library and we will get started with the code but just to give you a brief it's as simple as including the Babylon.js that's the complete game engine with you and that will take care of your shaders, creating shaders your physics, any of those physics like gravity and stuff that you're applying in your 3D it will take care of those things and then all you need to do is start with instantiating an engine from the babylon.engine and set the canvas where you want to render your context over there. So this is how you start with it and then of course you creating instantiating an engine doesn't really make sense so you put a camera there camera is the person who will be viewing that scene that you draw and you will put up light because without light you will see everything black over there and then you can draw objects like spheres or you know boxes these comes out of the box with Babylon and it handles the vertices stuff you know all those things the library does that for you and then just run the render loop and you're good to go. So it has a lot of features like if you're a game developer and want to know whether it does alpha blending or you know can I draw dynamic measures or can I put a dynamic text over my objects all those things possible so here's a list of that a lot of things which you might not find here as well if you're a pro developer or a pro game developer over the web and these are some of those objects which are pre created by this game engine so if you want to create a box, sphere, cube, plane, torus, not lines, cylinder, anything of those things it's the primitive contains it so you don't have to worry about it Babylon will generate these all you have to give is the size of them what kind of mesh texture you want to wrap on them and stuff like that so now let's look into a demo and before I get in the demo well how many of you are sleepy the people who are sleepy are sleeping so that's okay now let's see first a small demo what's probably the capability of this engine and I have put an audio so you can render audio you can render video and let's see what we have I have a small scenario 3D stuff built in in this code and what it does is a designer was the guy who actually built this whole 3D space and what this game engine is doing it's importing that 3D stuff built by a designer using there's so many tools there's one free tool called blender you can use that to create these and I'm just importing that guy and instantiating it with a Babylon.js game engine and on top of that we will add a few interactions like on tap click those kind of things here so now let me just add some volume here background audio here and you can see there's a physics here so when I stop I take back a few steps you can see on the top there's a cloud and there's collision of course so I can't pass through here that's all fine now here we are okay and you see I can interact based on where I am and there's nothing called you can't see here I can see here actually due to the projector you can see there's a there's a grave and on top of that there's a skull and a skeleton of Hamlet so it's very easy to render here once you have that 3D object I can just put him again this is Clippy you guys remember this Microsoft Office okay that's Clippy that's my cat this is interesting this is this was the grave for I6 that's out of support now so that's Internet Explorer 6 for you on that grave okay so now we are in the world of standards and we completely abide to standards so we've got to stick to that and this is the small stuff let's get started with this and creating this isn't really a big challenge right and if you look into the code we start with initialization so we'll get back to this code little later let's start creating some stuff for now okay so let's here's a very basic web template like how you create a web application visual studio so nothing to focus on visual studio here it's nothing inside it so when I run this right now it does nothing I'll start with instantiating the library itself you see there are two Babylon libraries .js I just had it here for your clarification if you use the unminified version that max.js you will get proper intelligence with it so development becomes much easier so I'm going to use that here so that's all cool now let's start with canvas I should say render canvas anything that you like and this is where we will instantiate the engine we'll set the context this element and everything gets rendered here okay and let me close this guy now this is all good now let's start with my scripts where we'll start initializing the engine so let me write the script code and let's start off with an engine let's call this you can call this anything we'll call this engine new I get this beautiful intelligence here .engine and I can just go ahead and mention where it needs to render so you can see the intelligence if you can't read it like just helps me out while I code so it says html canvas element canvas of type canvas so I know that this is the canvas which I created on the top so I'm going to give that render canvas and then there is an anti lusing which you can forget for now that works just to ensure that works on all browsers we're done with the engine instantiation now let's start with creating a small scene so I'll just go type okay let me just go a little bigger here for people at the back similarly I will just go ahead and create Babylon scene and I will pass in Babylon.engine so whatever engine I created so I can have multiple engines if I if the need be or I can have multiple screens when I have level 2 level 3 level 4 game so I can instantiate I can put an engine to this so which is the one which I created above does this right so we're done with the scene now the important stuff is what you see is the camera so I gotta set the camera now camera equal to new Babylon now there are a lot of options here what we see it can be a fixed point camera it can be arc rotate camera arc rotate camera is like you specify x, y, z coordinate and it will rotate you know exactly like what do you call that on the diameter of a sphere if you draw or circle you draw it will keep rotating there on that arc which it draws based on what radius you select right so we'll use that it looks nice you can do a left right so we'll use one of those cameras but there are plenty of cameras you have a point camera as well whatever you want to use now in this I have to give it a name so I'll call it camera and again there's some magic words don't bother about when you are not a full-time game developer these are some of those stuff whether you want how you want to place camera how you want the view to look like and stuff like that alpha blending and stuff it comes use over there but we'll neglect it for now so I'm just gonna put 0, 8 I think you can try out these values how it works and then is the radius I said it's a arc rotate camera so whatever radius you give it will always rotate across that particular distance radius right so I will set this guy as 100 this is the initialization of it but of course if you add controls of moving forward and back it will change but this is the initialization of it so done this part now is my target so we created this so I will give a 3D target vector 3 and where you want this camera to be there so we will set it initially maybe .0 or you can place it at any vertex you want in 3D right now it's just 0 that's okay and then pass the scene here so we create a camera all good now next step is if you want to control like move back and forth you will have to attach a control to this camera so we will just do that camera attach control and you are attaching and you specify which HTML element we are using render canvas here so just set that guy so which means now you will be able to interact with the camera in the sense you will be able to use the default moments of the mouse also we will enable touch so you can use that now without that it will be a fixed cam you can't move it here and there right so based on whatever the requirement is now let's set up light quickly again in light you have a lot of other options in what kind of light you want to set out to light which comes from ray or we can call it as a point light here so that's the point light which I'll use here and set the name of the light and anything and position of light this is pretty interesting now this is where you would say I want my light to be coming from right so it's very important if you want to make it look like sun you place it real far from the object so we'll just go ahead and create 3D vertex here and specify x, y, z done with this and then it's the same scene we are working on go ahead and done this so now we have light now it's all good lights there let's put an object here let's put a very simple geometrical object sphere and let's create that so I can draw different measures if you see the options here I have a lot so I will create box, cylinder, dashed lines, decal, disk, ground these are those primitive options which this library gives me so if I have any of these available which I want to draw I'll use that create lines okay and sorry it wasn't create lines I will let's do create sphere, create sphere okay name it something sphere and then here's some important stuff like segments, diameter, scene as I said any of these objects are made up of triangles so segments basically tells me how many of such triangles so this will ensure that it uses more number of triangles if you have a higher segment value and your objects will look more like those objects otherwise it will look d shape, triangle-ish kind of stuff so you can put any value here for segment for now let's try it out with 8 first let's try 8 and then we'll change this later on and I will set the diameter of this sphere all good and then finally use the scene okay now another important stuff is this will be a sphere but we don't have a material so we'll create a material or standard materials where as I said it's just like a mesh it doesn't look it just looks like wire diagrams and if you want to make it look like real sphere we'll have to add a material to that so just go ahead and add create a new material there's a standard material option and I can put this as standard so I can have different materials part of the same scene we're there with materials now I would want to have a color to this material as well so we can put any of those diffuse colors like for instance I can put a diffuse color on top of this material and it can be what color do you guys prefer so I can suggest something in RGB 100 this gives it a diffused color to that material so I should have that material color as right now it's RGB so R is one now all good now let me assign sphere of material to this style and let's start with the render loop engine job run render nuke and we will use an anonymous function here okay we will just call the scene dot render we should have something running so I didn't set the css correct so let's one sec this is just to set body html with 100% height 100% and touch action none so that I can go ahead and interact it with touch as well so it doesn't use its own libraries here for touch so now what you see in the front is we didn't draw a plane where to give this sphere to but we fixed this sphere so there's no movement here now what you see here is I can actually go ahead and rotate this sphere and you can see the light I used this is this camera what we use here we can go ahead and rotate the camera so actually the camera which is rotating while I move this and I can also go inside zoom in this particular 3D object so it's a proper 3D but what you would see is the curves of this sphere looks like you know it's an image or it doesn't look that great and it's because of that stuff which we talked about let me just go and change this to maybe 16 segments that just adds each little more memory for sure because drawing more triangles there but it will make it look better so now when I run the same guy in here now you see the finish of that is much better than the previous time I can rotate around this and stuff like that I can interact with touch as well if required so this is interacting with touch it works fine right so this is how I draw a basic sphere now if I have to go and this is just like 7-8 lines of code engine scene objects if you have any geometrical objects put light on top of that and it's very basic maths not much here and you can build this so this is the real advantage of this guy and I have a few stuff which I will not so now let's come back to the previous one where we had 3D content coming from somewhere and this is that code it doesn't look complex either it has the same styling just to make it full screen and it starts with the canvas and what we are doing here is we are doing a scene loader because it's 3D scene created by a designer using any of those 3D tools it can be a renderer and we are just importing the Madison.Babylon file which contains all the vertex details drawing details images of that scene so we are just loading that guy into this engine and we are adding events for key up so that we were going up and back basically we have to move the camera forward and backwards left right that's what we are doing it and it's very simple if you want to apply gravity otherwise what might happen is you might just go out of the box up down right so all you do is in the same camcord which we wrote earlier you can do a Applied Gravity.CheckCollisions will ensure that you can't pass through an object it will always collide with any other collision objects and that's all it does finally it attaches the camera to the scene so it creates that same stuff because it had a Madison.Babylon file which has the 3D assets in it so you can take it that way but if you don't have it you can build all the geometrical objects that you have you can even put texture on top of that now before I finish I would like to show you this is a beautiful playground this is the tool I was talking about Blender and actually this is BabylonJS Playground this is available online BabylonJS-Playground.com you can go right here you can edit you can play instantiate the engine and you can see it here and you can make some changes here this is a scene with a texture and a height map height map lets you draw something of these things so it's basically a world map what you see here and you can actually go ahead and play around with this based on height map it has added the texture of the world map on top of that so it looks like this and you can start with simpler basic scenes if you want to learn that so we have internet you for sure would need internet for this so this is a nice place if you haven't yet set up a Babylon.JS file locally you can use this playground nice place to learn, set, see different stuff, play around with the code and now let me quickly come back to the slides before we close for QA and I have a lot of other samples as well on Babylon I think one of my favorites is I have all these samples which we did and you can always use that this is for collisions and 3D multiple balls falling here with the collisions engine working with Babylon code so you literally have to do nothing just to add the different elements as colliders and that it takes care of right so I'm open for questions if you have any and Babylon.JS playground you have all the resources out there for learning it as well this is another 3D object which we are importing using the Babylon engine and I have a question here how much resource is this using I will run this thing on Raspberry Pi say the resource is very limited so will it be like rendering properly smoothly yeah so it's just like any other game engine and we talked about how you build your 3D stuff with those triangles say suppose we are not using 3D we are using only 2D features so still you are drawing triangles not to get distracted so it completely depends on how accurate you want your 2D things to look like and I can play around with those number of triangles and it reducing that helps improving your performance so it doesn't add a performance overhead on top of WebGL it only tries to make it more performance in terms of doing better garbage collection and there will be like a RAM issue like when you are working natively with WebGL and if you are not doing a GC properly there will be a RAM issue each of these assets it completely depends on if this asset is 20MB how can I make it less than 20MB I cannot I have to load that here so my whole game with all interactions now will be 21MB so if you want to cut down on that is the designer you have to ask give me an asset with less number of vertices it should be lighter so it is not the developer developer can optimize it from GC side how I ensure that I create less JavaScript objects and reuse more that helps me out but Babylon as an engine does that for you so you don't really have to worry about performance here this is a nice looking skull right so you can use it you can zoom in it this can be scary right so right now frames per second is very low because it is running on a debug mode with VS so there is a debugger which keeps tech of it but if you run it in release mode it will be much faster here ok to help performance it certainly if you are new game developer helps you out with ensuring that GC and stuff works more efficiently the engine does that for you but your question to make it work on a low end Android device completely depends on what assets you are using if you are just using geometrical shaped assets for sure you will never have a performance issues the moment you start importing more and more 3D assets is when the issue starts keeping it you had a 2D game so it can work with geometry there hi so I had a question about this so I think you have heard about Phaser and 3Js right so I was wondering what are the strengths or weakness of Babylon when compared with 3Js my specific use case scenario will be to implement specifically 3D models for web VR stuff which I know is not there in edge yet but for those purposes so it will interact with a lot of other APIs out of a browser and in that case or in any normal 3D cases where there will be heavy intensive 3D rendering going on but like machine is not an issue in that case what will be the strength or weakness comparing with 3Js and Babylon I haven't done a comparison of that yet but when you mentioned about your scenario of interacting with any applications this guy works well we have integrated this with many enterprise grade applications to render 3D as well but I don't have a direct comparison with other library you mentioned about so guys any questions on Babylon I'll take that offline I'll just come down there just I'm available over the email or the Twitter so just feel free to bounce your questions there thank you