title: Convert 2:1 equirectangular panorama to cube map
body: <p>I'm currently working on a simple 3D panorama viewer for a website. For mobile performance reasons I'm using the Three.js <a href="https://github.com/mrdoob/three.js/blob/master/examples/css3d_panorama.html" rel="nofollow noreferrer">CSS 3 renderer</a>. This requires a cube map, split up into six single images.</p>
  <p>I'm recording the images on the iPhone with Google <a href="https://en.wikipedia.org/wiki/Google_Camera#Photo_Sphere" rel="nofollow noreferrer">Photo Sphere</a>, or similar apps that create 2:1 equirectangular panoramas. I then resize and convert these to a cubemap with this website: <a href="http://gonchar.me/panorama/" rel="nofollow noreferrer">http://gonchar.me/panorama/</a> (Flash)</p>
  <p>Preferably, I'd like to <em>do the conversion myself</em>, either on the fly in Three.js, if that's possible, or in Photoshop. I found Andrew Hazelden's Photoshop actions, and they seem kind of close, but no direct conversion is available. Is there a mathematical way to convert these, or some sort of script that does it? I'd like to avoid going through a 3D application like <a href="https://en.wikipedia.org/wiki/Blender_%28software%29" rel="nofollow noreferrer">Blender</a>, if possible.</p>
  <p>Maybe this is a long shot, but I thought I'd ask. I have okay experience with JavaScript, but I'm pretty new to Three.js. I'm also hesitant to rely on the <a href="https://en.wikipedia.org/wiki/WebGL" rel="nofollow noreferrer">WebGL</a> functionality, since it seems either slow or buggy on mobile devices. Support is also still spotty.</p>