Question

I have a question about Faking 3d in HTML5/Canvas/Javascript…

Basically, I have a 2d image drawn on a <canvas> using drawImage().

What I would like to do, is draw the image, then displace the texture on the sphere to look… sphere-like…

see image below for clarity:

Any ideas?

I have googled myself to near-death over this, also it cannot be WebGL as it has to work on Mobiles… is there a way to do this?

Answer 1

You can check a working prototype here: http://jsbin.com/ipaliq/edit

I bet there’s ton’s of room for optimization and better/faster algorithms, but I hope this proof of concepts will point you in the right direction.

The basic algorithm goes through each pixel of the original image and calculates its new position if it was subject to an spherical deformation.

Here’s the result:

Code:

var w = 150, h = 150;
var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,w,h);

//-- Init Canvas
var initCanvas = function()
{
  var imgData=ctx.getImageData(0,0,w,h);
  for (i=0; i<imgData.width*imgData.height*4;i+=4)
  {
    imgData.data[i]=i%150*1.5;
    imgData.data[i+1]=i%150*1.5;
    imgData.data[i+2]=(i/imgData.width)%150*1.5;
    imgData.data[i+3]=255;
  }
  ctx.putImageData(imgData,0,0);
};
initCanvas();

var doSpherize = function()
{
    var refractionIndex = 0.5; // [0..1]
        //refraction index of the sphere
    var radius = 75;
    var radius2 = radius * radius;
    var centerX = 75; 
    var centerY = 75; 
        //center of the sphere
    var origX = 0;
    var origY = 0;


    for (x=0; x<w;x+=1)
    for (y=0; y<h;y+=1)
    {
        var distX = x - centerX;
        var distY = y - centerY;

        var r2 = distX * distX + distY * distY;

        origX = x;
        origY = y;

        if ( r2 > 0.0 && r2 < radius2 )
        {
            // distance
            var z2 = radius2 - r2;
            var z = Math.sqrt(z2);

            // refraction
            var xa = Math.asin( distX / Math.sqrt( distX * distX + z2 ) );
            var xb = xa - xa * refractionIndex;
            var ya = Math.asin( distY / Math.sqrt( distY * distY + z2 ) );
            var yb = ya - ya * refractionIndex;

            // displacement
            origX = origX - z * Math.tan( xb );
            origY = origY - z * Math.tan( yb );
        }

      // read
      var imgData=ctx.getImageData(origX,origY,1,1);
      // write
      ctx.putImageData(imgData,x+w,y+h);
    }
};
doSpherize();

Note

I would advice agains such an intense operation to be handed by the frontend without webGL pixel shaders. Those are very optimized and will be able to take advantage of GPU accelaration.