Please update the doc to indicate that glmatrix needs to be included for the examples to work

[Vaporbook]

Hi,

The doc at https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context doesn't mention the dependency on glmatrix as an external script (except for one oblique reference to it in a comment that I saw after debugging extensively and googling about this).

As it stands, most folks will run into the issue of mat4 being undefined, which is confusing in particular because it's a type in the gl scripts. I added a script src to https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js in order to resolve the dependency. I think the doc just needs to mention it more explicitly as a basic requirement for the tutorial.

Thanks,
Aaron

[shawnwhinnery]

May I suggest you remove the dist and use the glmatrix source code instead.

The instructions depend on the reader being able to decompile a web pack bundle in order to understand the lesson.

[TomasHubelbauer]

I have added GLMatrix using JSDelivr like this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min.js"></script>

The note in the MDN article which takes one to this issue should be before the mat4 object is used for the first time, not after! I've edited it to be so in the article.

[TomasHubelbauer]

Yeah I guess the gl-matris library has had a breaking change since and mat4 is no longer a global it sets on window (maybe it is now only accessible with a bundler). I just ended up changing the script source to https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js in my personal projects where I am not using a bundler. This URL is from the MDN article and I assume it is a copy-pasted older version of gl-matrix they pasted into the repository. It is accessible because the URL is for GitHub Pages not the GitHub repository so there are no CORS/MIME issues or stuff like that.

[brianzhou13]

Thanks @TomasHubelbauer -- replacing the jsdelivr source with the mdn.github.io source worked for me.

[alanvgreen]

None of these quite worked for me. I ended up adding
<script src="https://cdn.jsdelivr.net/npm/gl-matrix@3/gl-matrix.js"></script>
inside my tag.

In the JS I then added
const mat4 = glMatrix.mat4.

This got example 2 going.

[davidgilbertson]

For npm users:

npm i gl-matrix

Then in your code:

import { mat4 } from 'gl-matrix';

Optionally, get the TypeScript type definitions:

npm i @types/gl-matrix -D

[a2sheppy]

@Elchi3 I can take this over for you if you like. I've been working with glMatrix and WebGL a lot lately doing WebXR, so this would be pretty trivial for me to handle.

[Elchi3]

@a2sheppy That would be so fantastic! I haven't had the time to get to this :(

[a2sheppy]

I've made some initial changes to the document to help with this problem. There was actually a mention of the glMatrix thing but not until the very end.

I've submitted [a pull request](mdn/webgl-examples#29) to update this example to  use a package.json file and an ES6 import to import the module version of glMatrix's mat4 so it will be right there in the JS source code. Once this PR is merged, I'll finish updating the article.

[Elchi3]

As sheppy says, there is a PR submitted for this now mdn/webgl-examples#29.

Anyone wants to review?

[a2sheppy]

This doc is updated and I've merged the code updates, so this issue should now be completed.