The primary and bloom textures are now combined with a weight so that fainter bloom doesn't create a fainter overall effect.

js/config.js

@@ -186,7 +186,7 @@ const versions = {
 		bloomStrength: 0.3,
 		numColumns: 50,
 		raindropLength: 0.9,
-		fallSpeed: 0.15,
+		fallSpeed: 0.1,
 		cycleStyle: "cycleRandomly",
 		highPassThreshold: 0.0,
 		hasSun: true,
@@ -206,6 +206,7 @@ const versions = {
 		cycleStyle: "cycleRandomly",
 		cycleSpeed: 0.8,
 		glyphEdgeCrop: 0.1,
+		ditherMagnitude: 0,
 		paletteEntries: [
 			{ hsl: [0.39, 0.9, 0.0], at: 0.0 },
 			{ hsl: [0.39, 1.0, 0.6], at: 0.5 },
@@ -216,7 +217,7 @@ const versions = {
 		cursorEffectThreshold: 0.8,
 
 		renderer: "regl",
-		bloomSize: 0,
+		bloomStrength: 0,
 		volumetric: true,
 		forwardSpeed: 0,
 		density: 3,
@@ -292,10 +293,16 @@ export default (urlParams) => {
 	const fontName = [validParams.font, version.font, defaults.font].find((name) => name in fonts);
 	const font = fonts[fontName];
 
-	return {
+	const config = {
 		...defaults,
 		...version,
 		...font,
 		...validParams,
 	};
+
+	if (config.bloomSize <= 0) {
+		config.bloomStrength = 0;
+	}
+
+	return config;
 };

js/regl/imagePass.js

@@ -7,11 +7,13 @@ const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
+	const bloomStrength = config.bloomStrength;
 	const background = loadImage(regl, bgURL);
 	const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl");
 	const render = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
+			bloomStrength,
 			backgroundTex: background.texture,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,

js/regl/palettePass.js

@@ -65,7 +65,7 @@ const makePalette = (regl, entries) => {
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const palette = makePalette(regl, config.paletteEntries);
-	const { backgroundColor, ditherMagnitude } = config;
+	const { backgroundColor, ditherMagnitude, bloomStrength } = config;
 
 	const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
 
@@ -75,6 +75,7 @@ export default ({ regl, config }, inputs) => {
 		uniforms: {
 			backgroundColor,
 			ditherMagnitude,
+			bloomStrength,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 			palette,

js/regl/resurrectionPass.js

@@ -10,7 +10,7 @@ import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
-	const { backgroundColor, ditherMagnitude } = config;
+	const { backgroundColor, ditherMagnitude, bloomStrength } = config;
 	const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl");
 
 	const render = regl({
@@ -19,6 +19,7 @@ export default ({ regl, config }, inputs) => {
 		uniforms: {
 			backgroundColor,
 			ditherMagnitude,
+			bloomStrength,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 		},

js/regl/stripePass.js

@@ -31,7 +31,7 @@ const prideStripeColors = [
 export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 
-	const { backgroundColor, ditherMagnitude } = config;
+	const { backgroundColor, ditherMagnitude, bloomStrength } = config;
 
 	// Expand and convert stripe colors into 1D texture data
 	const stripeColors =
@@ -50,6 +50,7 @@ export default ({ regl, config }, inputs) => {
 		uniforms: {
 			backgroundColor,
 			ditherMagnitude,
+			bloomStrength,
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 			stripes,

js/webgpu/bloomPass.js

@@ -15,16 +15,20 @@ import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePa
 // const makePyramidViews = (pyramid) => [pyramid.createView()];
 
 const makePyramid = (device, size, pyramidHeight) =>
-	Array(pyramidHeight).fill().map((_, index) => makeComputeTarget(
-		device,
-		size.map(x => Math.floor(x * 2 ** -(index + 1)))
-		));
+	Array(pyramidHeight)
+		.fill()
+		.map((_, index) =>
+			makeComputeTarget(
+				device,
+				size.map((x) => Math.floor(x * 2 ** -(index + 1)))
+			)
+		);
 
-const destroyPyramid = (pyramid) => pyramid?.forEach(texture => texture.destroy());
+const destroyPyramid = (pyramid) => pyramid?.forEach((texture) => texture.destroy());
 
 const makePyramidLevelView = (pyramid, level) => pyramid[level].createView();
 
-const makePyramidViews = (pyramid) => pyramid.map(tex => tex.createView());
+const makePyramidViews = (pyramid) => pyramid.map((tex) => tex.createView());
 
 // The bloom pass is basically an added blur of the rain pass's high-pass output.
 // The blur approximation is the sum of a pyramid of downscaled, blurred textures.
@@ -89,7 +93,7 @@ export default ({ config, device }) => {
 		vBlurBuffer = makeUniformBuffer(device, blurUniforms, { bloomRadius, direction: [0, 1] });
 
 		const combineUniforms = structs.from(combineShader.code).Config;
-		combineBuffer = makeUniformBuffer(device, combineUniforms, { bloomStrength, pyramidHeight });
+		combineBuffer = makeUniformBuffer(device, combineUniforms, { pyramidHeight });
 	})();
 
 	const build = (screenSize, inputs) => {

js/webgpu/imagePass.js

@@ -1,4 +1,5 @@
-import { makeComputeTarget, loadTexture, loadShader, makeBindGroup, makePass } from "./utils.js";
+import { structs } from "../../lib/gpu-buffer.js";
+import { makeComputeTarget, makeUniformBuffer, loadTexture, loadShader, makeBindGroup, makePass } from "./utils.js";
 
 // Multiplies the rendered rain and bloom by a loaded in image
 
@@ -14,6 +15,7 @@ export default ({ config, device }) => {
 	});
 
 	let computePipeline;
+	let configBuffer;
 	let output;
 	let screenSize;
 	let backgroundTex;
@@ -30,6 +32,9 @@ export default ({ config, device }) => {
 				entryPoint: "computeMain",
 			},
 		});
+
+		const configUniforms = structs.from(imageShader.code).Config;
+		configBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength: config.bloomStrength });
 	})();
 
 	const build = (size, inputs) => {
@@ -37,6 +42,7 @@ export default ({ config, device }) => {
 		output = makeComputeTarget(device, size);
 		screenSize = size;
 		computeBindGroup = makeBindGroup(device, computePipeline, 0, [
+			configBuffer,
 			linearSampler,
 			inputs.primary.createView(),
 			inputs.bloom.createView(),

js/webgpu/palettePass.js

@@ -102,7 +102,11 @@ export default ({ config, device, timeBuffer }) => {
 
 		const paletteShaderUniforms = structs.from(paletteShader.code);
 		const configUniforms = paletteShaderUniforms.Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, {
+			bloomStrength: config.bloomStrength,
+			ditherMagnitude: config.ditherMagnitude,
+			backgroundColor: config.backgroundColor,
+		});
 
 		const paletteUniforms = paletteShaderUniforms.Palette;
 		paletteBuffer = makePalette(device, paletteUniforms, config.paletteEntries);

js/webgpu/resurrectionPass.js

@@ -36,7 +36,11 @@ export default ({ config, device, timeBuffer }) => {
 		});
 
 		const configUniforms = structs.from(resurrectionShader.code).Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, {
+			bloomStrength: config.bloomStrength,
+			ditherMagnitude: config.ditherMagnitude,
+			backgroundColor: config.backgroundColor,
+		});
 	})();
 
 	const build = (size, inputs) => {

js/webgpu/stripePass.js

@@ -73,7 +73,11 @@ export default ({ config, device, timeBuffer }) => {
 		});
 
 		const configUniforms = structs.from(stripeShader.code).Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, { ditherMagnitude: config.ditherMagnitude, backgroundColor: config.backgroundColor });
+		configBuffer = makeUniformBuffer(device, configUniforms, {
+			bloomStrength: config.bloomStrength,
+			ditherMagnitude: config.ditherMagnitude,
+			backgroundColor: config.backgroundColor,
+		});
 	})();
 
 	const build = (size, inputs) => {

js/webgpu/utils.js

@@ -24,6 +24,7 @@ const loadTexture = async (device, url) => {
 
 const loadTexture = async (device, url) => {
 	const image = new Image();
+	image.crossOrigin = "Anonymous";
 	image.src = url;
 	await image.decode();
 	const { width, height } = image;