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

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;