1

基于对 3D 旋转矩阵的一些研究，我制作了这个 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 旋转都会导致图像沿旋转轴无限重复。这是一个示例屏幕截图：

在此处输入图像描述

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

4

1 回答 1

1

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

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

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

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

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

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

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

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

于 2014-01-06T18:36:25.117 回答