Взаимодействие 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» Lib и о шейдере вы используете, но если оба следуют GL по умолчанию соглашению, Вы также иметь эффект, что преобразования применяются в обратном порядке, так что

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

будет первый переводить, а затем вращаться.

Вы можете избежать этого путем отслеживания ориентации и положения отдельно, то есть определить вектор position и матрицу rotationMatrix и соответственно обновить их. Для рисования, вы можете объединить их в видовую матрицу, как

modelViewMatrix=viewMatrix * translate(position) * rotationMatrix 

(Если предположить, что условные descirbed выше снова).