Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: THEend8_
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.
? ? ?