javascript - 相机旋转后的 WebGL 平移(作为 FPS)

Question

我已经使用 C++ 和 OpenGL 完成了一些项目，现在我正在使用 html5 和 WebGL 创建一个简单的项目。

问题是，旋转相机后，移动始终沿着默认轴而不是沿着旋转轴移动。例如:我向前移动 -> 没问题，我将相机向右旋转 90 度 -> 没问题，现在我认为，如果我向前移动，相机将在世界轴上向右移动(因此在相机​​前面，作为 FPS 游戏)，但相机始终朝向起始 z 轴(起始前向轴)。奇怪的是，我的代码在 OpenGL 上运行良好，但现在不再在 webGL 上运行了。

代码的主要部分是用 JavaScript 编写的。我使用“glMatrix-0.9.5.min”库来简化矩阵计算。

这些是保存相机状态的变量:

var px = 0.0, py = 2.0, pz = 10.0, ang = 0.0, elev = 0.0, roll = 0.0;
var DELTA_ANG = 0.5, DELTA_MOVE = 0.5;

这是我计算模型 View 矩阵并将其传递给着色器的部分:

mat4.identity(mvMatrix);    
mat4.translate(mvMatrix, [-px, -py, -pz], mvMatrix);
mat4.rotateX(mvMatrix, degToRad(elev), mvMatrix);   
mat4.rotateY(mvMatrix, degToRad(-ang), mvMatrix);   
mat4.rotateZ(mvMatrix, degToRad(roll), mvMatrix);  
gl.uniformMatrix4fv(shaderProgram.mv_matrix, false, new Float32Array(mvMatrix));

这就是我处理按键事件的方式(currentlyPressedKeys 是一个数组，我在其中保存最后的输入):

// rotations    
if(currentlyPressedKeys[J])
{
    ang -= DELTA_ANG;
}
if(currentlyPressedKeys[L])
{
    ang += DELTA_ANG;   
}
if(currentlyPressedKeys[I])
{
    elev += DELTA_ANG;
}
if(currentlyPressedKeys[K])
{
    elev -= DELTA_ANG;  
}
if(currentlyPressedKeys[E]) 
{
    roll += DELTA_ANG;
}
if(currentlyPressedKeys[Q]) 
{
    roll -= DELTA_ANG;
}   

// movements
if(currentlyPressedKeys[A])
{
    px -= DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
}
if(currentlyPressedKeys[D])
{
    px += DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
}
if(currentlyPressedKeys[W])
{
    px += DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.cos(ang * Math.PI / 180.0); 
}
if(currentlyPressedKeys[S])
{
    px -= DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
}       

// height
if(currentlyPressedKeys[R])
{
    py += DELTA_MOVE;
}
if(currentlyPressedKeys[F])
{
    py -= DELTA_MOVE;
}   

最后，这是简单的顶点着色器(透视矩阵是用 mat4.perspective 简单计算的):

attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;

uniform mat4 p_matrix, mv_matrix;    

varying vec3 f_position;
varying vec3 f_normal;
varying vec2 f_uv;

void main() {
    gl_Position = p_matrix * mv_matrix * vec4(position, 1.0);   
    f_position = position;  
    f_normal = normal;  
    f_uv = uv;
}

我不明白与 OpenGL 有什么区别，你知道吗？

Answer 1

我解决了，问题是我忘记了计算相机位置时的一些组件。这是正确的代码:

// movements
if(currentlyPressedKeys[A])
{       
    px -= DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    px -= DELTA_MOVE * Math.cos(roll * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);        
}
if(currentlyPressedKeys[D])
{
    px += DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    px += DELTA_MOVE * Math.cos(roll * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
}
if(currentlyPressedKeys[W])
{
    px += DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    px += DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    pz -= DELTA_MOVE * Math.cos(elev * Math.PI / 180.0);        
}
if(currentlyPressedKeys[S])
{
    px -= DELTA_MOVE * Math.sin(ang * Math.PI / 180.0);
    px -= DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    py += DELTA_MOVE * Math.sin(elev * Math.PI / 180.0);
    py -= DELTA_MOVE * Math.sin(roll * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.cos(ang * Math.PI / 180.0);
    pz += DELTA_MOVE * Math.cos(elev * Math.PI / 180.0);
}       

令人费解的是它在 OpenGL 中的工作方式，但现在它是正确的。