0

我正在尝试设置 WebGL + TypeScript 的基本演示，在屏幕上呈现一个简单的矩形，并针对纵横比进行调整。

我正在尝试使用 gl-matrix 来计算模型-视图-投影矩阵，并将其作为统一上传。当我尝试这样做时，我收到一条很长的错误消息，指出我的矩阵类型和 Float32Array 不兼容。这是奇怪的部分：当我使用 console.log(matrix) 时，它以 Float32Array 类型打印到控制台，并带有正确的值。这里发生了什么？


// GLM here stands for glMatrix
let aspect_ratio = canvas.width / canvas.height;
let projection = GLM.mat4.ortho(GLM.mat4.create(), 
    -aspect_ratio, // left
     aspect_ratio, // right
    -1.0,          // bottom
     1.0,          // top
    -1.0,          // near
     1.0);         // far
let view = GLM.mat4.lookAt(GLM.mat4.create(), 
    GLM.vec3.fromValues(0,0,0),  // eye 
    GLM.vec3.fromValues(0,0,0),  // camera position
    GLM.vec3.fromValues(0,1,0)); // world up
let model = GLM.mat4.create();
model = GLM.mat4.translate(model, model, GLM.vec3.fromValues(0.5, 0.5, 0.0));

let mvp = GLM.mat4.create();
mvp = GLM.mat4.multiply(mvp, projection, view); // first, multiply projection by view
mvp = GLM.mat4.multiply(mvp, mvp, model);       // then the result by model
                                                // because the calculation is projection * view * model
console.log(mvp); // prints: Float32Array(16) [0.75, 0, 0 .... correct values ]
console.log(typeof(mvp)) // prints: object - what's up with that?

// ... during my main loop
gl.useProgram(shaderProgram);
gl.uniformMatrix4fv(mvp_uniform_location, false, mvp); // Type error!
4

1 回答 1

0

我之前在导入库时遇到了一些麻烦，所以我求助于直接从 node_modules 文件夹中导入它。我已经安装了DefinitelyTyped gl-matrix 包，但是由于我导入库的方式，我实际上并没有使用它。一旦我改变了我的进口

import * as GLM from './../node_modules/gl-matrix/gl-matrix'

至

import * as GLM from 'gl-matrix'

一切都开始工作了。

于 2019-12-01T15:41:15.050 回答