Setting Up WebGL

[00:00] Let's take a deep dive into webgl, we won't be using any frameworks here, just writing raw JavaScript code that creates and renders 2D and 3D graphics using the core webgl APIs available in most modern browsers. I'm going to assume that you know what webgl is and why it's so cool, so we're just going to skip over all that. However, I'm not going to assume that you've ever programmed anything in webgl before, either directly or through a library like 3js. We're going from the bottom up here.

[00:29] It will be helpful if you know a bit about 3D graphics and transformation matrices, at least on a general level. First we'll get a hold of the webgl rendering context that we need to kick anything off. If you've ever done anything with HTML5's 2D canvas, the first step should be very familiar. We're going to add a canvas element to the Web page. It's not any special 3D webgl canvas or anything else, just a regular old canvas. We'll give it an id of canvas, and a width and height of 600.

[01:02] Then in the JavaScript code I'm going to create a function called initgl, this will get a reference to the webgl context, so we'll make a reusable variable called gl, and then I'll call initgl. In the initgl function we'll get a reference to the canvas using getElementById, and the we'll call getContext, just like working with the 2D canvas, only this time instead of passing in the string 2D to get the 2D context, we're going to pass in the string webgl, this should work on most modern browsers.

[01:36] In some browsers webgl is not fully developed and is considered an experimental feature. In these you might have to use the string experimental webgl. Then of course to cover all bases, you'll probably want to try webgl first, test the results, and if that fails use the experimental version, if that fails, display some kind of an error. For the sake of being concise, I'm just going to be using webgl for these lessons. Now drawing actual shapes in webgl gets pretty complex. We'll get to it, but for now let' just make sure we've set everything up right.

[02:09] All we do for now is clear the canvas to a specific color. First thing we want to do is tell opengl what portion of the canvas we want to use. We do that with a glviewport method. This takes a rectangle. We'll use the entire canvas here, so we pass in 00canvas width, canvas height. Then we want to set the color we want to use to clear the canvas. This is done with glClearColor, passing in values for red, green, blue, and alpha. These are all normalized values, meaning going from 0to 1. I'll pass in 1,001 which will clear the canvas to red.

[02:47] Now running this does exactly nothing. We didn't actually clear the canvas yet, we just told it what color we want to clear it to. Webgl is state-based system. Most of the code you write will be setting various states by calling various methods using a lot of constants defined within the webgl system and some of your own values, and then wrapping up with a single call to say render that. Now we've told it about the viewport and what color to clear to, we can tell webgl to clear with the glClear method.

[03:18] To keep things organized I'm going to do this in a separate draw function. I'll call and create that function. Now the glClear method takes a parameter telling it what t clear. A lot of the data in webgl is stored in various memory locations called buffers. We want to clear the colors of this canvas, setting all the pixels to the color we just specified in the call to clearColor. So we want to clear the color buffer. We pass in gl.colorbufferbit.

[03:48] This is a special binary value that can be logically combined with other pre-defined values to clear multiple buffers at the same time, but we don't need to worry about that now because we're only clearing the color buffer. So that's that, when we run it, our canvas is red. You can test out the clear color by passing in different parameters for the other channels, and seeing that the canvas is cleared to the specified color. So now you have a functioning webgl canvas on screen, and you can start programming content into it.