WebGL2 Already-Bound Checks

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

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);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
	throw new Error(gl.getProgramInfoLog(program));
}

gl.useProgram(program);

Teardown

gl.deleteProgram(program);
gl.deleteShader(vs);
gl.deleteShader(fs);

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
const boundProgram = program;
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.