WebGL：物体根据当前相机方向移动

Question

我创建了一个简单的场景，其中一个立方体平行于x轴移动。一切都按预期工作，直到我围绕Y轴旋转相机。然后立方体跟随此旋转并平行于屏幕移动（相机坐标系中的X轴）。

再次进行初始设置：

• 相机在[0，2，10]看着[0,0，0]
• 立方体最初放置在[0，0，0]，沿移动[-10,10]之间的x轴

为什么我的相机移动会影响立方体的方向？

下面是一些相关的代码。我希望看到更多，不要犹豫，问。我正在使用glMatrix进行矢量和矩阵运算。

主绘图程序：

// Clear the canvas before we start drawing on it.  
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

// Use the full window (minus border) 
canvas.width = window.innerWidth - 16; 
canvas.height = window.innerHeight - 16; 

// Set viewport 
gl.viewport(0, 0, canvas.width, canvas.height); 

// Reset the perspective matrix 
cam.aspectRatio = canvas.width/canvas.height; 
mat4.perspective(perspectiveMatrix, cam.fovy, cam.aspectRatio, cam.nearPlane, cam.farPlane); 

// Create the mvMatrix 
mat4.lookAt(mvMatrix, cam.position, cam.poi, cam.up); 

// Draw all objects 
for (i = 0; i < ObjectStack.length; i++) { 
    ObjectStack[i].draw(); 
} 

相机旋转：

// Rotation via yaw and pitch (FPS-style) 
this.rotateYP = function (yaw, pitch) { 

    // Rotation speed 
    var rotSpeed = 0.5; 
    yaw *= rotSpeed; 
    pitch *= rotSpeed; 

    // Update rotation 
    var quatYaw = quat.create(); 
    quat.setAxisAngle(quatYaw, this.up, degToRad(yaw)); 
    var quatPitch = quat.create(); 
    quat.setAxisAngle(quatPitch, this.right, degToRad(pitch)); 
    var quatCombined = quat.create(); 
    quat.multiply(quatCombined, quatYaw, quatPitch); 

    // Update camera vectors 
    var tmp = vec3.create(); 
    vec3.subtract(tmp, this.poi, this.position); 
    vec3.transformQuat(tmp, tmp, quatCombined); 
    vec3.add(tmp, this.position, tmp); 
    this.setPOI(tmp); 
}; 

我setPOI（）方法（POI =兴趣点）：

this.setPOI = function (poi) { 

    // Set new poi 
    vec3.copy(this.poi, poi); 

    // Set new view vector 
    vec3.subtract(this.view, poi, this.position); 
    vec3.normalize(this.view, this.view); 

    // Set new right vector 
    vec3.cross(this.right, this.view, [0.0, 1.0, 0.0]); 
    vec3.normalize(this.right, this.right); 

    // Set new up vector 
    vec3.cross(this.up, this.right, this.view); 
    vec3.normalize(this.up, this.up);  
}; 

为对象绘制方法立方体：

this.draw = function() { 

    // Save current mvMatrix 
    mvPushMatrix(); 

    // Object movement 
    mat4.translate(mvMatrix, mvMatrix, position); 

    // Object rotation 
    //mat4.mul(mvMatrix, mvMatrix, orientation); 

    // Object scaling 
    // ... 

    // Set shader 
    setShader(); 

    // Bind the necessary buffers 
    gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer); 
    gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0); 
    gl.bindBuffer(gl.ARRAY_BUFFER, normalsBuffer); 
    gl.vertexAttribPointer(normalAttribute, 3, gl.FLOAT, false, 0, 0); 
    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer); 
    gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0); 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexIndexBuffer); 

    // Set active texture 
    gl.activeTexture(gl.TEXTURE0); 
    gl.bindTexture(gl.TEXTURE_2D, cubeTexture); 
    gl.uniform1i(gl.getUniformLocation(ShaderStack[shader], "uSampler"), 0); 

    // Send the triangles to the graphics card for drawing 
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); 

    gl.bindTexture(gl.TEXTURE_2D, null); 

    // Clean up the changed mvMatrix 
    mvPopMatrix(); 
}; 

最后上面使用的setShader（）：

function setShader() { 

    var shaderProgram = ShaderStack[shader]; 
    gl.useProgram(shaderProgram); 

    var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); 
    gl.uniformMatrix4fv(pUniform, false, perspectiveMatrix); 

    var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); 
    gl.uniformMatrix4fv(mvUniform, false, mvMatrix); 

    var normalMatrix = mat4.create(); 
    mat4.invert(normalMatrix, mvMatrix); 
    mat4.transpose(normalMatrix, normalMatrix); 
    var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix"); 
    gl.uniformMatrix4fv(nUniform, false, normalMatrix); 

    normalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal"); 
    gl.enableVertexAttribArray(normalAttribute); 

    positionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
    gl.enableVertexAttribArray(positionAttribute); 

    texCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord"); 
    gl.enableVertexAttribArray(texCoordAttribute); 
}; 

对不起，在这里张贴所有这些代码。如果您有任何想法，请告诉我！

Answer 1

我怀疑你在你自己的问题回答了你的问题：

与立方体平行于X轴移动一个简单的场景......然后立方体遵循此旋转和平行移动到屏幕（相机坐标中的x轴）。

像这样的事情发生让我相信你应用的转换操作到模型视图矩阵，不是你的模型矩阵，并从你的代码，我认为我是对的：

MAT4 .translate（mvMatrix，mvMatrix，position）;

要解决这个问题，您需要将模型和视图矩阵分开，将转换应用于模型矩阵，然后将结果乘以视图。让我知道事情的后续！

如果你还在用矩阵混淆，给这个读：

http://solarianprogrammer.com/2013/05/22/opengl-101-matrices-projection-view-model/