Textbook Information and Other Resources
Computer Science 336
Fall 2014

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 truly gory implementation details. The standard API for interacting with graphics hardware is a set of libraries called OpenGL along with a special language called GLSL for the programmable portions of the GPU. (And of course, Microsoft has their own incompatible version of the same thing, known as DirectX and HLSL.) In the past, in keeping with tradition (OpenGL is basically a set of C functions) we've done the implementation part using C++ and required students to turn in assignments as Visual Studio projects.

This semester I've decided to use WebGL, the JavaScript bindings for OpenGL that allow 3D rendering in an html canvas element. That is, the programming assignments will use JavaScript along with GLSL rather than C++. 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. However, we won't be restricted to a Windows platform and it will be easy to distribute and share projects.

I have no doubt there are some challenges I haven't anticipated, but I have had pretty good luck working with it so far and on the whole I think the course is going to be more fun this way.

Textbooks

Both books are recommended. The first one is a concise presentation of the conceptual and mathematical essentials of computer graphics. The second is more of a how-to manual with lots of explicit, detailed examples of using WebGL.

Steven J. Gortler, Foundations of 3D Computer Graphics, MIT Press, 2012
Amazon link.

Matsuda and Lea, WebGL Programming Guide, Addison-Wesley 2013
Amazon link.

Everything will be covered in class, so neither of these books is absolutely required, but then again, neither one is terribly expensive.

JavaScript

If you don't know anything about JavaScript, 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.

JavaScript is a subtle and fascinating language and I find I can amuse myself for hours trying to figure out how it works. Huge entertainment value for anyone interested in programming languages.

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

When I had to learn JavaScript a few years back I made some notes and examples that you can find here (see the pdf) :
http://www.cs.iastate.edu/~smkautz/cs336f14/examples/javascript

If you really want to be good at JavaScript OR if you just like to think deeply about programming language design, you should get the book Javascript: The Good Parts by Douglas Crockford. This is probably the most well-respected reference on JavaScript best practices.

Software

Browsers and WebGL

If you plan to work on your own computer, you'll need a decent graphics card and an up-to-date Chrome or Firefox installation. To make sure your browser/platform supports WebGL, just connect to http://webglreport.com/. Nothing else needs to be installed.

I actually recommend having both Chrome and Firefox installed. Chrome has an outstanding JS debugger and a tracing utility for OpenGL calls, and Firefox has a very nifty real-time editor for shader (GLSL) code.

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 Eclipse with the JDST plugin. It's ok, and at least the interface and everything is familiar. Next I am going to try WebStorm, which came highly recommended by a former student that does a lot of JS development. Adam suggested Sublime Text, which can be made JS-aware via plugins.

If you have worked with any of these configurations, or have some other ideas, please post on Piazza!

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. I'd suggest making 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,
python -m SimpleHTTPServer 2222
(here 2222 is the port number you'll point your browser to).

For other alternatives (such as allowing the browser to access local resources) see
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally

Other libraries

In our initial examples we'll use some utilities provided by Matsuda and Lea in the WebGL book examples. You can get the examples here whether or not you buy the book. (I'll also provide the pieces you need with our first few code examples.)

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 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 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

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

WebGL cheat sheet - a more readable version of the reference card
http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.htm

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.)

Tony Parisi's blog on learning WebGL (includes tutorials; see "The Lessons" link)
http://learningwebgl.com/blog/

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.)

Jason McKesson's computer graphics tutorial
http://arcsynthesis.org/gltut/
(This is of very good quality for an online tutorial, provides alternative explanations for stuff in our book. Uses OpenGL but should be fundamentally similar to the WebGL calls.)

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