5.5 - Example 1: One Color per Model¶

The Shader Programs¶

Examine the shader programs in the following demo and then study their descriptions below.

The Buffer Object(s)¶

The only attribute of the vertices that is different for every vertex is their location. Therefore, we need to store the vertex locations in a buffer object. Remember that a buffer object is a 1-dimensional, homogeneous array of floating point values. We need to gather up all of the vertices that define the triangles into a single array – and the order of the vertices matter. Before you create the array you need to decide how the triangles will be rendered. There are three choices: gl.TRIANGLES, gl.TRIANGLE_STRIP, or g.TRIANGLE_FAN. In addition, the vertices of each triangle must be in counter-clockwise order when looking at the front of the face. Our pyramid model can be rendered in a single ‘pass’ through the buffer object using either the gl.TRIANGLES or the gl.TRIANGLE_STRIP mode. Let’s keep it simple and use the gl.TRIANGLE mode for this example. (If you changed rendering modes, you would have to change the ordering of the vertices.)

Creating the buffer object is a pre-processing step which needs to happen only once. Let’s break the task into 2 parts:

• Get the triangle vertices into a 1D array in the correct order.
• Create a buffer object and upload the vertices into the GPU’s memory.

For the rendering of a 4 triangle pyramid in the example WebGL program below, the 1D array contains the following 36 floats. (Each three consecutive values represent one vertex and three consecutive vertices define one triangle.)

[0.5, -0.25, 0.25,   0,    0.25, 0,      -0.5, -0.25,  0.25,
-0.5, -0.25, 0.25,   0,    0.25, 0,       0,   -0.25, -0.5,
 0,   -0.25, -0.5,   0,    0.25, 0,       0.5, -0.25,  0.25,
 0,   -0.25, -0.5,   0.5, -0.25, 0.25,   -0.5, -0.25,  0.25]

Please study the code in the above example by comparing the code to the following code descriptions.

Access to Shader Variables¶

Before you can render a model you must set appropriate values for the uniform and attribute variables in your active shader program. But you have a problem. The shader program is compiled into a binary executable in the GPU. How can you pass data to the shader? This is a 2 step process:

• Pre-processing: Get the location of a variable in the shader program. This is equivalent to an index that could be used as an array lookup. The location of a variable in a shader program will never change, so the location only needs to be retrieved once.
• Use a variable’s location in a shader program to set its value.

To get a variable’s location in a shader program you use one of these two WebGL functions:

getUniformLocation(shader_program, string_variable_name); // returns a WebGLUniformLocation object
getAttribLocation(shader_program, string_variable_name); // returns an integer index

Examples of these functions can be found in lines 121-123 of the demo code above.

To set a uniform variable’s value in a shader program you use one of these WebGL functions:

void uniform[1234][fi](uint location, value1, value2, value3, ...);
void uniform[1234][fi]v(uint location, Array values);
void uniformMatrix[234]fv(uint location, bool transpose, Array matrix);

The characters in brackets, [234], represent the number of values to be set. The [fi] means you are setting either a floating point value, f, or an integer value, i. You can send values as discrete variables, or as multiple values in a single array. The functions that use arrays end in a v. Examples of setting the values of uniform shader program variables can be found at lines 150, and 164 in the above demo code.

Linking a Buffer Object to an Attribute Variable¶

An attribute variable pulls its values from an array of values stored in a buffer object. The positions in the array that are used is determined by the 2^nd and 3^rd parameters in your call to gl.drawArrays(mode, start, count). The start parameter gives the starting array index, while the count parameter specifies how many vertices to use. You must enable the use of ‘vertex arrays’ before you can access values from a buffer object. In the WebGL demo program above, linking the a_Vertex attribute variable in the shader program to its buffer object looks like this:

// Make a specific buffer, triangles_vertex_buffer_id, the "active buffer".
gl.bindBuffer(gl.ARRAY_BUFFER, triangles_vertex_buffer_id);

// Enable the linking of a specific attribute variable, a_Vertex_location, to a buffer object.
gl.enableVertexAttribArray(a_Vertex_location);

// Specify how the buffer object's data is organized.
gl.vertexAttribPointer(a_Vertex_location, 3, gl.FLOAT, false, 0, 0);

First, use the bindBuffer command to make a particular buffer object active. Second, enable getting data from buffer objects for a specific attribute using the enableVertexAttribArray function. Third, describe the organization of the values in the buffer object using a call to vertexAttribPointer. The 1^st parameter, a_Vertex_location, is the location in the compiled shader program of the variable that will be set from the buffer’s values. The parameter 3 tells the graphics pipeline that there are 3 floats per vertex. The parameter gl.FLOAT tells the graphics pipeline that all the values are floats. (We will discuss the last 3 parameters in a future lesson.)

Rendering¶

In the example WebGL program below, the gl.drawArrays(mode, start, count) command is potentially called 5 times. (See lines 167 and 179.) Each time it is called, the graphics pipeline is executed.

The shader program is written to render with a single color, u_Color. To render a red pyramid with black edges drawArrays() must be called at least twice: once when the color is set to red, and a second time after the color has been changed to black. Examine the demo code. Notice that the color is set to red in line 164 and then the triangles are rendered in line 167. Then the color is changed to black in line 175 (the edge_color), and then the same vertices in the buffer object are used to draw the triangle edges using the gl.LINE_LOOP mode. However, this can’t be done with a single draw command because the vertices are not organized that way in the buffer object. So we have to step through the buffer and change the starting index each time.

Summary¶

In the next few lessons we will modify our model, our shader programs, and our rendering code to produce more sophisticated graphics. It is important that you understand the concepts presented above before proceeding to the next lesson. Therefore, please study this lesson again before proceeding.

Self-Assessments¶