Transformations
Write an interactive WebGL program that stores points and colors in GPU memory once, then uses matrix transformations to modify the scene in various ways.
Requirements
1. Store the vertices and colors in GPU memory.
2. Use the built-in hidden-surface removal.
3. Use matrix transformations to perform the following tasks:
a. Perspective projection - farther objects should appear smaller than closer objects.
b. Translation (displacement to a different location)
c. Object duplication - use the same object definition and matrix transformations to replicate an object (or objects) at least 10 times in the scene.
d. Scaling - resizing and/or stretching
e. Animation - automatic or in response to input. Animation should be implemented using the setTimeout and requestAnimFrame function.
4. Make the renderings original and attractive. Your graphics should not look similar to anyone else's in the class, nor to any provided examples.
5. Update the window title to describe the program.
6. Below the canvas element, add a content section for debugging information that (at the very least) includes a count of the number of points used. Do not hard code the information. Instead, draw from your JavaScript variables. The information may be displayed in a textarea, text box, on a button, as an alert that responds to a button, etc.
7. Put any project notes at the bottom of the HMTL page, including whether you did extra credit, added any special features, or have any issue with your project.
8. (Extra credit) Allow more than one view of the scene.
Tips
• For simplicity, consider defining all object centered at the origin, then translating them to where they belong.
• With no lighting effects, surfaces with no color interpolation will appear flat.
• The order of triangle vertices should follow the right-hand rule: specified in counter clockwise order for the side facing the viewer.