6.9 - Chaining Transformations - Adding an Upper Arm — Learn Computer Graphics using WebGL

A Robot Arm - The Upper Arm¶

The upper arm of our robot is created in Blender and its local origin is set at (0,0,0) so that it can be easily rotated. It’s axis of rotation is the Z axis. Examine the image of the upper arm to the right.

The upper arm will pivot about the end of the forearm. But rotation is about the origin. We need to rotate the upper arm about the origin, and then move it to the end of the forearm. But the forearm is rotating, as well as the base. So how do we get the upper arm to the right place? We use the transforms that are positioning the forearm! Here’s the transforms we need to apply to the upper arm, in this order:

Rotate it to a desired angle about its red pin.
Translate it to the end of the forearm.
Rotate it based on the forearm’s angle.
Translate it to the base’s red pin.
Rotate it according to the base’s rotation angle.

The transformation for the upper arm needs to be the following:

modelTransform
=baseRotation
*translateToPin
*rotateForearm
*translateToForearmEnd
*rotateUpperarm
Eq2

Hopefully you are seeing a pattern here!

Scene Rendering Initialization¶

The demo program below is a modified version of the code from the previous lesson. It adds an “upper arm” model to the robot arm. We need two new transform matrices to manipulate the upper arm. One transform will rotate the arm about it’s pivot 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 end of the forearm is a constant and never changes. Study the example code and then review the code description below. If you want to experiment, the demo code is modifiable.

Show: Code Canvas Run Info

robot_upperarm_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.RobotUpperarmScene = 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 upperarm_gpu;
  let upperarm_model;

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();
  let upperarm_rotate = matrix.create();
  let upperarm_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.upperarm_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);

// Set the rotation matrix for the upperarm; rotate about the Z axis
    matrix.rotate(upperarm_rotate, self.upperarm_angle, 0, 0, 1);

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

// Draw the forearm model
    upperarm_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);
    upperarm_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(-13, 13, -8, 18, -15, 35);
  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);

upperarm_gpu = new ModelArraysGPU(gl, models.Upperarm, out);
  upperarm_model = new RenderColorPerVertex(gl, program, upperarm_gpu, out);

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

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

 
/**
 * 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.

A robot arm with 2 linkages.

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

Open this webgl program in a new tab or window

Initialization
Rendering a single frame

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

Line(s)	Description
Line(s)	Description
67-68	Two new transforms are created to manipulate the upper arm.
67-68	Two new transforms are created to manipulate the upper arm.
175	The translation for the upper arm is set to a constant 8 units along Y.
175
74	A public class variable, `self.upperarm_angle`, is created to store the angle of the upper arm. It is made public so the HTML slider event handler can change its value.



170-171	Buffer objects in the GPU are created and the model data is copied to the GPU for the upper arm model.

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

Line(s)	Description
Line(s)	Description
107	The rotation matrix for the upper arm is set because the rotation of the forearm can change on each frame.


110-111	The transform for the upper arm is calculated. Notice that the base rotation and the forearm transforms are included. Also notice the ordering of the transforms from right to left. The order of the transforms is critical.




114	The upper arm model is rendered using the calculated transform.
114

Self Assessment¶

Q-149: The transformation matrix that transforms the upper arm is calculated using seven matrices. You could pass all seven matrices to a vertex shader and let the GPU calculate the combined transformation matrix. Besides, the GPU is very fast at computations! Why is this a bad idea? (Select all that apply.)

Q-150: You want to modify the example WebGL program to add a 3^rd linkage to the robot that has one degree of rotation from the end of the 2^nd linkage. How many new transformation matrices do you need to create?

6.9 - Chaining Transformations - Adding an Upper Arm¶

A Robot Arm - The Upper Arm¶

Scene Rendering Initialization¶

Self Assessment¶

Scratch ActiveCode