CSE 470 Homework #3: Lights, Camera, Action! Instructor: D. Hansford, PhD
Big Picture: You will develop a WebGL application that displays two surfaces of revolution. The surfaces will be rendered with the Phong illumination model, using exact vertex normals, and shading will be done in the fragment shader. The application will allow for different lighting, and material, and viewing effects. Details of these program features are described below.
Concepts:
• Build parametric surfaces and surface normals.
• Build a triangulation data structure.
• Set-up parameters for the Phong illumination model.
• Set up Phong shading in the fragment shader.
• Draw multiple objects.
• Work with the LookAt and perspective functions.
• Gain more experience with animation by implementing a moving light.
• Implement interaction and event handlers.
Details:
Surface of Revolution (SOR)
Create two SORs, a cylinder and an interesting shape of your choosing. Your design cannot be a cone or sphere, and it must have some curviness. (Do not use the sphere from the demo programs.)
Let the SOR be s(t, theta) over the domain theta in [0, 2*Pi] and t in [a,b], where a and b are real numbers. The SOR is defined by a generating curve (generatrix), g(t) = [f(t), t, 0], which is a curve in the xy-plane. (Tip: Center the curve about the x-axis.) The first coordinate, f(t), is a function. The surface is defined as
s(t, theta) = R(theta) g(t), where R is a rotation about the y-axis. Example: For the cylinder, you could choose f(t) = 1.0, a = -1, and b = 1.
You will discretize the domain, evaluate the SOR (create 3D points), and build a triangulation data structure. When writing the surface evaluation function, make the number of evaluations in the t- and theta-directions to be input variables to make testing easy.
In addition to creating 3D points on the SOR, you will compute exact normals at the points. (See Lighting and Shading ppt, slide 37.)
Create a triangulation data structure using an “index” array that points to the vertex and normal arrays. Drawing the triangulation will be done using drawElements. (See cube.zip and cubev program for an implementation example. See Week 5, Geometry Part 2 notes for a description of the data structure. See “Tips on using drawElements” in Week 4.)
For each SOR, create a minmax box. This will be helpful for determining LookAt parameters, perspective parameters, and a good light position. Print these minmax boxes to the console.
 
Tip: Get this working for the cylinder first.
Two options for organizing the data: 1) Put all the data for the cylinder and custom surface into one set of data structures. At the time of drawing, you can use an offset pointer to access the desired block of data. OR 2) Re-load buffers when the user chooses a new SOR.
Render the surface with the Phong illumination model with fragment shading.
The surface construction code must be in a file, called lastName_geometry.js, which is separate from the initialization and event handlers.
Materials
 • • • •
Light
Create two distinct materials.
Create a user interface to toggle between materials.
Give these materials names to characterize them, not “material 1".
The material names should appear with the user interface in the HTML page.
Set the light color to white.
Set the initial position of the light to be at the eye.
Program two options for the light: stationary at the eye and a rotating about the SOR.
• • •
Modeling and Viewing
• Use the LookAt function from MV.js.
• Use the perspective function from MV.js. Initialize the aspect ratio to be one and the field of
view (fov) to be 60 degrees. Determine reasonable near and far parameters.
• A slider will allow the user to adjust the fov.
• You must use the supplied code that rotates the object via the mouse. (This modifies the
LookAt parameters.) User interaction
  All controls (such as buttons and sliders) must be accompanied by descriptive text. Organize the controls into sections in the HTML page based on functionality and add text that identifies these sections.
The SOR can be rotated via click and mouse movements.
A control allows selection between the two SORs.
A control allows the user to change the material properties between two different settings. A slider allows the shininess factor to change from 1 to 1000. (See rotatingSquare3 program for a slider example.)
A control allows the user to change the fov between 10 and 100 degrees. (You can choose the increment.)
Print to
Each value printed must be accompanied by text that describes the value.
• •
• • • •
•
the console
 
• The minmax box dimensions for the two SORs.
• The initial Eye, At, Up.
• The initial perspective arguments.
• The initial light position.
General Guidelines
• The number of evaluations for your SORs should produce smooth surfaces and the default light position should be at the eye. The cylinder should be the default SOR.
• Next to the canvas, display your name, date, program description, and resources you used.
• Create (at least) three files: lastName_hw3.html, lastName_hw3.js, lastName_geometry.js.
• Add your name and date to the top of each file.
• Turn in your assignment to Canvas.
Extra Credit
If you do extra credit, label a separate section in the html page with the controls for this extra functionality. Let us know what you did!
You could display surface normals. Let us know if you created a second vertex shader for this. You could add more lights.
You could create a light object with an emissive color added to the Phong illumination model. You could animate your SOR – create a dance or apply morphing via linear maps.
 请加QQ：99515681  邮箱：99515681@qq.com   WX：codinghelp