**Principles of Computer Graphics** **Reed College CSCI 385 Spring 2022**        ......................... . . . . . . . . . . . . .
This course is an introduction to computer image synthesis and mathematical modeling for computer graphics applications. Topics include coordinate systems, vector and affine spaces, 2-D and 3-D transforms, projection, curves and surfaces, and animation. We work to produce photorealistic 2-D renderings of 3-D virtual scenes. To do so we we use physical modeling and simulation to mimic natural phenomena. To produce the images quickly enough for interaction, we use numeric approximation techniques and graphics hardware, and also geometric algorithms and data structures. This semester we will use Javascript and WebGL to produce graphics web applications. **Prerequisites:** CSCI 121 and MATH 201.
**Meets:** 3:15-4:35 TuTh in Physics 240A.
**Instructor:** Jim Fix
**Office:** Library 314
Jim's office hours are posted [here](http://jimfix.github.io/teaching.html). # Schedule **Week 1**
• course overview: [slides A](lectures/CG-Lec01-1a.pdf) • [slides B](lectures/CG-Lec01-1b.pdf) • [Stanford bunny](demos/viewer/bunny.html) • [Utah teapot](demos/viewer/teapot.html)
• Javascript and WebGL; OpenGL: [slides](lectures/CG-Lec01-2.pdf) • [js](js/primer.html) • [demo](demos/webgl/triangle.html) **Week 2**: geometry, coloring, and framing
• geometric primitives; RGB space; barycentric space; frames: [slides](lectures/CG-Lec02-1.pdf) • [hand-waving](demos/hand-waving/showcase.html)
• the OpenGL transformation stack: [slides](lectures/CG-Lec02-2.pdf) • [a pretty scene](demos/scene/scene.html) **Week 3**: affine and Euclidean spaces
• vector space review; affine spaces: [notes](lectures/CG-Lec03-1.pdf) • [DeRose](https://graphics.pixar.com/people/derose/publications/GeometryBook/paper.pdf)
• affine transformations
**Reading:** G 2 & 3; SM 5 & 6; AS 3 **Week 4**: perspective projection; hardware renderinf
• coordinate frames and perspective: [notes](lectures/CG-Lec04-1.pdf)
• hardware rendering; vertex and fragment shaders
**Reading:** G 4-6, 10-11; SM 7; AS 4 & 6.2 **Week 5**: rasterization; smooth interpolation
• rasterization of lines and triangles; per-fragment blending
• Lagrange polynomial interpolation of points
**Reading:** G 12 & 13; SM 8; AS 6.8 & 6.9
**Week 6**: ray casting; curves
• triangle meshes, ray casting, and hidden line removal
• splines in general; quadratic Bezier curves **Reading:** G 10 & 11; SM 12.1 & 15.6; AS 6.11 & 10.6 **Week 7**: Beziers (cont'd); ray casting redux
• cubic Bezier curves; deCasteljau's algorithm
**Reading:** AS 10.9.2
• Formulating program 3. [write-up](assignments/walk-thru-it-solution.pdf)
**Reading:** G 10 & 11; SM 12.1 & 15.6; AS 6.11 & 10.6 **Week 8**: B-splines
• B-spline basis functions. [HW ray tracing demo](demos/spheres/spheres.html)
**Reading:** 10.7
• B-spline properties; convolution; Chaikin's algorithm
**Week 9**: Surface patches
• Mea culpa for program 3; bi-quadratic Bezier patches; B-spline patches
**Reading:** G 22.5; AS 10.6.2 & 10.9
• GLSL ray tracing for Program 4.
**Reading:** G 20; SM 4 & 13; AS 11.1-11.3
**Week 11**: Subdivision surfaces
• Winged twinned half-edge data structure for oriented surface meshing.
**Reading:** SM 12.1
• Loop subdivision. Catmull-Clark subdivision.
**Reading:** G 22.6; AS 10.12; [Stanford slides](http://graphics.stanford.edu/courses/cs468-10-fall/LectureSlides/10_Subdivision.pdf); [CMU slides](http://www.cs.cmu.edu/afs/cs/academic/class/15462-s14/www/lec_slides/Subdivision.pdf)
**Week 11**: More subdivision; quaternions for animation
• Doo-Sabin dual scheme; Butterfly interpolating scheme; creases.
**Reading:** [SIGGRAPH '00 course notes](http://www.multires.caltech.edu/pubs/sig00notes.pdf) (includes Pixar's Geri's game paper)
• Quaternions for representing rotation and orientation.
**Reading:** G 7; SM 17.2.2; AS 3.14
**Week 12 and 13**: Physical simulation for animation
• Formulating gravity, boids, and cloth.
**Reading:** G 23; SM 17.5-17.6; 9.1-9.4
**Papers:**
... [SIGGRAPH '97](https://www.cs.cmu.edu/~baraff/sigcourse/) physical modeling course
... [Reynold's](lectures/reynolds-boids.pdf) flocking boids
... [Provot's](lectures/provot-cloth.pdf) cloth with springs
**Week 13**: Animation principles; spacetime constraints
**Reading:** G 23 (again); SM 17.1-17.4; 8.6
**Papers:**
... [Lasseter's](lectures/lasseter-animation-principles.pdf) position paper
... [Witkin & Kass](lectures/witkin-kass-spacetime-constraints.pdf) spacetime constraints
......................... . . . . . . . . . . . . . . . . **Topics To Be Covered**
The topics below are the typical topics and techniques covered by the course, with some possible extra topics at the end. I will flesh this out with links to course materials listed above as the semester progresses. **Geometry I**
![ ](thumbs/teapotmesh.jpg height="100") • surface representation, meshing.
• linear and affine spaces.
• interpolation, barycentric coordinates.
> _the object showcase_: making 3D surfaces **Geometry II**
![ ](thumbs/vectors.jpg height="100") • viewing and model transformations.
• matrices.
• homogenous coordinates.
• coordinate frames.
• projection.
> _make a scene_: rendering with transforms **Rendering I**
![ ](thumbs/teapot.jpg height="100") • direct illumination, z-buffering.
• shading and lighting models.
• vertex and fragment shaders.
> _walk thru it_: a ray casting flip-book **Curves**
![ ](thumbs/bezier.jpg height="100") • position interpolation.
• Bezier and B-spline curves.
• subdivision curves.


**Rendering II**
![ ](thumbs/rt-recursive.jpg height="100") • recursive ray tracing.
• reflection, refraction, shadows.
• the rendering equation (time permitted).
> _Bezier funhouse_: ray tracing a Bezier mirror

**Surfaces**
![ ](thumbs/subdivide.jpg height="100") • the winged twinned half-edge data structure.
• subdivision surfaces.
> _cycle sub-divide!_


**Animation**
![ ](thumbs/run.jpg height="100") • keyframing, animation principles.
* quaternions for interpolating orientation.
• particle systems, mass & springs.
• numeric integration.
> _gaming physics_

......................... . . . . . . . . . . . . . . . .
# Assignments * **Program 01:** the object [showcase](assignments/showcase.html), due 2/10. * **Program 02:** make a [scene](assignments/scene.html), due 2/22. * **Program 03:** walk [thru](assignments/walk-thru-it.html) it, due 3/18. * **Program 04:** the Bézier [funhouse](assignments/bezier-funhouse.html) due 4/12. * **Program 05:** the cycle [subdivide](assignments/cycle-subdivide.html) game due 4/28. * **Program 06:** a [sheet](assignments/sheet-to-the-wind.html) to the wind due 5/12. --- Assignments for this course will be a mix of written homework and programming projects that give you practice with the lecture and reading material. You will build interactive web pages containing Javascript code that relies on WebGL to perform hardware rendering of 2D and 3D scenes. The bulk of the coding will model these scenes, often using geometry and vector mathematics, and will also involve physical modeling of things like light, color, and movement. The programs instruct graphics hardware to depict the scenes and interact with the user to affect what's shown. **Bugs**
Programming that performs graphical modeling and output is the main goal of the course, and it is a peculiar variety of coding. Bugs are literally made apparent--- you *see* your mistakes. Oftentimes the code runs just fine, but the output looks wrong or off. You'll develop a wide set of skills for anticipating bugs, and the bugs can be numeric mistakes as well as the logical, logistical, and other traditional coding bugs that you normally encounter writing code. This sometimes makes the programming fun. I encourage you to save any ["happy accidents"](https://www.youtube.com/watch?v=_Tq5vXk0wTk) that result from buggy code. You can collect a [blooper reel](https://dl.acm.org/doi/abs/10.1145/77276.77289) of the interesting artifacts of mistakes throughout the semester. There is also a specific variety of applied mathematics we are learning this semester, and that perhaps is another main goal of the course--- concretely and directly using several mathematical techniques for modeling and simulation. You'll hopefully work out a lot on paper before you code up your ideas. I strongly encourage working this way. ......................... . . . . . . . . . . . . . . . .
# Outcomes Students in this course will do the following:
* Review linear algebra in the context of computer graphics. This includes 4-D transformations of points and vectors represented with homogeneous coordinates. * Learn the principles of the numeric modeling of curves and surfaces for geometric design, especially B-spline, Beziér, and subdivision curves and surfaces. * Learn the standard hardware and software techniques for modeling color, light, and shading in complex 3-D scenes and rendering them from some viewpoint. * Develop and debug interactive visual programs. * Learn numeric techniques for interpolation, differentiation, and integration, particularly for physical modeling and animation. * Write code that uses geometric data structures and algorithms. * Review research developments in the field of computer graphics (e.g. activities of SIGGRAPH). ......................... . . . . . . . . . . . . . . . .
# Texts and References There are several good computer graphics textbooks that all roughly cover the same material. I've worked to make a complete list just below here. Many vary simply because they include code from a particular language and library, say OpenGL/C++ or WebGL/Javascript. I've chosen to make three particular texts available in the bookstore and in the library. They are not required, but obtaining at least one of them is strongly recommended. Any of the three could be treated as a textbook of the course, and they all cover the core material that we will cover. **Recommended**
• Marschner & Shirley, [*Fundamentals of Computer Graphics*](http://www.cs.cornell.edu/~srm/fcg4/), [5th edition](https://www.routledge.com/Fundamentals-of-Computer-Graphics/Marschner-Shirley/p/book/9780367505035) CRC Press, 2021.
• Angel & Shreiner, [*Interactive Computer Graphics*](https://www.pearson.com/us/higher-education/product/ANGEL-Interactive-Computer-Graphics-RENTAL-EDITION-8th-Edition/9780136681670.html), 8th edition (WebGL), Pearson, 2020.
• Gortler, [*Foundations of 3D Computer Graphics*](http://www.3dgraphicsfoundations.com/), MIT Press, 2012.
The last, Gortler, is the tersest, but I find the mathematics more in line with what you might expect from Reed math (and physics) courses. In a way, it lacks fluff and so is most succinct in relating the ideas and the techniques. It's stronger with the preliminaries, namely, in its coordinate-free approach to specifying scene geometry, transformations of scene objects' geometry, and scene view transformations. But Gortler is, at times, fairly cavalier in its approach to the other topics. It is the cheapest, as a result. The Angel & Shreiner text does a better job of covering the rest of the standard graphics techniques. The latest two editions are written with WebGL, the graphics library we use. The Marschner & Shirley text, is maybe the best in between. It covers a lot more material than Gortler, roughly equivalent to what's in Angel & Shreiner, but its exposition of the mathematics feels more clean and direct than Angel & Shreiner. **Others**
• Blinn, [Jim Blinn's Corner: (various subtitles, three volumes](http://www.jimblinn.com/publications/).
• Buss, [3-D Computer Graphics](http://www.math.ucsd.edu/~sbuss/MathCG/index.html).
• Casselman, [Mathematical Illustrations](http://www.math.ubc.ca/~cass/graphics/manual/index.html).
• Cohen & Wallace, [Radiosity and Realistic Image Synthesis](http://www.amazon.com/Radiosity-Realistic-Synthesis-Kaufmann-Computer/dp/0121782700).
• DeRose, [3-D Computer Graphics: a Coordinate-Free Approach](https://graphics.pixar.com/people/derose/publications/GeometryBook/paper.pdf).
• Foley & van Dam, [Computer Graphics Principles and Practice](http://www.amazon.com/Computer-Graphics-Principles-Practice-Edition/dp/0321399528).
• Glassner, [An Introduction to Ray Tracing](http://www.glassner.com/portfolio/an-introduction-to-ray-tracing/).
• Glassner, [Principles of Digital Image Synthesis (volumes 1 and 2)](http://www.realtimerendering.com/Principles_of_Digital_Image_Synthesis_v1.0.1.pdf).
Foley & van Dam is the most renowned text. Its first edition was one of the first of its kind. It was recently updated but the two older versions are also worth looking at, especially to see in what ways graphics technology has, and hasn't, changed. Of the remaining, I found Peter Shirley's and Samuel Buss' to be the most focused on the mathematical fundamentals of the field. (I should note that Peter Shirley is an alum.) **SIGGRAPH proceedings**
The best collection of materials on computer graphics, including the most up-to-date write-ups of techniques, can be found in the research paper proceedings of [the annual SIGGRAPH conference](https://s2021.siggraph.org/) The 2021 conference research papers are [linked here](https://dl.acm.org/toc/tog/2021/40/4) through the ACM digital library. I highly recommend browsing through several recent years, and also ones from many years' past, to get a sense of what the computer graphics research community works on. The papers are generally very readable to anyone with a solid undergraduate math (and/or physics) background. We will look at papers and tutorials from this conference throughout the semester. ......................... . . . . . . . . . . . . . . . .
# Programming Resources We will be writing code that relies on WebGL, WebGLUtil, GL-matrix and other supporting Javascript libraries. These all rely on graphics hardware and are built on top of OpenGL, a standard library (normally invoked in C++) for communicating with GPUs to do fast hardware rendering. In the last decade, all these GL-based language tools rely on *vertex and fragment shaders* written in GLSL, a C-like language for calculating on the GPU. There are a wealth of resources on-line for these technologies. I'll be adding to the list below throughout the semester. **Useful Links**
• [OpenGL on-line documentation](https://www.opengl.org/sdk/docs/). Reference for the OpenGL graphics library.
• [GLSL documentation](https://www.opengl.org/documentation/glsl/). Reference for GLSL shader code.
• [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html). Rich resource on WebGl programming.
• [GL matrix documentation](https://glmatrix.net/). Documentation for a Javascript matrix/vector library.
• [Eloquent Javascript](https://eloquentjavascript.net/). A free textbook on Javascript programming.
• [Node.js](https://nodejs.org/en/docs/). A javascript interpreter that runs in terminal.
• [The Book of Shaders](https://thebookofshaders.com/). A text and an [on-line shader IDE](https://thebookofshaders.com/).
• [ShaderToy](https://www.shadertoy.com/). People's shared shader code.
......................... . . . . . . . . . . . . . . . .