Disclaimer: there is no hidden code behind the scenes. The entire GPGPU computation raw, low level, browser APIs are called from code you see on this page, and on this page only.

We describe the minimum required JavaScript to make WebGL API calls in the browser to make our GPU hardware code. The code doesn't use any frameworks, so you right-click on your browser, chose Inspect, and navigate to the Console tab, and copy-paste the JavaScript code presented in this article into the console.

What the code does

The minimum GPU code runs in a single GPU hardware thread, and outputs 32 bits as the result of computation. That's the easiest way to see how it runs.

To make that happen, we're going to execute the following sequence of commands:

Create an invisible <canvas> HTML element.
Call the method getContext() of the element.

WebGL context

It starts from an HTML element. We're in a browser, after all:

window.elt_webgl = document.createElement('canvas');

return elt_webgl;

The default size of HTML canvas element is 300 by 150 pixels:

return `${ elt_webgl.width }x${ elt_webgl.height }`;

So we reduce it to 2x2:

elt_webgl.width = elt_webgl.height = 2;
// this.insertAdjacentElement('afterend', elt_webgl);
return `${ elt_webgl.width }x${ elt_webgl.height }`;

Default WebGL init parameters are suboptimal for GPGPU—with a depth buffer and anti-aliasing, and introducing additional latency—so we disable it:

window.gl = elt_webgl.getContext('webgl', {
	depth: false,
	antialias: false,
	powerPreference: 'high-performance',
	desynchronized: true,
});

// Demand reading from float textures always present:
gl.getExtension('OES_texture_float');

// return gl.getSupportedExtensions();
// gl.getExtension('EXT_color_buffer_half_float');
return gl;

When OpenGL doesn't work we need to know why. Let's make gl.getError() return text:

window.gl_err = (gl) => ({
	0: 'NO_ERROR',
	1280: 'INVALID_ENUM',
	1281: 'INVALID_VALUE',
	1282: 'INVALID_OPERATION',
	1286: 'INVALID_FRAMEBUFFER_OPERATION',
	1285: 'OUT_OF_MEMORY',
	37442: 'CONTEXT_LOST_WEBGL' }
		[gl.getError()]);

To run GPU code, we need to compile it, and then render two triangles:


window.Shader = class {

constructor (gl, source_code,
	attributes = [], uniforms = []) {

	this.gpu_exe = gl.createProgram();

	this.gl = gl;
	const vertex_shader = this._compile(
		gl.VERTEX_SHADER,
		`#version 100
		precision highp float;
		attribute vec2 vertex_of_rendered_area;
		void main() {
			gl_Position = vec4(
				vertex_of_rendered_area.xy,
  				0.0, 1.0);
		}
	`);

	const fragment_shader = this._compile(
		gl.FRAGMENT_SHADER, source_code);

	gl.linkProgram(this.gpu_exe);

	const compile_log = '' +
		gl.getShaderInfoLog(vertex_shader) +
		gl.getShaderInfoLog(fragment_shader) +
		gl.getProgramInfoLog(this.gpu_exe);

	if (compile_log) {
		throw Error(compile_log);
	}


	this.attribute = {};
	[ ...attributes,
		'vertex_of_rendered_area'
		].forEach(attr_name => {

		this.attribute[attr_name] =
			gl.getAttribLocation(
				this.gpu_exe, attr_name);
	});

	gl.enableVertexAttribArray(
		this.attribute.vertex_of_rendered_area);

	this.uniform = {};
	uniforms.forEach(unif_name => {
		this.uniform[unif_name] =
			gl.getUniformLocation(
				this.gpu_exe, unif_name);
	});

	this.two_triangles = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,
		this.two_triangles);
	gl.bufferData(gl.ARRAY_BUFFER,
		new Float32Array([
		  1.0,  1.0,
		 -1.0,  1.0,
		  1.0, -1.0,
		 -1.0, -1.0 ]),
		gl.DYNAMIC_DRAW);

	gl.vertexAttribPointer(
		this.attribute.vertex_of_rendered_area,
		2, gl.FLOAT, false, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER,
		null);
}

_compile (type, src) {
	const shader = this.gl.createShader(type);
	this.gl.shaderSource(shader, src);
	this.gl.compileShader(shader);
	this.gl.attachShader(this.gpu_exe, shader);
	return shader;
}

run (framebuffer) {
	this.gl.useProgram(this.gpu_exe);


	// Framebuffer's pixel range to run shader:
	this.gl.bindBuffer(gl.ARRAY_BUFFER, this.two_triangles);

	// Color buffer(s) to write results (can have many attachments):
	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);

	this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
	const run_status = gl_err(this.gl);
	if (run_status !== 'NO_ERROR') {
		throw Error(run_status);
	}
}

}

Now, after we got a missing API, we can run it:

const gpu_exe_0 = new Shader(gl, `#version 100

void main () {
  gl_FragData[0] = vec4(
  	0.0, 255.0, 127.0, 0.0) / 255.0;
}

`);

// Viewport defines framebuffer area to be impacted
gl.viewport(0, 0, 16, 16);
const framebuffer = null;

return gpu_exe_0.run(framebuffer);

We don't have to read GPU shader execution results which it wrote into framebuffer's color attachment(s), because these simply can be used as textures in new runs after swapping

const current_color_attachment_contents = new Uint8Array(
	16 * 16 * 4);
gl.readPixels(0, 0, 16, 16,
	gl.RGBA, gl.UNSIGNED_BYTE,
	current_color_attachment_contents);
return current_color_attachment_contents;

Float precision and GLSL 1.00

GLSL 1.00 preprocessor cuts all floating point literals below 1.0000001e-37 = pow(2, -123) * (1 + 0.0633825) by a silly point simply shrinking all decimal literals below 1e-37 to zero in a buggy way: the sign is ignored. It's preprocessor, it's not your GPU. There's a lot of "garbage" buggy code there.

We can write a function doing all of this:


window.run_dynamic_gpu_code = (gl, source, width, height) => {
	const gpu_exe = new Shader(gl, source);

	// Viewport defines framebuffer area to be impacted
	gl.viewport(0, 0, width, height);
	const framebuffer = null;
	gpu_exe.run(framebuffer);

	const current_color_attachment_contents = new Uint8Array(
		width * height * 4);
	//const current_color_attachment_contents = new Float32Array(
	//	width * height * 4);
	gl.readPixels(0, 0, width, height,
		gl.RGBA,
		//gl.FLOAT,
		gl.UNSIGNED_BYTE,
		current_color_attachment_contents);

	const float_result = new Float32Array(
		current_color_attachment_contents.buffer);

	const bits = [...current_color_attachment_contents]
		.map(byte => {
			const n = byte.toString(2);
			return '00000000'.substr(n.length) + n;
		}).reverse();
	
	return [
		float_result,
		current_color_attachment_contents,
		bits.join(''),
	];
};

So we can run our dynamic shader code:

return run_dynamic_gpu_code(gl, `#version 100

precision highp float;
precision highp int;
precision highp sampler2D;


struct Bitset8Bits {
    mediump vec4 bit0;
    mediump vec4 bit1;
    mediump vec4 bit2;
    mediump vec4 bit3;
    mediump vec4 bit4;
    mediump vec4 bit5;
    mediump vec4 bit6;
    mediump vec4 bit7;
};


vec4 when_gt (vec4 l, vec4 r) {
  return max(sign(l - r), 0.0);
}


Bitset8Bits unpack_4_bytes (lowp vec4 byte) {
    Bitset8Bits result;

    result.bit7 = when_gt(byte, vec4(127.5));
    vec4 bits0to6 = byte - 128.0 * result.bit7;

    result.bit6 = when_gt(bits0to6, vec4(63.5));
    vec4 bits0to5 = bits0to6 - 64.0 * result.bit6;

    result.bit5 = when_gt(bits0to5, vec4(31.5));
    vec4 bits0to4 = bits0to5 - 32.0 * result.bit5;

    result.bit4 = when_gt(bits0to4, vec4(15.5));
    vec4 bits0to3 = bits0to4 - 16.0 * result.bit4;

    result.bit3 = when_gt(bits0to3, vec4(7.5));
    vec4 bits0to2 = bits0to3 - 8.0 * result.bit3;

    result.bit2 = when_gt(bits0to2, vec4(3.5));
    vec4 bits0to1 = bits0to2 - 4.0 * result.bit2;

    result.bit1 = when_gt(bits0to1, vec4(1.5));
    vec4 bit0 = bits0to1 - 2.0 * result.bit1;

    result.bit0 = when_gt(bit0, vec4(0.5));

    return result;
}

float when_gt (float l, float r) {
  return max(sign(l - r), 0.0);
}




vec4 pack_4_bytes (Bitset8Bits state) {

  vec4 data;

  data = state.bit0
    + 2.0 * state.bit1
    + 4.0 * state.bit2
    + 8.0 * state.bit3
    + 16.0 * state.bit4
    + 32.0 * state.bit5
    + 64.0 * state.bit6
    + 128.0 * state.bit7;

  return data;
}

vec4 brians_float_pack (
	float original_value) {

	// Remove the sign
	float pos_value = abs(original_value);

	float exp_real = floor(log2(pos_value));
	float multiplier = pow(2.0, exp_real);
	float normalized = pos_value / multiplier - 1.0;

	float exp_v = exp_real + 127.0;
	// if exp_v == -Inf -> 0
	// if exp_v == +Inf -> 255
	// if exp_v < -126.0 -> denormalized (remove the "1")
	// otherwise + 127.0;

	Bitset8Bits packed_v;

	packed_v.bit7.a =
		step(sign(original_value) - 1.0, -1.5); // pos

	// Exponent 8 bits

    packed_v.bit6.a = when_gt(exp_v, 127.5);
    float bits0to6 = exp_v - 128.0 * packed_v.bit6.a;

    packed_v.bit5.a = when_gt(bits0to6, 63.5);
    float bits0to5 = bits0to6 - 64.0 * packed_v.bit5.a;

    packed_v.bit4.a = when_gt(bits0to5, 31.5);
    float bits0to4 = bits0to5 - 32.0 * packed_v.bit4.a;

    packed_v.bit3.a = when_gt(bits0to4, 15.5);
    float bits0to3 = bits0to4 - 16.0 * packed_v.bit3.a;

    packed_v.bit2.a = when_gt(bits0to3, 7.5);
    float bits0to2 = bits0to3 - 8.0 * packed_v.bit2.a;

    packed_v.bit1.a = when_gt(bits0to2, 3.5);
    float bits0to1 = bits0to2 - 4.0 * packed_v.bit1.a;

    packed_v.bit0.a = when_gt(bits0to1, 1.5);
    float bit0 = bits0to1 - 2.0 * packed_v.bit0.a;

    packed_v.bit7.b = when_gt(bit0, 0.5);

	// Significand 23 bits

	float factor = 0.5;
    // 0.4999999
	
	// Significand MSB bit 22:
	packed_v.bit6.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit6.b;
	factor = 0.5 * factor;

	packed_v.bit5.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit5.b;
	factor = 0.5 * factor;

	packed_v.bit4.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit4.b;
	factor = 0.5 * factor;

	packed_v.bit3.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit3.b;
	factor = 0.5 * factor;

	packed_v.bit2.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit2.b;
	factor = 0.5 * factor;

	packed_v.bit1.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit1.b;
	factor = 0.5 * factor;

	packed_v.bit0.b =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit0.b;
	factor = 0.5 * factor;


	packed_v.bit7.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit7.g;
	factor = 0.5 * factor;

	packed_v.bit6.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit6.g;
	factor = 0.5 * factor;

	packed_v.bit5.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit5.g;
	factor = 0.5 * factor;

	packed_v.bit4.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit4.g;
	factor = 0.5 * factor;

	packed_v.bit3.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit3.g;
	factor = 0.5 * factor;

	packed_v.bit2.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit2.g;
	factor = 0.5 * factor;

	packed_v.bit1.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit1.g;
	factor = 0.5 * factor;

	packed_v.bit0.g =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit0.g;
	factor = 0.5 * factor;


	packed_v.bit7.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit7.r;
	factor = 0.5 * factor;

	packed_v.bit6.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit6.r;
	factor = 0.5 * factor;

	packed_v.bit5.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit5.r;
	factor = 0.5 * factor;

	packed_v.bit4.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit4.r;
	factor = 0.5 * factor;

	packed_v.bit3.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit3.r;
	factor = 0.5 * factor;

	packed_v.bit2.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit2.r;
	factor = 0.5 * factor;

	packed_v.bit1.r =
		when_gt(normalized, factor - 0.00000005);
	normalized = normalized - factor * packed_v.bit1.r;
	factor = 0.5 * factor;

	// LSB bit 0
	packed_v.bit0.r =
		when_gt(normalized, factor - 0.00000005);

	vec4 result = pack_4_bytes(packed_v);

	return result;
}

void main () {
	// float a = 128.0 * pow(2.0, -149.0);//1.4012984643e-45;
	//float a = -2.802596928649634e-45;
	// highp float a = -1e-45;//-0.0;//1.8000000;

	// -9.9999999e-38
	const float below_glsl_preproc =
		-1.0000001e-37 * 0.9999999;

	const float SMALLEST_POS_FLOAT =
		1.0000001e-37 * 9.999999e-9;

	const float SMALLEST_NEG_FLOAT =
		-1.0000001e-37 * 9.999999e-9;

	const float MINUS_ZERO =
		0.50000003 * SMALLEST_NEG_FLOAT;

	const float INFINITY = pow(2.0, 128.0);

	float a = -MINUS_ZERO;
	a = 2.0;
	a = 1.0842022e-19;
	a = 1.5046328e-36;
	a = pow(2.0, -123.0);
	a = pow(2.0, -125.0);
	a = pow(2.0, -126.0);
	a = SMALLEST_POS_FLOAT;
	a = SMALLEST_NEG_FLOAT;
	a = -INFINITY;
	// a = INFINITY * 0.0; -> -Inf
	a = 8.507058747670503e+37;
	    // 8.5070586e+37;// * 2.0;
		// Value 1e+38 is cut 3.4028234e+38;

	a = 1.9999999 * pow(2.0, 127.0);
	a = 1.999994695 * pow(2.0, 127.0);

	a = 3.4028146439e+38; // The largest number
	//  a = 3.4028234663852886e+38;

	a = 8.499999;
	a = 13.999999;
	a = 15.999998;

	a = 3.4028146439e+38; // The largest number

	a = -7.81230043e-17;
	a = -7.812301e-17;

	gl_FragData[0] = brians_float_pack(a) * 3.9215686e-3;
}

`, 1, 1);

Let's enable shaders which produce floating point values rather than 4 bytes of RGBA in the range from 0 to 255. Also, let's render to 8 color buffers simultaneously (doesn't work in smartphones). Visible framebuffer has RGBA8888 attachments. But we can't use these attachments as data inside of shader code to read from. Also, RGBA8888 per shader run is not much of output (just 32 bits per GPU thread). On smartphones, this is the only option, but let's enable our desktop machines and laptops to run at full throttle:


// We want to use floating point textures:
gl.getExtension('OES_texture_float');

// Now we can make one:
const float_texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, float_texture);
gl.texParameteri(gl.TEXTURE_2D,
	gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D,
	gl.TEXTURE_MIN_FILTER, gl.NEAREST);

// Run just one pixel
const width = height = 1;

// Update texture and (re)define its size:
gl.texImage2D(gl.TEXTURE_2D, 0,
	gl.RGBA, width, height, 0,
	gl.RGBA,
	gl.FLOAT, new Float32Array([
	1.4e31, -1.4e-31, 0.0, 1.0 ]));


// Let's make our custom framebuffer.

// We want to write to float textures:
const ext_write_float =
	gl.getExtension('WEBGL_color_buffer_float');

// We want to write to multiple textures:
//const ext_write_multiple =
//	gl.getExtension('WEBGL_draw_buffers');

const custom_framebuffer = gl.createFramebuffer();

gl.bindFramebuffer(gl.FRAMEBUFFER, custom_framebuffer);

// For single attachment texture write:
gl.framebufferTexture2D(gl.FRAMEBUFFER,
	gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D,
	float_texture, 0);

// We need to define earlier crated texture
// to work as a render target color buffer:

// Multiple attachments
//gl.framebufferTexture2D(gl.FRAMEBUFFER,
//	ext_write_multiple.COLOR_ATTACHMENT0_WEBGL,
//	gl.TEXTURE_2D, float_texture, 0);

// Enable multiple buffers:
// ext_write_multiple.drawBuffersWEBGL([
//   ext_write_multiple.COLOR_ATTACHMENT0_WEBGL, ... ]);


// API has both, so we need to figure out
// what one works.


const gpu_exe_0 = new Shader(gl, `#version 100

void main () {
  gl_FragData[0] = vec4(
  	0.0, 255.0, 127.0, 1.4e24);// / 255.0;
}

`);


// Viewport defines framebuffer area to be impacted
gl.viewport(0, 0, width, height);
const framebuffer = custom_framebuffer;
gpu_exe_0.run(framebuffer);

const current_color_attachment_contents = new Float32Array(
	width * height * 4);
gl.readPixels(0, 0, width, height,
	gl.RGBA,
	gl.FLOAT,
	current_color_attachment_contents);

const result_bytes = new Uint8Array(
	current_color_attachment_contents.buffer);

const bits = [...result_bytes]
	.map(byte => {
		const n = byte.toString(2);
		return '00000000'.substr(n.length) + n;
	}).reverse();

return [
	current_color_attachment_contents,
	result_bytes,
	bits.join(''),
];