How to use the gl-matrix.mat4.mul function in gl-matrix

// mesh node with skin
                hasSkin = true;
                var skin = node.skin;
                uniformBlockID = skin.uniformBlockID;
                var joints = node.skin.joints;
                var jointNode;

                mat4.invert(inverseTransformMat4, matrix);


                // @tmp: assume joint nodes are always in the front of the scene node list
                // so that their matrices are ready to use
                for (i = 0, len = joints.length; i < len; i++) {
                    jointNode = joints[i];
                    mat4.mul(tmpMat4, nodeMatrix[jointNode.nodeID], skin.inverseBindMatrix[i]);
                    mat4.mul(tmpMat4, inverseTransformMat4, tmpMat4);

                    // if (skin.skeleton !== null) {
                    //     mat4.mul(tmpMat4, inverseSkeletonRootMat4, tmpMat4);
                    // }

                    skin.jointMatrixUnidormBufferData.set(tmpMat4, i * 16);
                }

                gl.bindBuffer(gl.UNIFORM_BUFFER, skin.jointMatrixUniformBuffer);
                gl.bufferSubData(gl.UNIFORM_BUFFER, 0, skin.jointMatrixUnidormBufferData, 0, skin.jointMatrixUnidormBufferData.length);
            }


            var i, len;

            // draw cur node's mesh

public prepareToRender(device: GfxDevice, renderInstManager: GfxRenderInstManager, viewerInput: ViewerRenderInput, modelMatrix: mat4): void {
        if (!this.visible)
            return;

        const renderInst = renderInstManager.pushRenderInst();
        renderInst.setMegaStateFlags(this.stateFlags);
        let offs = renderInst.allocateUniformBuffer(F3DEX_Program.ub_DrawParams, 12 + 2 * 8);
        const d = renderInst.mapUniformBufferF32(F3DEX_Program.ub_DrawParams);

        computeViewMatrix(scratchMatrix, viewerInput.camera);
        mat4.mul(scratchMatrix, scratchMatrix, modelMatrix);

        // TODO: look further into game logic for this
        if (!!(getSortKeyLayer(renderInst.sortKey) & GfxRendererLayer.TRANSLUCENT)) {
            renderInst.sortKey = setSortKeyDepth(renderInst.sortKey, -scratchMatrix[14]);
        }

        // note that the game actually rotates the model placement matrix, allowing for a model
        // with multiple parts to face towards the camera overall, while individual parts might not
        // however, every billboard in the game has only one part, so we ignore this detail
        if (this.isBillboard)
            calcZBBoardMtx(scratchMatrix, scratchMatrix);

        offs += fillMatrix4x3(d, offs, scratchMatrix);

        if (this.hasTexture) {
            renderInst.setSamplerBindingsFromTextureMappings(this.textureMappings);

public prepareToRender(device: GfxDevice, renderInstManager: GfxRenderInstManager, viewerInput: Viewer.ViewerRenderInput): void {
        if (!this.visible)
            return;

        if (this.parentJointMatrix !== null) {
            mat4.mul(this.modelInstance.modelMatrix, this.parentJointMatrix, this.modelMatrix);
        } else {
            mat4.copy(this.modelInstance.modelMatrix, this.modelMatrix);

            // Don't compute screen area culling on child meshes (don't want heads to disappear before bodies.)
            bboxScratch.transform(this.modelInstance.modelData.bbox, this.modelInstance.modelMatrix);
            computeScreenSpaceProjectionFromWorldSpaceAABB(screenProjection, viewerInput.camera, bboxScratch);

            if (screenProjection.getScreenArea() <= 0.0002)
                return;
        }

        const light = this.modelInstance.getGXLightReference(0);
        GX_Material.lightSetWorldPosition(light, viewerInput.camera, 250, 250, 250);
        GX_Material.lightSetWorldDirection(light, viewerInput.camera, -250, -250, -250);
        // Toon lighting works by setting the color to red.
        colorFromRGBA(light.Color, 1, 0, 0, 0);

mat4.mul(_TMP_MATPV, camera.getProjection(), camera.getView());

    // circle mvp
    mat4.scale(this._cacheCircleMVP, _TMP_MAT, vec3.set(_TMP_VEC, worldRadius, worldRadius, worldRadius));
    mat4.mul(this._cacheCircleMVP, _TMP_MATPV, this._cacheCircleMVP);
    // dot mvp
    mat4.scale(this._cacheDotMVP, _TMP_MAT, vec3.set(_TMP_VEC, constRadius, constRadius, constRadius));
    mat4.mul(this._cacheDotMVP, _TMP_MATPV, this._cacheDotMVP);
    // symmetry mvp
    vec3.transformMat4(_TMP_VEC, pickingSym.getIntersectionPoint(), mesh.getMatrix());
    mat4.identity(_TMP_MAT);
    mat4.translate(_TMP_MAT, _TMP_MAT, _TMP_VEC);
    mat4.rotate(_TMP_MAT, _TMP_MAT, rad, _TMP_AXIS);

    mat4.scale(_TMP_MAT, _TMP_MAT, vec3.set(_TMP_VEC, constRadius, constRadius, constRadius));
    mat4.mul(this._cacheDotSymMVP, _TMP_MATPV, _TMP_MAT);
  }

renderNode(node: SceneNode, transform: mat4): void {
        assert(this.updateModelTransform !== undefined, `Model transform function needs to be initialized.`);
        assert(this.updateViewProjectionTransform !== undefined,
            `View Projection transform function needs to be initialized.`);

        const nodeTransform = mat4.clone(transform);

        const transformComponents = node.componentsOfType('TransformComponent');
        assert(transformComponents.length <= 1, `SceneNode can not have more than one transform component`);

        if (transformComponents.length === 1) {
            const transformComponent = transformComponents[0] as TransformComponent;
            mat4.mul(nodeTransform, nodeTransform, transformComponent.transform);
        }

        const geometryComponents = node.componentsOfType('GeometryComponent');

        this._program.bind();

        // TODO: allow different orders via visitor
        for (const geometryComponent of geometryComponents) {
            const currentComponent = geometryComponent as GeometryComponent;
            const material = currentComponent.material;
            const geometry = currentComponent.geometry;

            geometry.bind();
            material.bind();

            this.updateModelTransform(nodeTransform);

return (function(bbox, nodeTransform, V, P) {
                gl.useProgram(this.program);

                mat4.mul(MVP, nodeTransform, bbox.transform);
                mat4.mul(MVP, V, MVP);
                mat4.mul(MVP, P, MVP);

                gl.uniformMatrix4fv(this.uniformMvpLocation, false, MVP);
                gl.bindVertexArray(this.vertexArray);
                gl.drawArrays(gl.LINES, 0, 24);
                gl.bindVertexArray(null);
            });
        })()

_scaleRotateEditMatrix(edit, i) {
    mat4.mul(edit, this._editTrans, edit);
    mat4.mul(edit, edit, this._editTransInv);

    mat4.mul(edit, this._editLocalInv[i], edit);
    mat4.mul(edit, edit, this._editLocal[i]);
  }

private computeModelMatrix(camera: Camera, modelMatrix: mat4): mat4 {
        computeViewMatrix(scratchMat4, camera);
        mat4.mul(scratchMat4, scratchMat4, modelMatrix);
        return scratchMat4;
    }

public prepareToRender(renderInstManager: GfxRenderInstManager, textureHolder: KatamariDamacyTextureHolder, viewRenderer: Viewer.ViewerRenderInput) {
        if (!this.visible)
            return;

        const template = renderInstManager.pushTemplateRenderInst();
        template.setInputLayoutAndState(this.binModelData.inputLayout, this.binModelData.inputState);
        template.setMegaStateFlags(cullModeFlags);

        computeViewMatrix(scratchMat4, viewRenderer.camera);
        mat4.mul(scratchMat4, scratchMat4, this.modelMatrix);

        for (let i = 0; i < this.modelParts.length; i++)
            this.modelParts[i].prepareToRender(renderInstManager, textureHolder, scratchMat4, this.modelMatrix);

        renderInstManager.popTemplateRenderInst();
    }
}