WebGL Tutorial 01 - Setup and Triangle

hello this is indigo CS thanks for coming by today I wanted to talk about WebGL and I have been really interested in graphics programming for a long time and I also think that javascript is possibly the best programming language to ever grace mankind so WebGL is the perfect combination of the two it's way for you to write front-end client-side applications that use the full power of OpenGL or at least OpenGL ES I think it's the 2.0 standard that WebGL uses so I'm going to do a bunch of video tutorials pretty much until I get bored of these which should take a very long time in this first one all we're going to do is we're going to set up WebGL so you can see I have a little canvas right here it's green or whatever color that is and I've drawn a simple triangle so this is getting all the boring overhead stuff out of the way I'm going to talk a little bit about the graphics pipeline and how that works so if you want to fully understand how that works I recommend looking up a different write-up on that because there is quite a lot that goes on this is a simple mock-up of how a graphics application works and when I say graphics application think video game especially I want you to think about if you've ever played on the n64 or the PlayStation one one of those really old video games or everything looked really boxy or really triangle II because that kind of accents the way graphics works and it'll make a little bit more sense so on a traditional video game you're loading things from the hard drive I'm going to point something out with WebGL and that is that you're loading it from somebody else's hard drive over the Internet which means that data transfers a lot slower than it's going to be in a traditional video game or animation tool or whatever you happen to be making so once you have all the information over to your user it's going to run really quick it's going to run great fantastic awesome definitely slower than a C++ native application but pretty quick but the loading times are going to be easily ten times worse so if you're looking at making you know the next MMORPG just make sure you keep that in mind and it might be worthwhile instead of having a loading page have something a little bit more dynamic alright so the first thing you need to do when you start up a WebGL app is you just to initialize WebGL so in this example right here I have an html5 canvas right here this canvas I call it game surface width of 800 height of 600 and that's the surface that WebGL uses to draw you then need to get an OpenGL context and the context is pretty much OpenGL is the state machine you can think of it as and so the context is the tool that you will use to perform all of these graphics functions so you know clearing the screen drawing the triangles all of it and then after you've done that and you've initialized everything which in WebGL is much simpler than it is with OpenGL and DirectX in C++ or C sharp or Java so after you've done that you're going to go through a lot of these steps which I'll cover these mostly later more or less you just need to update the global variables that your graphics card is using for all the drawers after that you need to draw everything and usually you use triangles so this is just one triangle but if you think back you know Super Mario 64 what was that game Mario 64 and it just any old good old game on the n64 is Legend of Zelda why not um everything looked blocky because everything is usually made of triangles and games and so each individual triangle does need to be drawn and usually they're drawn as large or mesh objects you know an entire thing so an entire character link perhaps and the reason for that is these draw calls are actually relatively expensive so try to group as much as possible as you can together once you've issued the draw call what happens this goes over the vertex shader and it takes all those points that define a square cube or whatever you have every single triangle and it runs them through a vertex shader and the job of the vertex shader is more or less to take those points from the 3d space that you gave it and put it into 2d screen space so in OpenGL the way that works is because you have different screen resolutions and we don't really want have to mess with that additional detail you have a coordinate system that goes from negative 1 to 1 on the x axis left to right respectively and then negative one to one on the y-axis bottom to top respectively bottom to top that's important that's a different than how you probably have learned with top to bottom if you've done DirectX or I don't know for some reason that threw me off maybe it throws you off maybe it doesn't but the vertex shader pretty much transforms each vertex into a position and then if you have additional information you want to give every vertex that's fine too so in this one I give every vertex of color as well so this one's red one green one blue one after it goes from the vertex shader it goes through the rasterization step which pretty much is filling in the triangle so like in this example I have three points the raster the rasterizer says all right how many pixels are there in between which pixels should be drawn and what exact positions on the screen are there's maybe this one is at 0.5 or no this would be zero point zero and zero point five with the color of straight red and you can see on the color it illustrates it much better than the positions I think how it kind of blends between the two how if you get in middle this is exactly between red and green and this is exactly between red and blue and everything in between is systems continuum the rasterizer does that with every single property you assign to each vertex so that allows you to pretty much have for every pixel on the screen information even though you're only providing three points of data after it goes through the rasterizer and all those values are assigned it goes through the fragment shader which is where you decide for every single one of those pixels or pixel fragments more accurately which color you would like that pixel to be um and you can take that from all the information that you get in the vertex shader after that goes to the frame buffer which we're going to skip right over because we don't need right now and it goes out to your screen and that is the gist of it so without further ado let's move this over here and I have a sublime text window open right here I'm going to save this new file let's see now it looks like a this is some stuff I was writing before so first thing we're going to need is an index file I'm just going to call that index.html and that's going to be the actual HTML file I'm just going to write that up really quick we really don't need very much so my web GL simple triangle oops okay so I'm just going to put two things in here I'm going to put a canvas element which I'm going to give the ID web gee I'm not going to call it WebGL canvas because I don't like to think that's a special name or anything I'm going to call it game surface why not and then I'm going to put a little message in here your browser does not support html5 if that message shows up that what that means is that they're using a really old browser that they shouldn't be using at this point there's no excuse for using a non html5 compliant browser then I'm going to put one more thing I'm just going to put a little message in italics demo is above this text this just lets us see kind of where the canvas begins and where it ends before we actually start drawing things so now if I open this up on my file system right here and see looks like we're great and I haven't set a size yet so I'm going to do that right now with equals 800 I equals 600 perfect cool now call me old-fashioned but I do like to keep my files separated we're going to be writing a lot of JavaScript and the JavaScript is going to be doing the most important stuff so I'm going to separate this out into a separate file and include it here script source equals AB Dulce s script now the reason I'm doing it inside the body tag and not set the head tag is because javascript is immediately loaded as soon as the browser sees it and it's immediately executed and I'm going to be having to deal with this canvas so I want the JavaScript to be loaded after the canvas element is whoops if at all possible and if I were to put it in the head I would not be guaranteed which one would run first which I'm going to do another thing to make sure that that doesn't matter and that is I'm going to be assigning the onload function here I'm just going to write a function maybe initialize dental I just realized it might be a little bit too zoomed out for you all right there we go hopefully that's better so if you couldn't read before here's the code that I had written sorry I forgot that um you're probably not watching this you know fully blown up on a 1440 monitor or whatever alright cool so in here this is going to be what happens when our page is fully loaded and ready to go so I'm going to bring up the console here I'm just going to quick write a console log to make sure this is working this is working great doing good so far so step one if you remember is I needed to initialize WebGL so to do that we need two things we need to get the actual canvas element which I'm just going to call canvas equals I'm going to use the document dot get element by ID and this I pass it in the name of any HTML element and it will get me this whole thing as a JavaScript object so if I do that now canvas represents this thing right here now I need to get the OpenGL context which I'm going to do by saying gee L equals canvas get context WebGL um now for Chrome and Firefox this is all you need to do but for internet explorer edge and I think Internet Explorer 11 is the first version of ie that supports it edge supports it and Safari support it but both of those don't support it fully or completely yet they're not compliant I don't know why but you have to be using a different context that behaves the exact same way for the purposes of my tutorials um it's just an experimental context I suppose and it is called the experimental WebGL context if they're still using a browser that somehow does not work let's just tell them like your browser does not support WebGL it's now if i refresh we should be fine I'm going to put a little message here to console.log web GL not supported without expert falling back on experimental of jail now if we view here this is some chrome so that should be fine but if I pull it up an edge you should see yes right here WebGL not supported falling back on experimental it should work the same between the two so I'll keep this open so we can use it later great so now that we have our context that is initializing WebGL and you're done it's pretty easy right if I wanted to adjust the size of the canvas at this point I could by saying like canvas dot width equals let's say document I think it's window dot inner width I could do something like that maybe yep looks like that is it and just be careful something to point out is if you do this you do any dynamic size adjustments also be sure to say GL dub you port 0/0 window and width and this just changes what OpenGL thinks that it's rendering to so I'm not actually going to make those changes I'm going to save that for later tutorial when I add some more shine on it just be aware that that is something so let's start off by just clearing our OpenGL context to that flat color that I showed this way to do that is you set which color you want to use for clearing operations by the GL dot clear color function and in here you give the red green blue and alpha value alpha is always going to be 1.0 um that just means opaque anything less it means transparent all the way down to zero which means invisible let's assign some numbers I believe these are the ones that I used before cool and as you can see nothing happens yet this is just you can think of it as setting the color of the paint that it's going to use it's not actually performing the paint so the way you actually perform the paint is with a GL clear call um and if I do just this it shouldn't do anything yeah so it's expecting an argument and the argument here is you need to sell it what to clear without going into too much detail graphics applications have multiple buffers that they render to the ones that you really have to be concerned with right now are the color buffer and the depth buffer the color buffer is one that actually stores what color all the pixels should be and the depth buffer does something kind of cool it stores how deep into the screen that pixel was so it's really good for Z ordering say you have two things you have a square and you have a circle in the circle is behind the square the depth buffer when it draws a pixel from the square might put a value lower than the value of the circle which means that it's closer to the screen and so if the program goes to draw a pixel from the circle and it notices that that pixel from the square is already there it will just throw it away and ignore it because the depth buffer already had a value that supersedes what was attempted to be drawn so let's clear both of those really quick color buffer it is how you do that and I believe this one actually should work if I just do that yeah that should work but for good practice I'm going to do both so or GL depth buffer bit and if you've done any C or C++ programming this probably looks more familiar if you've done like DirectX or OpenGL in more of the low-level programming languages so great so now we've drawn our canvas so you can see that some OpenGL calls is happening so now what we need to do in order to get the triangle going this is where things get a little bit hairier you have to set up the entire graphics pipeline program in order to get this to work so we're going to need a vertex shader and a fragment shader and a vertex shader looks something like this this is one that I wrote when I was a making sure that I know is going on for this tutorial um so these are what we're going to end up with one of the things JavaScript's a little bit picky and I don't want to load these from a separate file so we're just going to write these in line as strings but with a vertex shader what you do is you take in input parameters called attributes and if you're writing a c function so let's say function vertex shader the attributes would be parameters like this for position for color and then the outputs from a vertex shader are these varying ones um so you might return something like this frag color I don't know 1.0 bird color actually let's do it this way bird color tragg color GL position okay so I just drew this out to be a little bit more familiar looking this would be what it would look like in JavaScript this is what it looks like in the GL shader language GLSL attributes are input parameters varying our output parameters and this void main is the actual vertex shader that performs all the operations and as you can see I'm just setting this fragment color to whatever the vertex color happens to be pretty straightforward um and then with every vertex shader there's a special variable these so-called GL underscore position and this sets where on the actual rendering surface you want to draw that vertex it then goes through the rasterizer and for every single pixel that comes out of that rasterizer state you draw with a fragment shader which looks like this the varying are now the inputs for the fragment shader and the only output from your fragment shader will ever be this GL underscore frag color and right here I'm taking the color that it's supposed to be and adding an alpha component we're going to do a little bit simpler of a vertex and fragment shader to begin with and then we're going to work up to those so to start out we're not going to do anything special of color so way I'm going to write that is I'm going to write our vertex shader text equals and I'm going to use a little trick that I learned at an internship that I did last summer and this is I have an array and inside the array I'm going to put the lines of the vertex shader each on their own actual line in the file so the first one precision medium P flow and this says I want to use medium precision on the floating point variables I'm not sure why I need that but I guess I do so this has something to do with the arithmetic the comparisons lower precision means less accuracy but also faster so medium compromise Goldilocks right okay then the next line I'm just going to leave that blank a true attribute back to vert position and the types are going to be a lot different than they are on the sea based languages you do have float like you're doing sea based languages but you also have the effect to vector E and Bek for these represent pairs triplets and four sets of floats that go together so a vector of two elements would be this one this has an X and a Y component both floats and then right now I just want to deal with position so not going to add any varying Zoar other attributes void main okay and then here all I'm going to do is I'm going to say that the position equals vector because GL position is a four dimensional vector but this is only a two dimensional vector that we're giving in I want to say that the X&Y come from Verte position the Z is going to be 0 and the last one is always 1.0 you don't really need to know too much about why this is 1.0 right now just know that it's 1.0 so what this is doing is it's saying about 4 expects four numbers this one has two so we're going to take the first two from there and then the second one and/or the third one and fourth one we're going to use just like that so that's our vertex shader let's make sure that I didn't screw up the syntax on that good still compiles shred our fragment shader and in a later tutorial I'm going to show you how to actually load these from external files it turns out it's not a not super easy so yeah there's that let's see and this one isn't taking in any additional parameters right now I just want to color it let's give it a straight color like red okay syntax is good we're great alright so this is just going to say that the fragment color is going to be one on the red so completely filled with red no green no blue full on the Alpha because it's not transparent great so now what we need to do is we need to get OpenGL ready to use these vertex shader and fragment shader so I'm going to make two variables first one is going to be our vertex shader and the way we do this is we use OpenGL to create a new shader object GL dot create shader and then here we tell it what type of shader we want to use in this case it's GL vertex shader now you can see a lot of these constants are using GL dot something that's just the way WebGL does it because the OpenGL API uses a ton of these constants just like this this ends up being a number I don't remember what or it is let's do the same for a fragment shader fragment shader great so now what I want to do is I want to tell I want to compile the vertex shader from this code that we provide up here and the fragment shader from this code that I provide up here so there's two steps to doing that first thing you have to do is you have to set the shader source and you do that through the GL shaders source or the first parameter is the shader that you want to set the source code for and the second parameter is the actual source code shader source again great and so now we've set the source code if we run it everything's good so far great so now I need to actually compile it and that is a GL dot compile shader call great and it still seems to be working now this is where things get a little bit trickier it seems to be working but it's very possible that it's not so I'm going to introduce a syntax error here by removing a semicolon as you can see it still likes it so the way we can check for compilation errors in our shaders is there's a function called GL get shader parameter which went then we tell it which shader we're examining vertex shader and then we want to say which parameter we want to be getting we want the GL dot compile status and if it returns false or wrong or whatever we want to output an error to the console console dot error error and pi vertex shader and then we also want to give it additional information which we can get from GL get shader info log vertex shader and this just gets us a log with information from the vertex shader then I'm going to return out of this function to right here so it doesn't keep trying to go with invalid shaders so if i refresh it here now you can see boom we have an error error compiling vertex shader on line eight one two three four five six seven eight so it's saying that the errors right here and this is the syntax error I know that I forgot a semicolon so I'm going to put that back and that'll be here so now if I compile it seems fine let's do that same thing for a fragment shader alright so now if I run it looks like the fragment shader I did right the first time great so now we have a vertex shader and a fragment shader that we're already ready to use and those are the two programs we have to write for the graphics pipeline now the last thing that we do is we need to combine them we need to tell OpenGL that these are the two programs that we want to use together um and we do that through creating what's called a program in OpenGL terminology and a little bit weird programs shaders but a program is you can think of as a graphics card entire program the entire graphics pipeline whereas a shader is just an individual component so I do that so save our program equals GL dot create program and then I want to attach both our vertex shader and our fragment shader and you do that through the GL attached shader function which takes in which program you want to attach the shader to and then which shader you actually want to use so I'm going to use both these now you're noticing that I'm not specifying which one's vertex and which ones fragment that's because these objects already know and so the OpenGL API is able to take care of that by itself finally now that we've attached both of our things we need to link the program together a good way to remember that is just compile then link like a C program the link program I want to link that program it's not much like we check for compile errors right here we're also going to check for linker errors like this if GL get program parameter now GL dot link status our linking program program she'll get program info log program hopefully everything is good so far great everything is great um and then there's one final thing we can do and to be completely honest with you I have no idea what this step does but I know that it's usually a good idea in well I have no idea specifically what this does I do know that it caches additional errors that you might run into but you can do what's called validating the program this is something you only want to do in testing because as far as I'm aware it's more expensive I know an actual C++ game writing this is something you would only do in your debug releases and not in your full releases because apparently it takes a longer time um and I know this will catch additional issues but I don't know exactly what issues those are they're validating program jail docket program it's a log program zoom out just a little bit actually we'll do this we'll do it this way so you can now see everything should been doing that the whole time now if I run it hopefully still validates still validates we're great cool so now we have setup the graphics card program and it is ready to accept our vertices now this is where things get much hairier for which I apologize but we need to set all the information that the graphics card is going to be using whoops come on here we go so back to the triangle this has three points in each point is going to have an x and y position we're not dealing with color right now so that's just two points of data and we know that from the fragment shader we have one attribute and that attribute is a vector two so we need to create a list of those x and y positions that's going to define our triangle after we do that we need to attach that list to the graphics card or yeah to the to the vertex shader so you do that is first let's make our vertices triangle vertices equals and I'm just going to put a little comment up here saying x and y is the information we're expecting so for the first one let's go top counterclockwise so the first one is going to be right in the middle on the x-axis and it's going to be halfway up the screen or 3/4 of the way up the screen I guess on the y-axis second point let's do the one on the left to make sure that we keep going to counterclockwise order which I will get to why that's important in later video it's actually not important right now but I'm going to do it anyways counterclockwise so that one is going to be 0.5 negative 0.5 and 0.5 negative 0.5 there so the actual vertices were going to use so this right now is sitting on our main computer ramps this is you know sitting on your CPU accessible memory your graphics card has no notion of what that is your vertex shader has no notion what you use for graphics card programs is you use buffers and that is just a chunk of memory that's allocated for some purpose so I'm going to make our triangle vertex buffer object equals gel create buffer now this is the chunk of memory on the GPU that we're ready to use so let's bind it and what this line what this line right here is doing now is it is saying that the active buffer we're using it as an array buffer which you can think of that as just being variables that we're passing to the graphics card nothing too special just vertex buffers do that I don't know exactly why it's called an array buffer and we are binding this buffer that we just created to be the active buffers after that we want to specify the data on the active buffer GL ray buffer triangle vertices geostatic draw now these three parameters mean is that this is the type of buffer that we're talking about an array buffer notice that this actual variable is not called in the GL dot buffer data the reason for that is it's going to use whatever active buffer is there so whichever one that we last bound which happens to be the triangle buffer triangle vertex buffer object the second parameter is actually wrong um but we're specifying that we want to use these points now in C or C++ it would be fine just like this but JavaScript these types are a little bit weird so a JavaScript store saying this is every it's a 64-bit floating-point precision number but OpenGL is expecting in 32 bits so javascript has provided us with a wonderful object called the float 32 array which specifies the type and make sure that it is correct for the OpenGL calls so this is how we're going to pass it and then this GL dot static draw all this means is that we're sending the information from the CPU memory to the GPU memory once and that we're not going to change it ever again it's just going over and we're going to be done with it which is correct we're not going to be changing that triangle at all in this demo at least great so now we've sent the information over to the graphics card we now need to inform the vertex shader that Verte position this attribute is these vertex or actually every pair of these vertexes comes right now on the graphics card all it's doing is it's sitting there as six points zero zero point five negative zero point 5 negative zero point five zero point 5 and negative 0.5 but there's no rhyme or reason to that so the way we do that is we need to get a handle to that attribute by doing this for our position attribute location location equals GL get a trip location we specify two parameters here which program are using and the program will then additionally specify which vertex shader we're using and then what the name of the attribute that we are using is and that is just for position so now this position attribute location is going to be some number um if I'm not mistaken it's going to be zero because this is the first attribute that we're passing so I could just use zero but I'm not going to because what if I wanted to add an attribute up here then we'd have to change all of those specific numbers so it's better practice just to do something like this where you get the attribute location we then need to specify the layout of that attribute which we can use a function call called vertex trip pointer and this is going to take five parameters this first parameter is the attribute location which is going to be positioned extra bloatation the second parameter is going to be the number of elements in each attribute this one has two it's about two so we're going to say two per attribute and then we need the type of each of those these ones are going to be 32-bit floats so GL dot float type of elements this first one is whether or not the data is normalized which for now is going to be false I can get into that later it's beyond the scope of this video though this fourth one is going to be the size of an individual vertex and this last one is going to be the offset from the beginning of a single vertex to this attribute so in this one we're going to have three vertexes and each one is going to have two elements both floats in it and right from the beginning is going to be pin the position we don't have any any any additional information that comes before that so for the size it's going to be two times the size of a single flow which I know that to be four but because I hate using magic numbers like that I'm going to say float 32 array dot bytes per element and this is just a constant that holds the number four which is how many bytes a single 32-bit float uses the reason we need all these number of bytes is just so that the graphics card can reinterpret this data once it gets over there it's on our CPU we know what this information is but we don't know that on the graphics card so going to do that two times float 32 array dot bytes per element and then here is going to be just the number 0 because we're not actually doing any offsets all right two more steps we're almost done I promise we need to enable B vertex at trib array this pretty much enables the attribute for use that's it um and then here this is where we put the main render loop now in a game this would be maybe a while loop where you write like an update world render world function something like that or the more JavaScript way to do it would be something like our loop equals function update world render world oops if running requestanimationframe blue this be the more JavaScript your way of doing it for now we're just going to draw that triangle out to the screen because we're not doing any actual animation so I need to specify which program I want to use I want to use this one it's the only one we have so far so really that's the only one that makes sense I then want to draw arrays so this function is going to take three parameters and this is going to use whichever buffer happens to be actively bound if you haven't found any other buffer sense here so we're going to use this one the first parameter GL dock triangles is going to say we're going to draw in triangles 99% of the time you draw something it's going to be GL about triangles the other options are like GL dot points jail dot lines line segments triangle fans and those do individual things you're going to have to look up on your own how those ones work though the second parameter is how many of these vertexes we're going to skip I want to skip zero and then the third one is how many vertices we have to actually draw which is three I'm drawing three to form a complete triangle if I have more points in here so maybe whoops I want it to draw this twice I would have to change that to be six right now we're only doing three so at this point that is everything we're going to need to draw a red triangle voila if we go back to edge it should just the same yep and if you want over to Firefox it would still work just the same even though we're using experimental GL and same with Safari oh cool so this is the basic drawing triangle I'm going to finish off the video with adding just one more attribute for the color so that we can get completely what I had here and the point of doing that is just to show how information is passed from the vertex shader to the fragment shader so let's do that let's add another attribute Effect 3 vert color put a semicolon there so that's going to be another input to our vertex shader and then we're going to have an output from our vertex shader varying Effect 3 frag color and we're going to add that same input to our fragment shader in fact I'm just going to copy that exact same line we're not doing anything additional extra exciting so I'm just going to say that the frag color equals the vert color and then here I'm going to replace the red with whatever vert color I wanted to use and you can see right here frag color has a position that should be frag color a fry color has 3 colors to it a red green and a blue and so we're passing it the red green and blue and then we're just assigning the alpha to be one because we want it to be opaque right now it's now down here we don't have to change any of this code because we're still compiling the vertex shader the same way the only thing we do have to change is now we want to add the colors to our vertices and there's going to be three of them one for red green and blue so let's say one of them is going to be 1.0 1.0 0.0 one of them may be 0.7 0.0 1.0 I'm just picking around our betray colors right here 0.1 1.0 0.6 I guess why not cool now we have to add the attributes descriptions down here so I'm going to copy this line because we're adding another attribute it's going to be vert color now notice we don't have to do anything for the varying um that is because by the time we get to the varying properties we're already done with the vertex shader we only have to specify the inputs to the vertex shader because the inputs to the fragment shader the CPU isn't involved in at all now another type that we do have that I haven't covered here is we might add like uniforms so uniform flow of screen width perhaps in uniforms are constants that sit that stay the same between the vertex shader and the fragment shader we'll get to those in another video the next video actually great so now I'm getting the color at Rebekah attribute okay ssin and then I need to do this whole thing for the color attribution as well now a couple of things have changed here first of all the size of an individual vertex has changed from two to five so if I were to just try to draw this right now it probably freaked out yeah did not like that so I do need to say that each one takes up five and let's see what it does now still shouldn't like that yeah still should not like that and that's because the last thing that we need to change oh actually this I did forget about this for the color instead of having two elements it has three so we do need to say that I'm looking to see it draw black triangle I'm not sure what else I'm missing but whatever I is going to show you how to do it wrong so I could show you how to do it right but whatever don't need to do that the last thing that we're going to need is this one actually is offset from the beginning of a single vertex so this is one single vertex the position doesn't have an offset but the color does you have to skip the X&Y position in order to get to the red-green-blue values so that is going to be three values and each one is going to be the size of a float great and now that should be everything to draw nope I did something wrong GL draw rays attempt to access out of range vertices in attribute zero Oh better that needs to be color attribute occasion and that apparently wasn't the only issue all right what am I doing wrong triangle vertices this is formed correctly this is formed correctly that's correct that's correct let me look at my notes and see what I'm doing around here position program for position Bert color position to float Falls five zero color three float Falls five oh this has an offset of two out of three yep okay that was it silly me hopefully you're yelling at the screen hopefully you caught that more like a you idiot how could you possibly do we doing that wrong oh great so now you can see that one of the vertices this one has like a yellowish color this one has like a purplish and this one some sort of green but anyway so that is it for this tutorial that is setting up WebGL that is drawing the most basic shapes that you can do all of this so far has been 2d and we've been giving it direct coordinates for which position on the viewport that we want to use in the next video what I'm going to do is I'm going to expand this into three dimensions I'm going to explain all the math it has to be done in order to do that and then we're going to make a little rotating cube so I hope you enjoyed this one and stick around for the next one thanks

Channel: Indigo Code

Views: 229,025

Keywords: WebGL, HTML5, JavaScript, Game Programming, OpenGL

Id: kB0ZVUrI4Aw

Length: 44min 44sec (2684 seconds)

Published: Sun Jan 17 2016