Cube to panorama

Convert from a cube to equirectangular panorama. The reverse of https://stackoverflow.com/questions/29678510/convert-21-equirectangular-panorama-to-cube-map/29681646#29681646

by Richard Morris

JavaScript

var info = [
    { name: "right", imageData: 0 },
    { name: "left",  imageData: 0 },
    { name: "top",   imageData: 0 },
    { name: "bottom",  imageData: 0 },
    { name: "front",  imageData: 0 },
    { name: "back",  imageData: 0 },
];

var sourceImageSize = 128;
var eqrImageWidth = sourceImageSize * 4;
var eqrImageHeight = eqrImageWidth / 2;
var outputContext = 0;
var outputImageData = 0;
var canvasStride = 4;

init();

function init() {

    var canvas;

    for (var i = 0, canvas; i < info.length; ++i) {

        canvas = document.createElement("canvas");
        canvas.id = info[i].name;

        canvas.width = sourceImageSize.toString();
        canvas.height = sourceImageSize.toString();
        canvas.style.position = "absolute";
        canvas.style.left = i * (sourceImageSize + 10) + "px";
        canvas.style.top = "0px";
        canvas.style.backgroundColor = "#fff";
        document.body.appendChild(canvas);

        context = canvas.getContext("2d");

        context.beginPath();
        context.rect(0, 0, sourceImageSize, sourceImageSize);
        context.fillStyle = "hsl(" + (i / info.length) * 360 + ", 60%, 75%)";
        context.fill();

        var num_lines = 15;
        for (var x = 0; x < num_lines; ++x) {

            context.beginPath();
            context.moveTo(sourceImageSize * x / num_lines, 0);
            context.lineTo(sourceImageSize * x / num_lines, sourceImageSize);
            context.stroke();

            context.beginPath();
            context.moveTo(0, sourceImageSize * x / num_lines);
            context.lineTo(sourceImageSize, sourceImageSize * x / num_lines);
            context.stroke();
        }

        context.font = "40px Sans-serif"
        context.strokeStyle = 'black';
        context.lineWidth = 8;
        context.textAlign = 'center';
        context.strokeText(info[i].name, (canvas.width / 2), (canvas.height / 2) + 20);
        context.fillStyle = '#6a6';
        context.fillText(info[i].name,...