andrevenancio/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>gl-matrix Class and chaining </title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
</head>
<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
</body>
</html>

## suite.js
"use strict";

(function (factory) {
	if (typeof Benchmark !== "undefined") {
		factory(Benchmark);
	} else {
		factory(require("benchmark"));
	}
})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
		class Mat4 extends Float32Array {
		    constructor() {
		        super(16);
		        this.identity();
		    }

		    identity() {
		       return identity(this);
		    }

		    rotate(rad, axis) {
		        return rotate(this, this, rad, axis);
		    }

		    // etc
		}

		function identity(out) {
		  out[0] = 1;
		  out[1] = 0;
		  out[2] = 0;
		  out[3] = 0;
		  out[4] = 0;
		  out[5] = 1;
		  out[6] = 0;
		  out[7] = 0;
		  out[8] = 0;
		  out[9] = 0;
		  out[10] = 1;
		  out[11] = 0;
		  out[12] = 0;
		  out[13] = 0;
		  out[14] = 0;
		  out[15] = 1;
		  return out;
		}

		function rotate(out, a, rad, axis) {
		  let x = axis[0], y = axis[1], z = axis[2];
		  let len = Math.sqrt(x * x + y * y + z * z);
		  let s, c, t;
		  let a00, a01, a02, a03;
		  let a10, a11, a12, a13;
		  let a20, a21, a22, a23;
		  let b00, b01, b02;
		  let b10, b11, b12;
		  let b20, b21, b22;

		  if (len < 0.001) { return null; }

		  len = 1 / len;
		  x *= len;
		  y *= len;
		  z *= len;

		  s = Math.sin(rad);
		  c = Math.cos(rad);
		  t = 1 - c;

		  a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3];
		  a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7];
		  a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11];

		  // Construct the elements of the rotation matrix
		  b00 = x * x * t + c; b01 = y * x * t + z * s; b02 = z * x * t - y * s;
		  b10 = x * y * t - z * s; b11 = y * y * t + c; b12 = z * y * t + x * s;
		  b20 = x * z * t + y * s; b21 = y * z * t - x * s; b22 = z * z * t + c;

		  // Perform rotation-specific matrix multiplication
		  out[0] = a00 * b00 + a10 * b01 + a20 * b02;
		  out[1] = a01 * b00 + a11 * b01 + a21 * b02;
		  out[2] = a02 * b00 + a12 * b01 + a22 * b02;
		  out[3] = a03 * b00 + a13 * b01 + a23 * b02;
		  out[4] = a00 * b10 + a10 * b11 + a20 * b12;
		  out[5] = a01 * b10 + a11 * b11 + a21 * b12;
		  out[6] = a02 * b10 + a12 * b11 + a22 * b12;
		  out[7] = a03 * b10 + a13 * b11 + a23 * b12;
		  out[8] = a00 * b20 + a10 * b21 + a20 * b22;
		  out[9] = a01 * b20 + a11 * b21 + a21 * b22;
		  out[10] = a02 * b20 + a12 * b21 + a22 * b22;
		  out[11] = a03 * b20 + a13 * b21 + a23 * b22;

		  if (a !== out) { // If the source and destination differ, copy the unchanged last row
		    out[12] = a[12];
		    out[13] = a[13];
		    out[14] = a[14];
		    out[15] = a[15];
		  }
		  return out;
		}

		var testA = new Float32Array(16);
		identity(testA);

		var testB = new Mat4(16);
	};


	suite.add("var out = new Float32Array(16);", function () {
		var out = new Float32Array(16);
		identity(out);
	});

	suite.add("var out = new Mat4();", function () {
		var out = new Mat4();
	});

	suite.add("rotate(testA, testA, 3.1, [1,2,3]);", function () {
		rotate(testA, testA, 3.1, [1,2,3]);
	});

	suite.add("testB.rotate(3.1, [1,2,3]);", function () {
		testB.rotate(3.1, [1,2,3]);
	});

	suite.on("cycle", function (evt) {
		console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
		console.log(new Array(30).join("-"));

		var results = evt.currentTarget.sort(function (a, b) {
			return b.hz - a.hz;
		});

		results.forEach(function (item) {
			console.log((idx + 1) + ". " + item);
		});
	});

	console.log("gl-matrix Class and chaining ");
	console.log(new Array(30).join("-"));
	suite.run();
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>gl-matrix Class and chaining </title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
	<script src="./suite.js"></script>
	</head>
	<body>
	<h1>Open the console to view the results</h1>
	<h2><code>cmd + alt + j</code> or <code>ctrl + alt + j</code></h2>
	</body>
	</html>
	"use strict";

	(function (factory) {
	if (typeof Benchmark !== "undefined") {
	factory(Benchmark);
	} else {
	factory(require("benchmark"));
	}
	})(function (Benchmark) {
	var suite = new Benchmark.Suite;

	Benchmark.prototype.setup = function () {
	class Mat4 extends Float32Array {
	constructor() {
	super(16);
	this.identity();
	}

	identity() {
	return identity(this);
	}

	rotate(rad, axis) {
	return rotate(this, this, rad, axis);
	}

	// etc
	}

	function identity(out) {
	out[0] = 1;
	out[1] = 0;
	out[2] = 0;
	out[3] = 0;
	out[4] = 0;
	out[5] = 1;
	out[6] = 0;
	out[7] = 0;
	out[8] = 0;
	out[9] = 0;
	out[10] = 1;
	out[11] = 0;
	out[12] = 0;
	out[13] = 0;
	out[14] = 0;
	out[15] = 1;
	return out;
	}

	function rotate(out, a, rad, axis) {
	let x = axis[0], y = axis[1], z = axis[2];
	let len = Math.sqrt(x * x + y * y + z * z);
	let s, c, t;
	let a00, a01, a02, a03;
	let a10, a11, a12, a13;
	let a20, a21, a22, a23;
	let b00, b01, b02;
	let b10, b11, b12;
	let b20, b21, b22;

	if (len < 0.001) { return null; }

	len = 1 / len;
	x *= len;
	y *= len;
	z *= len;

	s = Math.sin(rad);
	c = Math.cos(rad);
	t = 1 - c;

	a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3];
	a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7];
	a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11];

	// Construct the elements of the rotation matrix
	b00 = x * x * t + c; b01 = y * x * t + z * s; b02 = z * x * t - y * s;
	b10 = x * y * t - z * s; b11 = y * y * t + c; b12 = z * y * t + x * s;
	b20 = x * z * t + y * s; b21 = y * z * t - x * s; b22 = z * z * t + c;

	// Perform rotation-specific matrix multiplication
	out[0] = a00 * b00 + a10 * b01 + a20 * b02;
	out[1] = a01 * b00 + a11 * b01 + a21 * b02;
	out[2] = a02 * b00 + a12 * b01 + a22 * b02;
	out[3] = a03 * b00 + a13 * b01 + a23 * b02;
	out[4] = a00 * b10 + a10 * b11 + a20 * b12;
	out[5] = a01 * b10 + a11 * b11 + a21 * b12;
	out[6] = a02 * b10 + a12 * b11 + a22 * b12;
	out[7] = a03 * b10 + a13 * b11 + a23 * b12;
	out[8] = a00 * b20 + a10 * b21 + a20 * b22;
	out[9] = a01 * b20 + a11 * b21 + a21 * b22;
	out[10] = a02 * b20 + a12 * b21 + a22 * b22;
	out[11] = a03 * b20 + a13 * b21 + a23 * b22;

	if (a !== out) { // If the source and destination differ, copy the unchanged last row
	out[12] = a[12];
	out[13] = a[13];
	out[14] = a[14];
	out[15] = a[15];
	}
	return out;
	}

	var testA = new Float32Array(16);
	identity(testA);

	var testB = new Mat4(16);
	};


	suite.add("var out = new Float32Array(16);", function () {
	var out = new Float32Array(16);
	identity(out);
	});

	suite.add("var out = new Mat4();", function () {
	var out = new Mat4();
	});

	suite.add("rotate(testA, testA, 3.1, [1,2,3]);", function () {
	rotate(testA, testA, 3.1, [1,2,3]);
	});

	suite.add("testB.rotate(3.1, [1,2,3]);", function () {
	testB.rotate(3.1, [1,2,3]);
	});

	suite.on("cycle", function (evt) {
	console.log(" - " + evt.target);
	});

	suite.on("complete", function (evt) {
	console.log(new Array(30).join("-"));

	var results = evt.currentTarget.sort(function (a, b) {
	return b.hz - a.hz;
	});

	results.forEach(function (item) {
	console.log((idx + 1) + ". " + item);
	});
	});

	console.log("gl-matrix Class and chaining ");
	console.log(new Array(30).join("-"));
	suite.run();
	});