Project Links:

Assignment:

• App
• Assignment prompt

Feature Page Navigation:

• Goals & Overview
• User guide
• Example

Supporting Code Files:

• Supporting Javascript file
• Cube class file
• Cylinder class file
• Matrix library
• WebGl include file 1
• WebGl include file 2
• WebGl include file 3

Goals & Overview:

This lab utilizes the 3D cylinders previously produced in Lab 1, along with elements of WebGL to allow for the drawing of more complex scenes. In this case, the scene was created using a variety of cylinders and cubes, rotated, translated, scaled, and colored to represent a bookshelf. This lab also introduced the idea fo flat shading, which allows the objects to both appear more 3D and better describe the different faces.

User Guide:

Rotating: The first two sliding inputs allow the user to rotate the scene around the x and y axis. This allows for the demonstration of the flat shading, as well as the inspection of certain visual details. The scene will update automatically upon input change.

Drawing Mode: Behind the scenes, everything within the figure is made with various triangles connecting points in space. The drop down menu, titled "Drawing Mode" allows the user to determine the mode in which the scene is drawn using those triangles. The default mode, "Flat Shading", shows the scene as it is meant to be: filled in with bold color and shading. The second mode, "Wireframe", allows the user to see the colored outline of the figures, without the triangles filled in. Once again, the figure is automatically updated upon input change.

Example:

Shown above is the scene made using manipulated cylinders and cubes, which was created last lab. As seen, the bookshelf can be rotated around both the x and y axis. In this case, the scene is rotated a small amount around the y axis.