Due: 11:59pm, Monday November 11
Submission: Submit your assignment using this Google Form.
BASIC GRADING:
The main components of this programming assignment are:
- 5% Part 1: properly turned in assignment
- 30% Part 2: render the input triangles, textured but without lighting
- 25% Part 3: render using both lighting and texture
- 30% Part 4: render using lighting, texture and transparency
- 10% Part 5: make it your own
- Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!
You will render triangles, described in the same sorts of JSON input files used in the third assignment. We will again 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 using JSON. Example input files reside at https://ncsucgclass.github.io/prog4/triangles.json. While testing, you should use a different URL referencing a file that you can manipulate, so that you can test multiple triangle files. These files have been improved to include texture file names and alpha values. The triangles files also contain vertex normals and uv coordinates.
For this assignment, we have made additions to the file format supporting a transparency alpha, texture filenames and texture coordinates. All textures will reside at the same URL as the model input files. For example, if the triangles.json file makes a reference to texture1.jpg, then it will reside at https://ncsucgclass.github.io/prog4/texture1.jpg.
We are providing a shell in which you can build your code. You will be able to run the shell here, and see its code here. This shell is a correct implementation of program 3, which also loads an image (which can ultimately become a texture) as the canvas background. Default viewing parameters are the same as in program 3. (Note: this will be released in a few days, after most of the late period for program 3 has passed). You can find the version without shell here.
This is an individual assignment, no exceptions. You should code the core of this assignment yourself. You may not use others' code to implement texturing, blend texture with lighting, or implement transparency. 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 that the advice you want to give or the code you want to use is permissible, simply ask me or the TA.
Part 2: Render the input triangles, textured but without lighting
Use WebGL to render unlit triangles, giving each fragment its textured color. Do not perform lighting. You will have to use the fragment shader to find the appropriate color in the texture. UV coordinates are provided with triangle sets.
Part 3: Render with texture and lighting
Improve your renderer to shade fragments by mixing texture with lighting. A simple approach is modulation, which uses the lit fragment color Cf to scale the texture color Ct: C = CfCt. You can find more ideas here (Ch. 9, Modulating and Blending). Toggle across at least two light/texture blending modes (e.g. replace and modulate) when the b key is pressed.
Part 4: Render with texture, lighting and transparency
Improve your renderer further by adding transparency (alpha) to its rendering. To avoid transparent objects occluding other objects, you will have to first render opaque objects with z-buffering on, then transparent objects with the z-write component of z-buffering off (gl.depthMask(false)).
EXTRA CREDIT GRADING:
The extra credit components we suggest for this assignment are:
- 461: ½% — support transparent textures
- 461: ½% — support multitexturing
- 461: 2% — 561: 1% — improve transparency correctness with the painter's algorithm
- 461: 4% — 561: 2% — improve transparency correctness further with a BSP tree
Extra credit: support transparent textures
Make use of the alpha component in textures during rendering. Use this to given your models irregular outlines. There are textures in the assignment repo that will produce this effect.
Extra credit: support multitexturing
Combine multiple textures when performing lighting of a model. For example, you could perform light mapping. We will include a texture in the assignment repo that supports light mapping.
Extra credit: improve transparency correctness with a partial sort
Sort your transparent triangles by depth to make transparency more correct. You must sort before rendering. You may have to issue a separate draw calls to ensure gpu parallelism does not undo your ordering.
Sort your transparent triangles with a BSP tree to improve transparency further. This will split triangles when they intersect.