How do I include gl-matrix?

Question

What I did:

Downloaded master branch from here: https://github.com/toji/gl-matrix Put src folder into my project's folder. Included gl-matrix-manifest.js from there. Tried this:

var mvMatrix = mat4.create();

Result:

var mvMatrix = mat4.create();
ReferenceError: mat4 is not defined

Okay, let's indlude mat4 directly. Included. Result:

var out = new GLMAT_ARRAY_TYPE(16);
ReferenceError: GLMAT_ARRAY_TYPE is not defined

Okay, maybe it needs common.js:

var x = axis[0], y = axis[1], z = axis[2],
TypeError: axis is undefined

WTF, included all other files from src folder (common, vectors,matrices,quat):

var x = axis[0], y = axis[1], z = axis[2],
TypeError: axis is undefined

(same)

How do I include propertly? In particular I need mat4 and vec4.

Euboea

Answer 1

Just include /dist/gl-matrix-min.js or /dist/gl-matrix.js :)

Falsework

Answer 2

Once the source is specified correctly, I still couldn't directly call mat4.

I had to type "glMatrix.mat4" instead.

Portiaportico

Seems to be a "feature" of 3.0 version. Version 2.4 (linked in Mozilla WebGL tutorial) works with mat4 just fine, version 3.0 (taken from glmatrix.net) doesn't. Writing var mat4 = glMatrix.mat4; simplifies things a bit. – Bureaucracy

Alternatively, with ES6, you can use object destructuring to just write something like const { mat4, mat3, vec3 } = glMatrix; – Leesaleese

window['mat4'] = glMatrix.mat4; console.log(mat4); But ES6 option is better. – Vision

Answer 3

Add this cdn link in head

<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
        integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
        crossorigin="anonymous" defer>
</script>

Dewey

This is the only solution that worked for me. – Batton

Answer 4

1. Download from here
2. Extract and take gl-matrix-min.js
3. In your index.html file <script src="gl-matrix-min.js"></script>
4. Now try var mvMatrix = glMatrix.mat4.create();

Kirchhoff

Step 3 gives me the error Failed to load resource: the server responded with a status of 404 (Not Found) – Batton

Is there another solution that doesn't require downloading an unknown zip file? – Batton

Yes, You can add cdn <script src"https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/3.4.2/gl-matrix-min.min.js"></script> – Kirchhoff

Another source of cdn <script src="https://unpkg.com/[email protected]/cjs/index.js"></script> – Kirchhoff

Answer 5

The next two examples shows a modern way how to include glMatrix and Box2D-WASM as ES6 modules using import maps.

Playground that shows how to initialize Box2D-WASM to create and print a Box2D vector: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview

The next playground shows how to use glMatrix only:

    <!-- Since import maps are not yet supported by all browsers, its is
        necessary to add the polyfill es-module-shims.js -->
    <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"></script>

    <script type="importmap">
        {
            "imports": {
                "box2d-wasm": "https://unpkg.com/[email protected]/dist/es/Box2D.js",
                "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
            }
        }
    </script>

    <script type="module">
        import { glMatrix, mat4, vec3 } from "gl-matrix";

        console.log(glMatrix.toRadian(45));

        const v = vec3.fromValues(1, 2, 3);
        console.log(v);

        const m = mat4.create();
        console.log(m);
    </script>

Regelate