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 handles geometry in a standard way, independently of the complexity and number of points that surfaces can have. There are two data types that are fundamental to represent the geometry of any 3D object: vertices and indices.

Vertices are the points that define the corners of 3D objects. Each vertex is represented by three floating-point numbers that correspond to the x, y, and z coordinates of the vertex. Unlike its cousin, OpenGL, WebGL does not provide API methods to pass independent vertices to the rendering pipeline, therefore we need to write all of our vertices in a JavaScript array and then construct a WebGL vertex buffer with it.

Indices are numeric labels for the vertices in a given 3D scene. Indices allow us to tell WebGL how to connect vertices in order to produce a surface. Just like with vertices, indices are stored in a JavaScript array and then they are passed along to WebGL's rendering pipeline using a WebGL index buffer.

Here we will see a simplified version of WebGL's rendering pipeline. In subsequent chapters, we will discuss the pipeline in more detail.

Let's take a moment to describe every element separately.

The following are the steps that we will follow in this section to render an object in WebGL:

Defining a geometry using JavaScript arrays

Let's see what we need to do to create a trapezoid. We need two JavaScript arrays: one for the vertices and one for the indices.

As you can see from the previous screenshot, we have placed the coordinates sequentially in the vertex array and then we have indicated in the index array how these coordinates are used to draw the trapezoid. So, the first triangle is formed with the vertices having indices 0, 1, and 2; the second with the vertices having indices 1, 2, and 3; and finally, the third, with vertices having indices 2, 3, and 4. We will follow...

I guess you have been waiting to see how everything works together. Let's start with some code. Let's create a simple WebGL program to render a square.

Follow the given steps:

Let's revisit the signature of the drawElements function:

gl.drawElements(Mode, Count, Type, Offset)

The first parameter determines the type of primitives that we are rendering. In the following time for action section, we are going to see with examples the different rendering modes.

Follow the given steps:

There is some information about the state of the rendering pipeline that we can retrieve when we are dealing with buffers with the functions: getParameter, getBufferParameter, and isBuffer.

Just like we did in the previous chapter, we will use getParameter(parameter) where parameter can have the following values:

Also, we can enquire about the size and the usage of the currently-bound VBO and IBO using getBufferParameter(type, parameter) where type can have the following values:

And parameter can be:

Follow the given steps:

So far, we have rendered very simple objects. Now let's study a way to load the geometry (vertices and indices) from a file instead of declaring the vertices and the indices every time we call initBuffers. To achieve this, we will make asynchronous calls to the web server using AJAX. We will retrieve the file with our geometry from the web server and then we will use the built-in JSON parser to convert the context of our files into JavaScript objects. In our case, these objects will be the vertices and indices array.

Let's create a simple model: a 3D line. Here we will be focusing on how we do JSON encoding and decoding. Follow the given steps:

Follow the given steps:

In this chapter, we have discussed how WebGL renders geometry. Remember that there are two kinds of WebGL buffers that deal with geometry rendering: VBOs and IBOs.

WebGL's rendering pipeline describes how the WebGL buffers are used and passed in the form of attributes to be processed by the vertex shader. The vertex shader parallelizes vertex processing in the GPU. Vertices define the surface of the geometry that is going to be rendered. Every element on this surface is known as a fragment. These fragments are processed by the fragment shader. Fragment processing also occurs in parallel in the GPU. When all the fragments have been processed, the framebuffer, a two-dimensional array, contains the image that is then displayed on your screen.

WebGL works as a state machine. As such, properties referring to buffers are available and their values will be dependent on the buffer currently bound.

We also saw that JSON and AJAX are two JavaScript technologies that integrate really well with...