title: Is an imageData CanvasPixelArray directly available to a canvas WebGL context?
body: <p>I'm using Three.js to draw 3D models onto a webgl canvas renderer above simple DOM elements, and I need to do collision detection between them. My currently working method is to use renderer.domElement.toDataURL(), load this as an imageData object then draw this onto a separate 2D canvas context, then pull the getImageData() pixel array and iterate through using <a href="http://www.playmycode.com/blog/2011/08/javascript-per-pixel-html5-canvas-image-collision-detection/" rel="nofollow">this awesome pixel collision function</a>.</p>
  
  <p>This is <strong><em>incredibly</em></strong> slow, and pulls my frame rate down to a nearly unplayable ~5-8 FPS. Without running this hit detection I get about 40-50 FPS.</p>
  
  <p>My best guess is that the slowdown is the incredibly unwieldy <em>toDataURL()->load image->drawImage()->getImageData()</em>.</p>
  
  <p>My question becomes: <strong>Is there a better way to access the flattened 2D pixel data available on the WebGL canvas?</strong> or perhaps a better method of extrapolating my 3D object coordinates without parallax? Honestly, any way to get some kind of collision detection faster than I'm currently doing it will be immensely useful.</p>
  
  <p><strong>EDIT</strong>: the WebGL context.readPixels() works <em>great</em> for me, and is super fast compared to my previous kludge. Though it should be noted that the data array is mirrored top-to-bottom as compared with a regular image pixel data array. I simply flipped my collision routine Y value check and got this to work, though others may get tripped up in trickier ways. Good luck!</p>