Rearranging the shaders and scripts to hopefully make the project easier to work on

js/regl/bloomPass.js

@@ -0,0 +1,104 @@
+import { loadText, makePassFBO, makePyramid, resizePyramid, makePass } from "./utils.js";
+
+// The bloom pass is basically an added high-pass blur.
+// The blur approximation is the sum of a pyramid of downscaled textures.
+
+const pyramidHeight = 5;
+const levelStrengths = Array(pyramidHeight)
+	.fill()
+	.map((_, index) => Math.pow(index / (pyramidHeight * 2) + 0.5, 1 / 3).toPrecision(5))
+	.reverse();
+
+export default (regl, config, inputs) => {
+	const { bloomStrength, bloomSize, highPassThreshold } = config;
+	const enabled = bloomSize > 0 && bloomStrength > 0;
+
+	// If there's no bloom to apply, return a no-op pass with an empty bloom texture
+	if (!enabled) {
+		return makePass({
+			primary: inputs.primary,
+			bloom: makePassFBO(regl),
+		});
+	}
+
+	// Build three pyramids of FBOs, one for each step in the process
+	const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
+	const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
+	const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
+	const output = makePassFBO(regl, config.useHalfFloat);
+
+	// The high pass restricts the blur to bright things in our input texture.
+	const highPassFrag = loadText("shaders/glsl/highPass.frag.glsl");
+	const highPass = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			highPassThreshold,
+			tex: regl.prop("tex"),
+		},
+		framebuffer: regl.prop("fbo"),
+	});
+
+	// A 2D gaussian blur is just a 1D blur done horizontally, then done vertically.
+	// The FBO pyramid's levels represent separate levels of detail;
+	// by blurring them all, this basic blur approximates a more complex gaussian:
+	// https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom
+
+	const blurFrag = loadText("shaders/glsl/blur.frag.glsl");
+	const blur = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			tex: regl.prop("tex"),
+			direction: regl.prop("direction"),
+			height: regl.context("viewportWidth"),
+			width: regl.context("viewportHeight"),
+		},
+		framebuffer: regl.prop("fbo"),
+	});
+
+	// The pyramid of textures gets flattened (summed) into a final blurry "bloom" texture
+	const sumPyramid = regl({
+		frag: `
+			precision mediump float;
+			varying vec2 vUV;
+			${vBlurPyramid.map((_, index) => `uniform sampler2D pyr_${index};`).join("\n")}
+			uniform float bloomStrength;
+			void main() {
+				vec4 total = vec4(0.);
+				${vBlurPyramid.map((_, index) => `total += texture2D(pyr_${index}, vUV) * ${levelStrengths[index]};`).join("\n")}
+				gl_FragColor = total * bloomStrength;
+			}
+		`,
+		uniforms: {
+			bloomStrength,
+			...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
+		},
+		framebuffer: output,
+	});
+
+	return makePass(
+		{
+			primary: inputs.primary,
+			bloom: output,
+		},
+		() => {
+			for (let i = 0; i < pyramidHeight; i++) {
+				const highPassFBO = highPassPyramid[i];
+				const hBlurFBO = hBlurPyramid[i];
+				const vBlurFBO = vBlurPyramid[i];
+				highPass({ fbo: highPassFBO, frag: highPassFrag.text(), tex: inputs.primary });
+				blur({ fbo: hBlurFBO, frag: blurFrag.text(), tex: highPassFBO, direction: [1, 0] });
+				blur({ fbo: vBlurFBO, frag: blurFrag.text(), tex: hBlurFBO, direction: [0, 1] });
+			}
+
+			sumPyramid();
+		},
+		(w, h) => {
+			// The blur pyramids can be lower resolution than the screen.
+			resizePyramid(highPassPyramid, w, h, bloomSize);
+			resizePyramid(hBlurPyramid, w, h, bloomSize);
+			resizePyramid(vBlurPyramid, w, h, bloomSize);
+			output.resize(w, h);
+		},
+		[highPassFrag.loaded, blurFrag.loaded]
+	);
+};

js/regl/imagePass.js

@@ -0,0 +1,29 @@
+import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
+
+// Multiplies the rendered rain and bloom by a loaded in image
+
+const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/0/0a/Flammarion_Colored.jpg";
+
+export default (regl, config, inputs) => {
+	const output = makePassFBO(regl, config.useHalfFloat);
+	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
+	const background = loadImage(regl, bgURL);
+	const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl");
+	const render = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			backgroundTex: background.texture,
+			tex: inputs.primary,
+			bloomTex: inputs.bloom,
+		},
+		framebuffer: output,
+	});
+	return makePass(
+		{
+			primary: output,
+		},
+		() => render({ frag: imagePassFrag.text() }),
+		null,
+		[background.loaded, imagePassFrag.loaded]
+	);
+};

js/regl/main.js

@@ -0,0 +1,63 @@
+import { makeFullScreenQuad, makePipeline } from "./utils.js";
+
+import makeRain from "./rainPass.js";
+import makeBloomPass from "./bloomPass.js";
+import makePalettePass from "./palettePass.js";
+import makeStripePass from "./stripePass.js";
+import makeImagePass from "./imagePass.js";
+import makeResurrectionPass from "./resurrectionPass.js";
+
+const effects = {
+	none: null,
+	plain: makePalettePass,
+	customStripes: makeStripePass,
+	stripes: makeStripePass,
+	pride: makeStripePass,
+	transPride: makeStripePass,
+	trans: makeStripePass,
+	image: makeImagePass,
+	resurrection: makeResurrectionPass,
+	resurrections: makeResurrectionPass,
+};
+
+const dimensions = { width: 1, height: 1 };
+
+export default async (canvas, config) => {
+	const resize = () => {
+		canvas.width = Math.ceil(canvas.clientWidth * config.resolution);
+		canvas.height = Math.ceil(canvas.clientHeight * config.resolution);
+	};
+	window.onresize = resize;
+	resize();
+
+	const regl = createREGL({
+		canvas,
+		extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],
+		// These extensions are also needed, but Safari misreports that they are missing
+		optionalExtensions: ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"],
+	});
+
+	// All this takes place in a full screen quad.
+	const fullScreenQuad = makeFullScreenQuad(regl);
+	const effectName = config.effect in effects ? config.effect : "plain";
+	const pipeline = makePipeline([makeRain, makeBloomPass, effects[effectName]], (p) => p.outputs, regl, config);
+	const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
+	const drawToScreen = regl({ uniforms: screenUniforms });
+	await Promise.all(pipeline.map((step) => step.ready));
+	const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
+		// tick.cancel();
+		if (dimensions.width !== viewportWidth || dimensions.height !== viewportHeight) {
+			dimensions.width = viewportWidth;
+			dimensions.height = viewportHeight;
+			for (const step of pipeline) {
+				step.resize(viewportWidth, viewportHeight);
+			}
+		}
+		fullScreenQuad(() => {
+			for (const step of pipeline) {
+				step.render();
+			}
+			drawToScreen();
+		});
+	});
+};

js/regl/palettePass.js

@@ -0,0 +1,93 @@
+import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
+
+// Maps the brightness of the rendered rain and bloom to colors
+// in a 1D gradient palette texture generated from the passed-in color sequence
+
+// This shader introduces noise into the renders, to avoid banding
+
+const colorToRGB = ([hue, saturation, lightness]) => {
+	const a = saturation * Math.min(lightness, 1 - lightness);
+	const f = (n) => {
+		const k = (n + hue * 12) % 12;
+		return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+	};
+	return [f(0), f(8), f(4)];
+};
+
+const makePalette = (regl, entries) => {
+	const PALETTE_SIZE = 2048;
+	const paletteColors = Array(PALETTE_SIZE);
+
+	// Convert HSL gradient into sorted RGB gradient, capping the ends
+	const sortedEntries = entries
+		.slice()
+		.sort((e1, e2) => e1.at - e2.at)
+		.map((entry) => ({
+			rgb: colorToRGB(entry.hsl),
+			arrayIndex: Math.floor(Math.max(Math.min(1, entry.at), 0) * (PALETTE_SIZE - 1)),
+		}));
+	sortedEntries.unshift({ rgb: sortedEntries[0].rgb, arrayIndex: 0 });
+	sortedEntries.push({
+		rgb: sortedEntries[sortedEntries.length - 1].rgb,
+		arrayIndex: PALETTE_SIZE - 1,
+	});
+
+	// Interpolate between the sorted RGB entries to generate
+	// the palette texture data
+	sortedEntries.forEach((entry, index) => {
+		paletteColors[entry.arrayIndex] = entry.rgb.slice();
+		if (index + 1 < sortedEntries.length) {
+			const nextEntry = sortedEntries[index + 1];
+			const diff = nextEntry.arrayIndex - entry.arrayIndex;
+			for (let i = 0; i < diff; i++) {
+				const ratio = i / diff;
+				paletteColors[entry.arrayIndex + i] = [
+					entry.rgb[0] * (1 - ratio) + nextEntry.rgb[0] * ratio,
+					entry.rgb[1] * (1 - ratio) + nextEntry.rgb[1] * ratio,
+					entry.rgb[2] * (1 - ratio) + nextEntry.rgb[2] * ratio,
+				];
+			}
+		}
+	});
+
+	return make1DTexture(
+		regl,
+		paletteColors.flat().map((i) => i * 0xff)
+	);
+};
+
+// The rendered texture's values are mapped to colors in a palette texture.
+// A little noise is introduced, to hide the banding that appears
+// in subtle gradients. The noise is also time-driven, so its grain
+// won't persist across subsequent frames. This is a safe trick
+// in screen space.
+
+export default (regl, config, inputs) => {
+	const output = makePassFBO(regl, config.useHalfFloat);
+	const palette = makePalette(regl, config.paletteEntries);
+	const { backgroundColor } = config;
+
+	const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
+
+	const render = regl({
+		frag: regl.prop("frag"),
+
+		uniforms: {
+			backgroundColor,
+			tex: inputs.primary,
+			bloomTex: inputs.bloom,
+			palette,
+			ditherMagnitude: 0.05,
+		},
+		framebuffer: output,
+	});
+
+	return makePass(
+		{
+			primary: output,
+		},
+		() => render({ frag: palettePassFrag.text() }),
+		null,
+		palettePassFrag.loaded
+	);
+};

js/regl/rainPass.js

@@ -0,0 +1,186 @@
+import { loadImage, loadText, makePassFBO, makeDoubleBuffer, makePass } from "./utils.js";
+
+const extractEntries = (src, keys) => Object.fromEntries(Array.from(Object.entries(src)).filter(([key]) => keys.includes(key)));
+
+const rippleTypes = {
+	box: 0,
+	circle: 1,
+};
+
+const cycleStyles = {
+	cycleFasterWhenDimmed: 0,
+	cycleRandomly: 1,
+};
+
+const numVerticesPerQuad = 2 * 3;
+const tlVert = [0, 0];
+const trVert = [0, 1];
+const blVert = [1, 0];
+const brVert = [1, 1];
+const quadVertices = [tlVert, trVert, brVert, tlVert, brVert, blVert];
+
+export default (regl, config) => {
+	// The volumetric mode multiplies the number of columns
+	// to reach the desired density, and then overlaps them
+	const volumetric = config.volumetric;
+	const density = volumetric && config.effect !== "none" ? config.density : 1;
+	const [numRows, numColumns] = [config.numColumns, config.numColumns * density];
+
+	// The volumetric mode requires us to create a grid of quads,
+	// rather than a single quad for our geometry
+	const [numQuadRows, numQuadColumns] = volumetric ? [numRows, numColumns] : [1, 1];
+	const numQuads = numQuadRows * numQuadColumns;
+	const quadSize = [1 / numQuadColumns, 1 / numQuadRows];
+
+	// Various effect-related values
+	const rippleType = config.rippleTypeName in rippleTypes ? rippleTypes[config.rippleTypeName] : -1;
+	const cycleStyle = config.cycleStyleName in cycleStyles ? cycleStyles[config.cycleStyleName] : 0;
+	const slantVec = [Math.cos(config.slant), Math.sin(config.slant)];
+	const slantScale = 1 / (Math.abs(Math.sin(2 * config.slant)) * (Math.sqrt(2) - 1) + 1);
+	const showComputationTexture = config.effect === "none";
+
+	const commonUniforms = {
+		...extractEntries(config, ["animationSpeed", "glyphHeightToWidth", "glyphSequenceLength", "glyphTextureColumns", "resurrectingCodeRatio"]),
+		numColumns,
+		numRows,
+		showComputationTexture,
+	};
+
+	// These two framebuffers are used to compute the raining code.
+	// they take turns being the source and destination of the "compute" shader.
+	// The half float data type is crucial! It lets us store almost any real number,
+	// whereas the default type limits us to integers between 0 and 255.
+
+	// This double buffer is smaller than the screen, because its pixels correspond
+	// with glyphs in the final image, and the glyphs are much larger than a pixel.
+	const doubleBuffer = makeDoubleBuffer(regl, {
+		width: numColumns,
+		height: numRows,
+		wrapT: "clamp",
+		type: "half float",
+	});
+	const rainPassCompute = loadText("shaders/glsl/rainPass.compute.frag.glsl");
+	const computeUniforms = {
+		...commonUniforms,
+		...extractEntries(config, [
+			"brightnessThreshold",
+			"brightnessOverride",
+			"brightnessDecay",
+			"cursorEffectThreshold",
+			"cycleSpeed",
+			"cycleFrameSkip",
+			"fallSpeed",
+			"hasSun",
+			"hasThunder",
+			"raindropLength",
+			"rippleScale",
+			"rippleSpeed",
+			"rippleThickness",
+		]),
+		cycleStyle,
+		rippleType,
+	};
+	const compute = regl({
+		frag: regl.prop("frag"),
+		uniforms: {
+			...computeUniforms,
+			previousState: doubleBuffer.back,
+		},
+
+		framebuffer: doubleBuffer.front,
+	});
+
+	const quadPositions = Array(numQuadRows)
+		.fill()
+		.map((_, y) =>
+			Array(numQuadColumns)
+				.fill()
+				.map((_, x) => Array(numVerticesPerQuad).fill([x, y]))
+		);
+
+	// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
+	const msdf = loadImage(regl, config.glyphTexURL);
+	const rainPassVert = loadText("shaders/glsl/rainPass.vert.glsl");
+	const rainPassFrag = loadText("shaders/glsl/rainPass.frag.glsl");
+	const output = makePassFBO(regl, config.useHalfFloat);
+	const renderUniforms = {
+		...commonUniforms,
+		...extractEntries(config, [
+			// vertex
+			"forwardSpeed",
+			"glyphVerticalSpacing",
+			// fragment
+			"glyphEdgeCrop",
+			"isPolar",
+		]),
+		density,
+		numQuadColumns,
+		numQuadRows,
+		quadSize,
+		slantScale,
+		slantVec,
+		volumetric,
+	};
+	const render = regl({
+		blend: {
+			enable: true,
+			func: {
+				src: "one",
+				dst: "one",
+			},
+		},
+		vert: regl.prop("vert"),
+		frag: regl.prop("frag"),
+
+		uniforms: {
+			...renderUniforms,
+
+			state: doubleBuffer.front,
+			glyphTex: msdf.texture,
+
+			camera: regl.prop("camera"),
+			transform: regl.prop("transform"),
+			screenSize: regl.prop("screenSize"),
+		},
+
+		attributes: {
+			aPosition: quadPositions,
+			aCorner: Array(numQuads).fill(quadVertices),
+		},
+		count: numQuads * numVerticesPerQuad,
+
+		framebuffer: output,
+	});
+
+	// Camera and transform math for the volumetric mode
+	const screenSize = [1, 1];
+	const { mat4, vec3 } = glMatrix;
+	const camera = mat4.create();
+	const translation = vec3.set(vec3.create(), 0, 0, -1);
+	const scale = vec3.set(vec3.create(), 1, 1, 1);
+	const transform = mat4.create();
+	mat4.translate(transform, transform, translation);
+	mat4.scale(transform, transform, scale);
+
+	return makePass(
+		{
+			primary: output,
+		},
+		() => {
+			compute({ frag: rainPassCompute.text() });
+			regl.clear({
+				depth: 1,
+				color: [0, 0, 0, 1],
+				framebuffer: output,
+			});
+			render({ camera, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
+		},
+		(w, h) => {
+			output.resize(w, h);
+			const aspectRatio = w / h;
+			glMatrix.mat4.perspective(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
+			[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
+		},
+		[msdf.loaded, rainPassCompute.loaded, rainPassVert.loaded, rainPassFrag.loaded]
+	);
+};

js/regl/resurrectionPass.js

@@ -0,0 +1,36 @@
+import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
+
+// Matrix Resurrections isn't in theaters yet,
+// and this version of the effect is still a WIP.
+
+// Criteria:
+// Upward-flowing glyphs should be golden
+// Downward-flowing glyphs should be tinted slightly blue on top and golden on the bottom
+// Cheat a lens blur, interpolating between the texture and bloom at the edges
+
+export default (regl, config, inputs) => {
+	const output = makePassFBO(regl, config.useHalfFloat);
+	const { backgroundColor } = config;
+	const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl");
+
+	const render = regl({
+		frag: regl.prop("frag"),
+
+		uniforms: {
+			backgroundColor,
+			tex: inputs.primary,
+			bloomTex: inputs.bloom,
+			ditherMagnitude: 0.05,
+		},
+		framebuffer: output,
+	});
+
+	return makePass(
+		{
+			primary: output,
+		},
+		() => render({ frag: resurrectionPassFrag.text() }),
+		null,
+		resurrectionPassFrag.loaded
+	);
+};

js/regl/stripePass.js

@@ -0,0 +1,68 @@
+import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
+
+// Multiplies the rendered rain and bloom by a 1D gradient texture
+// generated from the passed-in color sequence
+
+// This shader introduces noise into the renders, to avoid banding
+
+const transPrideStripeColors = [
+	[0.3, 1.0, 1.0],
+	[0.3, 1.0, 1.0],
+	[1.0, 0.5, 0.8],
+	[1.0, 0.5, 0.8],
+	[1.0, 1.0, 1.0],
+	[1.0, 1.0, 1.0],
+	[1.0, 1.0, 1.0],
+	[1.0, 0.5, 0.8],
+	[1.0, 0.5, 0.8],
+	[0.3, 1.0, 1.0],
+	[0.3, 1.0, 1.0],
+].flat();
+
+const prideStripeColors = [
+	[1, 0, 0],
+	[1, 0.5, 0],
+	[1, 1, 0],
+	[0, 1, 0],
+	[0, 0, 1],
+	[0.8, 0, 1],
+].flat();
+
+export default (regl, config, inputs) => {
+	const output = makePassFBO(regl, config.useHalfFloat);
+
+	const { backgroundColor } = config;
+
+	// Expand and convert stripe colors into 1D texture data
+	const stripeColors =
+		"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
+	const numStripeColors = Math.floor(stripeColors.length / 3);
+	const stripes = make1DTexture(
+		regl,
+		stripeColors.slice(0, numStripeColors * 3).map((f) => Math.floor(f * 0xff))
+	);
+
+	const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl");
+
+	const render = regl({
+		frag: regl.prop("frag"),
+
+		uniforms: {
+			backgroundColor,
+			tex: inputs.primary,
+			bloomTex: inputs.bloom,
+			stripes,
+			ditherMagnitude: 0.05,
+		},
+		framebuffer: output,
+	});
+
+	return makePass(
+		{
+			primary: output,
+		},
+		() => render({ frag: stripePassFrag.text() }),
+		null,
+		stripePassFrag.loaded
+	);
+};

js/regl/utils.js

@@ -0,0 +1,167 @@
+const makePassTexture = (regl, halfFloat) =>
+	regl.texture({
+		width: 1,
+		height: 1,
+		type: halfFloat ? "half float" : "uint8",
+		wrap: "clamp",
+		min: "linear",
+		mag: "linear",
+	});
+
+const makePassFBO = (regl, halfFloat) => regl.framebuffer({ color: makePassTexture(regl, halfFloat) });
+
+// A pyramid is just an array of FBOs, where each FBO is half the width
+// and half the height of the FBO below it.
+const makePyramid = (regl, height, halfFloat) =>
+	Array(height)
+		.fill()
+		.map((_) => makePassFBO(regl, halfFloat));
+
+const makeDoubleBuffer = (regl, props) => {
+	const state = Array(2)
+		.fill()
+		.map(() =>
+			regl.framebuffer({
+				color: regl.texture(props),
+				depthStencil: false,
+			})
+		);
+	return {
+		front: ({ tick }) => state[tick % 2],
+		back: ({ tick }) => state[(tick + 1) % 2],
+	};
+};
+
+const resizePyramid = (pyramid, vw, vh, scale) =>
+	pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));
+
+const loadImage = (regl, url) => {
+	let texture = regl.texture([[0]]);
+	let loaded = false;
+	return {
+		texture: () => {
+			if (!loaded) {
+				console.warn(`texture still loading: ${url}`);
+			}
+			return texture;
+		},
+		loaded: (async () => {
+			if (url != null) {
+				const data = new Image();
+				data.crossOrigin = "anonymous";
+				data.src = url;
+				await data.decode();
+				loaded = true;
+				texture = regl.texture({
+					data,
+					mag: "linear",
+					min: "linear",
+					flipY: true,
+				});
+			}
+		})(),
+	};
+};
+
+const loadText = (url) => {
+	let text = "";
+	let loaded = false;
+	return {
+		text: () => {
+			if (!loaded) {
+				console.warn(`text still loading: ${url}`);
+			}
+			return text;
+		},
+		loaded: (async () => {
+			if (url != null) {
+				text = await (await fetch(url)).text();
+				loaded = true;
+			}
+		})(),
+	};
+};
+
+const makeFullScreenQuad = (regl, uniforms = {}, context = {}) =>
+	regl({
+		vert: `
+		precision mediump float;
+		attribute vec2 aPosition;
+		varying vec2 vUV;
+		void main() {
+			vUV = 0.5 * (aPosition + 1.0);
+			gl_Position = vec4(aPosition, 0, 1);
+		}
+	`,
+
+		frag: `
+		precision mediump float;
+		varying vec2 vUV;
+		uniform sampler2D tex;
+		void main() {
+			gl_FragColor = texture2D(tex, vUV);
+		}
+	`,
+
+		attributes: {
+			aPosition: [-4, -4, 4, -4, 0, 4],
+		},
+		count: 3,
+
+		uniforms: {
+			...uniforms,
+			time: regl.context("time"),
+			tick: regl.context("tick"),
+		},
+
+		context,
+
+		depth: { enable: false },
+	});
+
+const make1DTexture = (regl, data) =>
+	regl.texture({
+		data,
+		width: data.length / 3,
+		height: 1,
+		format: "rgb",
+		mag: "linear",
+		min: "linear",
+	});
+
+const makePass = (outputs, render, resize, ready) => {
+	if (render == null) {
+		render = () => {};
+	}
+	if (resize == null) {
+		resize = (w, h) => Object.values(outputs).forEach((output) => output.resize(w, h));
+	}
+	if (ready == null) {
+		ready = Promise.resolve();
+	} else if (ready instanceof Array) {
+		ready = Promise.all(ready);
+	}
+	return {
+		outputs,
+		render,
+		resize,
+		ready,
+	};
+};
+
+const makePipeline = (steps, getInputs, ...params) =>
+	steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(...params, i == 0 ? null : getInputs(pipeline[i - 1]))], []);
+
+export {
+	makePassTexture,
+	makePassFBO,
+	makeDoubleBuffer,
+	makePyramid,
+	resizePyramid,
+	loadImage,
+	loadText,
+	makeFullScreenQuad,
+	make1DTexture,
+	makePass,
+	makePipeline,
+};