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

Question

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

如果做一次旋转过程就可以了。网格正常旋转，来自 WebGL 缓冲区的最终图像看起来非常好。

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

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

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

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

我认为一些 OpenGL/Direct3D 开发人员可能会给出如何修复它的建议，因为这个问题涉及到 3D 编程主题和一些特定的 GL 或 D3D function/method。此外，由于线性代数和仿射仿射变换，我认为旋转的工作方式在 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 class 中的下一段代码来处理网格平移和旋转：

// 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 ) 旋转对象？

How to rotate object using the 3D graphics pipeline ( Direct3D/GL )?

opengl

3d

graphics

direct3d

webgl