In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.
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.
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.
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 0,0 canvas 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 0 to 1. I'll pass in 1,0,0,1 which will clear the canvas to red.
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.
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.
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.