WebGL交互，旋轉后翻譯

Question

在WebGL示例的上下文中，我在理解旋轉和翻譯方面有些麻煩。

發生了什么：我有一個示例程序，可讓我繞其中心旋轉一個三角形並將其平移到2D平面上。 下面的代碼正是這樣做的（使用glmatrix庫）。 將modelViewMatrix應用於三角形頂點。

問題：如果三角形旋轉了180°，則平移是錯誤的。 當然，仍然可以移動三角形，但是方向相反。 如果我向上拖動三角形，則該對象實際上會進一步移動到屏幕底部。

問題：這里發生了什么，為什么會這樣？ 我該怎么做才能糾正這種行為？ 我希望能夠拖動三角形，無論它旋轉了多少，平移軸都應保持一致。

在此先感謝您的答復，對於對整個轉換工作熟悉的人，我相信這是一個簡單的問題。 :)

var modelViewMatrix = mat4.create();

function mouseDown(mouseEvent){
    isMouseDown = true;
    g_drawInterval = setInterval(redraw, 40);
}

var translationFactor = 0.01;
var rotationFactor = 0.01;  

function mouseMove(mouseEvent){
    if (isMouseDown){
         deltaX = mouseEvent.clientX - oldPosX;
         deltaY = mouseEvent.clientY - oldPosY;
    if (mouseEvent.button === 0) // left mouse button
         mat4.translate(modelViewMatrix, modelViewMatrix,
         [deltaX * translationFactor, -deltaY * translationFactor, 0]);
     else
         mat4.rotateZ(modelViewMatrix, modelViewMatrix,
         deltaX * rotationFactor -deltaY * rotationFactor);
     }
     oldPosX = mouseEvent.clientX;
     oldPosY = mouseEvent.clientY;
 }

Answer 1

這樣做的原因是，你的modelViewMatrix 不斷積累的所有變革的組成 。

旋轉功能通常繞本地原點旋轉（無論何時應用）。 進行平移后，將原點移動，因此旋轉的行為會有所不同。

我不確定“ glmatrix”庫和您使用的着色器，但是如果兩者都遵循默認的GL約定，那么您還具有以相反順序應用轉換的效果，因此

rotate(...);
translate(...)

將首先平移然后旋轉。

您可以通過分別跟蹤方向和位置來避免這種情況，即定義position矢量和rotationMatrix矩陣，並相應地更新它們。 對於繪圖，您可以將它們組合到模型視圖矩陣中，例如

 modelViewMatrix=viewMatrix * translate(position) *  rotationMatrix

（假設以上再次約定）。