title: I need to warp a long image into a 2d circle (webGL). Distortion is expected
body: <p>I need to take a long (max resolution) image and wrap it into a circle.  So imagine bending a steel bar so that it is now circular with each end touching.  </p>
  
  <p><img src="https://i.imgur.com/KUfqEYP.jpg" alt="quick and dirty illustration"></p>
  
  <p>I have been banging my head against threejs for the last 8 hours and have so far managed to apply the image as a texture on a circle geometry, but can't figure out how to apply the texture to a long mesh and then warp that mesh appropriately.  The warping doesn't need to be (and shouldn't be) animated.  What we basically have is a 360 panoramic image that we need to "flatten" into a top-down view.  </p>
  
  <p>In lieu of sharing my code (as it's not significantly different), I've so far been playing around with this tutorial: </p>
  
  <p><a href="http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm" rel="nofollow noreferrer">http://www.johannes-raida.de/tutorials/three.js/tutorial06/tutorial06.htm</a></p>
  
  <p>And I do (I think) understand the broad strokes at this point.  </p>
  
  <p>Other things I've tried is to use just canvas to slice the image up into strips and warp each strip... this was horribly slow and I couldn't get that to work properly either!  </p>
  
  <p>Any help/suggestions?</p>