5.6 - Example 2: One Color per Triangle¶

We would like to have more control over the rendering of our model, where each face could possibly have a different color. This could be done using the previous version of our shading program by calling gl.drawArrays() to draw each triangle separately. The code would look something like this:

// Draw each triangle separately
for (start = 0, color_index = 0; start < number_vertices; start += 3, color_index += 1) {
  // Set the color of the triangle
  gl.uniform4fv(u_Color_location, colors[color_index]);

  // Draw a single triangle
  gl.drawArrays(gl.LINE_LOOP, start, 3);
}

However, if a model is composed of 100’s, or perhaps 1000’s of triangles, we would have a major speed problem. Every call in your JavaScript program to a WebGL command is a huge time sink. If we want the graphics to be fast, we need to draw an entire model using a single call to gl.drawArrays.

So we need to change things. And when we say change things, we mean change just about everything!

The Model¶

The data structures for your model data will impact how you write your other code. There are many possibilities, but let’s just store a color value with each of our “triangle” objects. A new version of our 3D model is shown in the following example. Please note the following changes:

Lines	Description
Lines	Description
38-42	A `Triangle2` object now stores a color.
38-42	A `Triangle2` object now stores a color.
72-75	Various color values are defined.
72-75	Various color values are defined.
78-81	A different color is passed to the creation of each `Triangle2` object.

Show: Code Canvas Run Info

simple_model_02.js

/**
 * simple_model_02.js, By Wayne Brown, Spring 2016
 */

/**
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 C. Wayne Brown
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

"use strict";

//-------------------------------------------------------------------------
/**
 * A triangle composed of 3 vertices and a color.
 * @param vertices Array The triangle's vertices.
 * @param color Array The triangle's color.
 * @constructor
  */
window.Triangle2 = function (vertices, color) {
  var self = this;
  self.vertices = vertices;
  self.color = color;
}

//-------------------------------------------------------------------------
/**
 * A simple model composed of an array of triangles.
 * @param name String The name of the model.
 * @constructor
 */
window.SimpleModel2 = function (name) {
  var self = this;
  self.name = name;
  self.triangles = [];
}

//-------------------------------------------------------------------------
/**
 * Create a Simple_model of 4 triangles that forms a pyramid.
 * @return SimpleModel
 */
window.CreatePyramid2 = function () {
  var vertices, triangle1, triangle2, triangle3, triangle4;
  var red, green, blue, purple;

// Vertex data
  vertices = [  [ 0.0, -0.25, -0.50],
                [ 0.0,  0.25,  0.00],
                [ 0.5, -0.25,  0.25],
                [-0.5, -0.25,  0.25] ];

// Colors in RGB
  red    = [1.0, 0.0, 0.0];
  green  = [0.0, 1.0, 0.0];
  blue   = [0.0, 0.0, 1.0];
  purple = [1.0, 0.0, 1.0];

// Create 4 triangles
  triangle1 = new Triangle2([vertices[2], vertices[1], vertices[3]], green);
  triangle2 = new Triangle2([vertices[3], vertices[1], vertices[0]], blue);
  triangle3 = new Triangle2([vertices[0], vertices[1], vertices[2]], red);
  triangle4 = new Triangle2([vertices[0], vertices[2], vertices[3]], purple);

// Create a model that is composed of 4 triangles
  var model = new SimpleModel2("simple");
  model.triangles = [ triangle1, triangle2, triangle3, triangle4 ];

return model;
}

A simple, 3D model where each triangle has a different color.

Animate

Shader errors, Shader warnings, Javascript info

Open this webgl program in a new tab or window

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). 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.

Show: Code Canvas Run Info

shader02.vert
shader02.frag

A simple, 3D model where each triangle has a different color.

Animate

Shader errors, Shader warnings, Javascript info

Open this webgl program in a new tab or window

Vertex Shader¶

Lines	Description
Lines	Description
7	There is only one variable that is constant for an execution of `gl.drawArrays()` for this shader, the `uniform` model transformation matrix, `u_Transform`.



9-10	Each vertex has two attributes: a location and a color.
9-10	Each vertex has two attributes: a location and a color.
12	Values are passed from a vertex shader to a fragment shader using the `varying` storage quantifier. This will make more sense later. For now, we need a ‘varying’ variable to pass a vertex’s color to the fragment shader. (Note that the vertex’s location is being passed to the frament shader through the `gl_Position` variable.





18	Convert the RGB color value for this vertex into an RGBA color value and pass it on to the fragment shader.

Fragment Shader¶

Lines	Description
Lines	Description
7	Declare a `varying` variable using the same name as the vertex shader. When the shaders are compiled and linked, this variable will contain the value set in the vertex shader.



10	Use the color of the vertex to set the color of every pixel inside the triangle that is being rendered.

The Buffer Object(s)¶

Since we have two attributes for each vertex, a location and a color, we will create two buffer objects. As we just discussed, each vertex must be assigned a color, even though this requires the same color value to repeated three times. Study the code in the simple_model_render_02.js file in the following example. 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.

Show: Code Canvas Run Info

simple_model_render_02.js

/**
 * simple_model_render_02.js, By Wayne Brown, Spring 2016
 */

"use strict";

//-------------------------------------------------------------------------
/**
 * Given a model description, create the buffer objects needed to render
 * the model. This is very closely tied to the shader implementations.
 * @param gl Object The WebGL state and API
 * @param program Object The shader program the will render the model.
 * @param model Simple_model The model data.
 * @param model_color The color of the model faces.
 * @param out Object Can display messages to the webpage.
 * @constructor
 */
window.SimpleModelRender_02 = function (gl, program, model, out) {

var self = this;

// Variables to remember so the model can be rendered.
  var number_triangles = 0;
  var triangles_vertex_buffer_id = null;
  var triangles_color_buffer_id = null;

// Shader variable locations
  var a_Vertex_location = null;
  var a_Color_location = null;
  var u_Transform_location = null;

//-----------------------------------------------------------------------
  /**
   * Create a Buffer Object in the GPU's memory and upload data into it.
   * @param gl Object The WebGL state and API
   * @param data TypeArray An array of data values.
   * @returns Number a unique ID for the Buffer Object
   * @private
   */
  function _createBufferObject(gl, data) {
    // Create a buffer object
    var buffer_id;

buffer_id = gl.createBuffer();
    if (!buffer_id) {
      out.displayError('Failed to create the buffer object for ' + model.name);
      return null;
    }

// Make the buffer object the active buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer_id);

// Upload the data for this buffer object to the GPU.
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

return buffer_id;
  }

//-----------------------------------------------------------------------
  /**
   * Using the model data, build a 1D array for the Buffer Object
   * @private
   */
  function _buildBufferObjectData() {
    var j, k, m, nv, numberVertices, triangle, vertex, all_vertices;
    var nc, all_colors;

// Create a 1D array that holds all of the  for the triangles
    if (model.triangles.length > 0) {
      number_triangles = model.triangles.length;
      numberVertices = number_triangles * 3;
      all_vertices = new Float32Array(numberVertices * 3);
      all_colors = new Float32Array(numberVertices * 3);

nv = 0;
      nc = 0;
      for (j = 0; j < model.triangles.length; j += 1) {
        triangle = model.triangles[j];

for (k = 0; k < 3; k += 1) {
          vertex = triangle.vertices[k];

// Store the vertices.
          for (m = 0; m < 3; m += 1, nv += 1) {
            all_vertices[nv] = vertex[m];
          }

// Store the colors.
          for (m = 0; m < 3; m += 1, nc += 1) {
            all_colors[nc] = triangle.color[m];
          }
        }
      }

triangles_vertex_buffer_id = _createBufferObject(gl, all_vertices);
      triangles_color_buffer_id = _createBufferObject(gl, all_colors);
    }

// Release the temporary vertex array so the memory can be reclaimed.
    all_vertices = null;
    all_colors = null;
  }

//-----------------------------------------------------------------------
  /**
   * Get the location of the shader variables in the shader program.
   * @private
   */
  function _getLocationOfShaderVariables() {
    // Get the location of the shader variables
    u_Transform_location = gl.getUniformLocation(program, 'u_Transform');

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

//-----------------------------------------------------------------------
  // These one-time tasks set up the rendering of the models.
  _buildBufferObjectData();
  _getLocationOfShaderVariables();

//-----------------------------------------------------------------------
  /**
   * Delete the Buffer Objects associated with this model.
   * @param gl Object The WebGL state and API.
   */
  self.delete = function (gl) {
    if (number_triangles > 0) {
      gl.deleteBuffer(triangles_vertex_buffer_id);
      gl.deleteBuffer(triangles_color_buffer_id);
    }
  };

//-----------------------------------------------------------------------
  /**
   * Render the model.
   * @param gl Object The WebGL state and API.
   * @param transform 4x4Matrix The transformation to apply to the model vertices.
   */
  self.render = function (gl, transform) {

// Set the transform for all the triangle vertices
    gl.uniformMatrix4fv(u_Transform_location, false, transform);

// Activate the model's vertex Buffer Object
    gl.bindBuffer(gl.ARRAY_BUFFER, triangles_vertex_buffer_id);

// Bind the vertices Buffer Object to the 'a_Vertex' shader variable
    gl.vertexAttribPointer(a_Vertex_location, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Vertex_location);

// Activate the model's color Buffer Object
    gl.bindBuffer(gl.ARRAY_BUFFER, triangles_color_buffer_id);

// Bind the color Buffer Object to the 'a_Color' shader variable
    gl.vertexAttribPointer(a_Color_location, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Color_location);

// Draw all of the triangles
    gl.drawArrays(gl.TRIANGLES, 0, number_triangles * 3);
  };

};

A simple, 3D model where each triangle has a different color.

Animate

Shader errors, Shader warnings, Javascript info

Open this webgl program in a new tab or window

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-138 of the demo code above get the shader variable locations:

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

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

Linking a Buffer Object to an Attribute Variable¶

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

// Activate the model's vertex Buffer Object
gl.bindBuffer(gl.ARRAY_BUFFER, triangles_vertex_buffer_id);

// Bind the vertices Buffer Object to the 'a_Vertex' shader variable
gl.vertexAttribPointer(a_Vertex_location, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Vertex_location);

// Activate the model's color Buffer Object
gl.bindBuffer(gl.ARRAY_BUFFER, triangles_color_buffer_id);

// Bind the color Buffer Object to the 'a_Color' shader variable
gl.vertexAttribPointer(a_Color_location, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(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(). Study the rendering function in the example above in lines 164-185.

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 with 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. It is all interdependent. This makes code development difficult because we had to make so many changes in so many different places. It is so important that you understand the “big picture” as you modify your rendering code.

Next Section - 5.7 - Example 3: One Color per Vertex