While following the tutorials on LearningWebGL.com, I decided to break it up into even smaller chunks. This really isn’t necessary, but I figured it would be less daunting for me to have to write larger posts for each point in the lesson. I also have been rethinking how I teach myself new things, and I have had more success taking tiny steps, with each one taking me to a point at which I am able to see results, no matter how small. This sort of goes along with something my software engineering professor kept saying:
Always have something to present
What she meant was don’t end up standing in front of the class (or your potential customer) and resort to telling them how great your product WILL be even after working on it for any length of time. We should always be able to produce results in order to keep the interest, i.e. investment, of the customer. What I also learned from this practice was that I am very much a visual learner. I am able to better register the effects and purpose of bits of code when I can see its literal implementation one step at a time, something many people can relate to, I’m sure.
Now with that out of the way, let’s begin by just putting up a black square in the browser. To actually begin rendering to a canvas is very simple, all it really takes is 4 simple steps:
- create a reference to the canvas element
- create the WebGLRenderingContext by calling a method of the canvas reference
- set the view port’s ‘clear’ color
- and finally, clear the view port
Of course you could also just look at the live version and compare your source code while you’re at it. Now to begin with your page, create a file named “index.html”, or if you insist on creative freedom, anything else of your choosing. In this html file, all you need to put (besides the usual) is a script tag in the header, a canvas in the body and an onload callback in the body tag like so.
So here we just have a simple HTML page with a 500×500 pixel canvas in the top-left corner. This is nothing by itself, though when we include an external JavaScript file in the header on line 4 and call one of its internal function when the body loads (line 6), we start a sequence of function calls which setup our rendering context. Looking at our index.js file, we can see the ‘initPage’ function at the bottom.
- function initPage() {
- var canvas = document.getElementById("webgl");
- initWebGL(canvas);
- initViewport();
- gl.clear(gl.COLOR_BUFFER_BIT);
- }
This function begins by creating a javascript reference to the canvas element, giving us an object from which we may retrieve a contex. ‘initWebGL(canvas)’ calls another function which will remain in charge of establishing the WebGLRenderingContext and storing its reference in ‘gl’. The string parameter passed to getContext is the type of context we are trying to get to use on this canvas. Some may have already seen practiced use of getContext(“2d”), which will return a context allowing the programmer to draw 2D shapes on the canvas. Currently, WebGL is still considered in its experimental stages and the name of the available context will remain prepended with “experimental-” until it is final.
- var gl;
- function initWebGL(canvas) {
- try {
- gl = canvas.getContext("experimental-webgl");
- }
- catch (e) {}
- if (!gl)
- alert("Sorry, could not initialize WebGL");
- }
NOTE: There is a JS file available on the Khronos website which is meant to make some WebGL setup easier. Inside the create3DContext function, you can see that it tries four different context names and returns the first successful one. Those names are ordered as follows:
- webgl
- experimental-webgl
- webkit-3d
- moz-webgl
The next function call is, for now, extremely simple. It is in charge of setting up the drawing viewport (the canvas) and establishing any settings that the context object will need throughout its lifetime. For mow, this only means setting the color which the canvas will display every time it is “cleared”. Clearing the canvas just means calling the ‘clear’ method on its rendering context, like wiping the marker off of a whiteboard, and restoring its default color. We will set the clearColor to black RGBA.
- function initViewport() {
- gl.clearColor(0,0,0,1.0);
- }
Finally, we call the clear method and pass the bitmask variable ‘gl.COLOR_BUFFER_BIT’ to specify that we are clearing the color buffer for this canvas. Later on, we will also be clearing things like the depth buffer. With that last line, our canvas should now appear solid black.