WebGL Web Resources

There are a lot of excellent online resources for learning about WebGL. The following list contains pointers to some that should be useful in the course:
Quick Ref
A very useful quick reference guide for WebGL and OpenGLES. It is PDF and to use it you will really need to print it out.
Learning WebGL
An extremely good series of tutorials on WebGL that really shows you how to build programs step by step.
Khronos WebGL
Khronos group provides an excellent set of WebGL resources for general use.
Dive example.
A very cool audio visualizer written with WebGL
ThreeD.js
A definitive WebGL example site.

Javascript and HTML5 Web Resources

Assignment Notes

You can best implement Assignment 3 by extending from Assignment 2. You can divide the implementation into the following major steps:
  1. in DrawScene call a function to create a view matrix and multiply that times the mvMatrix. This matrix represents the camera for your Tank.
  2. Modify your mouse handling code to change the position and orientation of your Camera across the terrain.
  3. Finally using the Height data from your Texture image modify the height and orientation (UP Vector) of your tank Camera.

WebGL Code Examples

Mouse Rotate Y
A mouse handler to rotate a viewdirection vector around Y Javascript
Compute Normal
Compute the Normal to 3 Points in Javascript
Get Terrain Height
How to convert Pixel data to Height in Javascript
Read Texture Data
How to access the pixel data inside of a texture from Javascript code
View Matrix
How to build a View Matrix in WebGL javascript directly.
mat4 layout
How is a 4x4 matrix laid out into a 16 entry array.
WebGL to HTML
How to connect WebGL shader uniforms to HTML form elements for input.