8.7 - Bezier Path Orientation¶

Consider a race car speeding around a race track. Not only is the car changing location, it is also changing orientation as it follows the race track. The speed of an object along a Bezier defined curve is a vector which has a magnitude and a direction. We can use the direction of the speed vector to control the orientation of an object as it follows the path.

Every object has a local coordinate system that is defined by three orthogonal axes. The speed vector of a Bezier parametric equation can be used to set one of the axes of a local coordinate system. To solve for the other two axes we need one more vector, which must be arbitrarily specified by an animator. Please note that this was also true of a virtual camera. To calculate a local coordinate system for a camera we made the animator specify which direction was “up”.

With reference to lesson 7.6, if we know the desired orientation and location of an object, the transformation matrix needed to place the object in the scene is straightforward: the local coordinate system axes become the first three columns, while the location fills in the fourth column like this:

ux
uy
uz
0
vx
vy
vz
0
nx
ny
nz
0
tx
ty
tz
1
Eq1

where the vector, <ux,uy,uz> is “to the right” of the object, the vector, <vx,vy,vz>, is pointing “up”, and the vector, <nx,ny,nz> is pointing away from the “front” of the object.

The following WebGL program modifies the orientation of a model based on the direction of the path’s speed vector. We arbitrarily align the speed vector with the n axis of the local coordinate system and specify that the “up direction” is in the y-axis direction. The local coordinate system is calculated by taking cross-products of these vectors to create three orthogonal axes. The location is calculated from the Bezier equation. Please experiment with the following WebGL program and study the code.

Show: Code Canvas Run Info

bezier_orientation.js
bezier_orientation_scene.js

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

/**------------------------------------------------------------------------
* Store and manipulate a path defined by 4 control points.
* @param control_points {Array} of GlPoint4 locations
* @param start_frame {number} the frame that starts the path animation
* @param end_frame {number} the frame that ends the path animation
* @constructor
*/
window.BezierOrientationPath = function (control_points, start_frame, end_frame) {

// Constructor
  let self = this;

// Objects needed for internal elements and calculations
  let P = new GlPoint4();
  let V = new GlVector3();

// The points that define the path
  let p0 = control_points[0];
  let p1 = control_points[1];
  let p2 = control_points[2];
  let p3 = control_points[3];

self.control_points = control_points;
  self.start_frame = start_frame;
  self.end_frame = end_frame;

// Scratch objects for calculations
  let p = P.create();  // an intermediate point along the path;

// Calculate speed and acceleration for display purposes
  let p1_temp = P.create();
  let p2_temp = P.create();
  self.path_points = null;
  self.speeds = null;
  self.accelerations = null;

// Vectors for calculating a speed vector
  let p0_p1 = V.create();
  let p1_p2 = V.create();
  let p2_p3 = V.create();
  let p0_p1_scaled = V.create();
  let p1_p2_scaled = V.create();
  let p2_p3_scaled = V.create();
  let speed_vector = V.create();

// Vectors for the object's local coordinate system
  let u = V.create();
  let v = V.create();
  let n = V.create();
  let up = V.create(0,1,0);

// Remember the initial vectors defined by the control points so
  // they can be scaled for the demo.
  self.p1_p0 = V.createFrom2Points(p0, p1);
  self.p3_p2 = V.createFrom2Points(p2, p3);

/**----------------------------------------------------------------------
   * Calculate an intermediate point along a straight path between P1 and P2.
   * @param p {GlPoint4} the result of the intermediate point calculation
   * @param frame {number} which frame of an animation
   */
  self.intermediatePoint = function (p, frame) {

let number_deltas, t, t0, t1, t2, t3;

if (frame <= self.start_frame) {
      P.copy(p, p0);
    } else if (frame >= self.end_frame) {
      P.copy(p, p3);
    } else {
      number_deltas = self.end_frame - self.start_frame;
      t = (frame - self.start_frame) / number_deltas;

t0 = Math.pow(1-t, 3);
      t1 = 3.0 * t * Math.pow(1-t, 2);
      t2 = 3.0 * Math.pow(t, 2) * (1-t);
      t3 = Math.pow(t, 3);

p[0] = t0 * p0[0] + t1 * p1[0] + t2 * p2[0] + t3 * p3[0];
      p[1] = t0 * p0[1] + t1 * p1[1] + t2 * p2[1] + t3 * p3[1];
      p[2] = t0 * p0[2] + t1 * p1[2] + t2 * p2[2] + t3 * p3[2];
    }
  };

/**----------------------------------------------------------------------
   * Calculate a local coordinate system based on the speed vector
   * and an arbitrary "up vector"
   * @param frame {number} which frame of an animation
   */
  self.calculateCoordinateSystem = function (frame) {

let number_deltas, t, t0, t1, t2;

if (frame <= self.start_frame) {
      t = 0.0;
    } else if (frame >= self.end_frame) {
      t = 1.0;
    } else {
      number_deltas = self.end_frame - self.start_frame;
      t = (frame - self.start_frame) / number_deltas;
    }

// Calculate the derivative, which gives the speed vector
    V.subtract(p0_p1, p1, p0);
    V.subtract(p1_p2, p2, p1);
    V.subtract(p2_p3, p3, p2);

// speed_vector = 3*[(1-t)^2(p1-p0) + 2(1-t)(t)(p2-p1) + (t^2)(p3-p2)]
    t0 = 3 * (1 - t) * (1 - t);
    t1 = 3 * 2 * (1 - t) * t;
    t2 = 3 * t * t;

V.scale(p0_p1_scaled, p0_p1, t0);
    V.scale(p1_p2_scaled, p1_p2, t1);
    V.scale(p2_p3_scaled, p2_p3, t2);

V.add(speed_vector, p0_p1_scaled, p1_p2_scaled);
    V.add(speed_vector, speed_vector, p2_p3_scaled);

V.copy(n, speed_vector);
    V.normalize(n);

V.crossProduct(u, up, n);
    V.crossProduct(v, n, u);
  };

/**----------------------------------------------------------------------
   * Calculate a transformation for the model along this path,
   * changing both the model's orientation and location.
   * @param m {Float32Array} the transform to fill in.
   */
  self.transform = function (m, frame) {

self.intermediatePoint(p, frame);       // results in p
    self.calculateCoordinateSystem(frame);  // results in u,v,n vectors

m[0] = u[0];  m[4] = v[0];  m[8]  = n[0]; m[12] = p[0];
    m[1] = u[1];  m[5] = v[1];  m[9]  = n[1]; m[13] = p[1];
    m[2] = u[2];  m[6] = v[2];  m[10] = n[2]; m[14] = p[2];
    m[3] = 0;     m[7] = 0;     m[11] = 0;    m[15] = 1;
  };

/**----------------------------------------------------------------------
   * Calculate the speed and acceleration along the path.
   * This is for display purposes only - it is not needed to animate the path.
   * @param frame_rate {number} the number of frames per second.
   */
  self.calculateActualSpeeds = function (frame_rate) {

let which_frame = self.start_frame;
    let time_between_frames = 1.0 / frame_rate;

// Calculate the speeds and accelerations for display purposes only
    let number_frames = self.end_frame - self.start_frame + 1;
    self.path_points   = new Array(number_frames);
    self.speeds        = new Array(number_frames);
    self.accelerations = new Array(number_frames);

self.intermediatePoint(p1_temp, which_frame);
    self.path_points[0] = P.createFrom(p1_temp);
    self.speeds[0] = 0;

for (let index = 1; index < number_frames; index++) {
      which_frame += 1;
      self.intermediatePoint(p2_temp, which_frame);
      self.path_points[index] = P.createFrom(p2_temp);
      self.speeds[index] = P.distanceBetween(p1_temp, p2_temp) / time_between_frames;
      P.copy(p1_temp, p2_temp);
    }

self.accelerations[0] = 0;
    for (let index = 1; index < number_frames; index++) {
      self.accelerations[index] = (self.speeds[index] - self.speeds[index-1])
        / time_between_frames;
    }
  };

};

/**
 * bezier_scene.js, By Wayne Brown, Fall 2017
 */

"use strict";

/** -----------------------------------------------------------------------
 * Create a WebGL 3D scene, store its state, and render its models.
 *
 * @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.BezierOrientationScene = function (id, download, vshaders_dictionary,
                                fshaders_dictionary, models) {

// Private variables
  let self = this;
  let my_canvas = null;

let gl = null;
  let program = null;
  let textx, texty, textz, cubex, cubey, cubez, cube_center;
  let textx_gpu, texty_gpu, textz_gpu, cubex_gpu, cubey_gpu,
      cubez_gpu, cube_center_gpu;

let x_axis_gpu, y_axis_gpu, z_axis_gpu;
  let x_axis, y_axis, z_axis;

let sphere, sphere_gpu;
  self.path_model = null;

let matrix = new window.GlMatrix4x4();
  let translate = matrix.create();
  let transform = matrix.create();
  let projection;
  let camera = matrix.create();
  let rotate_x_matrix = matrix.create();
  let rotate_y_matrix = matrix.create();
  let scale_axes = matrix.create();
  let base = matrix.create();
  let path_transform = matrix.create();

let point_translate = matrix.create();
  let point_scale = matrix.create();
  matrix.scale(point_scale, 0.1, 0.1, 0.1);

// Public variables that will possibly be used or changed by event handlers.
  self.angle_x = 0.0;
  self.angle_y = 0.0;
  self.out = download.out;
  self.current_frame = 0;

// The points that define the path
  let P = new GlPoint4();
  self.control_points = [ P.create(-5, 0,  0),
                          P.create(-5, 2,  5),
                          P.create( 5, 0, -5),
                          P.create( 5, 0,  0) ];
  self.path = new BezierOrientationPath(self.control_points, 30, 60);
  self.display_path = true;

//-----------------------------------------------------------------------
  function _renderCubes(transform) {
    textx.render(transform);
    texty.render(transform);
    textz.render(transform);
    cubex.render(transform);
    cubey.render(transform);
    cubez.render(transform);
    cube_center.render(transform);
  }

//-----------------------------------------------------------------------
  self.render = function () {

// Build individual transforms
    matrix.setIdentity(transform);
    matrix.rotate(rotate_x_matrix, self.angle_x, 1, 0, 0);
    matrix.rotate(rotate_y_matrix, self.angle_y, 0, 1, 0);
    matrix.multiplySeries(base, projection, camera, rotate_x_matrix, rotate_y_matrix);

// Render the cubes models
    self.path.transform(path_transform, self.current_frame);
    matrix.multiplySeries(transform, base, path_transform);
    _renderCubes(transform);

// Render the global axes
    matrix.multiplySeries(transform, base, scale_axes);
    x_axis.render(transform);
    y_axis.render(transform);
    z_axis.render(transform);

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the control points on the bezier path
    for (let j=0; j<4; j++) {
      matrix.translate(point_translate, self.path.control_points[j][0],
                                        self.path.control_points[j][1],
                                        self.path.control_points[j][2]);
      matrix.multiplySeries(transform, base, point_translate, point_scale);
      sphere.render(transform);
    }

//  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    // Render the bezier path
    if (self.display_path) {
      self.path_model.render(base);
    }
  };

//-----------------------------------------------------------------------
  self.delete = function () {

// Clean up shader programs
    gl.deleteShader(program.vShader);
    gl.deleteShader(program.fShader);
    gl.deleteProgram(program);

// Delete each model's VOB
    textx.delete(gl);
    texty.delete(gl);
    textz.delete(gl);
    cubex.delete(gl);
    cubey.delete(gl);
    cubez.delete(gl);
    cube_center.delete(gl);
    x_axis.delete(gl);
    y_axis.delete(gl);
    z_axis.delete(gl);

self.events.removeAllEventHandlers();
  };

//-----------------------------------------------------------------------
  // 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;
  }

// Set up the rendering program and set the state of webgl
  program = download.createProgram(gl, vshaders_dictionary["color_per_vertex"], fshaders_dictionary["color_per_vertex"]);

gl.useProgram(program);

gl.enable(gl.DEPTH_TEST);

gl.clearColor(0.98, 0.98, 0.98, 1.0);

projection = matrix.createPerspective(45.0, 1.0, 1.0, 100.0);
  matrix.lookAt(camera, 0, 0, 24, 0, 0, 0, 0, 1, 0);

// Create Vertex Object Buffers for the cubes models and
  // pre-processing for rendering.
  textx_gpu = new ModelArraysGPU(gl, models.textx, self.out);
  textx = new RenderColorPerVertex(gl, program, textx_gpu, self.out);

texty_gpu = new ModelArraysGPU(gl, models.texty, self.out);
  texty = new RenderColorPerVertex(gl, program, texty_gpu, self.out);

textz_gpu = new ModelArraysGPU(gl, models.textz, self.out);
  textz = new RenderColorPerVertex(gl, program, textz_gpu, self.out);

cubex_gpu = new ModelArraysGPU(gl, models.cubex, self.out);
  cubex = new RenderColorPerVertex(gl, program, cubex_gpu, self.out);

cubey_gpu = new ModelArraysGPU(gl, models.cubey, self.out);
  cubey = new RenderColorPerVertex(gl, program, cubey_gpu, self.out);

cubez_gpu = new ModelArraysGPU(gl, models.cubez, self.out);
  cubez = new RenderColorPerVertex(gl, program, cubez_gpu, self.out);

cube_center_gpu = new ModelArraysGPU(gl, models.cube_center, self.out);
  cube_center = new RenderColorPerVertex(gl, program, cube_center_gpu, self.out);

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  // Setup of models to render the global axes
  x_axis_gpu = new ModelArraysGPU(gl, models.x_axis, self.out);
  y_axis_gpu = new ModelArraysGPU(gl, models.y_axis, self.out);
  z_axis_gpu = new ModelArraysGPU(gl, models.z_axis, self.out);

x_axis = new RenderColorPerVertex(gl, program, x_axis_gpu, self.out);
  y_axis = new RenderColorPerVertex(gl, program, y_axis_gpu, self.out);
  z_axis = new RenderColorPerVertex(gl, program, z_axis_gpu, self.out);

// Set the scaling for the global axes.
  matrix.scale(scale_axes, 0.4, 0.4, 0.4);

// Create a small sphere to render the path control points
  sphere_gpu = new ModelArraysGPU(gl, models.Sphere, self.out);
  sphere = new RenderColorPerVertex(gl, program, sphere_gpu, self.out);

// Set up callbacks for user and timer events
  self.events = new BezierOrientationEvents(id, self);

self.path.calculateActualSpeeds(self.events.frame_rate);
  self.path_model = new PathModel(gl, program, self.path.path_points, [0,0,0,1]);
};

Use a parametric equation to calculate points along a path.
Intermediate points influence acceleration and deceleration.

Calculated Animation Properties:
speed : ---
acceleration : ---
frames per second : ---

Timing:
current frame 0 : 0 120
animation: start frame: end frame:

Control Points:
Show path
Scale <p1-p0> 1.0 : 0.0 3.0
---

Show: Process information Warnings Errors

Open this webgl program in a new tab or window

Summary

The first derivative of the Bezier equation produces a speed vector. This vector can be used to define a local coordinate system that aligns the animated model with the path of motion.

Glossary¶

Bezier parametric equation: A function of one variable, t, that calculates changes along a “path”.
Speed vector: The first derivative of an equation of motion. Speed always has a direction and a magnitude.

Self Assessment¶

u

v

n

u

relative to the object, to the right.
Correct.
relative to the object, up.
Incorrect. "Up" is in the v direction.
relative to the object, forward (away from the front).
Incorrect. "Forward" is in the n direction.

u

n

v

n x u (cross product of n and u)
Correct. Using the "right-hand-rule," align your thumb with n, your index finder with u, and your middle finder will point in the direction of v.
u x n (cross product of u and n)
Incorrect. This calculates -v because the order of the cross-product is wrong.
v x n (cross product of v and n)
Incorrect. You can't use v to calculate v.
u x v (cross product of u and v)
Incorrect. You can't use v to calculate v.

increase the number of frames used for the motion.
Correct. Speed is distance divided by time. Increasing the time lowers the speed.
adjust the intermediate control points.
Incorrect. This will change the speed and acceleration but also the path's location.
adjust the starting and ending control points.
Incorrect. This will change the speed and acceleration but also the path's location.
make the path non-linear.
Incorrect. Not relevant.

Next Section - 8.8 - Chained Bezier Paths