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

（再次假设上述约定）。