ViewMatrix计算使模型混乱

时间:2018-08-31 13:56:39

标签: javascript matrix webgl transformation

我有一个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旋转相机。

更新

第一次平移和旋转相机时,我会得到以下行为:

rotating camera

您可以在https://github.com/renuo/stayOFline/tree/gh-pages

下查看整个代码

1 个答案:

答案 0 :(得分:1)

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

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

应为:

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