Textbook Information and Other Resources
Computer Science 336
Fall 2023

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:

Edward Angel and Dave Shreiner, Interactive Computer Graphics: A Top-Down Approach with WebGL, 7th edition, Addison-Wesley 2014. Amazon link.
- This is a definitive university textbook on computer graphics and, in fact, the course is roughly based on the first 8 chapters. If we were going to require a textbook, this would be it. It is expensive, but if you are the kind of person who actually reads books, you might want to get one. (The 6th edition is just as good as the 7th, the only difference being that the code examples are in C++.)
Steven J. Gortler, Foundations of 3D Computer Graphics, MIT Press 2012 Amazon link.
- A concise overview of graphics concepts and mathematics. It does a good job in the first five chapters presenting the mathematics of transformations in a small number of pages. Other parts, I have found, tend to be too mathematical or abstract and short to really be useful as a text. You can get the first 5 chapters free online via the ISU library. (Just go to the library site and search for the title, then click the "online resource" link. If off-campus, you'll need to be on the VPN first.)
Matsuda and Lea, WebGL Programming Guide, Addison-Wesley 2013, aka "The Teal Book". Amazon link.
- This is a how-to guide that will walk you through writing actual code examples using WebGL. It is not expensive. Or, use the electronic copy that is available free through the ISU library. Many of our examples in the first part of the course are adapted from this book.
Tony Parisi, Programming 3D Applications with HTML5 and WebGL. Amazon link.
- In the latter part of the course we will start using a library called three.js that will automate some of the more repetitive details of using the OpenGL pipeline. The documentation for the library itself is pretty sparse and I have found this book to be useful in filling in some of the how-to questions that come up. Again, there is an electronic copy available through the ISU library.

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. We have to deal with JavaScript, but we used WebGL during the last few years and there has been 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.

If you do already know JS, you probably used it in the context of making dynamic web pages, and likely relied on some extensive fancy-ass libraries (JQuery, React, etc.) to do cool stuff. We are not going to use any of that - it will all be plain, vanilla JavaScript code.

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. Most are just crap. 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. VSCode seems pretty good.

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. Some IDEs will natively allow you to do this as part of a preview feature. If you are previewing your code using a browser, 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 When the time comes I'll post the relevant parts on Canvas.

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/

Textbook Information and Other Resources Computer Science 336 Fall 2023