ViewMatrix 计算会弄乱模型答案

【问题标题】：ViewMatrix calculation messes up modelsViewMatrix 计算会弄乱模型
【发布时间】：2018-09-04 03:01:34
【问题描述】：

我有一个 WebGL 应用程序，它呈现一个立方体数组，每个立方体都有不同的高度。为了调整它们的大小，我使用转换矩阵来缩放立方体。我还有一个相机，可以用键盘移动。

要计算模型矩阵，我使用以下代码：

let matrix = matrix4Identity();
matrix = matrix4Translate(matrix, this.position);
matrix = matrix4Rotate(matrix, this.rotation[0], [1, 0, 0]);
matrix = matrix4Rotate(matrix, this.rotation[1], [0, 1, 0]);
matrix = matrix4Rotate(matrix, this.rotation[2], [0, 0, 1]);
matrix = matrix4ScaleWithVector(matrix, this.scale);

为了计算视图矩阵，我使用以下代码：

let matrix = matrix4Identity();
matrix = matrix4Rotate(matrix, camera.rotation[0], [1, 0, 0]);
matrix = matrix4Translate(matrix, [camera.position[0], camera.position[1], camera.position[2]]);
return matrix4Inverse(matrix);

这是我使用的顶点着色器代码：

attribute vec3 vertices;
attribute vec3 normals;

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main(void) {
    vec4 worldPosition = modelMatrix * vec4(vertices, 1.0);
    vec4 modelPosition = viewMatrix * worldPosition;

    gl_Position = projectionMatrix * modelPosition;
}

但是，如果您移动相机，立方体就会被平移。因此，当您向上移动相机时，立方体的（视觉）Y 位置会发生变化。此外，如果您旋转相机，它实际上会围绕它们的 X 轴旋转立方体。但是，如果我删除模型矩阵中的比例变换，这些块在移动相机时不会再改变它们的位置。

您可以在此处查看项目结果。 https://renuo.github.io/stayOFline/ 使用 WASD 在 X 和 Z 轴上移动，R 向上移动，F 向下移动，o+l 旋转相机。

更新：

当第一次平移和旋转相机时，我得到以下行为：

你可以在https://github.com/renuo/stayOFline/tree/gh-pages下查看整个代码

【问题讨论】：

您确定要先旋转相机而不是先平移相机吗？首先旋转将在相机位置向外的原点周围移动相机。首先平移会将相机放在该位置，然后在该位置旋转
我同意先翻译再旋转。但是，它并不能解决我的问题。沿 y 方向移动相机时，块的 Y 轴上的奇怪漂移仍然存在。此外，这些块然后只是围绕相机的位置旋转，但是以一种奇怪的方式而不是以预期的方式......
我用视图矩阵计算更改更新了我的问题
也许您需要发布一个有效的 sn-p。特别是我们需要查看您的矩阵函数，因为您似乎没有使用通用库。
矩阵函数可在此处获得：github.com/renuo/stayOFline/blob/master/engine/Math.js（以及其余代码）

标签： javascript matrix webgl transformation

【解决方案1】：

函数调用中的参数： https://github.com/renuo/stayOFline/blob/100a890c177d5cacc2e98fd5df196740899abf38/engine/Renderer.js#L37 需要切换。

program.updateUniforms(this, camera, model, light)

应该是：

program.updateUniforms(this, model, camera, light)

【讨论】：