Textbook Information and Other Resources
Computer Science 336
Fall 2022

Textbooks

There is no "required" textbook. The most important thing you can do is to take good notes in class, get your questions answered right away, and carefully read and try out all the sample code that we introduce and discuss in class. You can always find a summary of what happened in class, with links to code examples and references, on the topics page.

The following books are useful for one reason or another:

WebGL

A computer graphics course is always a kind of mishmash. On the one hand there are some concepts, principles, and mathematical foundations; on the other hand there are a lot of implementation details that can get pretty gory.

The standard API for interacting with graphics hardware is a set of libraries called OpenGL, along with a special language called GLSL that is used for the programmable portions of the GPU. (And of course, Microsoft has its own incompatible version of the same things, known as DirectX and HLSL.)

Rather than writing code directly in C or C++, we will be using WebGL, the JavaScript bindings for OpenGL that allow 3D rendering to take place in an html canvas element. The programmable "shader" code for the GPU will still be written in GLSL. WebGL is really the same as OpenGL ES 2.0, which is roughly comparable to OpenGL 3 with the deprecated stuff all removed and some fancy features left out, so we'll still be learning OpenGL.

The virtue of this approach is that we eliminate all the platform dependence, GPU driver configuration issues, and linkage of external dlls. Debugging can be a bit more difficult, and we have to deal with JavaScript, but we used WebGL during the last few years and there was an overwhelming consensus that it's a better way to go.

JavaScript??

If you don't know anything about JavaScript (JS), not to worry. If you already know C and Java it is usually not to difficult to start using JavaScript. We will primarily just get used to it by talking through code examples. However, I'd recommend taking a look at the main features before class starts if you haven't really looked at it before.

One good place to start might be with a short set of notes that I put together a while ago when I first had to learn JS. It's in the form of an interactive web page in which you can try out and edit the code examples directly in the browser. See https://stevekautz.com/cs336f22/js_notes/

JS is a fascinating language, and I find I can amuse myself for hours trying to figure out how it works. It is huge entertainment value for anyone interested in programming languages.

There are many, many resources on the WWW for learning JavaScript. Very few of them are good. One good place to start might be An Introduction to JavaScript for Sophisticated Programmers .

Software

Browsers and WebGL

Unless you have had the same laptop since you were five, you should be good to go with an up to date Chrome installation. To make sure your browser/platform supports WebGL, just connect to http://webglreport.com/. Nothing else needs to be installed. Firefox is ok too but there are a couple of nifty plug-ins for Chrome that help with graphics programming.

JavaScript IDEs

You can use Chrome as an html or JS editor too, but it lacks any kind of project management or code completion/navigation tools. So you'll probably want to use a better IDE for writing code, and use Chrome/Firefox for debugging. I haven't found one I really like yet. I'm currently using Atom. Others have recommended WebStorm.

Local Server

Modern browsers do not like to load resources (such as images) directly from the local file system. This will not be necessary at first, but when we start doing texture mapping you'll want to run a local server from which the browser can load your scripts and resources. Nothing fancy is needed. The simplest thing is just to make sure you have Python installed. Then you can just open a command shell, cd to the directory containing your stuff, and run the built-in http server from the command line,
python3 -m http.server 2222
(here 2222 is the port number you'll point your browser to).

If you are running Python 2, the equivalent library is:

python -m SimpleHTTPServer 2222

Other libraries

As we start using and understanding OpenGL we'll start incorporating parts of a higher-level library called Three.js into our work. Normally all you need in order to use Three.js is the file three.min.js, the "minified" version of the library, but I strongly recommend you also have a local copy of the non-minified version, three.js. There is documentation, but you'll quickly find you need to sometimes look at the source code to figure out what's going on, and it is much, much easier to navigate the full version. You can get both versions here. (You probably don't need the entire tarball from the download link on the main page.)

More references

Article by Eric Haines gives a detailed overview of the modern graphics pipeline
http://www.realtimerendering.com/erich/AnIntroductoryTourOfInteractiveRendering.pdf

Reference card for WebGL and GLSL
https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

Html man pages for OpenGL ES 2.0
http://www.khronos.org/opengles/sdk/docs/man/
(Functions do the same things as WegGL so the function descriptions are accurate, but the parameter types for the JS versions are sometimes different, so check the reference card above for the exact function signature.)

Three.js documentation
http://threejs.org/docs/

Eric Haines' Udacity course on graphics using three.js
http://www.realtimerendering.com/blog/interactive-3d-rendering-is-finally-complete/
(You can download and read the "book" chapters - basically the lecture scripts here. I've read most of these and the presentations are really good, though too much of the OpenGL details and mathematics are hidden to consider this a "textbook". The chapters on transformations and matrices are likely to be especially useful.)

The Real-Time Rendering site (has lots of references and recommended books)
http://www.realtimerendering.com/

Derivation of projection matrix
http://www.songho.ca/opengl/gl_projectionmatrix.html

Phong reflection model
http://pages.cpsc.ucalgary.ca/~eharris/past/cpsc453/f10/tut20/

JS Module pattern and IIFEs http://benalman.com/news/2010/11/immediately-invoked-function-expression/
http://toddmotto.com/mastering-the-module-pattern/

Some nice demos of Perlin noise used for displacement mapping, the fireball also has an associated tutorial about how it was done. https://www.clicktorelease.com/blog/experiments-with-perlin-noise
https://www.clicktorelease.com/blog/vertex-displacement-noise-3d-webgl-glsl-three-js

"A trip through the graphics pipeline", lots of hardware-oriented detail
https://fgiesen.wordpress.com/2011/07/09/a-trip-through-the-graphics-pipeline-2011-index/