WebGL2 4x4 Matrix Value Checks

Benchmark created on

Description

Tests if it is more efficient to compare the existing value of a 4x4 matrix with an incoming value and update it if they differ or to just update it.

Preparation HTML

<canvas id="test"></canvas>

Setup

const canvas = document.querySelector("canvas#test");
const gl = canvas.getContext("webgl2");

const vss = `\
#version 300 es

uniform mat4 u_matrix;

void main() {
	gl_Position = u_matrix * vec4(0, 0, 0, 1);
}
`;

const fss = `\
#version 300 es

precision mediump float;

out vec4 outColor;

void main() {
	outColor = vec4(0, 0, 0, 1);
}
`;

function makeShader(src, type) {
	const out = gl.createShader(type);
	gl.shaderSource(out, src);
	gl.compileShader(out);
	
	if (!gl.getShaderParameter(out, gl.COMPILE_STATUS)) {
		throw new Error(gl.getShaderInfoLog(out));
	}
	
	return out;
}

const vs = makeShader(vss, gl.VERTEX_SHADER);
const fs = makeShader(fss, gl.FRAGMENT_SHADER);

const program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.deleteShader(vs);
gl.deleteShader(fs);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	throw new Error(gl.getProgramInfoLog(program));
}

const matLoc = gl.getUniformLocation(program, "u_matrix");

const matrix = new Float32Array([
	0, 1, 2, 3,
	4, 5, 6, 7,
	8, 9, 10, 11,
	12, 13, 14, 15
]);

gl.useProgram(program);

const [j0, j1, j2, j3, j4, j5, j6, j7, j8, j9, j10, j11, j12, j13, j14, j15] = [...matrix];
gl.uniformMatrix4fv(matLoc, false, matrix);
let matrixValueCache = [j0, j1, j2, j3, j4, j5, j6, j7, j8, j9, j10, j11, j12, j13, j14, j15];

Teardown

gl.deleteProgram(program);

Test runner

Ready to run.

Testing in
TestOps/sec
Re-Set without Check
gl.uniformMatrix4fv(matLoc, false, matrix);
ready
Set if Not Equivalent with Cached Value
const [i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15] = [...matrix];
if (
	(i0 === matrixValueCache[0] &&
		i1 === matrixValueCache[1] &&
		i2 === matrixValueCache[2] &&
		i3 === matrixValueCache[3] &&
		i4 === matrixValueCache[4] &&
		i5 === matrixValueCache[5] &&
		i6 === matrixValueCache[6] &&
		i7 === matrixValueCache[7] &&
		i8 === matrixValueCache[8] &&
		i9 === matrixValueCache[9] &&
		i10 === matrixValueCache[10] &&
		i11 === matrixValueCache[11] &&
		i12 === matrixValueCache[12] &&
		i13 === matrixValueCache[13] &&
		i14 === matrixValueCache[14] &&
		i15 === matrixValueCache[15]) ||
	typeof i0 === "undefined" ||
	typeof i1 === "undefined" ||
	typeof i2 === "undefined" ||
	typeof i3 === "undefined" ||
	typeof i4 === "undefined" ||
	typeof i5 === "undefined" ||
	typeof i6 === "undefined" ||
	typeof i7 === "undefined" ||
	typeof i8 === "undefined" ||
	typeof i9 === "undefined" ||
	typeof i10 === "undefined" ||
	typeof i11 === "undefined" ||
	typeof i12 === "undefined" ||
	typeof i13 === "undefined" ||
	typeof i14 === "undefined" ||
	typeof i15 === "undefined"
) {
	// return;
} else {
	gl.uniformMatrix4fv(matLoc, false, matrix);
	matrixValueCache = [i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15];
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.