Hi everyone and welcome to the first post of what I hope is a series about WebGL2.
In these posts I’ll try to guide you through what I learn, so you can follow me in what I’m sure will be an amazing journey. Are you ready to step into another dimension? Well then, let’s start!
Here is what we’ll do in this tutorial…
click here to open it in a new window
Although a black screen is not really great it gives us the foundation to do some more interesting things. So let’s look at the code then.
If you haven’t done it yet, you should download the code found in the WebGL2 tutorials Github repository as we will follow it through this post.
First we’ll have a look at the HTML code:
<body onload="webGLStart();" style="margin:0px;"> <canvas id="canvas" style="width:100%; height:100%;"></canvas> </body>
As you can see we just define a canvas element where the WebGL content will be rendered and an onload handler to initialize the WebGL context. Notice the width and height style attributes of the canvas element as WebGL has a small quirk regarding the canvas size it’s drawn on.
It’s now time to take a look at the JS code where the magic is done. As we saw before it all starts when the page is loaded and the webGLStart function is called.
function webGLStart() {
var canvas = document.getElementById("canvas");
let gl = initGL(canvas);
if(gl)
{
window.addEventListener("resize", () => {
resize(gl, true);
});
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
} else {
alert("Your browser does not support WebGL2, sorry :-(");
}
What this code does is to get the canvas element where the content will be rendered, initialize the WebGL context calling the initGL function, add a resize event handler and clear the canvas using our first WebGL calls
gl.clearColor(0.0, 0.0, 0.0, 1.0);
First we set what’s called the clear color. The clear color is the color that will be used as the background of our WebGL canvas. The color is specified with its RGBA value. Notice that in contrast of what CSS does, the RGBA values in WebGL are in the [0.0, 1.0] range.
gl.clear(gl.COLOR_BUFFER_BIT);
After setting the clear color, we clear the color buffer effectively setting every pixel to the color previously defined.
There’s still two missing pieces of this tutorial. How we initialize the WebGL context and what should we do when the window is resized. Let’s see how we initialize the context first.
glContext = canvas.getContext("webgl2");
glContext.viewportWidth = canvas.width;
glContext.viewportHeight = canvas.height;
To get a WebGL2 context you only have to call the getContext function in the canvas element with the webgl2 identifier. After that, we set the viewport size to that of the canvas element. Do you remember that I said before that WebGL has small quirk regarding the canvas size it’s drawn on? That’s because one thing is the canvas size (the number of pixels the canvas occupies) and the other one the viewport size (the number of pixels WebGL draws). That means that even if we define a 300×300 canvas, if the viewport size is set to 150×150, the pixels inside the canvas will appear 4 times as big, causing what’s called as upsampling. If we inverse the situation and define a 300×300 canvas but set the viewport size to 600×600, the rendered pixels will be 1/4 times as big, causing what’s called downsampling. To better understand what happens you can take a look at the WebGL2 fundamentals article on resizing the canvas.
Note that as of August 21 2017, the WebGL2 context is available in Firefox 51, Chrome 58 and Opera 46. You can find which browser versions support WebGL2 here.
The last missing piece is what to do when the window is resized. Take a look at the resize function but for now don’t bother with the displayWidth and displayHeight computation. The interesting part is the following line:
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
What it does is to set the WebGL viewport resolution to the size of the canvas element where it’s drawn, effectively making a 1-to-1 mapping between WebGL pixels and canvas pixels.
So that’s all folks! Next time we’ll draw something on the screen.
Things you should try
- Change the clear color to a non-black color. How would you set the background to a red color? And to a grey one?
- Change the alpha value of the clear color to see how it all behaves inside a browser window
WebGL2 function references