Welcome to CS559!

by Eftychios Sifakis on September 4, 2017

Dear Students,

Welcome to CS559 “Introduction to Computer Graphics”. This web page will be your portal for all announcements related to the class, information about class logistics, and repository of lecture notes and supplemental information.



To get started, make sure to check out the Syllabus page for the most important general class information (including grading and administrative logistics), and the Calendar for a time-indexed view of topics and important special scheduling notices.

You will be getting information on reading materials as we go, but if you want to prefetch some information that will definitely be useful, take a look at the following tutorials/discussions:

That should be a good starting point! Please keep track of the posted deadlines for assignments (summarized in the “Week in 559” window on the right of the main page of the class). Also, make sure to verify you have access to the Piazza and Canvas pages (linked for your convenience to the right of the main page). Have a great start to your semester and enjoy the class!


Talk of potential interest

by Eftychios Sifakis on October 11, 2017

Steve Seitz from the University of Washington/Google Seattle is giving a talk this Thursday Oct 12th @ 5:45pm, which many of you would find interesting 2017 MERI poster session_lecture.

Lecture notes : Weeks 4 & 5

by Eftychios Sifakis on October 11, 2017

Instructor prepared notes on viewing transforms [PDF]

Slides from Oct 4-11 lecture(s) [PDF]

Reading Assignment #3 : Graphics pipeline and intro to shaders

by Eftychios Sifakis on October 11, 2017

Due: Thursday, October 19th

Synopsis: Our discussion will revolve around how to program the graphics hardware so we can draw quickly. Your readings will cover the concept of the graphics pipeline, how to program it using GLSL shaders, and an introductory discussion on shading (so you can generate interesting effects).

Evaluation: Check/No Check based on passing the quiz.

Handin: Please take the online quiz on Canvas [Link]


The readings for this week will be split in three categories:

  • Understanding the principle of the graphics pipeline, the parts of it that operate on vertices and fragments, and the opportunities it provides for the programmer to customize it via shader programs.
  • Using the GLSL language to write vertex and fragment shaders. We will point you to some online tutorials, plus some references from your textbooks.
  • An introduction to shading, especially ambient, diffuse and specular. You can incorporate ideas from these schemes into your shaders to make them more interesting.

We will intentionally omit at this stage the part about getting the actual data (triangles, vertices, colors, normals, etc.) onto the graphics processing unit. Online sandboxes such as shdr.bkcore.com will take care of that aspect, for now, allowing us to focus solely on the vertex/fragment shader programs.

The Readings

  • The Graphics Pipelione
    • Chapter 8 of the Fundamentals of Computer Graphics : [Link]
  • Programming shaders in the GLSL language.
    There is not a single perfect resource for this, but a number of online tutorials do exist that you will likely find accessible (listed below)

    • The official OpenGL.org tutorials, ClockworkCoders (focus on the “OpenGL shading language” and “Uniform/Attribute/Varying variables”) and TyphoonLabs. Note that those tutorials were written with OpenGL in mind (which is the C++ API for rendering 3D graphics – the JavaScript analogue we will discuss is called WebGL), but both APIs use the same language for the shader programs, GLSL.
    • LearningWebGL.org – pretty comprehensive, definitely in the “work through examples” style
    • The Book Of Shaders – focuses on fragment shaders, shows lots of things you can do with it (some of which you can use other things for)
    • Official Mozilla Tutorial
    • Handy reference card
    • Chapter 18 of the Fundamentals of Computer Graphics [Link].
  • Basic shading (ambient/specular/diffuse). You can use these methods to implement lighting for your shaders.
    • For a brief summary, section 4.5 from Chapter 4 of Fundamentals of Computer Graphics [Link].
    • For more detail, review Chapter 10 of Fundamentals of Computer Graphics [Link].

You may also want to take a look at some of the sample shaders in the Gadgets and Demonstrations page. We will review most of those in class.


Due: Wednesday, October 18th (see the class late policy on the Syllabus)

Synopsis: You will create 3D animation using the JavaScript 2D canvas. We have approached this goal before, in our previous assignments, but this time you will be exposed to all pieces of the pipeline (3D transformations, viewing transformation, visibility, etc) even more thoroughly. This time you will draw solid objects (filling triangles). You will also implement a simple visibility algorithm (painter’s algorithm), and optionally experiment with normal computations and shading.

Learning Objectives: This assignment will give you the opportunity to see how 3D graphics really works. Our assignments up to this point have given you selective exposure to parts of the 3D viewing pipeline (hierarchical transforms, the 2D Canvas interface, linear algebra libraries such as TWGL, …) but this is the first time that you will be asked to put together a more comprehensive product. What you learn by implementing the transformation pipeline will come in handy in the future – since you’ll implement it again when we do WebGL. In addition to testing your understanding of graphics principles, this assignment will also force you to think about a different philosophy of putting together a visual world, where drawing of triangles and polygons will not occur directly when you define them, but later on and possibly with a re-shuffled order (for visibility).

Evaluation: Based on our 5-point grading scheme. You get a satisfactory (“3”) grade if you turn in a viable, and complete submission. It must draw some basic three-dimensional objects (they can be as simple as cubes/boxes at a minimum), they must be animated (they must have modeling transforms applied to them, either controlled via sliders or automatically animated — ideally even incorporating hierarchical modeling). Things must be drawn with filled triangles, instead of the wireframe drawing of line segments that we have deemed acceptable before. A simple visibility scheme (painter’s algorithm) should be used. Opportunities for extra credit include : cool objects, cool animation (hierarchical modeling alone as the sole technical add-on might not suffice to boost you to a “4”, but it would help if combined with another feature) or some successful implementation of a shading scheme.

Handin: You will submit your work on Canvas [Link]. Make sure that you turn in all files needed for your program to run. Also, please list any dependencies your program needs to run (e.g. if you only tested it in a specific browser, or if it needs to access libraries over the web). You can link to twgl on the graphics group web server (see the tutorial). If you have multiple files in your submission (as opposed to just a single .html file) you are strongly encouraged to package them in a single ZIP file.


In this project, you will use the JavaScript 2D drawing canvas to generate a visualization of a 3D animated scene.

To give you an idea of the new features that you will be asked to implement, you can check out this simple example. Note: This is only meant to exemplify just the look and features that we ask you to implement (excluding hierarchical modeling), and not really give you an example about how you should write the code that accomplishes this. We strongly recommend that you do not use the code of this example as a starting point, and the implementation choices reflected in the code of this example are by no means our suggestion about how things should be done. Although we will not prohibit you from looking at the code or reproducing parts of it, please note that your work will be held to a higher standard if it appears that your submission is merely a minor modification of this example. Also note that the animations in this example are not hierarchical.

In detail, the required visual and technical features that you must incorporate include:

  • Your model needs to be 3-dimensional, and animated. Using hierarchical modeling is desired, but not mandatory.
  • Your model needs to be drawn using solid objects (e.g. filled triangles or polygons). It is OK to have 2 viewing modes, one with solid surfaces and one with wireframe, if you want to add this as a features that can be switched on/off. We are asking for this so that it will be possible for some triangles to “hide” others that lie behind them.
  • All transforms (modeling, viewing, projection, viewport) must be implemented and combined together using TWGL (or a similar matrix library).
  • You must support perspective projection, either as the only option or as a switchable choice alongside orthographic projection.
  • You need to provide the ability to control the camera position in some continuous fashion (as opposed to having just a number of fixed views). This can be implemented, for example, by allowing the camera to pan around the object, move along the circle, zoom in/out, or similar motions (your are not required to support all such controls, just some motion of the camera).
  • You need to implement the simple visibility scheme we discussed as “painter’s algorithm” to allow certain triangles to be “hidden” behind others. In order to do this, you must re-order the triangles, and draw them in the correct order (more on this later).

Many of the requirements above have already come into play in your programming assignments #2 and #3. If you have a working implementation of a satisfactory Programming Assignment #3, this would be an excellent place to start! (in fact, that would give you hierarchical modeling too, which is not strictly required for Assignment #4, but is a nice feature to add). However, when transitioning to your submission for Assignment #3 to this one, you will need to make changes. It’s recommended that you make them in this order:

  • First, make sure that you have modeling transforms, camera transforms (e.g. TWGL’s lookAT), projection transforms (e.g. TWGL’s “perspective” or “ortho”), and viewport transforms expressed in TWGL, and combined together using the appropriate calls.
  • You will then need to switch from your previous practice of issuing drawing commands directly, to just describing what triangles need to be present in your scene, and allow them to be reordered later prior to them being drawn. In the context of previous examples we discussed in class, you can have a function that defines the shapes of your 3D world, for example by adding the triangles or polygons that are to be drawn to an array (to be drawn later), rather than drawing them directly. This would happen outside of the “draw()” loop … say, for example in the function where you set up the canvas. Then, within the draw loop, you would reorder and/or transform each triangle as to respect visibility and allow triangles that are closer to the camera to obscure others that are farther away. This ordering must be done with respect to depth (refer to the painter’s algorithm, in class). The painter’s algorithm is not perfect, but it certainly helps in many cases. We will not penalize you at all for visual artifacts due to known limitations of the painter’s algorithm.
  • In combination with the transformation above : You will switch from drawing line segments (object wireframe) to drawing filled triangles or polygons.

Extra points will be given for:

  • Implementing hierarchical model in addition to another visual improvement (shading, interesting objects, interesting motion).
  • Imaginative shapes, animations, and camera controls.
  • Shading the surfaces of objects with varying colors (instead of a solid color), based on the triangle normals (we will talk about this in class).

Some Hints…

Obviously, the big thing is the painters algorithm. Rather than drawing the triangles, you’ll have to collect them in a list and sort them after transforming them).

The simplest thing is to pick 1 point as the depth for each triangle. This will always mess up some of the time. But getting it more correct is hard.

Draw 1 color per triangle. Don’t try to vary the color within individual triangles, unless you really know what you’re doing (this task is hard given how Canvas works).


Notes on viewing transforms & pipeline

by Eftychios Sifakis on October 9, 2017

A short deck of instructor-prepared notes on the viewing pipeline and associated transforms can be found here.

Preview Assignment #4

by Eftychios Sifakis on October 4, 2017

Your Programming Assignment #4 will be posted shortly after the deadline of Assignment #3 (which is due October 5th). However, it will be very similar to last semester’s version, which you can review here.

Due: Tuesday, October 3rd Thursday October 5th (see the class late policy on the Syllabus)

Synopsis: You will create a three-dimensional object such that it can be animated, and create a 2D visualization of this animation.

Learning Objectives: To see how transformations and hierarchical objects are employed in 3 dimensions, and experiment with a linear algebra library (such as TWGL) to represent such transformations. You will also get an introductory exposure to concepts about viewing (i.e. creating 2D depictions of 3D environments).

Evaluation: Based on our grading scale. You get a satisfactory grade if you turn in a viable, and complete submission (even if it just draws a rectangle like the example in the tutorial). Higher grades may be achieved by people who make interesting things (or even simple things that move in interesting ways). Your object must be hierarchical, and move in a way that shows it off (e.g. there’s a thing that moves that has a sub-piece that moves relative to it).

Handin: You will upload your work through the Canvas course management system [Link]. Make sure that you turn in all files needed for your program to run. Update: Although you are welcome to upload individual .html files (if they have the JavaScript code embedded in them), if you plan to submit separate .html and .js files (which is perfectly reasonable) you are encouraged to package up everything in a single .zip file. Canvas renames re-submissions by affixing _1, _2, _3, … to the name of the file you are submitting, and this can create mismatches between the .js code files that get uploaded and the filename you link to in your index.html. Putting everything in a single .zip file avoids that.


This week’s assignment is conceptually similar to Programming Assignment #2 : You will be asked to create a hierarchically modeled object, and demonstrate its ability to animate, either via user-controllable sliders, or by having it animate automatically (e.g. via the “requestAnimationFrame” mechanism). You can review the tutorial if you didn’t already experiment with the latter.

Like the previous assignment, you must make a web page with an HTML5 Canvas on it. You must do all the drawing with Canvas. However, the following significant differences apply:

  • This time, the model you create must be an inherently three-dimensional object. By “inherently 3D” we mean it’s an object that spans all three spatial dimensions, in a nontrivial way (i.e. not just a 2-dimensional object that you previously created, that you are now “lifting” into 3D by making every coordinate from (x,y) into (x,y,0). In other words, we don’t want something like this, but rather something like this (although in this last example the 3D cube is not hierarchical, nor articulated — your program must be).
  • Since your object will be described in 3D coordinates, you do not have the option of using the built-in Canvas transforms and transform stack. Instead, you will have to create and combine all necessary transforms yourselves, using a linear algebra library (a demonstration of how this can be done, even in a 2D hierarchical modeling example was given here). Our recommendation is to use TWGL (see our tutorial on getting started here, and also you might want to review the readings in Assignment #2) as this is the library we will refer to in class. However, if you are comfortable using some other alternative that provides similar functionality, this will be acceptable (make sure to mention that in your submission comments, or in a README file).
  • You need to be able to demonstrate visually that your model is three dimensional. For this, you are required to either create a motion that clearly utilizes 3 spatial dimensions (i.e. include rotations/translations that can clearly be seen as moving things outside of the plane of the 2D canvas you are depicting) and/or provide some functionality to view your 3D object from several different viewpoints, so that its 3D nature can be visually appreciated. Ideally, you will have both of these features, i.e. both motion that uses all 3 dimensions, and the ability to show different views around your object.

Of course, since we are using the 2D canvas to do any drawing, ultimately your drawing instructions have to use 2D pixel coordinates. For this, you can use the simple approach demonstrated here and here of dropping the z-coordinate of a (transformed) point (x,y,z), to get 2D pixel coordinates (x,y) for drawing. Now, this will be the very last thing you will likely do before you issue any drawing commands; the transformations that you might have applied before can be used to “transform” your world into a new viewpoint, just before you take that 2D imprint.

More specifically, you can check out the two following examples of how you can create visualizations that allow you to appreciate a 3D object from several 2D views:

  • A 3D ellipsoid can be rotated around a user-defined axis (slider #2), while the camera view is adjusted by applying a rotation around the vertical axis (controlled by slider #1). [Link] All these are baked into transforms as you can see in the example source.
  • The same ellipsoid model is shown, in 3 separate canvas windows, from an X-Y view, an X-Z view, and a Y-Z view [Link]

You are welcome to reuse pieces of code from this example, but keep in mind that the actual model you use needs to be hierarchical and articulated (the ellipsoid in these examples is not). Also, we recommend that you do not use that same ellipsoid, as it uses a bit too many line segments to be drawn, and might be slow to render on some browsers.

For extra credit, consider the following possibilities:

  • Create interesting models, or interesting motion
  • Improvise on ways to adjust the viewing direction (maybe experiment with scaling to emulate “zooming”?)
  • Maybe experiment with models that do not just have line segments drawn, but actual filled polygons (this might trigger a problem known as “visibility” which we will address in more detail next week)

Next week we will discuss projections (and perspective), and those will come into play in your next programming assignment. So you can feel free to leave this aspect out of this particular iteration.

Due: Saturday, September 30th

Synopsis: Although we are using a 2D medium (the HTML5 canvas) and still seemingly rely on 2D drawing operations, we have already ventured into the question of how do we capture 2D imprints of the 3-dimensional world. The following readings cover important topics, including the representation and combination of transforms, hierarchical modeling and 3D viewing transforms

Learning Objectives: To make sure everyone is comfortable with the concepts of representing and combining transforms, especially in 3D, and in conjunction with the TWGL library which we will focus on in class. These readings will also lay the foundation for subsequent lectures on the viewing pipeline and projection.

Evaluation: Check/No Check (based on passing the Quiz). You may re-try the quiz until you pass it (everyone should be able to). Remember that only your best grade is recorded, so if you get all questions right on a given attempt, there is no risk in taking the test again, to check out any remaining questions (Canvas shuffles the deck of questions and presents you with a subset of all available ones).

Handin: Take the quiz on Canvas [Link].


The readings cover the following parts (a) Discussion of 3D geometry, transforms, their representations (especially homogeneous coordinates), and ways to combine them, (b) The hierarchical modeling methodology for authoring 3D objects – including the concept of a stack for capturing the structure and hierarchy of the transforms, (c) The TWGL library and its semantics for representing transforms and (d) A discussion of the transforms involved in the formation of a 2D image from a 3D scene. The Viewing/Camera transform will be emphasized first, while projections will be visited in detail next week.

The Required Reading List:

  • 3D transforms, representation and combinations
    • Primary reference : Fundamentals of Computer Graphics Chapter 6 (Link)
    • Secondary reference : Hart’s Big Fun Computer Graphics Book Chapter 6 (Link)
  • Hierarchical Transforms and modeling
    • Hart’s Big Fun Computer Graphics Book Chapter 7 (Link)
  • Review our tutorial on getting started with TWGL
  • Viewing transformations (and intro to projection)
    • Fundamentals of Computer Graphics Chapter 7 (Link)

Optional Readings

  • Chapter 8 of Hart’s book (Link) provides another perspective on viewing.
  • The instructor’s handwritten notes (Link) also provide a summary of the viewing pipeline and an introduction to projections.
  • Chapters 8, 9 and 10 of Practical Linear Algebra also offer a detailed discussion of 3D geometry and transforms (Link, Link, Link)
  • If you want to read ahead into projections, another reference to consider is Chapter 9 of Hart’s book — albeit incomplete (Link)

Check out the TWGL tutorial, and associated documentation

by Eftychios Sifakis on September 20, 2017

In sync with the class discussion of the TWGL library, please review the tutorial we have prepared for you. This also links to useful review material.

Midterm date/time

September 20, 2017

Dear students, Our midterm exam has been scheduled for Wednesday November 1st, at 7:15pm. Details on scope and logistics to follow.

Read the full article →