围绕触摸点定义的轴应用旋转

Question

我在 iPad 上使用 OpenGL ES 显示了一个对象。该模型由顶点、法线和顶点索引定义。模型的原点是 0,0,0。使用 UIGestureRecognizer 我可以检测各种手势 - 双指水平滑动以绕 y 旋转，垂直滑动以绕 x 旋转。绕 y 轴旋转的双指旋转手势。平移以四处移动模型。 Pinch/zoom 缩放手势。我希望观看者能够操纵模型以立即看到（例如）模型的反面或整个事物。

基本策略来自Ray Wenderlich's tutorial，但我在Swift中重写了它。

我理解四元数是一个向量和一个角度。向量 up、right 和 front 表示三个轴：

front = GLKVector3Make(0.0, 0.0, 1.0)
right = GLKVector3Make(1.0, 0.0, 0.0)
up = GLKVector3Make(0.0, 1.0, 0.0)

所以四元数围绕三个轴中的每一个旋转（尽管 dx、dy、dz 中只有一个有值，由手势识别器决定。）

func rotate(rotation : GLKVector3, multiplier : Float) {

    let dx = rotation.x - rotationStart.x
    let dy = rotation.y - rotationStart.y
    let dz = rotation.z - rotationStart.z
    rotationStart = GLKVector3Make(rotation.x, rotation.y, rotation.z)
    rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dx * multiplier, up), rotationEnd)
    rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dy * multiplier, right), rotationEnd)
    rotationEnd = GLKQuaternionMultiply((GLKQuaternionMakeWithAngleAndVector3Axis(-dz, front)), rotationEnd)
    state = .Rotation

}

绘图使用modelViewMatrix，通过以下函数计算：

func modelViewMatrix() -> GLKMatrix4 {

    var modelViewMatrix = GLKMatrix4Identity
    // translation and zoom
    modelViewMatrix = GLKMatrix4Translate(modelViewMatrix, translationEnd.x, translationEnd.y, -initialDepth);
    // rotation
    let quaternionMatrix = GLKMatrix4MakeWithQuaternion(rotationEnd)
    modelViewMatrix = GLKMatrix4Multiply(modelViewMatrix, quaternionMatrix)
    // scale
    modelViewMatrix = GLKMatrix4Scale(modelViewMatrix, scaleEnd, scaleEnd, scaleEnd);
    // rotation

    return modelViewMatrix
}

而且大部分都有效。然而，一切都与起源有关。如果模型旋转，则枢轴始终是穿过原点的轴 - 如果放大观察模型的末端远离原点然后旋转，模型可能会迅速摆出视野。如果缩放模型，则原点始终是固定点，模型会变大或变小 - 如果原点在屏幕外并且比例缩小，模型可能会在向原点折叠时从视图中消失...

应该发生的是，无论当前视图如何，模型都会相对于当前视图旋转或缩放。对于围绕 y 轴的旋转，这意味着将旋转发生所围绕的 y 轴定义为垂直穿过当前视图的中间。对于缩放操作，模型的固定点将位于屏幕中心，模型从该点向外缩小或向外扩大。

我知道在 2D 中，解决方案总是平移到原点，应用旋转，然后应用第一个平移的逆过程。我不明白为什么这在 3D 中会有所不同，但我找不到任何仅使用四元数矩阵的示例。我已尝试在旋转周围应用平移及其逆运算，但没有任何效果。

所以我尝试在旋转函数中这样做：

let xTranslation : Float = 300.0
let yTranslation : Float = 300.0
let translation = GLKMatrix4Translate(GLKMatrix4Identity, xTranslation, yTranslation, -initialDepth);
rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithMatrix4(translation) , rotationEnd)

rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dx * multiplier, up), rotationEnd)
rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithAngleAndVector3Axis(dy * multiplier, right), rotationEnd)
rotationEnd = GLKQuaternionMultiply((GLKQuaternionMakeWithAngleAndVector3Axis(-dz, front)), rotationEnd)

// inverse translation
let inverseTranslation = GLKMatrix4Translate(GLKMatrix4Identity, -xTranslation, -yTranslation, -initialDepth);
rotationEnd = GLKQuaternionMultiply(GLKQuaternionMakeWithMatrix4(inverseTranslation) , rotationEnd)

翻译是 300,300 但一点效果都没有，它仍然围绕我知道的原点旋转。我已经搜索了很长时间的示例代码，但没有找到。

modelViewMatrix 在 update() 中应用：

effect?.transform.modelviewMatrix = modelViewMatrix

我也可以通过调整模型中的所有值来作弊，使 0,0,0 落在中心点 - 但那仍然是一个固定的原点，只会稍微好一点。

Answer 1

问题出在您最后一次操作中，您应该将 inverseTranslation 换成 rotationEnd :

rotationEnd = GLKQuaternionMultiply(rotationEnd, GLKQuaternionMakeWithMatrix4(inverseTranslation))

我认为部分旋转(dx, dy, dz) 应该遵循相同的规则。

事实上，如果你想改变主元，你的矩阵乘法应该这样做：

modelMatrix = translationMatrix * rotationMatrix * inverse(translationMatrix)

齐次坐标下的结果计算如下：

newPoint = translationMatrix * rotationMatrix * inverse(translationMatrix) * v4(x,y,z,1)

示例

这是一个二维测试示例，您可以在操场上运行。

let v4 = GLKVector4Make(1, 0, 0, 1) // Point A

let T = GLKMatrix4Translate(GLKMatrix4Identity, 1, 2, 0); 
let rot = GLKMatrix4MakeWithQuaternion(GLKQuaternionMakeWithAngleAndVector3Axis(Float(M_PI)*0.5, GLKVector3Make(0, 0, 1))) //rotate by PI/2 around the z axis.
let invT = GLKMatrix4Translate(GLKMatrix4Identity, -1, -2, 0);

let partModelMat = GLKMatrix4Multiply(T, rot)
let modelMat = GLKMatrix4Multiply(partModelMat, invT) //The parameters were swapped in your code 
//and the result would the rot matrix, since T*invT will be identity

var v4r = GLKMatrix4MultiplyVector4(modelMat, v4) //ModelMatrix multiplication with pointA 
print(v4r.v) //(3,2,0,1)

//Step by step multiplication using the relation described above
v4r = GLKMatrix4MultiplyVector4(invT, v4)
v4r = GLKMatrix4MultiplyVector4(rot, v4r)
v4r = GLKMatrix4MultiplyVector4(T, v4r)
print(v4r.v) //(3,2,0,1)

至于规模，如果我理解正确你想要什么，我会建议这样做就像这里做的那样：https://gamedev.stackexchange.com/questions/61473/combining-rotation-scaling-around-a-pivot-with-translation-into-a-matrix

围绕触摸点定义的轴应用旋转

Apply rotation around axis defined by touched point

quaternions

ios

opengl-es-2.0

swift