WebGL2 Already-Bound Checks (v3)

Revision 3 of this benchmark created on


Description

Tests whether it is more efficient to check if a WebGLProgram is already bound and bind it if not or to just re-bind it.

Preparation HTML

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

Setup

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

const vss = `\
#version 300 es

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

const fss = `\
#version 300 es

precision highp 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;
}

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

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

const program = makeProgram(vs, fs);

gl.useProgram(program);
let boundProgram = program;

Teardown

gl.deleteProgram(program);

Test runner

Ready to run.

Testing in
TestOps/sec
Re-Bind without Check
gl.useProgram(program);

ready
Bind if Not Bound
if (gl.getParameter(gl.CURRENT_PROGRAM) !== program) {
	gl.useProgram(program);
}

ready
Bind if Not Bound with Cached Value
if (boundProgram !== program) {
	gl.useProgram(program);
	boundProgram = program;
}

ready

Revisions

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