Al final era bastante más sencillo que aquel ejemplo. Dejo un
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mapping</title>
<script type="text/javascript">
function $(x){return document.getElementById(x);}
function textureMap(ctx, texture, pts) {
/*Mapeo UV basado en Regla de Crámer para resolución de ecuaciones lineales y en
la obtención de determinantes por regla de Sarrus (Gracias a Andrea Griffini, AKA 6502 )*/
var tris = [[0, 1, 2], [2, 3, 0]];
for (var t=0; t<2; t++) {
var pp = tris[t];
var x0 = pts[pp[0]].x, x1 = pts[pp[1]].x, x2 = pts[pp[2]].x;
var y0 = pts[pp[0]].y, y1 = pts[pp[1]].y, y2 = pts[pp[2]].y;
var u0 = pts[pp[0]].u, u1 = pts[pp[1]].u, u2 = pts[pp[2]].u;
var v0 = pts[pp[0]].v, v1 = pts[pp[1]].v, v2 = pts[pp[2]].v;
ctx.save(); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1);
ctx.lineTo(x2, y2); ctx.closePath(); ctx.clip();
var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2
- v0*u1*x2 - u0*x1*v2;
var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2
- v0*u1*y2 - u0*y1*v2;
ctx.transform(delta_a/delta, delta_d/delta,
delta_b/delta, delta_e/delta,
delta_c/delta, delta_f/delta);
ctx.drawImage(texture, 0, 0);
ctx.restore();
}
}
function getInterPoints(ctx,x1,y1,x2,y2,from,to,step,nPoints,inv){
var tx,ty;
var x=x2-x1;
var y=y2-y1;
var dist=Math.sqrt(Math.pow(x,2)+Math.pow(y,2));
var angle=Math.atan(y/x);
var seg=dist/nPoints;
tx=x1;
ty=y1;
for(var i=from,j=to;i<(to+1);i+=(step),j-=step){
tx+=seg*Math.cos(angle);
ty+=seg*Math.sin(angle);
if(!inv)
ns.points[i]={x:tx,y:ty};
else
ns.points[j]={x:tx,y:ty};
}
}
var ns={points:[]};
onload=function(){
var nPoints=10;
var ctx=$('c').getContext('2d');
var tl={x:100,y:20};
var tr={x:500,y:10};
var bl={x:20,y:500};
var br={x:700,y:590};
ns.points[0]={x:tl.x,y:tl.y};
ns.points[nPoints]={x:tr.x,y:tr.y};
ns.points[((nPoints+1)*(nPoints+1))-(nPoints+1)]={x:bl.x,y:bl.y};
ns.points[(nPoints+1)*(nPoints+1)-1]={x:br.x,y:br.y};
getInterPoints(ctx,tl.x,tl.y,tr.x,tr.y,1,nPoints,1,nPoints,0);
getInterPoints(ctx,bl.x,bl.y,br.x,br.y,((nPoints+1)*(nPoints+1))-(nPoints),(nPoints+1)*(nPoints+1)-1,1,nPoints,0);
getInterPoints(ctx,bl.x,bl.y,tl.x,tl.y,nPoints+1,(nPoints*nPoints)-1,(nPoints+1),nPoints,1);
getInterPoints(ctx,tr.x,tr.y,br.x,br.y,(nPoints*2)+1,((nPoints+1)*(nPoints+1))-(nPoints),(nPoints+1),nPoints,0);
for(var i=nPoints+1;i<(nPoints+1)*nPoints;i+=nPoints+1){
getInterPoints(ctx,ns.points[i].x,ns.points[i].y,ns.points[i+nPoints].x,ns.points[i+nPoints].y,i+1,i+nPoints-1,1,nPoints);
}
var texture=$('i'),
ancho=texture.width/nPoints,
alto=texture.height/nPoints;
var faces=Math.pow(nPoints,2);
var superior=0,supT=0,top=0;
var inferior=nPoints+1,infT=nPoints+1;
for(var z=1,g=0;z<faces+1;z++,g++){
if(g>nPoints-1){
g=0;
top++;
supT+=nPoints+1;
infT+=nPoints+1;
superior=supT;
inferior=infT;
}else if(g){
superior+=1;
inferior+=1;
}
var uv0=[((g+1)*ancho)-ancho,((top+1)*alto)];
var uv1=[((g+1)*ancho)-ancho,((top+1)*alto)-alto];
var uv2=[((g+1)*ancho),((top+1)*alto)-alto];
var uv3=[((g+1)*ancho),((top+1)*alto)];
var pts=[
{x:ns.points[inferior].x,y:ns.points[inferior].y,u:uv0[0],v:uv0[1]},
{x:ns.points[superior].x,y:ns.points[superior].y,u:uv1[0],v:uv1[1]},
{x:ns.points[superior+1].x,y:ns.points[superior+1].y,u:uv2[0],v:uv2[1]},
{x:ns.points[inferior+1].x,y:ns.points[inferior+1].y,u:uv3[0],v:uv3[1]}
];
textureMap(ctx, texture, pts);
}
}
</script>
</head>
<body>
<div id="log"></div>
<canvas id="c" width="800" height="600"></canvas>
<img id="i" src="http://www.noticiassin.com/wp-content/uploads/2011/08/La-Gioconda-o-Mona-Lisa.jpg" width="800" height="600" style="display:none" />
</body>
</html>