CSci 4611: Programming Assignment #2
initial submission: 8pm, Sunday, March 3 final due date: 8pm, Sunday, March 10
The purpose of this homework is for you to create a picture of a three-dimensional object using WebGL. To accomplish this, you will write a program that defines and then displays a surface of revolution. A surface of revolution is produced by rotating a two-dimensional curve about an axis in space. Your program will allow the user to interactively define a Bezier curve that is to be rotated.
Your program will have two modes: a two-dimensional mode for drawing the Bezier curve (curve drawing mode) and a three-dimensional mode for viewing the surface of revolution (viewing mode). Each mode will consist of a single viewport and a set of menu options. For defining the Bezier curve, the user moves the control points until the desired curve shape is obtained. The surface of revolution is subdivided into triangles that are created by evaluating the Bezier curve at some fixed number of points along its length and then rotating those points to some fixed number of positions about the axis of rotation. You will need to render each of these triangles using three line segments. Finally, your program will allow the user to use the mouse to orbit about the object to observe the surface of revolution.
When started, your program should establish a two-dimensional viewing setup, and it should then enter curve drawing mode. Your curve should contain two Bezier curve segments. Each curve segment will require four control points, with one point being shared between the two curve segments. The four control points for each curve segment should be connected by grey lines, and initially they should be collinear and evenly spaced along a line that runs parallel to the axis of revolution. In curve drawing mode the axis of rotation is shown as a dashed grey line, and the control points, the gray lines through the control points, and the Bezier curves should be displayed to the right of that line. The user should be able to “pick” a control point by depressing the left mouse button (proximity testing is sufficient for picking), see the point become highlighted to indicate that it has been selected, and then move that point to a new position as long as the left mouse button remains depressed. The lines through the control points and the Bezier curve should be redrawn as the point is moved.
When the user switches to viewing mode, the display for your program should consist of a single window within which the surface of revolution is drawn. The surface of revolution should be positioned so that a point near its center (this point does not have to be precisely determined) is located at the origin of world coordinates. The initial direction of view should be along a line of sight that passes through the origin of world coordinates. Since we have not yet covered shading in lecture, instead of rendering shaded polygons, you will just have WebGL render a list of lines, or a ¡°wireframe.¡±
There are two parameters provided by the interface that should control the appearance of the wireframe:
Angles: The number of angular positions to be used when sweeping out the surface. Steps: The number of steps to be used in dividing up the curve to produce the surface of revolution. You can round this parameter up to an even number so that there are an equal number of steps in each of the two Bezier curves.
The left mouse buttons should give the user some control over their view of the surface of revolution. Depressing the left mouse button and moving the mouse left and right should change the azimuth of the current line of sight from the camera to the object. Depressing the left mouse button and moving the mouse up and down should change the altitude of the current line of sight from the camera to the object (keep the altitude between -85 and 85 degrees). In other words, moving the mouse left and right should make the object rotate as if on a ¡°turntable¡±, and moving the mouse up and down should make the object rotate so that it¡¯s top or bottom can be seen. These rotations should not change where the center of the surface of revolution is within the window. Finally, pressing the > key and the < key should move the center of projection closer and farther, respectively, from the surface of revolution (provides a zoom control).
The author of your textbook (Angel) has provided some JavaScript utilities for working with WebGL, which are included in the stub provided by the 4611 staff. You should take advantage of these utilities yourself to make your matrix and vector computations easier. You can also find these utilities at:
https://github.com/esangel/WebGL/tree/master/Common
Angel also has several examples on his website that may be helpful. In particular, the examples from Chapter 5 may be most useful:
https://github.com/esangel/WebGL/tree/master/Chap5
As discussed in lecture, when creating any OpenGL or WebGL application, you need to provide shaders written in the GL shader language (GLSL) for the application to work. Ideally in a server-hosted web page, these shaders would be in separate files hosted on the server and loaded dynamically via AJAX. However, for this course, most of you will probably be viewing your web page as a local HTML file. For security reasons, most browsers will not allow a web page to load an external file from the local file system. As a workaround, you can just embed the shaders directly in the HTML file as ¡°scripts.¡± The stubs already have this set up (using a utility script called initShaders from Angel), so all you need to do is write the shaders and put them in the right place in the HTML page.
This is a moderately large programming assignment and you must start early in order to complete it on time. One of the two modes (drawing or viewing) should be well underway by Sunday, March 3, and you should submit an initial upload of your assignment by 8pm on that date. We will not thoroughly test your program then, but ten percent of your final grade will be determined by whether you have made reasonable progress, especially on the WebGL aspects of the assignment, by this early deadline. (Reasonable progress means
that you have at least coded the rendering portion for one of the two modes, even if it isn¡¯t perfect.)
When your assignment is graded the following rubric will be used to allocate credit:
Early deadline 10% Creating the necessary vertex buffer objects 10% Interpolating and drawing the Bezier curve in draw mode 20% Manipulating the Bezier curve in draw mode 10% Building the surface of revolution 10% Rendering the surface of revolution (using 3D vertex shader) 20% Rotating and zooming the surface of revolution 10% Coding style and structure 10%