Have you ever tried creating an airplane flying through the cloud with shades of lightning — and that too on the web browser?
Welcome to the world of WebGL, where you can create art using code. And, not only that, you can simulate it under conditions.
WebGL powers the current browsers to display 3D graphics on the browser. As a developer, you can choose WebGL to create powerful graphics using JavaScript. WebGL is also capable of taking advantage of the computer’s graphics rendering hardware. This means you can create full-blown 3D games on the web and use local hardware to run them!
Fascinating, right?!
That’s why, today, we are going to do an introduction to WebGL. Let’s get started.
What is WebGL?
WebGL offers a new standard for developers to create 3D graphics. It has a complete set of features so that you render without the need for any external plug-ins. It is also compatible with the latest web browsers.
To ensure compatibility, WebGL API conforms to the OpenGL ES 2.0. This also means that WebGL API can work in HTML5 canvas.
Also, WebGL falls under the HTML5 technologies family. With the web evolving every day, WebGL allows developers to create interesting and engaging web experiences.
Another important aspect that makes WebGL amazing is its low-level nature. This makes it possible to create almost everything that can be visualized. However, creating complex 3D works in WebGL is not easy and requires a lot of work.
In short, WebGL offers the following key ideas:
- WebGL is OpenGL ES 2.0 based
- WebGL is an API
- WebGL works well with other web content
- WebGL is cross-platform
- WebGL is royalty-free
- WebGL is aimed at dynamic web applications
WebGL Pre-requisite
To use WebGL, all you need is an editor and a browser that supports modern HTML. However, WebGL can be challenging for those who have never used JavaScript. This means a good knowledge of JavaScript will surely help you! On top of that, you may also want to learn the following:
- Understand how 3D works
- Get to know 3D Coordinate Systems
- Understand Mesh, Vertices, and Polygons
- Understand Lights, Textures, and Materials
- Matrices and Transforms
- Projects, Viewports, Perspective, and Cameras
- Shaders
Getting Started With WebGL
To get WebGL to work, you need to know what it encompasses. It is a drawing library that offers the ability to use powerful GPU hardware.
To do a successful WebGL render, you need to carry out the following steps:
- Make use of the canvas element
- Now gain canvas drawing context
- Viewport initialization
- Create buffers for data to be rendered
- Create matrices for transformation
- Create shaders for drawing algorithm implementation
- Initialize shaders using parameters
- Draw
Let’s look at the examples below to learn about each step.
Drawing Context and Canvas
To use WebGL, you need to create a context. The context needs to be a JavaScript DOM object so that it can interact with the WebGL API.
To create the context, we need to use the HTML canvas tag.
function initWebGL(canvas) {
var gs;
try
{
gs = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch (e)
{
var msg = "Sorry, the WebGL context is not created " + e.toString();
alert(msg);
throw Error(msg);
}
return gs;
}
We used try/catch to ensure that you get an error thrown out in case the browser doesn’t support WebGL.
Viewport
With the context created, it is now time to create a viewport. The viewport can be created by telling the browser the rectangular bounds of the drawing.
So, how do you create one?
To do so, you need to call the viewport() function on the context.
function initViewport(gl, canvas)
{
gs.viewport(0, 0, canvas.width, canvas.height);
}
Here you are free to set the canvas width and height, which you can pass through the parameters.
Getting the 3D world ready
If you did a 2D rendering before, then you may find the above similar. But then the similarities end here.
To draw a 3D object, you need to use a more primitive approach. For instance, you need to use buffers, typed arrays, and ArrayBuffer to store data. These vertex buffer data will help you create the structure as they store the x,y, and z-axis.
Let’s see an example below to see how the vertex data is stored. The example will store vertex data to render a square.
function createSquare(gs) {
var vertexBuffer;
vertexBuffer = gs.createBuffer();
gs.bindBuffer(gs.ARRAY_BUFFER, vertexBuffer);
var verts = [
.4, .4, 0.0,
-.4, .4, 0.0,
.4, -.4, 0.0,
-.4, -.4, 0.0
];
gs.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts),
gs.STATIC_DRAW);
var square = {buffer:vertexBuffer, vertSize:3, nVerts:4,
primtype:gs.TRIANGLE_STRIP};
return square;
}
Similarly, you need to work with matrices if you want to render a square. For this case, you need to create one transform matrix and the other as a projection matrix. The transform matrix is used to position the square in the 3D world using coordinates — in relation to the camera. The second projection matrix is used to convert the 3D space coordinates to 2D coordinates — used by the shader.
Shader
The last piece of the puzzle is the shader. Shaders are small programs that draw the pixels on the screen. As WebGL offers the bare minimum when it comes to drawing, it requires shaders to draw the instructions on the screen.
A shader comes in two parts — fragment shader and vertex shader where each one of them has its own responsibilities. For instance, the vertex shader transforms object coordinates into the 2D display. On the other hand, fragment shader takes care of the pixel color when it interacts with different elements within the world.
Is WebGL for you?
WebGL is a lightweight package that lets you take control of your creativity. However, there is an inherent difficulty to it. As it is a bare minimum package where developers need to do a lot more to get realistic results. For instance, they might need to build display lists, scene graphs, object models, and so on. All of these means a much higher learning curve.
However, some interesting open-source code libraries are built on top of WebGL. These libraries take the brunt of the work and give you interesting functions so that you do not have to the heavy lifting. This makes development a fun activity.
Three.js is an interesting WebGL library. If you go to their official webpage, you will find some amazing projects!
So, is it for you?
If you are a developer looking to learn 3D or a 3D artist trying to bring his creations to the web, WebGL is for you.
So, what are you going to build with WebGL? Comment below and let us know.
