6.8 - Chaining Transformations - Adding a Forearm¶

Forearm Model

The previous lesson demonstrated the initialization and use of matrix transforms. This lesson will demonstrate how to chain transforms together to produce complex motion.

A Robot Arm - The forearm¶

The previous demo rendered an object that represents the base of a robot arm. Let’s add a “forearm” linkage to the base. The forearm will pivot about the red pin in the base. For the forearm to pivot, its axis of rotation needs to be at the origin, so we design the model in Blender and place the position where the red pin will go through the forearm at the origin. This will be true of all the models you create. You design them so that they can be easily scaled and rotated about their local origin. Then the models can be moved to their desired location in a scene.

For the forearm, we want it to pivot about the red pin in the base. Since rotation is always about an axis, the rotation needs to come first. Then the arm can be moved to the location of the pin. Using a right-to-left ordering of the transformations, we have:

modelTransform
=translateToPin
*rotateForearm
Eq1

But wait. The base is spinning. So we can’t simply move the forearm to the base. The same rotation that is happening to the base needs to happen to the forearm. So we apply the base rotation to the forearm as well, but after it has been rotated and translated. So our modelTransform looks like this:

modelTransform
=baseRotation
*translateToPin
*rotateForearm
Eq2

WebGL Program Example¶

The WebGL program below is a modified version of the code from the previous lesson. It adds a forearm model to the robot arm. We need two new transform matrices to manipulate the forearm. One transform will rotate the arm about the base’s pin. The rotation will possibly change on each new frame, so this matrix will be created in the initialization code but assigned its value in the frame rendering function. The translation matrix can be create and assigned its value once, since the distance to the pivot pin is constant and never changes. Study the example code and then review the code description below. If you want to experiment, the robot_forearm_scene.js code is modifiable.

Show: Code Canvas Run Info

robot_forearm_scene.js

/**
 * robot_base_scene.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";

//-------------------------------------------------------------------------
/**
 * Initialize and render a scene.
 * @param id {string} The id of the webglinteractive directive
 * @param download {SceneDownload} An instance of the SceneDownload class
 * @param vshaders_dictionary {object} A dictionary of vertex shaders.
 * @param fshaders_dictionary {object} A dictionary of fragment shaders.
 * @param models {object} A dictionary of models.
 * @constructor
 */
window.RobotForearmScene = function (id, download, vshaders_dictionary,
                                  fshaders_dictionary, models) {

// Private variables
  let self = this; // Store a local reference to the new object.

let out = download.out;
  let events;
  let my_canvas;

let gl = null;
  let program = null;
  let base_model;
  let base_gpu;
  let forearm_model;
  let forearm_gpu;

let matrix = new GlMatrix4x4();
  let transform = matrix.create();
  let camera = matrix.create();
  let projection;
  let base_y_rotate = matrix.create();
  let forearm_rotate = matrix.create();
  let forearm_translate = matrix.create();

// Public variables that will be changed by event handlers or that
  // the event handlers need access to.
  self.base_y_angle = 0.0;
  self.forearm_angle = 0.0;
  self.animate_active = true;
  self.out = out;

//-----------------------------------------------------------------------
  // Public function to render the scene.
  self.render = function () {

// The base is being rotated by the animation callback so the rotation
    // about the y axis must be calculated on every frame.
    matrix.rotate(base_y_rotate, self.base_y_angle, 0, 1, 0);

// Combine the transforms into a single transformation
    matrix.multiplySeries(transform, projection, camera, base_y_rotate);

// Render the base
    base_model.render(transform);

// Set the rotation matrix for the forearm; rotate about the Z axis
    matrix.rotate(forearm_rotate, self.forearm_angle, 0, 0, 1);

// Calculate the transform for the forearm
    matrix.multiplySeries(transform, projection, camera, base_y_rotate,
      forearm_translate, forearm_rotate);

// Draw the forearm model
    forearm_model.render(transform);
  };

//-----------------------------------------------------------------------
  // Public function to delete and reclaim all rendering objects.
  self.delete = function () {
    // Clean up shader programs
    gl.deleteShader(program.vShader);
    gl.deleteShader(program.fShader);
    gl.deleteProgram(program);
    program = null;

// Delete each model's buffer objects
    base_model.delete(gl);
    forearm_model.delete(gl);

// Disable any animation
    self.animate_active = false;

// Remove all event handlers
    events.removeAllEventHandlers();
    events = null;

// Release the GL graphics context
    gl = null;
  };

//-----------------------------------------------------------------------
  // Object constructor. One-time initialization of the scene.

// Get the rendering context for the canvas
  my_canvas = download.getCanvas(id + "_canvas");  // by convention
  if (my_canvas) {
    gl = download.getWebglContext(my_canvas);
  }
  if (!gl) {
    return;
  }

// Enable hidden-surface removal
  gl.enable(gl.DEPTH_TEST);

projection = matrix.createOrthographic(-10, 10, -5, 15, -10, 30);
  matrix.lookAt(camera, 0, 8, 16, 0, 2, 0, 0, 1, 0);

// Set up the rendering shader program and make it the active shader program
  program = download.createProgram(gl, vshaders_dictionary["color_per_vertex"], fshaders_dictionary["color_per_vertex"]);
  gl.useProgram(program);

// Create the Buffer Objects needed for this model and copy
  // the model data to the GPU.
  base_gpu = new ModelArraysGPU(gl, models.Base, out);
  base_model = new RenderColorPerVertex(gl, program, base_gpu, out);

forearm_gpu = new ModelArraysGPU(gl, models.Forearm, out);
  forearm_model = new RenderColorPerVertex(gl, program, forearm_gpu, out);

// Set the forearm_translate to a constant translation along the Y axis
  matrix.translate(forearm_translate, 0, 2, 0);

// Set up callbacks for the user and timer events
  events = new RobotForearmEvents(id, self);
  events.animate();
};

A robot arm with 1 linkage.

Forearm angle about Z axis: 0.00 :
-90.0 90.0
Animate

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Concerning the pre-processing actions that happen once when the constructor code is executed:

Lines	Description
Lines	Description
63-64	Two new transforms are created to manipulate the forearm.
63-64	Two new transforms are created to manipulate the forearm.
156	The translation for the forearm is set to a constant 2 units along Y.
156
69	A public class variable, `self.forearm_angle`, is created to store the angle of the forearm. It is made public so the HTML slider event handler can change its value.



152-153	Buffer objects in the GPU are created and the model data is copied to the GPU for the forearm model.

Each time the scene needs to rendered, the render function in lines 75-100 is called. This function is identical to the previous demo version with the following exceptions:

Lines	Description
Lines	Description
92	The rotation matrix for the forearm is set because the rotation of the forearm can change on each frame.


95-96	The transform for the forearm is calculated. Notice that the base rotation is included. Also notice the ordering of the transforms from right to left. The order of the transforms is critical.



99	The forearm model is rendered using the calculated transform.
99

Glossary¶

chaining transformations: A series of transformations that create complex motion.

Self Assessment¶

So the event object can access and modify it.
Correct. The event handler in the event object modifies the angle based on changes to the slider bar.
Because all variables in a class should be public by default.
Incorrect. Limiting public variables makes debugging easier.
So the forearm can be rotated by the render function.
Incorrect. All variables, both public and private, are accessible to the render function.
Because public variables make debugging easier.
Incorrect. Limiting public variables makes debugging easier.

projection

camera

A transformation matrix for vertices should always include a projection, camera, and model transforms.
Correct. Always include all three transformations for a vertex shader program transform.
It wasn't really necessary, but done for consistency.
Incorrect.
So the code would not be confusing.
Incorrect. The transformations are required.

The forearm does not rotate with the base about the Y axis.
Correct.
It works fine!
Incorrect.
The forearm does not rotate with the base about the Z axis.
Incorrect.
The forearm rotates in the opposite direction.
Incorrect.

Next Section - 6.9 - Chaining Transformations - Adding an Upper Arm