gl-matrix mat4 is missing Float32Array properties

1k Views Asked by At

I'm trying to setup a basic demo of WebGL + TypeScript, rendering a simple rectangle on the screen, adjusted for aspect ratio.

I am trying to use gl-matrix to calculate the model-view-projection matrix, and upload it as a uniform. When I try to do this, I get a really long error message stating that the type of my matrix and Float32Array are incompatible. Here's the weird part: When I console.log(matrix), it prints to the console as type Float32Array, with the correct values. What is happening here?


// 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!

1

There are 1 best solutions below

0
On

I had some trouble with importing the library before, so I resorted to importing it directly from node_modules folder. I already had the DefinitelyTyped gl-matrix package installed, but because of the way I imported the library, I wasn't actually using it. Once I changed my import from

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

to

import * as GLM from 'gl-matrix'

everything started working.