Combining the rain pass's compute shaders

js/main.js

@@ -4,18 +4,12 @@ const config = {
 	glyphMSDFURL: "assets/matrixcode_msdf.png",
 	glyphSequenceLength: 57,
 	glyphTextureGridSize: [8, 8],
-	effect: "palette", // The name of the effect to apply at the end of the process— mainly handles coloration
-	baseTexture: null, // The name of the texture to apply to the base layer of the glyphs
-	glintTexture: null, // The name of the texture to apply to the glint layer of the glyphs
-	useCamera: false,
 	backgroundColor: hsl(0, 0, 0), // The color "behind" the glyphs
 	isolateCursor: true, // Whether the "cursor"— the brightest glyph at the bottom of a raindrop— has its own color
 	cursorColor: hsl(0.242, 1, 0.73), // The color of the cursor
 	cursorIntensity: 2, // The intensity of the cursor
-	isolateGlint: false, // Whether the "glint"— highlights on certain symbols in the font— should appear
 	glintColor: hsl(0, 0, 1), // The color of the glint
 	glintIntensity: 1, // The intensity of the glint
-	volumetric: false, // A mode where the raindrops appear in perspective
 	animationSpeed: 1, // The global rate that all animations progress
 	fps: 60, // The target frame rate (frames per second) of the effect
 	forwardSpeed: 0.25, // The speed volumetric rain approaches the eye
@@ -30,20 +24,12 @@ const config = {
 	glintContrast: 2.5, // The contrast of the glints, before any effects are applied
 	brightnessOverride: 0.0, // A global override to the brightness of displayed glyphs. Only used if it is > 0.
 	brightnessThreshold: 0, // The minimum brightness for a glyph to still be considered visible
-	brightnessDecay: 1.0, // The rate at which glyphs light up and dim
 	ditherMagnitude: 0.05, // The magnitude of the random per-pixel dimming
 	fallSpeed: 0.3, // The speed the raindrops progress downwards
 	glyphEdgeCrop: 0.0, // The border around a glyph in a font texture that should be cropped out
 	glyphHeightToWidth: 1, // The aspect ratio of glyphs
 	glyphVerticalSpacing: 1, // The ratio of the vertical distance between glyphs to their height
-	hasThunder: false, // An effect that adds dramatic lightning flashes
-	isPolar: false, // Whether the glyphs arc across the screen or sit in a standard grid
-	rippleTypeName: null, // The variety of the ripple effect
-	rippleThickness: 0.2, // The thickness of the ripple effect
-	rippleScale: 30, // The size of the ripple effect
-	rippleSpeed: 0.2, // The rate at which the ripple effect progresses
 	numColumns: 80, // The maximum dimension of the glyph grid
-	density: 1, // In volumetric mode, the number of actual columns compared to the grid
 	palette: [
 		// The color palette that glyph brightness is color mapped to
 		{ color: hsl(0.3, 0.9, 0.0), at: 0.0 },
@@ -52,16 +38,8 @@ const config = {
 		{ color: hsl(0.3, 0.9, 0.8), at: 0.8 },
 	],
 	raindropLength: 0.75, // Adjusts the frequency of raindrops (and their length) in a column
-	slant: 0, // The angle at which rain falls; the orientation of the glyph grid
 	resolution: 0.75, // An overall scale multiplier
 	useHalfFloat: false,
-	renderer: "regl", // The preferred web graphics API
-	suppressWarnings: false, // Whether to show warnings to visitors on load
-	isometric: false,
-	useHoloplay: false,
-	loops: false,
-	skipIntro: true,
-	testFix: null,
 };
 
 const canvas = document.createElement("canvas");
@@ -88,7 +66,7 @@ const loadJS = (src) =>
 	});
 
 const init = async () => {
-	await Promise.all([loadJS("lib/regl.js"), loadJS("lib/gl-matrix.js")]);
+	await loadJS("lib/regl.js");
 
 	const resize = () => {
 		const devicePixelRatio = window.devicePixelRatio ?? 1;
@@ -111,24 +89,10 @@ const init = async () => {
 	}
 	resize();
 
-	if (config.useCamera) {
-		await setupCamera();
-	}
-
 	const extensions = ["OES_texture_half_float", "OES_texture_half_float_linear"];
 	// These extensions are also needed, but Safari misreports that they are missing
 	const optionalExtensions = ["EXT_color_buffer_half_float", "WEBGL_color_buffer_float", "OES_standard_derivatives"];
 
-	switch (config.testFix) {
-		case "fwidth_10_1_2022_A":
-			extensions.push("OES_standard_derivatives");
-			break;
-		case "fwidth_10_1_2022_B":
-			optionalExtensions.forEach((ext) => extensions.push(ext));
-			extensions.length = 0;
-			break;
-	}
-
 	const regl = createREGL({ canvas, pixelRatio: 1, extensions, optionalExtensions });
 
 	// All this takes place in a full screen quad.
@@ -142,7 +106,7 @@ const init = async () => {
 	const targetFrameTimeMilliseconds = 1000 / config.fps;
 	let last = NaN;
 
-	const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
+	const render = ({ viewportWidth, viewportHeight }) => {
 		if (config.once) {
 			tick.cancel();
 		}
@@ -177,7 +141,11 @@ const init = async () => {
 			}
 			drawToScreen();
 		});
-	});
+	};
+
+	render({viewportWidth: 1, viewportHeight: 1});
+
+	const tick = regl.frame(render);
 };
 
 document.body.onload = () => {