3D 旋转矩阵导致图像无限重复

Posted 2023-02-22

【中文标题】3D 旋转矩阵导致图像无限重复

【英文标题】：3D rotation matrix results in image repeating into infinity

【发布时间】：2014-01-05 22:51:39

【问题描述】：

基于对 3D 旋转矩阵的一些研究，我制作了 this jsfiddle，它本身并不能很好地工作，因为你不能在外部视频或图像上使用 'ctx.getImageData()'（但如果你想在本地托管的视频源上尝试相同的代码，它应该可以正常工作）。

大多数 3D 魔法发生在两个矩阵乘法中。对于图像的每个点，xyz 坐标乘以函数“rotatePoint”中的旋转矩阵，该函数将点“xyz”从原点“p”沿单位向量“u”的方向转换为旋转轴按“theta”弧度。

function rotatePoint(xyz,p,u,rho,phi)
return new Vector(
    ((p.x*(u.y*u.y+u.z*u.z)-u.x*(p.y*u.y+p.z*u.z-u.x*xyz.x-u.y*xyz.y-u.z*xyz.z))*(1-rho)+xyz.x*rho+(-p.z*u.y+p.y*u.z-u.z*xyz.y+u.y*xyz.z)*phi)|0,
    ((p.y*(u.x*u.x+u.z*u.z)-u.y*(p.x*u.x+p.z*u.z-u.x*xyz.x-u.y*xyz.y-u.z*xyz.z))*(1-rho)+xyz.y*rho+( p.z*u.x-p.x*u.z+u.z*xyz.x-u.x*xyz.z)*phi)|0,
    ((p.z*(u.x*u.x+u.y*u.y)-u.z*(p.x*u.x+p.y*u.y-u.x*xyz.x-u.y*xyz.y-u.z*xyz.z))*(1-rho)+xyz.z*rho+(-p.y*u.x+p.x*u.y-u.y*xyz.x+u.x*xyz.y)*phi)|0)

其中 'rho' 是 sin(theta)，'phi' 是 cos(theta)，theta 是旋转角度。

最后将点乘以透视矩阵，在下面的函数中，将点从世界坐标转换为屏幕坐标。

function perspective(xyz)
    return 
    x : ((this.camera.e.z*(xyz.x-this.camera.e.x))/(this.camera.e.z+xyz.z)+this.camera.e.x)|0,
    y : ((this.camera.e.z*(xyz.y-this.camera.e.y))/(this.camera.e.z+xyz.z)+this.camera.e.y)|0
    

现在所有这些在大多数情况下都可以正常工作。但无论出于何种原因，3D 旋转都会导致图像沿旋转轴无限重复。这是一个示例屏幕截图：

有人知道为什么会这样吗？

【参考方案1】：

您的渲染函数会在每一帧更新图像的 Z 坐标。 它使渲染的图像在帧之间移动。您可以注意到，在开始时，图像会旋转直到图像方向稳定。

此外，该算法使用渲染表面本身作为源，因此如果它运行得足够快，它将递归地处理转换后的图像，从而产生“无限远透视”效果。

最后，它不检查图像空间坐标是否溢出，当图像边界溢出到下一个扫描线时会导致换行。

旋转公式看起来不错（它确实沿指定轴旋转了一个点），但它的使用方式很奇怪。 它确实沿 Y 轴旋转图像，就像在其铰链上翻转的可逆黑板一样，然后相应地更新图像的 Z 坐标。最终结果是沿原始 Z 轴拉伸 3D 图像。 结合 Z 值的增量修改，这似乎收敛于应用于原始图像的一些固定拉伸/旋转，其计算超出了我的数学范围。

原来的相机对象似乎已经被丢弃了（只使用了神秘的“e”向量，作为一种透视投影助手）。

我怀疑原始代码做了一些基本的相机投影，但后来被弄乱了，超出了我的理解能力。 无论如何，代码并没有按照 cmets 的建议执行，修改参数会产生非常奇怪的结果。

我写了一段幼稚的代码来做一个更传统的相机投影。我试图保持它的可读性，所以它相当慢。也许您可以从那里开始并对其进行优化以满足您的需求。

查看工作示例here。需要支持 mp4 的 html5 浏览器。在最新的 FireFox 上测试。 （它不是 JSfiddle，因为图像安全不允许看到任何东西，但代码在页面内）。

【讨论】：

谢谢。编写代码很有趣。希望你不介意我选择的视频:)