计算帆布context.setTransform矩阵基于4x4矩阵

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

在这个小提琴中，我一直在操纵几个角度（代表具有两个自由度的三维摄像机的旋转）来计算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();

来源

2014-07-03 cesarpachon

有关使用2d上下文模拟3d转换的完整教程超出了stackoverflow问题的范围。这里有一个起点，你会发现很多技巧可以帮助你理解3D视角：http://ajaxian.com/archives/tricks-from-our-flash-friends-3d-in-a-2d-context – markE

也许我可以更好地将我的问题描述为“推断来自2D四边形的投影映射”，即：如何计算canvas.setTransform矩阵，以便将图片拉伸至预定义的形状。（通过三维变换获得所需形状的坐标并不相关）事实上！ – cesarpachon

当投影3D到2D是，2D变换只使用的仿射矩阵一个严重的限制。

这意味着任何2d变换总是会产生一个平行四边形。

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

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

一个解决方法是使用图像切片成三维坐标

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

另一个更数学激烈的解决方法是一个图像映射到立体的三角形，以适应图像：

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

祝你的项目好运！ :-)

来源

2014-07-03 17:13:58 markE

计算帆布context.setTransform矩阵基于4x4矩阵

回答

相关问题