Question

我在尝试为网格物体的旋转设置动画时遇到了一些问题。

如果完成旋转过程一切都很好。网格正常旋转，来自WebGL缓冲区的最终图像看起来非常精细。

http://s22.postimg.org/nmzvt9zzl/311.png

但是如果要在循环中使用旋转（每个新的帧记录），那么网格开始看起来很奇怪，看下一个截图：

http://s22.postimg.org/j2dpecga9/312.png

我不会在这里提供编程代码，因为问题取决于不正确的3D图形处理。

我认为一些OpenGL / Direct3D开发人员可能会给出如何修复它的建议，因为这个问题涉及3D编程主题以及某些特定的GL或D3D功能/方法。另外我认为旋转的工作方式在OpenGL和Direct3D中是相同的，因为线性代数和仿射仿射变换。

如果您对我正在使用的内容感兴趣，那么答案是WebGL。

让我描述如何使用对象的旋转。

使用四元数进行简单旋转。我定义的任何网格对象都有它的四元数属性。

如果要旋转对象，则方法rotate()正在执行下一步：

// Some kind of pseudo-code
function rotateMesh( vector, angle ) {
    var tempQuatenion = math.convertRotationToQuaternion( vector, angle );
    this.quaternion = math.multiplyQuaternions( this.quaternion, tempQuatenion );
}

我使用Renderer类中的下一段代码来处理网格平移和旋转：

// Some kind of pseudo-code
// for each mesh, which is added to scene
modelViewMatrix = new IdentityMatrix()
translateMatrixByVector( modelViewMatrix, mesh.position )
modelViewMatrix.multiplyByMatrix( mesh.quaternion.toMatrix() )

所以...我想问你上面的逻辑是否正确然后我提供了一些数学函数的来源，用于四元数，旋转等......

如果上面的逻辑不正确，那么我认为提供别的东西是没有意义的。因为需要修复主逻辑。

Answer 1

四元数乘法不是可交换的，即，如果A和B是四元数，那么A * B != B * A。如果要通过四元数B旋转四元数A，则需要执行A = B * A，所以：

    this.quaternion = math.multiplyQuaternions( this.quaternion, tempQuatenion );

应该颠倒它的论点。

另外，正如@ ratchet-freak在评论中所提到的，你应该确保你的四元数总是标准化，否则可能会发生旋转以外的转换。

如何使用3D图形管道（Direct3D / GL）旋转对象？

1 个答案: