gl-matrix | Javascript Matrix and Vector library | Graphics library

GL_LINES and GL_TRIANGLES are not valid WebGL enumerator constants. However, LINES and TRIANGLES are valide:

gl.drawElements(gl.GL_LINES, 36, gl.UNSIGNED_SHORT, 0);

You must specify 1 attribute for each vertex coordinate. The vertices cannot share 1 matrix attribute. Each vertex coordinate must have its own model matrix attribute:

If I remember correctly newer versions of glMatrix only expose the glMatrix namespace rather than the individual classes. So in your case I think it's easiest if you make them available by destructuring it at the top of your render.js:

The shader code is incorrect for perspective.

Here is what you have

You just showed the most prevalent use case for import types in TypeScript:

Modules can import types declared in other modules. But non-module global scripts cannot access types declared in modules. Enter import types.

In other words, this language feature allows to import types of an external module 'gl-matrix' from within the global scope of your project .d.ts file like this:

Honestly, there are too many issues to cover. Trying to get your code work. First you really need to learn how to make a minimal repo. The code you posted doesn't run, references several scripts that don't exist, and data that doesn't exist.

The tutorial the code is based off appears to be old. No one uses XMLHttpRequest in 2020. There's no such function as requestAnimFrame it's requestAnimationFrame. I think that's left over from a polyfill from like 2011. It's still using which few use anymore. It's also using new Date().getTime() which there's no reason to use as the time is passed into requestAnimationFrame. It's calling some function to get a webgl context but there's no reason for that either in 2020. It's also apparently using an old version of glMatrix because the current version uses a different API. In the current version every function takes a matrix to store the result as the first argument. Also in the current version perspective takes the field of view in radians. I have no idea if it used to take it in degrees but the code was passing degrees.

I changed the XHR code to just return a cube. (an example of the minimal and complete parts of an "minimal complete verifiable example" (mcve) - I think now S.O calls them a "minimal reproducible example". I also removed all the references to ColorPicker (another example of making a minimal repo)

The code should have gotten errors in the JavaScript console. Did you check the JavaScript console? In particular uNMatrix is a mat3 but the code was calling gl.uniformMatrix4fv to set it which is an error.

Using webgl-lint pointed out several uniforms were not being set including "ambientProduct", "diffuseProduct", "specularProduct" and several were being set that don't exist (that part is not a bug necessarily) but there are several uniforms in the vertex shader that are not actually used and for example the colors seem to be set with

This line

I'm not exactly sure what your code is trying to do.

In any case, in general to rotate in place to translate then rotate

Your unit tests are running in node.js via mocha. node.js does not support WebGL just like it doesn't support most of the browser's APIs.

You can use mocha inside puppeteer if you want to run tests that use browser APIs. The examples page of that puppeteer article links to an example of using mocha with puppeteer.