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 the same procedure for all possible geometries.

Once we have created the JavaScript arrays that define the vertices and indices for our geometry, the next step consists of creating the respective WebGL buffers. Let's see how this works with a different example. In this case, we have a simple square on the x-y plane (z coordinates are zero for all four vertices):

var vertices = [-50.0, 50.0, 0.0,
-50.0,-50.0, 0.0,
50.0,-50.0, 0.0,
50.0, 50.0, 0.0];/* our JavaScript vertex array */
var myBuffer = gl.createBuffer(); /*gl is our WebGL Context*/

In the previous chapter, you may remember that WebGL operates as a state machine. Now, when myBuffer is made the currently bound WebGL buffer, this means that any subsequent buffer operation will be executed on this buffer until it is unbound or another buffer is made the current one with a bound call. We bind a buffer with the following instruction:

gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer);

The first parameter is the type of buffer that we are creating. We have two options for this parameter:

In the previous example, we are creating the buffer for vertex coordinates; therefore, we use ARRAY_BUFFER. For indices, the type ELEMENT_ARRAY_BUFFER is used.

Once we have bound a buffer, we need to pass along its contents. We do this with the bufferData function:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);

In this example, the vertices variable is a JavaScript array that contains the vertex coordinates. WebGL does not accept JavaScript arrays directly as a parameter for the bufferData method. Instead, WebGL uses typed arrays, so that the buffer data can be processed in its native binary form with the objective of speeding up geometry processing performance.

The typed arrays used by WebGL are Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, UInt32Array, Float32Array, and Float64Array.

Finally, it is a good practice to unbind the buffer. We can achieve that by calling the following instruction:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

We will repeat the same calls described here for every WebGL buffer (VBO or IBO) that we will use.

Let's review what we have just learned with an example. We are going to code the initBuffers function to create the VBO and IBO for a cone. (You will find this function in the file named ch2_Cone.html):

var coneVBO = null; //Vertex Buffer Object
var coneIBO = null; //Index Buffer Object
function initBuffers() {
var vertices = []; //JavaScript Array that populates coneVBO
var indices = []; //JavaScript Array that populates coneIBO;
//Vertices that describe the geometry of a cone
vertices =[1.5, 0, 0,
-1.5, 1, 0,
-1.5, 0.809017, 0.587785,
-1.5, 0.309017, 0.951057,
-1.5, -0.309017, 0.951057,
-1.5, -0.809017, 0.587785,
-1.5, -1, 0.0,
-1.5, -0.809017, -0.587785,
-1.5, -0.309017, -0.951057,
-1.5, 0.309017, -0.951057,
-1.5, 0.809017, -0.587785];
//Indices that describe the geometry of a cone
indices = [0, 1, 2,
0, 2, 3,
0, 3, 4,
0, 4, 5,
0, 5, 6,
0, 6, 7,
0, 7, 8,
0, 8, 9,
0, 9, 10,
0, 10, 1];
coneVBO = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, coneVBO);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
coneIBO = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, coneIBO);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),
gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
}

If you want to see this scene in action, launch the file ch2_Cone.html in your HTML5 browser.

To summarize, for every buffer, we want to:

Once the VBOs have been created, we associate these buffers to vertex shader attributes. Each vertex shader attribute will refer to one and only one buffer, depending on the correspondence that is established, as shown in the following diagram:

We can achieve this by following these steps:

Let's take a look at the first step.

gl.bindBuffer(gl.ARRAY_BUFFER, myBuffer);

gl.vertexAttribPointer(Index,Size,Type,Norm,Stride,Offset);

Enabling the attribute

Finally, we just need to activate the vertex shader attribute. Following our example, we just need to add:

gl.enableVertexAttribArray (aVertexPosition);

The following diagram summarizes the mapping procedure:

Once we have defined our VBOs and we have mapped them to the corresponding vertex shader attributes, we are ready to render!

To do this, we use can use one of the two API functions: drawArrays or drawElements.

The drawArrays and drawElements functions

The functions drawArrays and drawElements are used for writing on the framebuffer.

drawArrays uses vertex data in the order in which it is defined in the buffer to create the geometry. In contrast, drawElements uses indices to access the vertex data buffers and create the geometry.

Both drawArrays and drawElements will only use enabled arrays. These are the vertex buffer objects that are mapped to active vertex shader attributes.

In our example, we only have one enabled array: the buffer that contains the vertex coordinates. However, in a more general scenario, we can have several enabled arrays. For instance, we can have arrays with information about vertex colors, vertex normals texture coordinates, and any other per-vertex data required by the application. In this case, each one of them would be mapped to an active vertex shader attribute.

Tip

Using several VBOs

In the next chapter, we will see how we use a vertex normal buffer in addition to vertex coordinates to create a lighting model for our geometry. In that scenario, we will have two active arrays: vertex coordinates and vertex normals.

Using drawArrays

We will call drawArrays when information about indices is not available. In most cases, drawArrays is used when the geometry is so simple that defining indices is an overkill; for instance, when we want to render a triangle or a rectangle. In that case, WebGL will create the geometry in the order in which the vertex coordinates are defined in the VBO. So if you have contiguous triangles (like in our trapezoid example), you will have to repeat these coordinates in the VBO.

If you need to repeat a lot of vertices to create geometry, probably drawArrays is not the best way to go. The more vertex data you duplicate, the more calls you will have on the vertex shader. This could reduce the overall application performance since the same vertices have to go through the pipeline several times. One for each time that they appear repeated in the respective VBO.

The signature for drawArrays is:

gl.drawArrays(Mode, First, Count)

Where:

• Mode: Represents the type of primitive that we are going to render. Possible values for mode are: gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN, and gl.TRIANGLES (more about this in the next section).
• First: Specifies the starting element in the enabled arrays.
• Count: The number of elements to be rendered.

Note

From the WebGL specification: "When drawArrays is called, it uses count sequential elements from each enabled array to construct a sequence of geometric primitives, beginning with the element first. Mode specifies what kinds of primitives are constructed and how the array elements construct those primitives."

Using drawElements

Unlike the previous case where no IBO was defined, drawElements allows us to use the IBO, to tell WebGL how to render the geometry. Remember that drawArrays uses VBOs. This means that the vertex shader will process repeated vertices as many times as they appear in the VBO. Contrastingly, drawElements uses indices. Therefore, vertices are processed just once, and can be used as many times as they are defined in the IBO. This feature reduces both the memory and processing required on the GPU.

Let's revisit the following diagram of this chapter:

When we use drawElements, we need at least two buffers: a VBO and an IBO. The vertex shader will get executed on each vertex in the VBO and then the rendering pipeline will assemble the geometry into triangles using the IBO.

Note

When using drawElements, you need to make sure that the corresponding IBO is currently bound.

The signature for drawElements is:

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

Where:

• Mode: Represents the type of primitive that we are going to render. Possible values for mode are POINTS, LINE_STRIP, LINE_LOOP, LINES, TRIANGLE_STRIP, TRIANGLE_FAN, and TRIANGLES (more about this later on).
• Count: Specifies the number of elements to be rendered.
• Type: Specifies the type of the values in indices. Must be UNSIGNED_BYTE or UNSIGNED_SHORT, as we are handling indices (integer numbers).
• Offset: Indicates which element in the buffer will be the starting point for rendering. It is usually the first element (zero value).

Note

WebGL inherits without any change this function from the OpenGL ES 2.0 specification. The following applies:

"When drawElements is called, it uses count sequential elements from an enabled array, starting at offset to construct a sequence of geometric primitives. Mode specifies what kinds of primitives are constructed and how the array elements construct these primitives. If more than one array is enabled, each is used."