CS 315 Homework 5 - WebGL Notes

As an experiment in order to ease the development process for people who are still struggling with the Android emulator, for this assignment you are welcome to develop in an alternate platform: in particular, using WebGL. WebGL is OpenGL ES for the web browser--it's exactly like what we're doing, but loading in an HTML5 Canvas rather than an Android View.

While all of the OpenGL code stays the same (and all the matrix transformations/etc. match), the base language is JavaScript rather than Java. JavaScript has a similar syntax to Java; for our purposes, the main difference is that JavaScript is untyped (you don't declare a variable type when you make a variable). This can make the code harder to read and it's easier for things to go wrong, but otherwise the structure is the same. So if you are comfortable with JavaScript---or would rather be uncomfortable struggling with JavaScript than be uncomfortable struggling with the emulator---you are welcome to use WebGL for this assignment (if so: be sure and let me know how it goes!)

I will be supporting Android development primarily (and use it as examples in class), but am happy to help individually with specific WebGL issues as they come up.

I have thrown together some starter code for getting the teapot model loaded and rendered in WebGL. If you look throgh the code, you'll see it is very similar to the Android renderer, with a few syntactical differences. Note that the WebGL starter code is not as clean or nicely factored as the Android code.

Important note 1: In order to let JavaScript properly load external object files, you need to run the code from a web server. This doesn't need to be online--you can easily have your own computer act as a webserver (though either Apache or node.js, for example). Basically you need to be able to access the file through http:// not through the file:// protocol.
Important note 2: You need to write this code yourself in low-level OpenGL ES. Do not rely on third-party libraries to do the work for you! I have provided a couple of libraries (jquery for sanity, gl-matrix for matrix operations, and webgl-obj-loader for loading .obj files) you are welcome to use, but any other libraries you find online you must clear with me first.
- Three.js is right out.

Again, getting this working is up to you; I can offer limited support at this point. My guess is that getting WebGL working (and dealing with JavaScript's quirks) will take about the same amount of time as you would lose waiting on the emulator... but it may feel like you're being more productive and so being more pleasant.

You should decide early which platform you want to work on--having a platform not work out isn't an excuse for a late assignment. For example, you should have settled on a platform by the time Part 1 of the assignment is due.

Finally, here are some resources I've cobbled together for working with WebGL:

http://glmatrix.net/docs/2.2.0/index.html Documentation for the 3rd-party matrix library you should use
https://github.com/frenchtoast747/WebGL-Obj-Loader Source (and documentation) for the 3rd-party .obj loader I've adapted. Note that I have modified the code to make it work better (but have not submitted the fixes yet).
http://www.learnopengles.com/webgl-lesson-one-getting-started/ The learnopengles tutorial in WebGL mode---same tutorial as for Android, but now in JavaScript!
http://net.tutsplus.com/tutorials/webgl-essentials-part-i/ Another tutorial for WebGL
http://webglplayground.net/about An online playground for testing WebGL. Note that this won't help much for this assignment, but might be fun.
Mozilla JavaScript Guide An in-depth JavaScript tutorial created by Mozilla (the group that makes the Firefox browser)
Re-introduction to JavaScript A more concise summary of the JavaScript language, if you just need a refresher
Eloquent JavaScript One of many free textbooks for learning JavaScript
jQuery A JavaScript library that makes JavaScript programming pleasant--basically a set of helper functions and shortcuts to common behaviors. See also the documentation for details, as well as the getting started tutorial for learning both JavaScript and jQuery.