0

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!
gman
  • 100,619
  • 31
  • 269
  • 393
tonayy
  • 173
  • 2
  • 12
  • 2
    You need to tell typescript the types for gl-matrix. See: https://stackoverflow.com/questions/39907142/what-is-definitelytyped and https://www.npmjs.com/package/@types/gl-matrix – gman Dec 01 '19 at 15:24
  • you were right. i wasn't importing the package properly. – tonayy Dec 01 '19 at 15:42
  • The newest version of gl-matrix now comes with its own type definitions. – Stefnotch Feb 14 '20 at 16:31

1 Answers1

0

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.

tonayy
  • 173
  • 2
  • 12