matrix/js/stripePass.js

import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";

const neapolitanStripeColors = [
	[0.4, 0.15, 0.1],
	[0.4, 0.15, 0.1],
	[0.8, 0.8, 0.6],
	[0.8, 0.8, 0.6],
	[1.0, 0.7, 0.8],
	[1.0, 0.7, 0.8],
].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 stripeColors =
		"stripeColors" in config ? config.stripeColors.split(",").map(parseFloat) : config.effect === "pride" ? prideStripeColors : neapolitanStripeColors;
	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/stripePass.frag");

	const render = regl({
		frag: regl.prop("frag"),

		uniforms: {
			...extractEntries(config, ["backgroundColor"]),
			tex: inputs.primary,
			bloomTex: inputs.bloom,
			stripes,
			ditherMagnitude: 0.05,
		},
		framebuffer: output,
	});

	return makePass(
		{
			primary: output,
		},
		() => render({ frag: stripePassFrag.text() }),
		null,
		stripePassFrag.loaded
	);
};