Textbook Information and Other Resources
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. I will provide an updated link to find a summary of what happened in class, with links to code examples and references at the beginning of the semester.
You can also refer to the topics page from the archive from last year if you want to look ahead, though some things will change.
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 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 many 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. 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.
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. A 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/