Convert 2:1 equirectangular panorama to cube map

Question

I\'m currently working on a simple 3D panorama viewer for a website. For mobile performance reasons I\'m using the three.js CSS3 renderer. This requires a cube

Answer 1

Here's a JavaScript version of Benjamn Dobell's code. The convertFace needs to be passed two ìmageData objects and a face ID (0-6).

The provided code can safely be used in a web worker, since it has no dependencies.

        // convert using an inverse transformation
        function convertFace(imgIn, imgOut, faceIdx) {
            var inPix = shimImgData(imgIn),
                        outPix = shimImgData(imgOut),
                        faceSize = imgOut.width,
                        pi = Math.PI,
                        pi_2 = pi/2;

            for(var xOut=0;xOutmax?max:val));
        }

        function shimImgData(imgData) {
            var w=imgData.width*4,
                    d=imgData.data;

            return({
                getPx:function(x,y) {
                    x=x*4+y*w;
                    return([ d[x], d[x+1], d[x+2] ]);
                },
                setPx:function(x,y,rgb) {
                    x=x*4+y*w;
                    d[x]=rgb.r;
                    d[x+1]=rgb.g;
                    d[x+2]=rgb.b;
                    d[x+3]=255; // alpha
                }
            });
        } // function shimImgData(imgData) {...}