class Mat4 {
    /**
     * Matrix elements in the form of a flat array.
     *
     * @type {Float32Array}
     */
    data = new Float32Array(16);

    /**
     * Create a new Mat4 instance. It is initialized to the identity matrix.
     */
    constructor() {
        // Create an identity matrix. Note that a new Float32Array has all elements set
        // to zero by default, so we only need to set the relevant elements to one.
        this.data[0] = this.data[5] = this.data[10] = this.data[15] = 1;
    }

    mul2(lhs, rhs) {
        const a = lhs.data;
        const b = rhs.data;
        const r = this.data;

        const a00 = a[0];
        const a01 = a[1];
        const a02 = a[2];
        const a03 = a[3];
        const a10 = a[4];
        const a11 = a[5];
        const a12 = a[6];
        const a13 = a[7];
        const a20 = a[8];
        const a21 = a[9];
        const a22 = a[10];
        const a23 = a[11];
        const a30 = a[12];
        const a31 = a[13];
        const a32 = a[14];
        const a33 = a[15];

        let b0, b1, b2, b3;

        b0 = b[0];
        b1 = b[1];
        b2 = b[2];
        b3 = b[3];
        r[0]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[1]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[2]  = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[3]  = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[4];
        b1 = b[5];
        b2 = b[6];
        b3 = b[7];
        r[4]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[5]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[6]  = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[7]  = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[8];
        b1 = b[9];
        b2 = b[10];
        b3 = b[11];
        r[8]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[9]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[10] = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[11] = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[12];
        b1 = b[13];
        b2 = b[14];
        b3 = b[15];
        r[12] = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[13] = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[14] = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[15] = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        return this;
    }

mul2opt(lhs, rhs) {
    const a = lhs.data;
    const b = rhs.data;
    const r = this.data;

    const a00 = a[0];
    const a01 = a[1];
    const a02 = a[2];
    const a03 = a[3];
    const a10 = a[4];
    const a11 = a[5];
    const a12 = a[6];
    const a13 = a[7];
    const a20 = a[8];
    const a21 = a[9];
    const a22 = a[10];
    const a23 = a[11];
    const a30 = a[12];
    const a31 = a[13];
    const a32 = a[14];
    const a33 = a[15];

    r[0]  = a00 * b[0] + a10 * b[1] + a20 * b[2] + a30 * b[3];
    r[1]  = a01 * b[0] + a11 * b[1] + a21 * b[2] + a31 * b[3];
    r[2]  = a02 * b[0] + a12 * b[1] + a22 * b[2] + a32 * b[3];
    r[3]  = a03 * b[0] + a13 * b[1] + a23 * b[2] + a33 * b[3];

    r[4]  = a00 * b[4] + a10 * b[5] + a20 * b[6] + a30 * b[7];
    r[5]  = a01 * b[4] + a11 * b[5] + a21 * b[6] + a31 * b[7];
    r[6]  = a02 * b[4] + a12 * b[5] + a22 * b[6] + a32 * b[7];
    r[7]  = a03 * b[4] + a13 * b[5] + a23 * b[6] + a33 * b[7];

    r[8]  = a00 * b[8] + a10 * b[9] + a20 * b[10] + a30 * b[11];
    r[9]  = a01 * b[8] + a11 * b[9] + a21 * b[10] + a31 * b[11];
    r[10] = a02 * b[8] + a12 * b[9] + a22 * b[10] + a32 * b[11];
    r[11] = a03 * b[8] + a13 * b[9] + a23 * b[10] + a33 * b[11];

    r[12] = a00 * b[12] + a10 * b[13] + a20 * b[14] + a30 * b[15];
    r[13] = a01 * b[12] + a11 * b[13] + a21 * b[14] + a31 * b[15];
    r[14] = a02 * b[12] + a12 * b[13] + a22 * b[14] + a32 * b[15];
    r[14] = a03 * b[12] + a13 * b[13] + a23 * b[14] + a33 * b[15];       
}
}

class Mat4Fast {
    /**
     * Matrix elements in the form of a flat array.
     *
     * @type {Float32Array}
     */
    data = [
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    ];

    mul2(lhs, rhs) {
        const a = lhs.data;
        const b = rhs.data;
        const r = this.data;

        const a00 = a[0];
        const a01 = a[1];
        const a02 = a[2];
        const a03 = a[3];
        const a10 = a[4];
        const a11 = a[5];
        const a12 = a[6];
        const a13 = a[7];
        const a20 = a[8];
        const a21 = a[9];
        const a22 = a[10];
        const a23 = a[11];
        const a30 = a[12];
        const a31 = a[13];
        const a32 = a[14];
        const a33 = a[15];

        let b0, b1, b2, b3;

        b0 = b[0];
        b1 = b[1];
        b2 = b[2];
        b3 = b[3];
        r[0]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[1]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[2]  = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[3]  = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[4];
        b1 = b[5];
        b2 = b[6];
        b3 = b[7];
        r[4]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[5]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[6]  = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[7]  = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[8];
        b1 = b[9];
        b2 = b[10];
        b3 = b[11];
        r[8]  = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[9]  = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[10] = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[11] = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        b0 = b[12];
        b1 = b[13];
        b2 = b[14];
        b3 = b[15];
        r[12] = a00 * b0 + a10 * b1 + a20 * b2 + a30 * b3;
        r[13] = a01 * b0 + a11 * b1 + a21 * b2 + a31 * b3;
        r[14] = a02 * b0 + a12 * b1 + a22 * b2 + a32 * b3;
        r[15] = a03 * b0 + a13 * b1 + a23 * b2 + a33 * b3;

        return this;
    }

mul2opt(lhs, rhs) {
    const a = lhs.data;
    const b = rhs.data;
    const r = this.data;

    const a00 = a[0];
    const a01 = a[1];
    const a02 = a[2];
    const a03 = a[3];
    const a10 = a[4];
    const a11 = a[5];
    const a12 = a[6];
    const a13 = a[7];
    const a20 = a[8];
    const a21 = a[9];
    const a22 = a[10];
    const a23 = a[11];
    const a30 = a[12];
    const a31 = a[13];
    const a32 = a[14];
    const a33 = a[15];

    r[0]  = a00 * b[0] + a10 * b[1] + a20 * b[2] + a30 * b[3];
    r[1]  = a01 * b[0] + a11 * b[1] + a21 * b[2] + a31 * b[3];
    r[2]  = a02 * b[0] + a12 * b[1] + a22 * b[2] + a32 * b[3];
    r[3]  = a03 * b[0] + a13 * b[1] + a23 * b[2] + a33 * b[3];

    r[4]  = a00 * b[4] + a10 * b[5] + a20 * b[6] + a30 * b[7];
    r[5]  = a01 * b[4] + a11 * b[5] + a21 * b[6] + a31 * b[7];
    r[6]  = a02 * b[4] + a12 * b[5] + a22 * b[6] + a32 * b[7];
    r[7]  = a03 * b[4] + a13 * b[5] + a23 * b[6] + a33 * b[7];

    r[8]  = a00 * b[8] + a10 * b[9] + a20 * b[10] + a30 * b[11];
    r[9]  = a01 * b[8] + a11 * b[9] + a21 * b[10] + a31 * b[11];
    r[10] = a02 * b[8] + a12 * b[9] + a22 * b[10] + a32 * b[11];
    r[11] = a03 * b[8] + a13 * b[9] + a23 * b[10] + a33 * b[11];

    r[12] = a00 * b[12] + a10 * b[13] + a20 * b[14] + a30 * b[15];
    r[13] = a01 * b[12] + a11 * b[13] + a21 * b[14] + a31 * b[15];
    r[14] = a02 * b[12] + a12 * b[13] + a22 * b[14] + a32 * b[15];
    r[14] = a03 * b[12] + a13 * b[13] + a23 * b[14] + a33 * b[15];       
}
}

const m1 = new Mat4();
const m2 = new Mat4();
const m3 = new Mat4();

const f1 = new Mat4Fast();
const f2 = new Mat4Fast();
const f3 = new Mat4Fast();
Teardown JS
Test cases

Test #1

Title *
Async
Code *const m = new Mat4();
Test #2

Title *
Async
Code *const m = new Mat4Fast();
Test #3

Title *
Async
Code *m1.mul2(m2, m3);
Test #4

Title *
Async
Code *f1.mul2(f2, f3);
Test #5

Title *
Async
Code *m1.mul2opt(m2, m3);
Test #6

Title *
Async
Code *f1.mul2opt(f2, f3);
Test case details

Preparation Code

Test cases

Test #1

Test #2

Test #3

Test #4

Test #5

Test #6
