gl-matrix mat4 缺少 Float32Array 属性答案

【问题标题】：gl-matrix mat4 is missing Float32Array propertiesgl-matrix mat4 缺少 Float32Array 属性
【发布时间】：2020-03-26 08:10:11
【问题描述】：

我正在尝试设置 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!

【问题讨论】：

你需要告诉 typescript gl-matrix 的类型。请参阅：stackoverflow.com/questions/39907142/what-is-definitelytyped 和 npmjs.com/package/@types/gl-matrix
你是对的。我没有正确导入包。
最新版本的 gl-matrix 现在带有自己的类型定义。

标签： javascript typescript webgl gl-matrix

【解决方案1】：

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

更改了我的导入

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

到

import * as GLM from 'gl-matrix'

一切都开始工作了。

【讨论】：