CMSC 381: Intro to graphics programming
Spring 2015
Prof. Blaheta
Computers have been creating graphics since at least the 1960s, but in the last few decades an exponential increase in computing power has meant that computer graphics are now capable of incredibly high-definition photorealistic graphical output at high speeds---which in turn means that we all now see computer-generated images and video on a daily basis. Games, movies, print media, and most professional websites are all but guaranteed to make use of some sort of generated graphics.
In this course, we'll write programs to create graphics and better understand some of the math and theory that makes them work.
This class meets 11:00am on MWF in Ruffner 352.
The textbook is Edward Angel and Dave Shreiner, Interactive computer graphics: a top-down approach with WebGL, 7e (ISBN 978-0-13-357484-5).
Course materials
- Syllabus
- Collaboration policy
- Textbook website
- Lectures:
- WebGL reference card
- Event reference
- PostScript program/file for 2-frequency octahedral geodesic sphere (don't forget to save a copy and try editing it with vim!)
Reading and videos
- For 16 Jan: Ch. 1 and/or lecture 1_5
- For 21 Jan: Lecture 1_3 and try to get triangle.html running
- For 23 Jan: Lecture 2_3 and 2_4 OR read sections 2.1-2.4 and 2.8-2.8.1 (and bring laptops)
- For 26 Jan: Lectures 3_1 and 3_2 and 3_4 OR read sections 2.5-2.7 and 2.8.2-2.10 (and bring laptops)
- For 28 Jan: Lecture 4_2 and/or read section 3.1 (and bring laptops)
- For 30 Jan: Lecture 4_3 and 4_4 and/or read sections 3.6-3.8 (and bring laptops)
- For 2 Feb: Lecture 4_6 and/or read section 4.1
- For 4 Feb: (same as for 2 Feb)
- For 6 Feb: (same as for 2 Feb)
- For 9 Feb: Lecture 5_1 and/or read sections 4.2-4.3. NB: we won't get to 4.3.4 and beyond on Monday, so you can defer that if you like. If you've never seen matrix multiplication before, the book touches it (thinly) in appendix section C.2, but I found this site a bit clearer, or you can just wait for me to present them.
- For 11 Feb: Lecture 5_2 and/or read the rest of 4.3 (4.3.4-4.3.6)
- For 13 Feb: Read 4.4, 4.5, and 4.8 (and bring laptops)
- For 16 Feb: Read 4.9-4.11 and/or Lecture 5_3 and 5_4 (and bring laptops)
- 18 Feb: Snow day!
- For 20 Feb: Read 4.6 and 4.12 and/or Lecture 5_5 (and bring laptops)
- For 23 Feb: Study for exam!
- For 25 Feb: Forgot to post a reading. Oops.
- For 27 Feb: Read 5.1-5.3 and/or Lecture 6_3 and 6_4.
- For 9 Mar: Read 5.4 and/or Lecture 7_1
- For 11 Mar: Read 5.5-5.7 and/or Lecture 7_2 (and bring laptops)
- 13 Mar: No class
- For 16 Mar: Read 5.8 (and bring laptops)
- For 25 Mar: Read 6.2-6.3 and/or Lecture 7_5 on light sources and the Phong lighting model.
- For 27 Mar: Read 6.3-6.4 and/or Lecture 8_1 with more specifics on the Phong lighting model.
- For 30 Mar: Read 6.7-6.8 and/or Lecture 8_2 on lighting/shading in WebGL (and bring laptops).
- For 1 Apr: Read 6.6 on recursive subdivision of spheres.
- For 3 Apr: Read 6.5 and/or Lecture 8_3 on polygon shading using Gouraud and Phong models (in theory).
- For 6 Apr: Watch lecture 8_4 with code examples of Gouraud and Phong shading (and bring laptops)
Homework
- For 26 Jan: finish exercises from 21/23 Jan: draw a shape in outline; draw a quadrilateral; make multiple shapes side-by-side; and draw a circle. Use separate files for each one!
- For 28 Jan: try to convert circle into a beachball.
- For 30 Jan: keep playing with the beachballs, try different things and see what they do (and don't feel constrained that it has to look like a beachball).
- For 13 Feb: Starting from any existing graphic file (triangle, beachball, etc), try to use matrix multiplication to transform it in any visible way (other than making it disappear entirely)---and be able to describe the transformation you did. It might be easier to do in the JS first, but if you get that working, try to move the work into the vertex shader.
- For 16 Feb: Starting from a file that generates a 2D image in the XY plane (i.e. its points are vec2s), apply different kinds of matrix transformations that put (some of) the resulting vertices into 3-space (with a non-zero Z coordinate).
- For 20 Feb: Reimplement the spinning beachball, this time keeping theta only in the javascript and building a rotation matrix that is what is multiplied in the shader; then make that spinning beachball simultaneously move left and right while spinning (maintain offset in JS, build translate matrix, compose translate and rotate matrix---remember to rotate then translate in the composition).
- For 9 Mar: Set up a little still-life of your own, and draw various projections of it.
- For 11 Mar: Reuse or build a small scene with one or two "solid" objects, and use lookAt and ortho to build an orthographic camera to view the scene. (and bring your laptop to show it to us/ask questions if it's not working)
- For 16 Mar: Build a small scene of your own that contains "solid" objects (e.g. a cube or two). Include a button (or keybindings) to toggle back and forth between orthographic and perspective viewing of the scene (and make sure the scene and the camera angle make these two visibly different). Build it from code you have worked on before; don't just start with one of the book examples here. Other bells and whistles (buttons to rotate or move the scene) are cool but not required.
- For 18 Mar: Continue working on the toggle back and forth between an orthographic and perspective projection of the same scene (from the same angle and with comparable clipping); and using a debugger or similar, get and write down the actual matrices produced by lookAt, by ortho, and by perspective.
- For 25 Mar: Explain why a full moon (on a clear night) is much more than twice as bright as a half moon. Bring your explanation with you to class.
- For 30 Mar: Copy the files for today's work (lighting-2) into your own directory and play with them; both to try to get them to work and to change different parameters and see how they affect it. Come to class with a working hypothesis on how to fix at least one of the things that is currently wrong with the diffuse lighting implementation.
- Moved to 3 Apr: Because of the caching issues, you ended up seeing the demo go from broken to working in one step, comprising several distinct fixes. Copy the lighting-3 code (you can put the shaders back in the html if you like) into your own directory, and make different copies of it: on each copy, re-create a different one of the bugs we fixed in class, but only one bug per copy. Compare the results with each other and with the correct version, and try to explain how each bug causes the visual effect you see. Bring your notes on this to class.
- Also for 3 Apr: Take some octahedron-model-building code (such as what I've used for lighting-3) and start modifying it to subdivide the faces as described in the book and in class.
- For 6 Apr: Finish building a recursively-subdivided octahedron. Make good use of the code from the book! Bring your laptop to class.
- Also for 6 Apr: Find at least five specular reflections you can see. If possible, take a picture you can bring to class (on your phone is fine) and show people; if not, at least give a clear description (including maybe why it was interesting).
- For 8 Apr: Get the subdivided octahedron working from scratch or from lighting-3, i.e. not just using the book's version and changing tetrahedral to octahedral symmetry. You can (probably should) set a constant at the top of your code for what level of subdivision you want to go to---experiment with 2 levels (making a 4-frequency) and 3 (making 8-frequency), and maybe some others.
- For 10 Apr: Starting from subdiv-spec in the class directory, first figure out what the "true" parameter is doing to the normalize function call, and fix it; then, add code to the app and shaders to implement a specular reflection. For now, use smooth/Gouraud shading (work done in the vertex shader); if you get that completely working, save a copy of it before you work on the per-fragment/Phong shading version (we'll hopefully be starting that in class).
Projects etc
In-class demos
- 23 Jan: triangle
- 23 Jan: gasket1
- 26 Jan: circle
- 26 Jan: varying
- 28 Jan: beachball
- 30 Jan: spinning
- 25 Mar: lighting 1 (ambient, starting diffuse)
- 27 Mar: lighting 2 (diffuse "implemented" but not working)
- 30 Mar: lighting 3 (diffuse implemented)
- 8 Apr: subdiv-spec (subdivided, surfaces messed up)
- 10 Apr: subdiv-spec 2 (specular not quite working)
- 13 Apr: subdiv-spec 3 (specular reflections fixed)
Board photos
- 16 Jan: front, right
- 21 Jan: board
- 2 Feb: board
- 4 Feb: front-middle (mine); front-left, front-right, side, back-left, back-right (yours)
- 6 Feb: front-middle, front-right (mine); front-left, front-far-right, side, back-left, back-right (yours)
- 9 Feb: front-middle, front-right (mine); front-left, front-right, side, back-left, back-right (yours)
- 11 Feb: left, right
- 13 Feb: board
- 16 Feb: board
- 18 Feb: Snow day
- 20 Feb: board
- 25 Feb: left, right
- 27 Feb: front; still life subject, left, right, side, back,
- 9 March: left, right
- 11 March: board
- 16 March: board
- 18 March: left, middle, back-left, back-right
- 20 March: board
- 23 March: board
- 27 March: board
- 1 April: left, right
- 3 April: board
- 6 April: board
- 8 April: board
- 10 April: board
- 13 April: board
- 15 April: board
- 17 April: board
- 20 April: left, right, side, back
- 22 April: left, right, side
- 24 April: left, right, side, back
