title: Click to zoom in WebGL
body: <p>I need to implement what amounts to a "Google Maps" style zoom effect in WebGL.  Specifically I have a simple 2-dimensional scene that is always perpendicular to the camera.  When a user clicks on the scene, the camera should zoom to a location that is over the click, but closer to the 2-dimensional scene.</p>
  
  <p>For example see this jsfiddle, that implements the scene but no zooming:</p>
  
  <p><a href="http://jsfiddle.net/JqBs8/4/" rel="nofollow">http://jsfiddle.net/JqBs8/4/</a></p>
  
  <p>If you have a WebGL enabled browser, you should see a triangle and a square (2-dimensional) rendered at -7 on the Z axis.  I have put in a placeholder handleMouseUp() event handler that logs any click events, but I'm a little lost as to how to translate the coordinates given by the click event into a new location for the camera (or I guess equivalently a new view matrix).</p>
  
  <p>(The jsfiddle is based on tutorial 1 from learningwebgl.com and uses the glMatrix <a href="http://code.google.com/p/glmatrix/" rel="nofollow">http://code.google.com/p/glmatrix/</a> library for matrix operations.  Keep in mind that this is WebGL, which is similar to OpenGL ES, and has no access to glu* functions.)</p>