meHi there! I’m a software engineer at work hours, a math teacher some afternoons and a mountain lover whenever I can leave it all behind (less than I’d like to btw). I currently live in Berga, a small city on the Catalonian Pyrenees. I like all the things related to new technologies, I like learning something new everyday, I absolutely love being challenged about programming and I adore getting caught in the rain.

I studied at the Universitat Politècnica de Catalunya where I got a bachelor degree in Informatics Engineering and a master’s degree in computing. At the same time I was part of the Moving research group specialized in modeling, visualization, interaction and virtual reality. Later we founded our little business, Alter Sport, where we develop all kind of software related to sport in addition to managing a sport center in Berga, Alter Sport Gim and one in Moià, Moià Sport.

Although I studied Informatics Engineering because I loved everything related to virtual reality and videogames I discovered, while working at the Moving research group, that I loved having input on the thought processes that defined the software we made. Unfortunately I couldn’t give much input because a lot of the projects we worked on there were already completely defined. This made the idea of founding our own business, where we could define what we made and how we made it, more attractive. After 3 years giving all I can to Alter Sport where we are developing Alter Fitness, a cloud-based suite to manage sport centers, and Move the city, a web and mobile app platform to promote healthy lifestyles of a city’s inhabitants and it’s tourism, I decided, as a new year’s resolution, that 2015 is the year I get in shape regarding rendering technologies and virtual reality again. This blog is a pet project to give feedback on the progress I’m making at doing so and a place to write down the things I’m learning every day.

And now that you know who I am and why this blog exists, take your time, give it a read and leave me a comment if you like it!

Creating a WebGL2 canvas

1318

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

  1. Change the clear color to a non-black color. How would you set the background to a red color? And to a grey one?
  2. Change the alpha value of the clear color to see how it all behaves inside a browser window

WebGL2 function references



Leave a Comment

Your email address will not be published. Required fields are marked with *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">