WebGL Beginner's Guide: If you're a JavaScript developer who wants to take the plunge into 3D web development, this is the perfect primer. From a basic understanding of WebGL structure to creating realistic 3D scenes, everything you need is here.

WebGL is a web-based 3D Graphics API. As such there is no installation needed. At the time this book was written, you will automatically have access to it as long as you have one of the following Internet web browsers:

To get an updated list of the Internet web browsers where WebGL is supported, please check on the Khronos Group web page following this link:

http://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation

You also need to make sure that your computer has a graphics card.

If you want to quickly check if your current configuration supports WebGL, please visit this link:

http://get.webgl.org/

WebGL is a 3D graphics library that enables modern Internet browsers to render 3D scenes in a standard and efficient manner. According to Wikipedia, rendering is the process of generating an image from a model by means of computer programs. As this is a process executed in a computer, there are different ways to produce such images.

The first distinction we need to make is whether we are using any special graphics hardware or not. We can talk of software-based rendering, for those cases where all the calculations required to render 3D scenes are performed using the computer's main processor, its CPU; on the other hand we use the term hardware-based rendering for those scenarios where there is a Graphics Processing Unit (GPU) performing 3D graphics computations in real time. From a technical point of view, hardware-based rendering is much more efficient than software-based rendering because there is dedicated hardware taking care of the operations. Contrastingly, a software-based rendering solution can be more pervasive due to the lack of hardware dependencies.

A second distinction we can make is whether or not the rendering process is happening locally or remotely. When the image that needs to be rendered is too complex, the render most likely will occur remotely. This is the case for 3D animated movies where dedicated servers with lots of hardware resources allow rendering intricate scenes. We called this server-based rendering . The opposite of this is when rendering occurs locally. We called this client-based rendering .

WebGL has a client-based rendering approach: the elements that make part of the 3D scene are usually downloaded from a server. However, all the processing required to obtain an image is performed locally using the client's graphics hardware.

In comparison with other technologies (such as Java 3D, Flash, and The Unity Web Player Plugin), WebGL presents several advantages:

As in any 3D graphics library, in WebGL, you need certain components to be present to create a 3D scene. These fundamental elements will be covered in the first four chapters of the book. Starting from Chapter 5, Action, we will cover elements that are not required to have a working 3D scene such as colors and textures and then later on we will move to more advanced topics.

The components we are referring to are as follows:

This chapter will cover the first element of our list—the canvas. We will see in the coming sections how to create a canvas and how to set up a WebGL context.

Let's create a web page and add an HTML5 canvas. A canvas is a rectangular element in your web page where your 3D scene will be rendered.

A WebGL context is a handle (more strictly a JavaScript object) through which we can access all the WebGL functions and attributes. These constitute WebGL's Application Program Interface (API).

We are going to create a JavaScript function that will check whether a WebGL context can be obtained for the canvas or not. Unlike other JavaScript libraries that need to be downloaded and included in your projects to work, WebGL is already in your browser. In other words, if you are using one of the supported browsers, you don't need to install or include any library.

We are going to modify the previous example to add a JavaScript function that is going to check the WebGL availability in your browser (trying to get a handle). This function is going to be called when the page is loaded. For this, we will use the standard DOM onLoad event.

var names = ["webgl", 
             "experimental-webgl", 
             "webkit-3d", 
             "moz-webgl"];
   
for (var i = 0; i < names.length; ++i) {
       try {
          gl = canvas.getContext(names[i]);
       } 
       catch(e) {}
       if (gl) break;
}

A WebGL context can be understood as a state machine: once you modify any of its attributes, that modification is permanent until you modify that attribute again. At any point you can query the state of these attributes and so you can determine the current state of your WebGL context. Let's analyze this behavior with an example.

In this example, we are going to learn to modify the color that we use to clear the canvas:

So far we have seen how to set up a canvas and how to obtain a WebGL context; the next step is to discuss objects, lights, and cameras. However, why should we wait to see what WebGL can do? In this section, we will have a glance at what a WebGL scene look like.

Once you finish reading the book you will be able to create scenes like the one we are going to play with next. This scene shows one of the cars from the book's virtual car showroom.

In this chapter, we have looked at the four basic elements that are always present in any WebGL application: canvas, objects, lights, and camera.

We have learned how to add an HTML5 canvas to our web page and how to set its ID, width, and height. After that, we have included the code to create a WebGL context. We have seen that WebGL works as a state machine and as such, we can query any of its variables using the getParameter function.

In the next chapter we will learn how to define, load, and render 3D objects into a WebGL scene.