Goal: In this assignment you will learn about rendering textured and transparent models using the WebGL rasterization API.
Submission: Submit your assignment using this Google Form.
BASIC GRADING:
The main components of this programming assignment are:
- 10% Part 0: properly turned in assignment
- 40% Part 1: render the input triangles, textured but without lighting
- 10% Part 2: render using lightmaps and texture
- 10% Part 3: render using lighting and texture
- 30% Part 4: render using lighting, texture and transparency
- 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 second 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. An example input files reside at https://ncsucgclass.github.io/prog4/triangles.json. Use this URL in hardcode as the locations of the input triangle file — it 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 triangle files.
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. When you load the texture from github, some browsers will deem it a cross-origin risk and invalidate ("taint") your canvas. To avoid this problem set the image's crossOrigin attribute to "Anonymous". For more details click here. Texture loads happen asynchronously (on a different thread from your javascript), so your texture may not appear immediately. We recommend that you load a one pixel "dummy" texture locally to avoid runtime errors in the meanwhile.
We will provide a shell in which you can build your code. You will run the shell here, and see its code here. This shell will be is a correct implementation of program 2, which also loads an image (which can ultimately become a texture) as the canvas background. Default viewing parameters are the same as in the first two assignments. We will also provide you with a solution for program 3, as soon as late turnin expires.
You should code the core of this assignment yourself. You may not use others' code to implement texturing, blend texture with lightmaps or 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 if what you are contemplating is permissible, simply ask me or the TA.
Part 0: Properly turned in assignment
Remember that 10% of your assignment grade is for correctly submitting your work! For more information about how to correctly submit, see this page on the class website.
Part 1: 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 2: Render with texture and lightmaps
Improve your renderer to shade fragments by mixing texture with a second special texture, a lightmap, which describes the light cast by a specific light source. Read in the second lightmap texture, and combine the two textures by multiplying them component by component in the fragment shader: C = CtCm, where Ct is the texture color, and Cm the lightmap color. Show the unlit texture when the u key is pressed, and the lightmapped texture when the m key is pressed. Example lightmaps can be found in here and here.
Part 3: Render with texture and lighting
Improve your renderer to shade fragments by mixing texture with Blinn-Phong lighting. A simple approach is modulation, which multiplies the lit fragment Cb with the the texture value Ct: C = CbCt. Show Blinn-Phong mixed with texture when the b key is pressed, the lightmapped texture when the m key is pressed, and the the unlit texture when the u key is pressed.
Part 4: Render with texture, lighting/lightmaps and transparency
Improve your renderer again 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)). Include alpha you find in textures, and multiply it with alpha from the triangle to get the final alpha, as you did the RGB components.
EXTRA CREDIT GRADING:
The extra credit components we suggest for this assignment are:
- 461: 1% — support ellipses
- 461: 2% — 561: 1% — improve transparency correctness with partial sorting
- 461: 5% — 561: 2% — improve transparency correctness further with a BSP tree
Extra credit: support ellipses
Render ellipses as well as triangles. The new complication here is that you will have to generate uv texture coordinates. We recommend using a latitude longitude mapping.
Extra credit: improve transparency correctness with a partial sort
Now 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.
Extra credit: improve transparency correctness further with a BSP tree
Sort your transparent triangles with a BSP tree to improve transparency further. This will split triangles when they intersect, improving correctness.
