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

Question

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

基本攻略来自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
}

而且大多数情况下这是可行的。然而，一切都与起源有关。如果模型旋转，则枢轴始终是穿过原点的轴 - 如果放大观察模型的末端远离原点然后旋转，模型可能会 swift 摆出视野。如果模型被缩放，那么原点总是随着模型变大或变小的固定点 - 如果原点在屏幕外并且比例缩小，模型可能会从 View 中消失，因为它向原点折叠......

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

我知道在 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)

示例

这是一个 2D 测试示例，您可以在 Playground 上运行。

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