Project P03 - Individual - WebGL Introduction

WebGL Hello World (helloworld.html).
Follow the WebGL Fundamentals tutorial at link, placing your code in the helloworld.html file.

Progression of results:

Note: this part is easy to do by copy-pasting from the tutorial. We strongly recommend you away from working in this manner. Instead we encourage to try to understand every line of code that goes into the file, because you will be using this knowledge for the rest of the semester.

Basic UI (basicui.html).
Modify the basicui.html file to create a WebGL application that uses basic UI elements to control what is visualized. Your application must use a range input, dropdown, checkbox, and a button. For example, the range controls the number of sides the drawn polygon has, the dropdown controls the color of the drawn polygon, the checkbox controls the brightness, and the button redraws the polygon.

Follow the Canvas Resizing tutorial at link to handle correctly window resizing. In other words, the canvas should not stretch the drawn image, but should update the viewport dimensions and redraw the image. You are free to modify the HTML, CSS, and Javascript and to include any other HTML input to solve the problem.

At least one input must change the shape or the count of drawn objects.

Note: be sure to use parseFloat or parseInt to convert the value of the HTML inputs to a float or int, respectively.

Screenshot of using UI:

Transformations (transformations.html).
Rather than modifying the vertex positions directly in Javascript, transform the object in the vertex shader using matrix representations. Follow the 2D Matrices tutorial at link.

At a minimum, the object should be transformed by translation, rotation, and scaling. You may apply a particular transformation multiple times (ex: rotate about arbitrary point) and/or apply other transformations (ex: shearing).

You may use the m3 object from (lib/3d-math.js). For example:

// create an identity matrix
var xform = m3.identity();
// right-mult xform with translation matrix with params tx,ty
xform = m3.translate(xform, tx, ty);
// right-mult xform with rotation matrix with param theta (radians)
xform = m3.rotate(xform, theta);
// right-mult xform with scaling matrix with params sx,sy
xform = m3.scale(xform, sx, sy);

Screenshots of using transformations:

Animation (animation.html).
Follow the Animation tutorial at link to add animation to your application.

The application should automatically redraw itself (so that the object is animated), and the animation should be dependent on time but independent of the framerate. In other words, regardless of how fast of a machine on which we run your application, the object should appear to animate at the same speed. For example, if the object is spinning at 1 revolution every second, the object should revolve on a slow machine (drawing at 10 frames/second) in exactly the same time as on a fast machine (drawing at 90 frames/second): exactly one second.

The animation should be controllable by UI. For example, add a input range to control the speed of rotation.

Screenshots:

Interesting Creative Artifact.
Create an interesting artifact.

Elective.
Choose one of the elective / extra credit items in the following section.

3D Objects, Transformations, and Projection.
Instead of working with 2D objects, use 3D objects. You may choose either orthographic or perspective projection.

Advanced UI.
Integrate mouse and keyboard event handling into your application to control the camera and/or provide picking. Make a note somewhere in the application (not comments in code) that describe how the interaction works. See Picking demo at link for an example, where left mouse button is for turntable rotating, shift+LMB is for translating, scrolling is for dollying, and RMB is for picking.

Lighting.
Add lighting to your scene. You do not need to handle shadows. Lighting does not need to be "photo realistic" (non-photorealistic, NPR), but it should depend on the light's position and/or orientation. See NPR demo at link for an example. See Point Lighting tutorial at link.

Textures.
Add textures to your scene. The texture can drive diffuse color, specular factor or exponent, displacement, emission, normal rotation (bump), etc. See Texture Map Demo at link for examples. See Textures tutorial at link for a tutorial.

Hierarchical Transformations.
Create a simple hierarchy of transformation, such as an articulated robot arm that has many segments. See LEGO Thor demo link for an example. Choose walking under the action dropdown. See Scene Graph tutorial at link.

Have another idea? Come talk with me!