5.4 - A Simple Model

It will be easier to understand how rendering works if we start with the simplest example possible and gradually add complexity. This lesson defines JavaScript functions that create simple models from hard-coded values. You are strongly encouraged to modify the code and experiment.

A Simple 3D Model

Examine the code in the ‘simple_model.js’ file below. Note the following big ideas:

  • The Triangle function (line 36) is a class definition that contains no functionality. It will hold the data that defines one triangle. To start off simple, a Triangle object will hold an array of three vertices.
  • The SimpleModel function (line 46) is a class definition that contains no functionality. It will hold a “name” for a model and an array of triangle objects. A model, in its simplest form, is just a collection of triangles.
  • The CreatePyramid function (line 56) creates 4 triangles, an instance of the SimpleModel class called model, and sets its array of triangles to the 4 triangles of a pyramid.

EXPERIMENT!!!!

You can modify the JavaScript code and “re-start” the rendering to experiment. If you introduce errors in the code you can’t fix, simply reload the page to get a fresh, error-free version of the code. Thing you might try are:

  • Change the location of one or more vertices.
  • Change the model to only have one or two triangles.
  • Add additional vertices and more triangles to the model.
Show: Code   Canvas   Run Info
../_static/03_simple_pyramid/simple_pyramid.html

An example of using lines to outline the triangles that compose a model. Or render a "wireframe" view of a model.

Please use a browser that supports "canvas"
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)
Show: Process information    Warnings    Errors
Open this webgl program in a new tab or window

In the following sequence of lessons we will use this simple model to do the following:

  • Render the pyramid using a single color for the entire model.
  • Render the pyramid using a different color for each triangle face.
  • Render the pyramid using a different color for each vertex.
  • Render the pyramid using texture coordinates assigned to each vertex.

What you will discover as you go through these various examples is that your shader programs, buffer objects, and JavaScript rendering code is very interdependent. As you change one of them, they all must change!

A reminder about re-definable functions.

When you edit the JavaScript code above and “re-start” the rendering, the JavaScript functions must be redefined based on your changes. In order to do this the functions must be defined as properties of the global window object. This is why the function definitions look like:

window.SimpleModel = function (name) { ... }

A more typical syntax for function definitions would be:

function SimpleModel(name) { ... }

Self-Assessments

    Q-103: In the above WebGL program, how would changing line 73 to the following change the rendering?

    model.triangles = [ triangle1, triangle3 ];
  • The "pyramid" would contain only 2 triangles.
  • Correct.
  • The "pyramid" would be unchanged.
  • Incorrect.
  • The "pyramid" would have 3 triangles.
  • Incorrect.
  • The "pyramid" would have only 1 triangle.
  • Incorrect.
    Q-104: In the above WebGL program, which vertex would need to be modified to raise the apex of the pyramid (it’s highest point on the y axis) one unit higher? (Note that arrays are zero sub-scripted.)
  • Vertex 1
  • Correct.
  • Vertex 0
  • Incorrect. Vertex 0 is on the back, bottom of the pyramid.
  • Vertex 2
  • Incorrect. Vertex 2 is the front, right vertex.
  • Vertex 3
  • Incorrect. Vertex 3 is the front, left vertex.
    Q-105: In the above WebGL program, which component of vertex 1 would need to be modified to raise the apex of the pyramid (it’s highest point on the y axis) one unit higher? (Note that arrays are zero sub-scripted.)
  • [1]
  • Correct. Change the y component in the (x,y,z) vertex.
  • [0]
  • Incorrect. This is the x component in the (x,y,z) vertex.
  • [2]
  • Incorrect. This is the z component in the (x,y,z) vertex.
Next Section - 5.5 - Example 1: One Color per Model