How video video games use LUTs and how one can too

Look-up-tables, extra generally known as LUTs, are as outdated as Arithmetic itself. The act of precalculating issues right into a row or desk is nothing new. However within the realm of graphics programming, this straightforward act unlocks some extremely inventive methods, which each artists and programmers discovered when confronted with robust technical hurdles.

We’ll embark on a small journey, which can take us from easy issues like turning grayscale footage into shade, to creating limitless variations of blood-lusting zombies, with many interactive WebGL examples alongside the best way, you can check out with your personal movies or webcam. Although this text makes use of WebGL, the methods proven apply to every other graphics programming context, be it DirectX, OpenGL, Vulkan, recreation engines like Unity, or plain scientific knowledge visualization.

We’ll be creating and modifying the video above, although chances are you’ll substitute the footage with your personal at any level within the article. The video is a seize of two cameras, a Panasonic GH6 and a TESTO 890 thermal digicam. I’m consuming chilly ice cream and consuming sizzling tea to stretch the temperatures on show.

The Setup #

We’ll first begin with the thermal digicam footage. The output of the thermal camera is a grayscale video. As a substitute of this video, chances are you’ll add your personal or activate the webcam, which even permits you to dwell stream from a thermal digicam utilizing OBS’s digital webcam output and varied enter strategies.

No knowledge leaves your machine, all processing occurs in your GPU. Be happy to make use of movies exposing your most intimate secrets and techniques.

Add VideoJoin Webcam

Do not pause the video, it is the dwell enter for the WebGL examples beneath

Subsequent we add this footage to the graphics card utilizing WebGL and redisplay it utilizing a shader, which leaves the footage untouched. Every body is transferred as a 2D texture to the GPU. Although we haven’t really finished something visually but, now we have established a graphics pipeline, which permits us to govern the video knowledge in realtime. From right here on out, we’re primarily within the “Fragment Shader”. That is the piece of code that runs per pixel of the video to find out its closing shade.

I am hardcore simplifying right here. Technically there are numerous shader levels, the fragment shader runs per fragment of the output decision not per pixel of the enter, and so on.

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-simple.fs

precision mediump float;

various vec2 tex;

uniform sampler2D video;

void essential(void)
{
	
	vec3 videoColor = texture2D(video, tex).rgb;
	
	gl_FragColor = vec4(videoColor, 1.0);
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

Each the video and its WebGL rendition must be an identical and taking part in in sync.

Except you might be on Firefox Android, the place video is broken for WebGL

Tinting #

Earlier than we soar into how LUTs may also help us, let’s have a look a how we are able to manipulate this footage. The Fragment Shader beneath colours the picture orange by multiplying the picture with the colour orange in line 21. Coloring a texture that method is known as “tinting”.

vec3 finalColor = videoColor * vec3(1.0, 0.5, 0.0); is the road that performs this transformation. vec3(1.0, 0.5, 0.0) is the colour orange in RGB. Strive altering this line and clicking “Reload Shader” to get a really feel for the way this works. Additionally check out completely different operations, like addition +, division / and so on.

/* In WebGL 1.0, having no #model implies #model 100 */
/* In WebGL now we have to set the float precision. On some gadgets it would not
   change something. For shade manipulation, having mediump is ample. For
   precision trigonometry, bumping to highp is commonly wanted. */
precision mediump float;
/* Our texture coordinates */
various vec2 tex;
/* Our video texture */
uniform sampler2D video;

void essential(void)
{
	/* The feel learn, additionally referred to as "Texture Faucet" with the coordinate for
	   the present pixel. */
	vec3 videoColor = texture2D(video, tex).rgb;

	/* Right here is the place the tinting occurs. We multiply with (1.0, 0.5, 0.0),
	   which is orange (100% Purple, 50% Inexperienced, 0% Blue). White turns into Orange,
	   since muplitplying 1 with X provides you X. Black stays black, since 0
	   instances X is 0. Check out various things! */
	vec3 finalColor = videoColor * vec3(1.0, 0.5, 0.0);

	/* Our closing shade. In WebGL 1.0 this output is all the time RGBA and all the time
	   named "gl_FragColor" */
	gl_FragColor = vec4(finalColor, 1.0);
}

Reload Shader

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

Efficiency price: Zero #

Relying on the context, the multiplication launched by the tinting has zero efficiency influence. On a theoretical stage, the multiplication has a price related to it, because the chip has to carry out this multiplication sooner or later. However you’ll in all probability not have the ability to measure it on this context, because the multiplication is affected by “latency hiding”. The act, price and latency of pushing the video although the graphics pipeline unlocks lots of manipulations we get free of charge this fashion. We are able to rationalize this from a number of ranges, however the primary level goes like:

• Fetching the feel from reminiscence takes far more time than a multiplication
  • Regardless that the outcome relies on the feel faucet, with a number of threads the multiplication is carried out whereas ready on the feel faucet of one other pixel

That is concerning the distinction tinting makes, not general efficiency. Lot’s left on the optimization desk, like asynchronously loading the frames to a single-channel texture or processing on each body, not show refresh

In related vein, it was additionally talked about within the recent blog post by Alyssa Rosenzweig, about her GPU reverse engineering challenge reaching correct commonplace conformant OpenGL Drivers on the Apple M1. Relating to efficiency implications of a selected extra operation she famous:

Alyssa Rosenzweig: The distinction must be small percentage-wise, as arithmetic is quicker than reminiscence. With hundreds of threads operating in parallel, the arithmetic price might even be hidden by the load’s latency.

Valve Software program’s use of tinting #

Let’s have a look how that is used within the wild. For example, now we have Valve Software’s Left 4 Dead. The in-game developer commentary function unlocks a lot shared knowledge kind artists and programmers alike. Right here is the audio log of developer Tristan Reidford explaining how they utilized tinting to create automotive variations. Particularly they use one additional texture channel to find out additional tinting areas, permitting one to make use of 2 colours to tint sure areas of the 3D mannequin in a special shade.

Tristan Reidford: Normally every mannequin within the recreation has its personal distinctive texture maps painted particularly for that mannequin, which give the thing its floor colours and element. To have a convincing number of vehicles utilizing this technique would have required as many textures as styles of automotive, plus a number of duplicates of the textures in numerous colours, which might have been far out of our allotted texture reminiscence finances. So we needed to discover a extra environment friendly solution to result in that very same outcome. For instance, the feel on this automotive is shared with 3 completely different automotive fashions distributed all through the atmosphere. Along with this one shade texture, there may be additionally a ‘masks’ texture that permits every occasion of the automotive’s painted surfaces to be tinted a special shade, with out having to creator a separate texture. So for the price of two textures you will get 4 completely different automotive fashions in an infinite number of colours.

Word, that it’s not simply vehicles. Basically every part within the Source Engine will be tinted.

The LUT – Easy, but highly effective #

Now that now we have gotten an thought of how we are able to work together and manipulate shade in a graphics programming context, let’s dive into how a LUT can elevate that. The core of the thought is that this: As a substitute of defining how the colours are modified throughout their total vary, let’s outline what shade vary modifications in what method. When you’ve got changed the above thermal picture with an RGB video of your personal, then simply the purple channel might be used going ahead.

The next examples make extra sense in context of thermal digicam footage, so you’ll be able to click on the next button to revert to it, if you want.

Reload thermal digicam footage

The standard 1D LUT #

A 1D LUT is a straightforward array of numbers. If the 1D LUT is an RGB picture, then a 1D LUT is a 1D array of colours. In accordance that array, we’ll shade our grey video. Within the context of graphics programming, this will get uploaded as a 1D-texture to the graphics card, the place it’s used to remodel the only channel pixels into RGB.

Inferno – 256px extensiveInferno – 128px extensiveInferno – 64px extensiveInferno – 32px extensiveInferno – 16px extensiveInferno – 8px extensiveInferno – 4px extensiveInferno – 2px extensive

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-lut.fs

precision mediump float;
various vec2 tex;
uniform sampler2D video;
uniform sampler2D lut;

void essential(void)
{
	
    float videoColor = texture2D(video, tex).r;
    vec4 finalColor = texture2D(lut, vec2(videoColor, 0.5));
    gl_FragColor = finalColor;
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

An right here comes the neat half, wanting on the fragment shader, we use the brightness of the video, which matches from [0.0 - 1.0] to index into the X-Axis of our 1D LUT, which additionally has texture coordinates comparable to[0.0 - 1.0], ensuing within the expression vec4 finalcolor = texture(lut, videoColor);. In WebGL 1.0, we don’t have 1D-Textures, so we use a 2D-Texture of 1px peak. vec4 finalColor = texture2D(lut, vec2(videoColor, 0.5)); Thus the ensuing code really wants the Y coordinate as properly, neither of which particularly matters.

The 0.0 black within the video is mapped to the colour on the left and 1.0 white within the video is mapped to the colour on the proper, with all colours in between being assigned to their corresponding values. 1D vector in, 3D vector out.

What makes this map so properly to the GPU, is that on GPUs we get bilinear filtering free of charge when performing texture reads. So if our 8-bits per channel video has 256 distinct shades of gray, however our 1D-Lut is simply 32 pixels extensive, then the feel entry in between two pixels will get linearly interpolated robotically. Within the above choice field you’ll be able to strive setting the 1D Lut to completely different sizes and examine.

Unimaginable how shut the 256 pixel extensive and really colourful gradient is reproduced, with solely 8 pixels price of data!

So many colours #

Right here is each single colormap that matlibplot helps, exported as a 1D LUT. Scroll by way of all of them and select your favourite!

viridisplasmainfernomagmacividisviridis – flippedplasma – flippedinferno – flippedmagma – flippedcividis – flippedGreysPurplesBluesGreensOrangesRedsYlOrBrYlOrRdOrRdPuRdRdPuBuPuGnBuPuBuYlGnBuPuBuGnBuGnYlGnGreys – flippedPurples – flippedBlues – flippedGreens – flippedOranges – flippedReds – flippedYlOrBr – flippedYlOrRd – flippedOrRd – flippedPuRd – flippedRdPu – flippedBuPu – flippedGnBu – flippedPuBu – flippedYlGnBu – flippedPuBuGn – flippedBuGn – flippedYlGn – flippedbinarygist_yarggist_graygreybonepinkspringsummer seasonautumnwintercoolWistiasizzlingafmhotgist_heatcopperbinary – flippedgist_yarg – flippedgist_gray – flippedgrey – flippedbone – flippedpink – flippedspring – flippedsummer season – flippedautumn – flippedwinter – flippedcool – flippedWistia – flippedsizzling – flippedafmhot – flippedgist_heat – flippedcopper – flippedPastel1Pastel2PairedAccentDark2Set1Set2Set3tab10tab20tab20bPaired – flippedSet1 – flippedSet2 – flippedSet3 – flippedtab10 – flippedtab20 – flippedtab20b – flippedtab20c – flippedflagprismoceangist_earthterraingist_sterngnuplotgnuplot2CMRmapcubehelixbrggist_rainbowrainbowjetturbonipy_spectralgist_ncarflag – flippedprism – flippedocean – flippedgist_earth – flippedterrain – flippedgist_stern – flippedgnuplot – flippedgnuplot2 – flippedCMRmap – flippedcubehelix – flippedbrg – flippedgist_rainbow – flippedrainbow – flippedjet – flippedturbo – flippednipy_spectral – flippedgist_ncar – flippedPiYGPRGnBrBGPuOrRdGyRdBuRdYlBuRdYlGnSpectralcoolwarmbwrseismicPiYG – flippedPRGn – flippedBrBG – flippedPuOr – flippedRdGy – flippedRdBu – flippedRdYlBu – flippedRdYlGn – flippedSpectral – flippedcoolwarm – flippedbwr – flippedseismic – flippedtwilighttwilight – flippedtwilight_shiftedtwilight_shifted – flippedhsvhsv – flippedGamma 2.2Inverse of Gamma 2.2

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-lut.fs

precision mediump float;
various vec2 tex;
uniform sampler2D video;
uniform sampler2D lut;

void essential(void)
{
	
    float videoColor = texture2D(video, tex).r;
    vec4 finalColor = texture2D(lut, vec2(videoColor, 0.5));
    gl_FragColor = finalColor;
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

Sike! It’s a trick query. You don’t get to decide on. You might suppose, that you need to select what ever seems greatest, however in issues of style, the client isn’t all the time proper.

Except your knowledge has particular construction, there may be really one colormap kind that you have to be utilizing or basing your shade settings on – “Perceptually Uniform”, just like the viridis household of colormaps. We gained’t dive into such a deep subject right here, however the details are this:

• In case you select from the Perceptually Uniform ones, then printing your knowledge in black and white will nonetheless have the “chilly” components darkish and “sizzling” components brilliant
  • This isn’t a given with colourful choices like jet, which modify primarily simply the hue while ignoring perceived lightness
• Individuals with shade blindness will nonetheless have the ability to interpret your knowledge accurately

Causes for this and why different colormaps are harmful for judging vital data are introduced by Stefan van der Walt and Nathaniel J. Smith on this discuss.

Nonetheless efficiency free? #

We talked about tinting being primarily efficiency free. When speaking about (small 1D) LUTs it will get difficult, although the reply continues to be in all probability sure. The primary concern comes from us creating one thing referred to as a “dependant texture learn”. We’re triggering one texture learn based mostly on the results of one other. In graphics programming, a efficiency sin, as we get rid of an entire class of potential optimized paths, that graphics drivers contemplate.

GPUs have textures caches, which our LUT could have no downside becoming into and can in all probability make LUT texture reads very low-cost. To measure efficiency this finely, how caches are hit and the like, we required superior debugging instruments, that are platform particular. There’s Nvidia NSight, which lets you break down the efficiency of every step within the shader, although OpenGL is unsupported for this. Both method, this isn’t the subject of this text. There is yet one more factor although…

You’ll be able to carry out polynomial approximations of a colormap and thus side-step the LUT texture learn. The following WebGL fragment shader encompasses a polynomial approximation of viridis. It was created by Matt Zucker, out there on ShaderToy together with polynomials for different colormaps. Evaluate each the unique colormap exported as a LUT and the approximation exported as a LUT within the following two stripes. Remarkably shut.

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-lut_viridis.fs

precision mediump float;
various vec2 tex;
uniform sampler2D video;

vec3 viridis(float t) {

    const vec3 c0 = vec3(0.2777273272234177, 0.005407344544966578, 0.3340998053353061);
    const vec3 c1 = vec3(0.1050930431085774, 1.404613529898575, 1.384590162594685);
    const vec3 c2 = vec3(-0.3308618287255563, 0.214847559468213, 0.09509516302823659);
    const vec3 c3 = vec3(-4.634230498983486, -5.799100973351585, -19.33244095627987);
    const vec3 c4 = vec3(6.228269936347081, 14.17993336680509, 56.69055260068105);
    const vec3 c5 = vec3(4.776384997670288, -13.74514537774601, -65.35303263337234);
    const vec3 c6 = vec3(-5.435455855934631, 4.645852612178535, 26.3124352495832);

    return c0+t*(c1+t*(c2+t*(c3+t*(c4+t*(c5+t*c6)))));

}

void essential(void)
{
    float videoColor = texture2D(video, tex).r;
    gl_FragColor = vec4(viridis(videoColor), 1.0);
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

The ensuing shader comprises the polynomial in Horner’s method and performs a bunch of Multiply-Provides c0+t*(c1+t*(c2+t*(c3+t*(c4+t*(c5+t*c6))))); to get the colour, as a substitute of the feel lookup. It is a prime candidate for being optimized into a couple of Fused Multiply-Add (FMA) directions. Even contemplating theoretical details, that is nearly as good because it will get. Whether or not or not that is really sooner than a LUT although, is troublesome to guage with out deep platform particular evaluation.

Saves you from dealing with the LUT texture, fairly the time saver!

Range for Zombies #

Let’s check out how far this system will be stretched. This time we’re wanting on the sequel Left 4 Dead 2. Right here is Bronwen Grimes explaining how Valve Software program achieved completely different shade variations of various zombie components, which easy tinting couldn’t ship properly sufficient, with colours lacking luminance selection.

The ensuing variations will be seen within the following screenshot. Crucial function being the power to create each a brilliant & darkish shade of swimsuit from one texture.

With simply a few LUTs chosen at random for pores and skin and garments, the next shade variations are achieved. Becoming colorramps had been chosen by artists and included within the closing recreation. That is the half I discover so exceptional – How such a easy method was leveled as much as carry a lot worth to the visible expertise. All at the price of a easy texture learn.

Checkout the full talk on the GDC web page, in case you are such methods.

The creativity of them utilizing “Unique Masking” blew me away. First time I discovered about it. Two textures in a single channel, set to particular ranges
(Texture 1: 0-128, Texture 2: 128-256) at the price of shade precision

Precalculating calculations #

Yet one more use for 1D LUTs in graphics programming is to cache costly calculations. One such instance is Gamma correction, particularly if the usual conform sRGB piece-wise curve instead of the Gamma 2.2 approximation is required.

Except we speak about varied approximations, gamma correction requires the usage of the perform pow(), which particularly on older GPUs is a really costly instruction. Add to {that a} branching path, if the piece-wise curve is required. And even worse, in case you needed to cope with the bananas stage terrible 4-segment piece-wise approximation the Xbox 360 uses. Precalculating that right into a 1D LUT skips such per-pixel calculations.

On the backside of the LUT assortment choose field in chapter So many colors, I included two gamma ramps for reference. Gamma 2.2 and inverse of Gamma 2.2. For this instance: 1D vector in, 1D vector out, however you may as well output as much as 4D vectors with a 1D LUT, as now we have 4 shade channels. Whether or not or not there may be profit from accelerating gamma transformations through 1D LUTs is a query solely answerable through benchmarking, however you would think about different calculations, that will positively profit.

An instance of this within the wild is tinting the monitor orange throughout evening time to prevent eye-strain, carried out by Software program like Redshift. This works by altering the Gamma Ramp, a 1D LUT every for the Purple, Inexperienced and Blue channel of the monitor. To take action it precalculates the Kelvin Heat -> RGB and extra Gamma calculations by producing 3 1D LUTs, as seen in Redshift’s source code.

The strategy of Redshift and related items of software program is fairly superior with its actually zero efficiency influence, because the remapping is completed by the monitor, not the graphics card. Although assist for this {hardware} interface is fairly horrible throughout the board nowadays and most of the time damaged or unimplemented, with graphics stacks just like the one of many Raspberry Pi working backwards and losing support with newer updates. Microsoft even warns developers not to use that Gamma Hardware API with a warning field longer than the API documentation itself.

Fairly the unhappy state for an answer this elegant. An indication of the instances, with {hardware} assist deemed too shaky and extra options changing into software program filters.

The highly effective 3D LUT #

Let’s go 3D! The essential thought is that we signify your complete RGB area in a single dice remapping all potential colours, loaded and sampled as a 3D texture. As earlier than, by modifying the LUT, we modify the mapping of the colours. 3D vector in, 3D vector out

You’ll be able to change shade steadiness with a 1D LUT for Purple, Inexperienced and Blue. So what a 3D LUT can, that 3 1D LUTs can’t, is not so apparent. 3D LUT cubes are wanted for modifications requiring a mix of RGB as enter, like modifications to saturation, hue, particular colours or to carry out shade isolation.

See Also

Feminine code breaker who helped Alan Turing reveal the Nazi warfare machine’s innermost secrets and techniques dies aged 98

Once more, the LUT will be any dimension, however usually a dice is used. Usually it’s saved as a strip or sq. containing the dice, separated as planes to be used in video video games or as an “Iridas/Adobe” .cube file, which video editors use. Right here is the 32³px dice as a strip.

We are able to load these planes as a 32³px dice and show it in 3D as voxels.

Because it’s in 3D, we solely see the outer most voxels. We map the Purple to X, Inexperienced to Y and Blue to Z, since that is an identical to the mapping on graphics playing cards. You could have observed the origin being within the prime left. This is because of DirectX having the feel coordinate origin in the top left, versus OpenGL, which has its origin in the bottom left. Typically the DirectX format is the unofficial commonplace, although nothing prevents you from flipping it.

That is the rationale why screenshots from OpenGL are typically vertically flipped, when dealt with by instruments anticipating DirectX format and vice versa. Many libraries have a switch to handle that.

Setup #

We’ll be utilizing this footage shot on the Panasonic GH6. It’s shot in its Panasonic V-Log shade profile (what a horrible identify, to not be confused with a vlog), a logarithmic profile retaining extra dynamic range and most significantly, having a inflexible definition of each Gamut and Gamma, suitable with conversions to different shade profiles. Unprocessed, it seems very washed out and really boring.

You might substitute you personal footage, although the examples don’t make a lot sense exterior of V-Log shade profile footage.

Add VideoJoin Webcam

And now we load the footage once more into WebGL and course of it with a 3D LUT in its preliminary state, which means visually there must be no modifications.

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-3Dlut.fs

precision mediump float;

various vec2 tex;
uniform sampler2D video;
uniform sampler2D lut;


vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float dimension)
{
	float sliceSize = 1.0 / dimension;			 
	float slicePixelSize = sliceSize / dimension; 
	float width = dimension - 1.0;
	float sliceInnerSize = slicePixelSize * width; 
	float zSlice0 = flooring(texCoord.z * width);
	float zSlice1 = min(zSlice0 + 1.0, width);
	float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
	float yRange = (texCoord.y * width + 0.5) / dimension;
	float s0 = xOffset + (zSlice0 * sliceSize);
	float s1 = xOffset + (zSlice1 * sliceSize);
	vec4 slice0Color = texture2D(tex, vec2(s0, yRange));
	vec4 slice1Color = texture2D(tex, vec2(s1, yRange));
	float zOffset = mod(texCoord.z * width, 1.0);
	return combine(slice0Color, slice1Color, zOffset);
}

void essential(void)
{
	vec3 videoColor = texture2D(video, tex).rgb;
	vec4 correctedColor = sampleAs3DTexture(lut, videoColor, 32.0);

	gl_FragColor = correctedColor;
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};

One technical element is that for compatibility I’m utilizing WebGL 1.0, so 3D Textures are usually not supported. We’ve to implement a 3D texture learn, by performing two 2D texture reads and mixing between them. It is a pretty properly know downside with one typical resolution and line by line clarification supplied in this Google I/O 2011 Talk by Gregg Tavares, which this article by webglfundamentals.org relies on.

Sadly, that code comprises a mistake round Z-Axis calculation of the dice, shifting the colours blue, a mistake corrected in 2019. So if you wish to carry out the identical backwards compatibility to WebGL 1.0, OpenGLES 2 or OpenGL 2.1 with out the OES_texture_3D extension, ensure you copy the latest model, as used right here.

Easy corrections #

As with the 1D LUT, any correction we apply to the LUT might be utilized to the footage or graphics scene we use. Within the following instance I imported my footage and LUT into DaVinci Resolve. I utilized Panasonic’s “V-Log to V-709 3D-LUT”, which transforms the footage into what Panasonic considers a delightful commonplace look. Then a little bit of distinction and white level correction to make white full-bright had been utilized. Afterwards the LUT was exported once more. This LUT and its outcome are proven beneath.

Screenshot, in case WebGL would not work

WebGL Vertex Shader fullscreen-tri.vs

attribute vec2 vtx;
attribute vec2 UVs;
various vec2 tex;

void essential()
{
    tex = UVs;
	gl_Position = vec4(vtx, 0.0, 1.0);
}

WebGL Fragment Shader video-3Dlut.fs

precision mediump float;

various vec2 tex;
uniform sampler2D video;
uniform sampler2D lut;


vec4 sampleAs3DTexture(sampler2D tex, vec3 texCoord, float dimension)
{
	float sliceSize = 1.0 / dimension;			 
	float slicePixelSize = sliceSize / dimension; 
	float width = dimension - 1.0;
	float sliceInnerSize = slicePixelSize * width; 
	float zSlice0 = flooring(texCoord.z * width);
	float zSlice1 = min(zSlice0 + 1.0, width);
	float xOffset = slicePixelSize * 0.5 + texCoord.x * sliceInnerSize;
	float yRange = (texCoord.y * width + 0.5) / dimension;
	float s0 = xOffset + (zSlice0 * sliceSize);
	float s1 = xOffset + (zSlice1 * sliceSize);
	vec4 slice0Color = texture2D(tex, vec2(s0, yRange));
	vec4 slice1Color = texture2D(tex, vec2(s1, yRange));
	float zOffset = mod(texCoord.z * width, 1.0);
	return combine(slice0Color, slice1Color, zOffset);
}

void essential(void)
{
	vec3 videoColor = texture2D(video, tex).rgb;
	vec4 correctedColor = sampleAs3DTexture(lut, videoColor, 32.0);

	gl_FragColor = correctedColor;
}

WebGL Javascript fullscreen-tri.js

"use strict";


perform createAndCompileShader(gl, kind, supply, canvas) {
	const shader = gl.createShader(kind);
	const factor = doc.getElementById(supply);
	let shaderSource;

	if (factor.tagName === 'SCRIPT')
		shaderSource = factor.textual content;
	else
		shaderSource = ace.edit(supply).getValue();

	gl.shaderSource(shader, shaderSource);
	gl.compileShader(shader);
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
		displayErrorMessage(canvas, gl.getShaderInfoLog(shader));
	else
		displayErrorMessage(canvas, "");
	return shader;
}

perform displayErrorMessage(canvas, message) {
	let errorElement = canvas.nextSibling;
	const hasErrorElement = errorElement && errorElement.tagName === 'PRE';

	if (message) {
		if (!hasErrorElement) {
			errorElement = doc.createElement('pre');
			errorElement.type.shade = 'purple';
			canvas.parentNode.insertBefore(errorElement, canvas.nextSibling);
		}
		errorElement.textContent = `Shader Compilation Error: ${message}`;
		canvas.type.show = 'none';
		errorElement.type.show = 'block';
	} else {
		if (hasErrorElement)
			errorElement.type.show = 'none';
		canvas.type.show = 'block';
	}
}

perform setupTexture(gl, goal, supply) {
	gl.deleteTexture(goal);
	goal = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, goal);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
	
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, supply);
	return goal;
}

perform setupTri(canvasId, vertexId, fragmentId, videoId, lut, lutselect, buttonId) {
	
	const canvas = doc.getElementById(canvasId);
	const gl = canvas.getContext('webgl', { preserveDrawingBuffer: false });
	const lutImg = doc.getElementById(lut);
	let lutTexture, videoTexture, shaderProgram;

	
	perform initializeShaders() {
		const vertexShader = createAndCompileShader(gl, gl.VERTEX_SHADER, vertexId, canvas);
		const fragmentShader = createAndCompileShader(gl, gl.FRAGMENT_SHADER, fragmentId, canvas);

		shaderProgram = gl.createProgram();
		gl.attachShader(shaderProgram, vertexShader);
		gl.attachShader(shaderProgram, fragmentShader);
		gl.linkProgram(shaderProgram);

		
		gl.detachShader(shaderProgram, vertexShader);
		gl.detachShader(shaderProgram, fragmentShader);
		gl.deleteShader(vertexShader);
		gl.deleteShader(fragmentShader);

		gl.useProgram(shaderProgram);
	}

	initializeShaders();

	const lutTextureLocation = gl.getUniformLocation(shaderProgram, "lut");

	if (buttonId) {
		const button = doc.getElementById(buttonId);
		button.addEventListener('click on', perform () {
			if (shaderProgram)
				gl.deleteProgram(shaderProgram);
			initializeShaders();
		});
	}

	
	let video = doc.getElementById(videoId);

	let videoTextureInitialized = false;
	let lutTextureInitialized = false;

	perform updateTextures() {
		if (!video) {
			
			video = doc.getElementById(videoId);
		}
		if (video && video.paused && video.readyState >= 4) {
			
			video.loop = true;
			video.muted = true;
			video.playsinline = true;
			video.play();
		}
		if (lut && lutImg.naturalWidth && !lutTextureInitialized) {
			lutTexture = setupTexture(gl, lutTexture, lutImg);
			lutTextureInitialized = true;
		}

		gl.activeTexture(gl.TEXTURE0);
		if (video.readyState >= video.HAVE_CURRENT_DATA) {
			if (!videoTextureInitialized || video.videoWidth !== canvas.width || video.videoHeight !== canvas.peak) {
				videoTexture = setupTexture(gl, videoTexture, video);
				canvas.width = video.videoWidth;
				canvas.peak = video.videoHeight;
				videoTextureInitialized = true;
			}
			
			gl.bindTexture(gl.TEXTURE_2D, videoTexture);
			gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGB, gl.UNSIGNED_BYTE, video);

			if (lut) {
				gl.activeTexture(gl.TEXTURE1);
				gl.bindTexture(gl.TEXTURE_2D, lutTexture);
				gl.uniform1i(lutTextureLocation, 1);
			}
		}
	}

	if (lutselect) {
		const lutSelectElement = doc.getElementById(lutselect);
		if (lutSelectElement) {
			lutSelectElement.addEventListener('change', perform () {
				
				if (lutSelectElement.tagName === 'SELECT') {
					const newPath = lutSelectElement.worth;
					lutImg.onload = perform () {
						lutTextureInitialized = false;
					};
					lutImg.src = newPath;
				}
				
				else if (lutSelectElement.tagName === 'INPUT' && lutSelectElement.kind === 'file') {
					const file = lutSelectElement.recordsdata[0];
					if (file) {
						const reader = new FileReader();
						reader.onload = perform (e) {
							lutImg.onload = perform () {
								lutTextureInitialized = false;
							};
							lutImg.src = e.goal.outcome;
						};
						reader.readAsDataURL(file);
					}
				}
			});
		}
	}


	
	
	const unitTri = new Float32Array([
		-1.0, 3.0, 0.0, -1.0,
		-1.0, -1.0, 0.0, 1.0,
		3.0, -1.0, 2.0, 1.0
	]);

	const vertex_buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unitTri), gl.STATIC_DRAW);

	const vtx = gl.getAttribLocation(shaderProgram, "vtx");
	gl.enableVertexAttribArray(vtx);
	gl.vertexAttribPointer(vtx, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);

	const texCoord = gl.getAttribLocation(shaderProgram, "UVs");
	gl.enableVertexAttribArray(texCoord);
	gl.vertexAttribPointer(texCoord, 2, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);

	perform redraw() {
		updateTextures();
		gl.viewport(0, 0, canvas.width, canvas.peak);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
	}

	let isRendering = false;

	perform renderLoop() {
		redraw();
		if (isRendering) {
			requestAnimationFrame(renderLoop);
		}
	}

	perform handleIntersection(entries) {
		entries.forEach(entry => {
			if (entry.isIntersecting) {
				if (!isRendering) {
					isRendering = true;
					renderLoop();
				}
			} else {
				isRendering = false;
				videoTextureInitialized = false;
				gl.deleteTexture(videoTexture);
			}
		});
	}

	let observer = new IntersectionObserver(handleIntersection);
	observer.observe(canvas);
};