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 both lighting and texture
- 20% Part 3: render using lighting, texture and transparency
- 20% Part 4: render using lighting, texture, transparency and depth sorting
- Participation: Receive participation credit (outside of this assignment) for posting images of your progress, good or bad, on the class forum!
You will render trianglees, 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 are providing a shell in which you can build your code. You can 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 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 lighting
Improve your renderer to shade fragments by mixing texture with lighting. A simple approach is modulation, which uses the lit fragment Cf to scale the texture Ct: C = CfCt. You can find more ideas here. Toggle across at least two light/texture blending modes (e.g. replace and modulate) when the b key is pressed.
Part 3: 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)).
Part 4: Render with texture, lighting, transparency and depth sorting
Now sort your transparent models by depth to make transparency more correct. Sort them model by model for half credit, triangle by triangle for full credit. 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 GRADING:
The extra credit components we suggest for this assignment are:
- 461: 1% — 561: ½% — support ellipses
- 461: 1% — 561: ½% — support transparent textures
- 461: 1% — 561: ½% — support multitexturing
- 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: 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 further with a BSP tree
Sort your transparent triangles with a BSP tree to improve transparency further. This will split triangles when they intersect.
