stefnotch · November 30, 2020 13:22
diff --git a/index.html b/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>
diff --git a/suite.js b/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();
	});