6.9 - Chaining Transformations - Adding an Upper Arm

Robot upper arm

The previous lesson demonstrated a robot arm with one linkage. This lesson will demonstrate how to chain transforms together to add a second linkage.

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.

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:

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

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

modelTransform =baseRotation

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

Adding an upper arm to a robot base and forearm.

Please use a browser that supports "canvas"
-90.0 +90.0 Forearm angle: 0.00 :
-90.0 +90.0 Upper arm angle: 0.00 :
Shader errors, Shader warnings, Javascript info
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
62-63 Two new transforms are created to manipulate the upper arm.
67 The translation for the upper arm is set to a constant 8 units along Y.
78 A class variable is created to store the angle of the upper arm. It is made public so the HTML slider event handler can change its value.
169 Buffer objects in the GPU are created and the model data is copied to the GPU for the upper arm model.

Rendering a Single Frame

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

Lines Description
110 The rotation matrix for the upper arm is set because the rotation of the forearm can change on each frame.
113-114 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.
117 The upper arm model is rendered using the calculated transform.
Next Section - 6.10 - Chaining Transformations (Summary)