Partial Due: 11:59pm, Friday Oct 2
Final Due: 11:59pm, Friday Oct 9
Goal: In this assignment you will practice basic modeling and implement transforms and lighting on 3D objects using the WebGL rasterization API.
Submission: Submit your assignment using this Google Form.BASIC GRADING:
The main components of this programming assignment are:
- 5% Part 0: partial feedback
- 5% Part 1: properly turned in assignment
- 10% Part 2: render the input triangles, without lighting
- 20% Part 3: model and render the input ellipsoids, without lighting
- 20% Part 4: light the ellipsoids and triangles
- 15% Part 5: interactively change view
- 5% Part 6: interactively select a model
- 20% Part 7: interactively transform the ellipsoids and triangles
- Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!
You will only render triangles and ellipsoids in this assignment, described in the same sorts of JSON input files used in the first. We will test your program using several different input files, so it would be wise to test your program with several such files. The input files describe arrays of triangles and ellipsoids using JSON. Example input files reside at https://ncsucgclass.github.io/prog3/triangles.json and https://ncsucgclass.github.io/prog3/ellipsoids.json. When you turn in your program, you should use these URLs in hardcode as the locations of the input triangles and ellipsoids files — they will always be there. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangles and ellipsoid files. Note that browser security makes loading local files difficult, so we encourage you to access any input files with HTTP GET requests.
We provide a small shell in which you can build your code. You can run the shell here, and see its code and assets here. The shell shows how to draw triangles using WebGL without any model or view transform, and how to parse the input triangles.json file. It also shows how to use animation callbacks to render multiple image frames.
The default view and light are as in the first assignment. The eye is at (0.5,0.5,-0.5), with a view up vector of [0 1 0] and a look at vector of [0 0 1]. Locate the window a distance of 0.5 from the eye, and make it a 1x1 square normal to the look at vector and centered at (0.5,0.5,0), and parallel to the view up vector. With this scheme, you can assume that everything in the world is in view if it is located in a 1x1x1 box with one corner at the origin, and another at (1,1,1). Put a white (1,1,1) (for ambient, diffuse and specular) light at location (-0.5,1.5,-0.5).
This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You should code the core of this assignment yourself. You may not use others' code to transform or project models or perform Blinn-Phong lighting. You may use math, matrix and modeling libraries you find, but you must credit them in comments. You may recommend libraries to one another, speak freely with one another about your code or theirs, but you may never directly provide any code to another student. If you are ever uncertain if the advice you want to give or code you want to use is permissible, simply ask me or the TA.
Part 0: Partial feedback
You should turn in an "ugly," incomplete version of your program by Friday October 2. If you simply turn in a copy of our shell, you will get half credit (2.5%). If you actually do something to visibly change the shell's output, you will receive full marks (5%), and receive comments on what you've done. For example, if you turn in a complete, first attempt at the assignment, we will tell you in text what is working, and what isn't, so you can raise your final score. We will not otherwise grade the assignment at this point, only comment on it.
Part 1: Properly turned in assignment
5% of your assignment grade is just for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.
Part 2: Render the input triangles, without lighting
Use rasterization to render unlit triangles, giving each triangle its unmodified diffuse color (e.g, if the diffuse color of the triangle is (1,0,0), every pixel in it should be red). You will have to use vertex shaders to perform viewing and perspective transforms, and fragment shaders to select the diffuse color. We recommend the use of the glMatrix library for creating these transforms.
Part 3: Render the input ellipsoids, without lighting
Use rasterization to render unlit ellipsoids, giving each ellipsoid its unmodified diffuse color. There are no ellipsoid primitives available in WebGL, so you will have to build an ellipsoid out of triangles, then transform it to the right location and size. You can do this statically with a hardcoded sphere model, or procedurally with a latitude/longitude parameterization. You then scale this sphere to match its ellipsoidal parameters. Again you will have to use vertex shaders to perform viewing and perspective transforms, fragment shaders to select color.
Part 4: Light the ellipsoids and triangles
Shade the ellipsoids and triangles using per-fragment shading and the Blinn-Phong illumination model, using the reflectivity coefficients you find in the input files. Use triangle normals during lighting (which will reveal faceting on your ellipsoids). Your fragment shaders will perform the lighting calculation.
EXTRA CREDIT GRADING:
Extra credit: Arbitrarily sized viewports
Accept a new square canvas (viewport) width/height through your UI. Size your canvas to match.
Extra credit: Support off-axis and rectangular projections
Accept new window parameters in viewing coordinates through your UI (left, right, top, bottom). Adjust your projection matrix to this new window, and render the scene.
Extra credit: Multiple and arbitrarily located lights
Read in an additional lights.json file that contains an array of objects describing light location and color. Note that these lights will have distinct ambient, diffuse and specular colors. Render the scene with all of these lights. You can find an example lights.json file here. Assume that the input lights file will always reside at this URL when you turn in your code.
Extra credit: Smooth shading with vertex normals
Using only triangle normals, your ellipsoids and other curved shapes will look disappointingly faceted. To represent curvature more accurately, you need vertex normals. As you generate ellipsoids from spheres, create vertex normals by subtracting the surface point from the sphere center. When you read in triangles, check for vertex normals in the input file. As you apply the composited modeling, viewing and projection matrices to your vertices, apply the inverse transpose of the modeling transform to your vertex normals. During lighting, use these normals rather than the face normal. The rasterizer will interpolate them for you.
5% of your assignment grade is just for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.
Part 2: Render the input triangles, without lighting
Use rasterization to render unlit triangles, giving each triangle its unmodified diffuse color (e.g, if the diffuse color of the triangle is (1,0,0), every pixel in it should be red). You will have to use vertex shaders to perform viewing and perspective transforms, and fragment shaders to select the diffuse color. We recommend the use of the glMatrix library for creating these transforms.
Part 3: Render the input ellipsoids, without lighting
Use rasterization to render unlit ellipsoids, giving each ellipsoid its unmodified diffuse color. There are no ellipsoid primitives available in WebGL, so you will have to build an ellipsoid out of triangles, then transform it to the right location and size. You can do this statically with a hardcoded sphere model, or procedurally with a latitude/longitude parameterization. You then scale this sphere to match its ellipsoidal parameters. Again you will have to use vertex shaders to perform viewing and perspective transforms, fragment shaders to select color.
Part 4: Light the ellipsoids and triangles
Shade the ellipsoids and triangles using per-fragment shading and the Blinn-Phong illumination model, using the reflectivity coefficients you find in the input files. Use triangle normals during lighting (which will reveal faceting on your ellipsoids). Your fragment shaders will perform the lighting calculation.
Part 5: interactively change view
Use the following key to action table to enable the user to change the view:
Part 6: Interactively select a model
Use the following key to action table to interactively select a certain model:
Use the following key to action table to enable the user to change the view:
- a and d — translate view left and right along view X
- w and s — translate view forward and backward along view Z
- q and e — translate view up and down along view Y
- A and D — rotate view left and right around view Y (yaw)
- W and S — rotate view forward and backward around view X (pitch)
Part 6: Interactively select a model
Use the following key to action table to interactively select a certain model:
- left and right — select and highlight the next/previous triangle set (previous off)
- up and down — select and highlight the next/previous ellipsoid (previous off)
- space — deselect and turn off highlight
Part 7: Interactively transform models
Use the following key to action table to interactively transform the selected model:- k and ; — translate selection left and right along view X
- o and l — translate selection forward and backward along view Z
- i and p — translate selection up and down along view Y
- K and : — rotate selection left and right around view Y (yaw)
- O and L — rotate selection forward and backward around view X (pitch)
- I and P — rotate selection clockwise and counterclockwise around view Z (roll)
EXTRA CREDIT GRADING:
The extra credit components we suggest for this assignment are below:
- 461: 1% — arbitrarily sized viewports
- 461: 1% — off-axis and rectangular projections
- 461: 1% — multiple lights at arbitrary locations
- 461: 3% — 561: 1% — smooth shading with vertex normals
Accept a new square canvas (viewport) width/height through your UI. Size your canvas to match.
Extra credit: Support off-axis and rectangular projections
Accept new window parameters in viewing coordinates through your UI (left, right, top, bottom). Adjust your projection matrix to this new window, and render the scene.
Extra credit: Multiple and arbitrarily located lights
Read in an additional lights.json file that contains an array of objects describing light location and color. Note that these lights will have distinct ambient, diffuse and specular colors. Render the scene with all of these lights. You can find an example lights.json file here. Assume that the input lights file will always reside at this URL when you turn in your code.
Extra credit: Smooth shading with vertex normals
Using only triangle normals, your ellipsoids and other curved shapes will look disappointingly faceted. To represent curvature more accurately, you need vertex normals. As you generate ellipsoids from spheres, create vertex normals by subtracting the surface point from the sphere center. When you read in triangles, check for vertex normals in the input file. As you apply the composited modeling, viewing and projection matrices to your vertices, apply the inverse transpose of the modeling transform to your vertex normals. During lighting, use these normals rather than the face normal. The rasterizer will interpolate them for you.
