Interactive Computer Graphics - Assignment 4

3D Transformations and Geometry in WebGL


Topics:



Create a WebGL web page that displays a transformed 3D colored cube.

Allow the user to transform the cube via key input.

Keystrokes should modify the specified transformation (scaling, translation and rotation).
All transformations are then composed and applied to the cube.

The cube should only move (incrementally) in response to a keystroke.
The cube is NOT animated.



  1. Cube geometry and color are defined by the example code in Lecture 8.

  2. Enable the depth test to ensure proper display.

  3. Create a menu that allows the user to specify the transformation to be modified. (SCALE, ROTATE, TRANSLATE)
    Apply all of the transformations in the order of scale, rotation, then translation, at each update.

  4. Define six keys for increasing and decreasing the X,Y,Z components of the current transformation.
    The cube should only be transformed with each key stroke.
    The scale factors should always be positive

  5. Define two keys for increasing and decreasing the delta added to the transformations.
    Each transformation should have its own delta value.
    The deltas should always be positive.

  6. Define a key for resetting all of the transformations and delta values.

  7. You may decide where to calculate the necessary transformation matrices, in the application or in the vertex shader.

  8. The transformation matrix should be applied to your vertices in the vertex shader.

  9. Do not apply camera or projection transformations.

  10. Your web page should display instructions below the WebGL canvas describing the functionality of your keyboard inputs.

Note that since you will be using the default orthographic projection, translation in the Z direction should have no visible effect on the size of your cube.
Of course if you transform the cube outside of the default view volume, it will be clipped.

Your cube should look something like the following.

Your program should look something like this video.

Grading Scheme

  1. Defining cube geometry and colors: 1 point
  2. Correct viewing: 1 point
  3. Correct rotations: 2 points
  4. Correct scaling: 2 points
  5. Correct translations: 2 points
  6. Mouse interaction: 1 point
  7. Keyboard interaction: 1 point

Last modified February 14, 2023.