Question

我正在尝试使用javascript和html5画布（没有webGL）来模拟位图的3D旋转。我认为要采用的方法是计算画布context.setTransform方法的2D矩阵的术语，但我无法弄清楚如何从表示所需转换或所需转换的一般4x4矩阵中理想地获得该矩阵位图的最终位置（以像素为单位）（我可以使用4x4矩阵和项目视图矩阵计算投影角点的像素中所需的最终坐标）。

在这个小提琴中，我一直在操纵几个角度（代表具有两个自由度的3D相机的旋转）来计算setTransform矩阵的剪切项，但我真的无法获得清晰了解理想的程序。 http://jsfiddle.net/cesarpachon/GQvp2/

context.save();
        /*alpha affects the scaley with sin
        */
         var skew = Math.sin(alpha);

         var scalex = 1;//(1-skew) +0.01;//Math.sin(alpha);
         var scaley = 1;//Math.abs(Math.sin(alpha))+0.01; 
        var offx = 0;
        var offy = 0;
        var skewx = Math.sin(alpha);
        var skewy = Math.sin(beta);
          context.setTransform(scalex,skewx,skewy,scaley,offx,offy);
        context.drawImage(image, 0, 0, height, width); 
context.restore();

Answer 1

将3d投影到2d时的严重限制是2d变换仅使用仿射矩阵。

这意味着任何2d变换将始终产生平行四边形。

三维视角通常至少需要一个梯形结果（在仿射变换中无法实现）。

底线：您无法从2D变换中始终获得3D视角。

一种解决方法是使用图像切片将图像拟合为三维坐标

http://www.subshell.com/en/subshell/blog/image-manipulation-html5-canvas102.html

另一个更加数学上强烈的解决方法是将图像映射到透视三角形：

http://mathworld.wolfram.com/PerspectiveTriangles.html

祝你的项目好运！： - ）

计算canvas context.setTransform矩阵基于4x4矩阵

1 个答案: