5.6 - Example 2: One Color per Triangle¶

The Model¶

To implement a different color for each triangle, let’s store a RGBA color value with each of our “triangle” objects. A new version of our 3D model is shown in the following WEBGL program example. Please note the following changes:

The Shader Programs¶

Our shader programs must change because each vertex of our model now has two attributes: a location, (x,y,z), and a color (r,g,b,a). Therefore, our vertex shader program has two attribute variables: a_Vertex and a_Color. Examine the shader programs in the following demo and then study their descriptions below.

The Buffer Object(s)¶

Since we have two attributes for each vertex, a location and a color, we will create two buffer objects. Since all data is “per-vertex”, each vertex must be assigned a color, even though this requires that the same color value be stored three times. Study the code in the model_to_gpu2.js file in the WebGL example below. Make sure you find where the data for the two buffer objects are collected and then the separate buffer objects are created in the GPU (lines 104 and 105).

Below is the data in the buffer objects for our pyramid model. Notice that the color values are repeated 3 times to make each vertex of a specific triangle be the same color.

// The vertex location array
[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]

// The color-per-vertex array
[ 1,0,0,1,  1,0,0,1,  1,0,0,1,
  0,1,0,1,  0,1,0,1,  0,1,0,1,
  0,0,1,1,  0,0,1,1,  0,0,1,1,
  1,0,1,1,  1,0,1,1,  1,0,1,1 ]

Access to Shader Variables¶

Since your variables have changed in the shader programs, you need to modify your rendering code to get the location of the shader variables. Lines 135-139 of the demo code below get the shader variable locations:

// Get the location of the shader variables for the color_program
color_program.u_Transform_location = gl.getUniformLocation(color_program, 'u_Transform');

color_program.a_Vertex_location    = gl.getAttribLocation(color_program, 'a_Vertex');
color_program.a_Color_location     = gl.getAttribLocation(color_program, 'a_Color');

A common convention in WebGL programs is to store the location of shader variables as properties of the “program” object. This is especially convenient if you have more than one shader program being used for rendering.

Linking a Buffer Object to an Attribute Variable¶

We now have two buffer objects to link variables to when we render the model. Lines 83-91 in the above demo performs the linkage:

// Activate and attach the model's vertex Buffer Object
gl.bindBuffer(gl.ARRAY_BUFFER, triangles_vertex_buffer_id);
gl.vertexAttribPointer(color_program.a_Vertex_location, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_program.a_Vertex_location);

// Activate and attach the model's color Buffer Object
gl.bindBuffer(gl.ARRAY_BUFFER, triangles_color_buffer_id);
gl.vertexAttribPointer(color_program.a_Color_location, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color_program.a_Color_location);

Notice that you have to make a buffer object active using the gl.bindBuffer() function before linking it to a variable with the gl.vertexAttribPointer() function.

Rendering¶

We can now render the entire model with a single call to gl.drawArrays() in line 95. Study the rendering function in the example above in lines 68-126.

It should be noted that we can no longer render the triangle edges as we did in the previous lesson. Why? The shader program now requires a color from a buffer object for each vertex. Using the shader program we have defined above, we could render the triangle edges by creating a 3^rd buffer object and repeating the color black for each vertex. We could then connect the a_Color variable to this new buffer and render the edges as we did in the previous lesson. This is very wasteful of memory. Another option would be to have two separate shader programs: draw the faces with one shader program, activate a different shader program, and then render the edges. There are trade-offs for both options.

You can change the active shader program like this:

gl.useProgram(program);

Changing your active shader program changes the rendering context, which takes time, which slows down rendering. Therefore, you should switch between shader programs as few times as possible.

Summary¶

To use a different color for each triangle of a model, we had to modify the model’s definition, the shader programs, the buffer objects, and the rendering code. All of this code is interdependent. This makes code development challenging because you have to make many changes in many different places before you can test and verify your code. Here is a partial list of things you might verify as you debug a rendering program:

• The shader program compiled and linked correctly.
• The location of all shader program variables were retrieved correctly.
• The data for an object buffer was created correctly.
• All object buffers were created correctly.
• The function that renders a model is called with the correct parameters.
• The rendering function assigns all uniform variables an appropriate value.
• The rendering function links all attribute variables to appropriate object buffers.
• The gl.drawArrays() command is being called with the appropriate parameters.

Self-Assessments¶