3D from 2D canvas content

Question

I have a 2D occupancy map like this (left side)

So far it is content drawn pixel by pixel in a canvas of the robot's web interface.

What I would like to achive is a pan/tilt/rotatable pseudo 3D view of it. Where each occupied block gets a rect. So something like this .

I don't even know where to start. Is this doable in pure html5? … Any guidance would help.

Some facts on my setup:

• webserver of the robot is a flask (python) server on a raspberry pi
• client browsers are Chrome (on windows) or Safari on iPad
• calculation should take place on client side

Thanks Robert

Answer 1

Is this doable in pure html5?

Sure since 3d is just a 2d projection. Check WebGL and http://threejs.org/ if you need a javascript library.

Answer 2

You can "fake" an extrusion in 2d canvas by drawing repeated-offset version of your floorplan.

You can lighten the corners a bit for effect.

Demo: http://jsfiddle.net/m1erickson/7wxGS/

Example code:

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.strokeStyle="gray";
    draw();
    ctx.strokeStyle="black"
    for(var i=.5;i<10;i+=.5){
        ctx.save();
        ctx.translate(-i,-i);
        draw();
        ctx.restore();
    }


    function draw(){
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(125,100);
        ctx.lineTo(125,125);
        ctx.lineTo(145,125);
        ctx.lineTo(145,145);
        ctx.lineTo(125,145);
        ctx.lineTo(125,175);
        ctx.lineTo(100,175);
        ctx.closePath();
        ctx.stroke();
        // exterior corners
        corner(100,100);
        corner(145,145);
        corner(125,175);
    }

    function corner(x,y){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="#ddd";
        ctx.fillRect(x,y,1,1);
        ctx.restore();
    }