Homework 6: Using WebGL

Short Description:

This assignment is worth 40 points.

Goals

• Be able to display 3D objects in WebGL.
• Transform objects in 3 space.
• Modify shaders written in GLSL
• Transfer data between front end programs and GLSL programs.

Formal Description

Your program must work with the teapot. This must be the default value. If you wish to add other models, you may do so by adding a user interface element that allows the user to select a different model. If you allow the user to change models, the new model must appear in the upright position in the locations specified below.

Models are available in the directory http://mirkwood.cs.edinboro.edu/~bennett/f360-19/Models. Your program should load one of these models and store it in a Widget object. Be aware that some objects are specified in a clockwise direction and others are counter clockwise. This should be properly set for the objects in your program.

You should create an intermediate object class. This object should hold a reference to a widget object, but allow for changes in attributes so multiple instances of a Widget object may be drawn in different ways. Specifically your intermediate object should allow:

• Variations in rotation, scaling, and translating.
• Variations in the front face color schemes
  • A scheme where a single front face color is specified and applied uniformly to all triangles in the object.
  • A per-vertex scheme where each vertex has an associated color and the front face is colored using this scheme.

For this homework back face color is specified as a single constant and applied uniformly to all triangles in an intermediate object. Different instances of the intermediate object may have different back face colors.

For this homework all items should have an edge color specified as a single constant and applied uniformly to all triangles in an intermediate object (front and back face) . Different instances of the intermediate object may have different edge colors.

To generate unique vertex colors, you will need to

• Modify the shaders to accept and use a color attribute for each vertex.
• Generate a color for each vertex.

You should display five versions of your object.

1. The item in the center.
   1. This item should be controlled by the keys x/X,y/Y,z/Z +/- .
      1. Pressing x, y, or z should rotate the object by 1 additional degree about the associated axis.
      2. Pressing X, Y, or Z should rotate the object by an additional -1 degree about the associated axis.

         Note: This is currently implemented but at the Widget level, not the intermediate object level.

      3. +/- should increase or decrease the scale size by 0.1.
   2. This item should mostly fill the center of the screen.
   3. This item should be colored as follows:
      • Edges red.
      • Front faces filled with [0,0,0,1]
      • Back faces filled with color [0,1,0,0.05]
2. The item in the upper left hand corner
   1. Should be about 1/4 the size of the object in the center.
   2. This object should spin slowly about the center of the object's y axis. It should mostly stay in the "same" location, just spin in place.
   3. The object should spin independently of any other object.
   4. This object should have random vertex colors.
   5. The edge color should be black.
3. The item in the lower left left hand corner
   1. Should be about 1/4 the size of the object in the center.
   2. Should spin at a medium rate about the center of the object's x axis.
   3. The object should spin independently of any other object.
   4. All vertexes should be colored [1,1,0,1].
   5. The edge color should be [1,0,0,1]
   6. The back faces should be colored [0,1,0,1]
4. The item in the upper right hand corner of the screen.
   1. Should be about 1/4 the size of the object in the center.
   2. Should spin at a fast rate about the center of the object's z axis.
   3. All vertexes with initial x values above 0 should have a red color component of 1.
   4. All vertexes with an initial y value above 0 should have a blue color component of 1.
   5. All vertexes with an initial z value above 0 should have a green color component of 1.
   6. Otherwise color components for a vertex should be 0.
      • (-1, -1, -1) should have color (0,0,0);
      • (.02, 0, -1) should have color (1,0,0)
      • (0, .34, 1.8) should have color (0,1,1)
   7. Note, since you will most likely rotate the object after it is colored, the quadrant colors will most likely not be aligned at the start.
   8. Back facing triangles should be completely transparent.
   9. The edges should be drawn in white.
5. The object in the lower right corner
   1. Should be about 1/4 the size of the object in the center.
   2. Should slowly grow and shrink.
   3. You may color this object any way you wish except
      • The edge color must be different from the vertex colors.

Finally you must add controls for the viewer to be able to adjust the Frustum and the Camera.

• For the frustum, allow the user to change Left, Right, Top, Bottom, and Near and far.
  • Use some form of input.
  • I would input width, then let left = -width/2, right = width/2
  • Do the same for height.
  • Let near and far be adjusted so that 0 ≤ near < far ≤ 10;
• For the camera allow the user to adjust the z position
  • Use an input box.
  • Start at -1
  • Keep this between -10 and -0.5

Make sure that your objects are visible with the default settings. Don't worry if the user moves so that the objects are no longer visible.

Add a key press "R", that restores the camera and frustum to a good default.

Grading Standard

The program is worth 40 points. Points will be awarded as follows:

• 15 points for proper rotation/scaling of the objects.
• 5 points for constant coloring
• 5 points working color based on the VBO
• 5 points for correct random vertex colors
• 5 points for correct coloring by quadrant.
• 5 points for proper control of the camera and frustum.

Additional Requirements/Comments

• I expect you to build your code based on the code in my template for this homework.
• I expect your code to reference
  • The directory http://mirkwood.cs.edinboro.edu/~bennett/f360-19/Common
  • The directory http://mirkwood.cs.edinboro.edu/~bennett/f360-19/Models/
• If you wish to supply an additional model, please place it in the directory with your code. Use the format I have used to store the model.
• You will probably have to modify all of the starting files.
• You should at least add a new class for your intermediate object. (I can't think of a good name right now. Come up with something reasonable).

Extras

Submission

Submit your tar file as an attachment to a message to dbennett@edinboro.edu. Please include your name, and the fact that this is homework 6 in the title of the message.