Program 4, 2020: Texture and Transparency (updated 10/27/20)

Partial Due: 11:59pm, Friday Monday October 23 26

Final Due: 11:59pm, Friday Monday October 30 November 2

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.

The main components of this programming assignment are:
  • 5% Part 0: partial feedback
  • 5% Part 1: properly turned in assignment
  • 30% Part 2: render the input triangles and ellipsoids, textured but without lighting
  • 30% Part 3: render using both 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 and ellipsoids, 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 and ellipsoids using JSON. Example input files reside at and 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. 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 

When you load texture images, you can only load them from your own server (hosting both your code and your images), or from a server that explicitly allows cross-origin access, like To access images from such an allowing server, set the image's crossOrigin attribute to "Anonymous". You can find more detail hereTexture 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, as shown here.

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 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.

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 0: Partial feedback
You should turn in an "ugly," incomplete version of your program by Friday October 23. 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. We will not otherwise grade the assignment at this point, only comment on it.

Part 1: 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 2: Render the input triangles and ellipsoids, textured but without lighting
Use WebGL to render unlit triangles and ellipsoids, 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, but must be generated for ellipsoids. We suggest latitude and longitude be mapped to [0,1].

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 Cf to scale the texture Ct: C = CfCt. You can find more ideas hereToggle 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)).

The extra credit components we suggest for this assignment are:
  • 461: 1%  — 561: ½% — support transparent textures
  • 461: 1%  — 561: ½% — support multitexturing
  • 461: 2%  — 561: 1% — improve transparency correctness with the painter's algorithm
  • 461: 5%  — 561: 3% — improve transparency correctness further with a BSP tree
Other extra credit is possible with instructor approval. You must note any extra credit in your file, otherwise you will likely not receive credit for it.

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.

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.