Project 2 — Interaction

Overview

The purpose of Project 2 is to exercise the use of transformation for interactive viewing. As in project 1, we render some geometry, However, the geometry data is provided this time, it's 3D instead of 2D, and you'll be able to click with the mouse to spin it around and view it from all sides.

Specifics

• Once again, include the WebGL utility libraries in your project.

  • webgl-utils.js
  • webgl-debug.js
  • cuon-utils.js
  • cuon-matrix.js

• Create the following JavaScript and HTML files, following interaction template in the course notes.

  • prog2.js
  • prog2.html

• This application will take a table of vertices and a table of triangles in JSON format. These define a simple cube. Adding this file to your project and source it in your HTML:

  • cube.js

• Allow interaction as follows:

  • Click and drag in the canvas to rotate the model relatively.

    • Click and drag vertically to rotate the mesh about the X axis.
    • Click and drag horizontally to rotate the mesh about the Y axis.

• Use transformation matrices where needed:

  • Use a perspective projection matrix to produce the 3D effect.
  • Use model rotation and translation matrices to produce the interaction.

• As always, format your code consistently and remove any dead code.

• Add the files you've created to the project's working copy and commit them to the local repository. Push these changes from your local repository to your remote repository on classes.csc.lsu.edu before the deadline. This procedure is documented here.