What I did:

Downloaded master branch from here: 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.

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.

• javascript
• math
• webgl

5 Answers 5

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

I had to type "glMatrix.mat4" instead.

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

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>

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();

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>