It is time to start with a tiny bit of code. In here we will prepare foundations for what will come next.
This is the plan for today:
We will NOT ommit error handling for brewity nor for pleasing my laziness.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>noniwoo webgl tutorial</title>
</head>
<body>
<canvas id="canvas1" width="640" height="480"></canvas>
</body>
</html>
I gave the canvas some id, so we can refer to it easily from a script. Width and height are not necessary. Rest should be obvious.
You can put <script> tag wherever the heck you want as long as it works. I will put it after <canvas> tag, as we will be using it, so it must exist already.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>noniwoo webgl tutorial</title>
</head>
<body>
<canvas id="canvas1" width="640" height="480"></canvas>
<script>
// more to come
</script>
</body>
</html>
Time to get to the canvas. As we have assigned id to it, we can use it now.
<script>
var canvas = document.getElementById('canvas1')
</script>
Also we should check if it worked.
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
</script>
This will do. Message will be displayed in your web browser's javascript console and of course all the code below it (when it will be there, there is nothing yet) will not be executed. Good thing to have.
Time to get webgl context. As you surely remember* it returns an object that exposes all of the WebGL API. We do this just by calling getContext() method on canvas.
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
var context = canvas.getContext('webgl')
if( context == null )
{
throw "Could not get webgl context"
}
</script>
Few notes here. First one - I have not seen many people naming context variable as 'context'. More popular choice is one of: gl, cc (for canvas context). We will use first one.
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
var gl = canvas.getContext('webgl')
if( gl == null )
{
throw "Could not get webgl context"
}
</script>
Second note - if you have (or someone has) older browser we should try asking for another name of webgl's context - experimental-webgl.
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
var gl = canvas.getContext('webgl')
if( gl == null )
{
gl = canvas.getContext('experimental-webgl')
if( gl == null )
{
throw "Could not get webgl context"
}
}
</script>
Now we know we have done everything we could and know for sure - that fat, old browser really does not support webgl.
Before we can clear canvas, we should set with what color we want to clear it.
gl.clearColor(1.0, 1.0, 0.0, 1.0)
This is the usual RGBA format of a color (red, green, blue, alpha, right?). The only difference from the usual #FFFF00 in html is we give it in floats in range 0.0 - 1.0. And I also never ever remember if to set alpha to 0.0 or 1.0. Check out yourself what happens when setting the incorrect one.
The code for clearing the canvas is thus as follows.
gl.clearColor(1.0, 1.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
clear() is not just for clearing the displayed area, so we have to tell it what to clear. Color buffer is where the displayed image is stored, so it's the right place to clear.
Whole page looks now like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>noniwoo webgl tutorial</title>
</head>
<body>
<canvas id="canvas1" width="640" height="480"></canvas>
<script>
var canvas = document.getElementById('canvas1')
if( canvas == null )
{
throw "Could not get canvas element!"
}
var gl = canvas.getContext('webgl')
if( gl == null )
{
gl = canvas.getContext('experimental-webgl')
if( gl == null )
{
throw "Could not get webgl context"
}
}
gl.clearColor(1.0, 1.0, 0.0, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT)
</script>
</body>
</html>
Put this inside some html file and see the lemon for yourself.
As you have just seen, WebGL is a big state machine. We have set the color and then it was used to clear the canvas. Remembering this may help you in the future.
* People never remember such things, so why bother to write this? I guess it is just a nice way of bringing the old stuff back for you to really remember something.