5.7 - Example 3: One Color per Vertex — Learn Computer Graphics using WebGL

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.

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;
};

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

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.

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.

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.

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¶

varying

a value that is automatically interpolated from its starting to ending value.
Correct. The values assigned by the vertex shader at the vertices are the starting and ending values.
a value that is automatically passed from the vertex shader to the fragment shader.
Correct. "Varying" variables are always available to the fragment shader.
a color value.
Incorrect. In the examples in this lesson the varying variable was a color, but any type of value can be set up to be "varying".
a value that never changes; a constant.
Incorrect. It's called "varying" for a reason.

[10, 15, 20]
Correct. The difference between each value is 5.
[10, 12, 14, 16, 18, 20]
Correct. The difference between each value is 2.
[10, 11, 13, 15, 18, 19, 20]
Incorrect. The difference between values is not a constant.
[10, 14, 16, 20]
Incorrect. The difference between values is not a constant.

5.7 - Example 3: One Color per Vertex¶