Exercise 3: WebGL

Check that you're using a browser that supports WebGL. Download Chrome Canary if necessary.

Start with this simple HTML5 webpage, save it as webgl.html

<!DOCTYPE html>
<html>   
 <head>
  <meta charset="utf-8">
  <title>WebGLove</title>
 </head>
 <body>
  
 </body>
</html>

Download the minified ThreeJS library into your project folder.
Follow the getting started until you have a sphere rendering at the end of it. Woo!
Change the sphere color to yellow.
Tweak the sphere parameters so that the sphere is rounded.
Tweak the light position parameters until there's less shading around the sphere.
Add two eyeballs to the face, positioned correctly.
Add a mouth to the face. You can try doing it using THREE.shape and .extrude or by using a different geometry.
Add TextGeometry that says "Smile!"
Either animate the smiley face bouncing, or animate the camera zooming in and out, using window.setInterval or window.requestAnimationFrame (or this shim).