5.7 - Example 3: One Color per Vertex

The Model¶

A Triangle3 object will contain 3 vertices and 3 colors. A new version of our 3D model is shown in the following example.

Show: Code Canvas Run Info

simple_model_03.js

/**
 * simple_model_03.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 colors Array An array of 3 color values.
 * @constructor
  */
window.Triangle3 = function (vertices, colors) {
  var self = this;
  self.vertices = vertices;
  self.colors = colors;
}

//-------------------------------------------------------------------------
/**
 * 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 SimpleModel2
 */
window.CreatePyramid3 = 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 Triangle3([vertices[2], vertices[1], vertices[3]],
                            [blue, green, purple]);
  triangle2 = new Triangle3([vertices[3], vertices[1], vertices[0]],
                            [purple, green, red]);
  triangle3 = new Triangle3([vertices[0], vertices[1], vertices[2]],
                            [red, green, blue]);
  triangle4 = new Triangle3([vertices[0], vertices[2], vertices[3]],
                            [red, blue, 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 vertex 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 remain unchanged from the previous example, but they are displayed below so that we can discuss them again.

Show: Code Canvas Run Info

shader02.vert
shader02.frag

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

Animate

Shader errors, Shader warnings, Javascript info

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. 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, an interpolation would produce 13, 16, and 19. 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, 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)¶

The data in the buffer object for the vertex colors changes for this example. Study the code in the simple_model_render_03.js file in the following example.

Show: Code Canvas Run Info

simple_model_render_03.js

/**
 * learn_webgl_vob_model_01.js, By Wayne Brown, Fall 2015
 *
 * Given
 *   - a model definition as defined in learn_webgl_model_01.js, and
 *   - specific shader programs: vShader01.vert, fShader01.frag
 * Perform the following tasks:
 *   1) Build appropriate Vertex Object Buffers (VOB's)
 *   2) Create GPU VOB's for the data and copy the data into the buffers.
 *   3) Render the VOB's
 */

/**
 * 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 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_03 = 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, color;

// 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];
          color = triangle.colors[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] = 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);
    }
  };

//-----------------------------------------------------------------------
  /**
   * 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 vertex 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¶

The shader program did not change, so there is not changes to getting 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 above in lines 172-193.

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.

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¶