5.7 - Example 3: One Color per Vertex¶

This example will help you understand varying variables in shader programs, which allow the color of the pixels across a triangle’s face to “vary”. This allows all kinds of special effects, such as gradient colors and lighting effects. To demonstrate how varying variables work, we can keep the previous shader programs and just change our data. We will assign a different color to each vertex of a triangle.

The Model¶

In the WebGL program below, a Triangle3 object will contain 3 vertices, but each vertex is defined by a (x,y,z) location and a RGBA color.

Comments on simple_model3.js

Lines	Description
Lines	Description
60-64	The vertices are defined by two separate arrays, a `(x,y,z)` location and a `RGBA` color.


38	A `Triangle3` object now stores 3 vertices, but each vertex definition contains both a location and a color.

Show: Code Canvas Run Info

simple_model3.js

/**
 * simple_model3.js, By Wayne Brown, Fall 2017
 */

/**
 * 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 simple triangle composed of 3 vertices.
 * @param vertices {Array} An array of 2 arrays - first (x,y,z) location, then RGBA color.
 * @constructor
  */
window.Triangle3 = function (vertices) {
  let self = this;
  self.vertices = vertices;
};

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

/**------------------------------------------------------------------------
 * Create a Simple_model of 4 triangles that forms a pyramid.
 * @return SimpleModel
 */
window.CreatePyramid3 = function () {
  let vertices, triangle1, triangle2, triangle3, triangle4;

// Vertex data, a location (x,y,z) and a RGBA color for each
  vertices = [  [ [ 0.0, -0.25, -0.50], [1, 0, 0, 1] ],
                [ [ 0.0,  0.25,  0.00], [0, 1, 0, 1] ],
                [ [ 0.5, -0.25,  0.25], [0, 0, 1, 1] ],
                [ [-0.5, -0.25,  0.25], [1, 0, 1, 1] ]
             ];

// Create 4 triangles
  triangle1 = new Triangle3([vertices[2], vertices[1], vertices[3]]);
  triangle2 = new Triangle3([vertices[3], vertices[1], vertices[0]]);
  triangle3 = new Triangle3([vertices[0], vertices[1], vertices[2]]);
  triangle4 = new Triangle3([vertices[0], vertices[2], vertices[3]]);

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

return model;
};

 
/**
 * simple_model3.js, By Wayne Brown, Fall 2017
 */
​
/**
 * 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 simple triangle composed of 3 vertices.
 * @param vertices {Array} An array of 2 arrays - first (x,y,z) location, then RGBA color.
 * @constructor
  */
window.Triangle3 = function (vertices) {
  let self = this;

../_static/05_color_per_vertex/simple_pyramid3.html

Render the model with a different color assigned to each vertex.

Animate
Draw the edges of the triangles using a gl.LINE_LOOP
Render the model as a "wireframe"
Render the global axes (x:red, y:green, z:blue)

Average time to render the model is 0.00000 milliseconds.

Show: Process information Warnings Errors

Downloaded shader '../_static/shaders/uniform_color.vert', 1 of 5

Downloaded shader '../_static/shaders/uniform_color.frag', 2 of 5

Downloaded model '../_static/models/axes.obj', 3 of 5

Adding download of material file: axes.mtl

Downloaded shader '../_static/shaders/color_per_vertex.frag', 4 of 6

Downloaded shader '../_static/shaders/color_per_vertex.vert', 5 of 6

Open this webgl program in a new tab or window

The Shader Programs¶

Our shader programs remain unchanged from the previous example, but they are displayed below so that we can discuss them again.

Show: Code Canvas Run Info

color_per_vertex.vert
color_per_vertex.frag

 
// Vertex Shader
precision mediump int;
precision mediump float;
​
uniform mat4 u_Transform;
​
attribute vec3 a_Vertex;
attribute vec4 a_Color;
​
varying vec4 v_Color;
​
void main() {
  // Transform the location of the vertex
  gl_Position = u_Transform * vec4(a_Vertex, 1.0);
​
  // Set the color of the vertex from the attribute VOB
  v_Color = a_Color;
}
​

 
// Fragment shader program
precision mediump int;
precision mediump float;
​
varying vec4 v_Color;
​
void main() {
  gl_FragColor = v_Color;
}
​
​

../_static/05_color_per_vertex/simple_pyramid3.html

Render the model with a different color assigned to each vertex.

Animate
Draw the edges of the triangles using a gl.LINE_LOOP
Render the model as a "wireframe"
Render the global axes (x:red, y:green, z:blue)

Average time to render the model is 0.00000 milliseconds.

Show: Process information Warnings Errors

Downloaded shader '../_static/shaders/color_per_vertex.vert', 1 of 5

Downloaded shader '../_static/shaders/color_per_vertex.frag', 2 of 5

Downloaded shader '../_static/shaders/uniform_color.frag', 3 of 5

Downloaded model '../_static/models/axes.obj', 4 of 5

Adding download of material file: axes.mtl

Downloaded shader '../_static/shaders/uniform_color.vert', 5 of 6

Open this webgl program in a new tab or window

The previous explanations of vertex shaders said that a vertex shader’s job was to position a vertex and set the gl_Position output variable for that vertex. This is true, but it is only half the story. A vertex shader also prepares and passes data about the vertex to the fragment shader. Remember, a fragment is a collection of data related to an individual pixel. Well, any varying variable declared in a vertex shader will be passed to the fragment shader for that individual vertex. If we declared and calculated six varying variables in a vertex shader, all six values will be passed on to the fragment shader. Varying variables can be thought of as parameters to the fragment shader for that individual vertex.

Why are they call them varying variables? It is because they automatically change their value as they are applied to individual pixels on a triangle’s face (or along a line segment). Technically the values are linearly interpolated. The term interpolated means that given a starting and ending value, the values in-between are gradually changed to morph from the starting value into the ending value. For example, starting with 10 and ending in 22, with 3 intermediate values, a linear interpolation would produce the sequence [10, 13, 16, 19, 22]. The term linearly interpolated means that the difference between any two sequential values is the same.

The linear interpolation of varying variables happens automatically. You have no control over the interpolation and you can’t stop the interpolation. If you have a value that you want to remain constant over all the pixels in a triangle’s face, you must still declare it as a varying variable, but you can set the starting and ending values to be the same and the interpolation will calculate a value that doesn’t change. For example, interpolating from 10 to 10 will calculate 10 for every value in-between.

The Buffer Object(s)¶

In the WebGL program below each vertex has a distinct color. Therefore the data in the buffer object that contains the vertex colors must be created differently, as compared to the previous lesson. Study the code in the model_to_gpu.js file below, especially lines 80-109.

Show: Code Canvas Run Info

model_to_gpu3.js

/**
 * model_to_gpu.js, By Wayne Brown, Fall 2017
 */

"use strict";

let self = this;

// Variables to remember so the model can be rendered.
  self.number_triangles = 0;
  self.number_vertices = 0;
  self.triangles_vertex_buffer_id = null;
  self.triangles_color_buffer_id = 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
    let 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;
  }

// ----------------------------------------------------------------------
  // Convert the simple model into an Float32Array

let nv, nc, triangle, vertex, vertices, vertices3, color, colors4;

// Create a 1D array that holds all of the  for the triangles
  if (model.triangles.length > 0) {
    self.number_triangles = model.triangles.length;
    self.number_vertices = self.number_triangles * 3;
    vertices3 = new Float32Array(self.number_vertices * 3);
    colors4 = new Float32Array(self.number_vertices * 4);

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

for (let k = 0; k < 3; k += 1) {

vertex = vertices[k][0];
        for (let m = 0; m < 3; m += 1, nv += 1) {
          vertices3[nv] = vertex[m];
        }

color = vertices[k][1];
        for (let m = 0; m < 4; m += 1, nc += 1) {
          colors4[nc] = color[m];
        }
      }
    }

self.triangles_vertex_buffer_id = _createBufferObject(gl, vertices3);
    self.triangles_color_buffer_id = _createBufferObject(gl, colors4);
  }

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

 
/**
 * model_to_gpu.js, By Wayne Brown, Fall 2017
 */
​
/**
 * 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";
​
/**------------------------------------------------------------------------
 * Given a model description, create the buffer objects needed to render
 * the model. This is very closely tied to the shader implementations.
 * @param gl {WebGLRenderingContext} WebGL context
 * @param model {SimpleModel} The model data.
 * @param out {ConsoleMessages} Can display messages to the web page.
 * @constructor

../_static/05_color_per_vertex/simple_pyramid3.html

Render the model with a different color assigned to each vertex.

Animate
Draw the edges of the triangles using a gl.LINE_LOOP
Render the model as a "wireframe"
Render the global axes (x:red, y:green, z:blue)

Average time to render the model is 0.00000 milliseconds.

Show: Process information Warnings Errors

Downloaded shader '../_static/shaders/color_per_vertex.vert', 1 of 5

Downloaded shader '../_static/shaders/color_per_vertex.frag', 2 of 5

Downloaded model '../_static/models/axes.obj', 3 of 5

Adding download of material file: axes.mtl

Downloaded shader '../_static/shaders/uniform_color.vert', 4 of 6

Downloaded shader '../_static/shaders/uniform_color.frag', 5 of 6

Open this webgl program in a new tab or window

Access to Shader Variables¶

The shader program did not change, so there are no changes to the code that gets the shader variable locations.

Linking a Buffer Object to an Attribute Variable¶

Linking to the buffer objects remained unchanged.

Rendering¶

The rendering of the model remained unchanged. The rendering function in the example below is in lines 71-128.

Show: Code Canvas Run Info

simple_model_render3.js

/**
 * simple_model_render3.js, By Wayne Brown, Fall 2017
 */

"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 {WebGLRenderingContext} WebGL context
 * @param uniform_program {object} The shader program the will render the same
 *                               color for each vertex.
 * @param color_program {object} The shader program the will render a different
 *                               color for each vertex.
 * @param model {ModelToGpu3} The model data.
 * @param out {ConsoleMessages} Can display messages to the web page.
 * @constructor
 */
window.SimpleModelRender3 = function (gl, uniform_program, color_program,
                                      model, out) {

let self = this;

let edge_color = new Float32Array( [0.0, 0.0, 0.0, 1.0]); // BLACK

let number_renders = 0;
  let total_rending_time = 0;
  self.average_render_time = 0;

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

/**----------------------------------------------------------------------
   * Render the model.
   * @param transform 4x4Matrix The transformation to apply to the model vertices.
   * @param draw_edges {boolean} If true, render the edges of the triangles.
   * @param wireframe {boolean} If true, render the edges of the triangles.
   */
  self.render = function (transform, draw_edges, wireframe) {

let start_time, end_time;

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // 1. Render the triangles:

if (! wireframe) {
      gl.useProgram(color_program);

start_time = performance.now();

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

// Activate and attach the model's vertex Buffer Object
      gl.bindBuffer(gl.ARRAY_BUFFER, model.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, model.triangles_color_buffer_id);
      gl.vertexAttribPointer(color_program.a_Color_location, 4, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(color_program.a_Color_location);

// Draw all the triangles
      gl.drawArrays(gl.TRIANGLES, 0, model.number_vertices);

end_time = performance.now();
      number_renders += 1;
      total_rending_time += end_time - start_time;
      self.average_render_time = total_rending_time / number_renders;
    }

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // 2. Render the edges around each triangle:

if (wireframe || draw_edges) {
      gl.useProgram(uniform_program);

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

// Set the color for all of the edges
      gl.uniform4fv(uniform_program.u_Color_location, edge_color);

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

// Draw a line_loop around each of the triangles
      for (let j = 0, start = 0; j < model.number_triangles; j += 1, start += 3) {
        gl.drawArrays(gl.LINE_LOOP, start, 3);
      }
    }

};

//-----------------------------------------------------------------------
  // Constructor: Get the location of the shader variables
  // Get the location of the shader variables for the uniform_program
  uniform_program.u_Transform_location = gl.getUniformLocation(uniform_program, 'u_Transform');
  uniform_program.u_Color_location     = gl.getUniformLocation(uniform_program, 'u_Color');

uniform_program.a_Vertex_location    = gl.getAttribLocation(uniform_program, 'a_Vertex');

// 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');

};

 
/**
 * simple_model_render3.js, By Wayne Brown, Fall 2017
 */
​
/**
 * 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";
​
/**------------------------------------------------------------------------
 * Given a model description, create the buffer objects needed to render
 * the model. This is very closely tied to the shader implementations.
 * @param gl {WebGLRenderingContext} WebGL context
 * @param uniform_program {object} The shader program the will render the same
 *                               color for each vertex.
 * @param color_program {object} The shader program the will render a different

../_static/05_color_per_vertex/simple_pyramid3.html

Render the model with a different color assigned to each vertex.

Animate
Draw the edges of the triangles using a gl.LINE_LOOP
Render the model as a "wireframe"
Render the global axes (x:red, y:green, z:blue)

Average time to render the model is 0.00000 milliseconds.

Show: Process information Warnings Errors

Downloaded shader '../_static/shaders/color_per_vertex.vert', 1 of 5

Downloaded shader '../_static/shaders/color_per_vertex.frag', 2 of 5

Downloaded shader '../_static/shaders/uniform_color.vert', 3 of 5

Open this webgl program in a new tab or window

Summary¶

The colors of fragments that compose a point, line or triangle are assigned colors using interpolated values. The values calculated at the vertices are the starting and ending values used for the interpolation.

Self-Assessments¶

Q-112: A varying variable in a shader program is … (Select all that apply.)

A. a color value.
B. a value that is automatically passed from the vertex shader to the fragment shader.
C. a value that never changes; a constant.
D. a value that is automatically interpolated from its starting to ending value.

Q-113: Which of the following are valid linear interpolations between 10 and 20? (Select all that apply.)

A. [10, 11, 13, 15, 18, 19, 20]
B. [10, 12, 14, 16, 18, 20]
C. [10, 14, 16, 20]
D. [10, 15, 20]

Next Section - 5.8 - Example 4: Textures

5.7 - Example 3: One Color per Vertex¶

The Model¶

The Shader Programs¶

The Buffer Object(s)¶

Access to Shader Variables¶

Linking a Buffer Object to an Attribute Variable¶

Rendering¶

Summary¶

Self-Assessments¶

Scratch ActiveCode