Skip to content

Instantly share code, notes, and snippets.

@stefnotch
Last active November 30, 2020 13:22
Show Gist options
  • Save stefnotch/1aa0ac752bc15eca5b53ad313e1f610a to your computer and use it in GitHub Desktop.
Save stefnotch/1aa0ac752bc15eca5b53ad313e1f610a to your computer and use it in GitHub Desktop.
gl-matrix Class and chaining (https://jsbench.github.io/#1aa0ac752bc15eca5b53ad313e1f610a) #jsbench #jsperf
<!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();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment