Hello World, WebGL

As we all know, WebGL is a hot topic these days. Game engines like Unity and Unreal plan to or are already exported to WebGL. What is WebGL, you ask? For an official explanation, WebGL is a web standard developed by the Khronos group, which has created standards for OpenGL and OpenGL ES. WebGL is a Javascript API that allow developers to code graphics directly on the web without using any plugins. What does that mean? It means you only need to develop your graphic software once, and it can deploy across all platforms seamlessly, including MacOS, Windows, Android and iOS. In addition, IE11 and iOS8 began support for WebGL, and Android4.4 and iOS8 also support WebView in your own app. The WebGL API is based on OpenGL ES 2.0 and runs on the html5 <canvas> element.

Today, we are going to get our feet wet in WebGL to see how we could write a Hello World. Unlike other hello world programs which literally print a hello world on screen, in the graphics world, our hello world is creating a triangle.


Let start with the html. The html is very simple. Declare a canvas element and assign an id to it.


Now, lets move to the second part to how our we are going to use this canvas to render an triangle. First, we need to get the canvas element in JavaScript and let the browser know that we are going to use WebGL. Use the canvas to get WebGL context. If you are getting a WebGL failure, that means your browser doesn’t support the WebGL yet, and you probably should change your browser style. Here is the code to do that. You could also test your browser on http://get.webgl.org/ to see if it supports WebGL.


After we get WebGL enabled on our browser, the real part begins. In OpenGL/WebGL there is very critical concept called the shader. There are two kinds of shaders we could control in WebGL. One is the vertex shader and the other one is the fragment shader. This two shaders fit into the beginning and the end of the render pipeline of WebGL. The vertex shader is how we control each vertex in our application. The fragment shader allows us to control the color output on the screen for each pixel. For example, if the resolution of a screen is 1920x1080, then there are 2073600 pixels needs to be draw for every 16.67ms(for keeping our application at 60 fps). What can draw that quickly? That’s why we need the GPU. Most GPUs have hundreds of cores, which allows them to focus on calculation, although their computation abilities are not as good as the CPU. When you are writing shaders, you are actually writing instructions to tell the GPU how to deal with each pixel on the screen. That is one of coolest thing of WebGL!

The next part shows us how to initialize those shaders. The first one is the fragment shader. Here the fragment shader outputs only a single color. The second one is vertex shader, which does the MVP(model view projection matrix) transformation. Basically, the idea of MVP transformation is to transform the vertex for a local world to a projection space. The first two parts are all written in shader language. If you are familiar with C/C++, you don’t need to learn that. The third part section describes how we are going to use these two shaders in Javascript. Notice that there are several location functions. These location functions let us to bind the variables that we need to pass to the shaders.


After we initialize those two shaders, we can start to tell WebGL what we need to draw on the screen. We need to create a buffer first, which stores our vertices positions, along with other information for drawing. This data is used when WebGL issues a request to draw.

Draw Call

One last thing we need to do is actually draw our lovely triangle onto the screen. First, we need to tell WebGL how big the window will be. We use the gl.veiwport() method to do this. Then we create our projection and model view matrices. After that, we pass our position, projection matrix, and model-view matrix to the shader. Finally, we call the gl.drawArrays() method to draw our triangle.

Here is the main step of WebGL calls.


Then you will see something like this. The triangle we just made is Social Tables pink!

Source code