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

Question

我正在尝试使用 javascript 和 html5 canvas(没有 webGL)来模拟位图的 3d 旋转。我认为要走的路是计算 Canvas context.setTransform 方法的 2D 矩阵的项，但我无法弄清楚如何从表示所需变换或所需最终位置的通用 4x4 矩阵理想地获取该矩阵位图的像素(我可以计算所需的最终像素坐标，用 4x4 矩阵和项目 View 矩阵投影 Angular )。

在这个 fiddle 中，我一直在操纵几个 Angular (表示具有两个自由度的 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 变换仅使用仿射矩阵。

这意味着任何二维变换都将始终产生平行四边形。

3D 透视通常至少需要一个梯形结果(在仿射变换中无法实现)。

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

一种解决方法是使用图像切片将图像适应 3d 坐标

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

另一个数学上更密集的解决方法是将图像映射到透视三 Angular 形上:

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

祝您的项目顺利! :-)