The WebGPU rainPass now performs a high pass filter on its own fragments. I think I prefer this to a separate high pass filter, because this one is pre-blendfunc, ie. fragments will only be added to the texture if they are individually bright enough to contribute.

js/webgpu/rainPass.js

@@ -74,6 +74,11 @@ export default (context, getInputs) => {
 				loadValue: { r: 0, g: 0, b: 0, a: 1 },
 				storeOp: "store",
 			},
+			{
+				view: null,
+				loadValue: { r: 0, g: 0, b: 0, a: 1 },
+				storeOp: "store",
+			},
 		],
 	};
 
@@ -87,6 +92,7 @@ export default (context, getInputs) => {
 	let computeBindGroup;
 	let renderBindGroup;
 	let output;
+	let highPassOutput;
 
 	const ready = (async () => {
 		const [msdfTexture, rainShader] = await Promise.all(assets);
@@ -126,6 +132,13 @@ export default (context, getInputs) => {
 							alpha: additiveBlendComponent,
 						},
 					},
+					{
+						format: presentationFormat,
+						blend: {
+							color: additiveBlendComponent,
+							alpha: additiveBlendComponent,
+						},
+					},
 				],
 			},
 		});
@@ -152,10 +165,14 @@ export default (context, getInputs) => {
 		// Update
 		output?.destroy();
 		output = makePassFBO(device, width, height, presentationFormat);
+
+		highPassOutput?.destroy();
+		highPassOutput = makePassFBO(device, width, height, presentationFormat);
 	};
 
 	const getOutputs = () => ({
 		primary: output,
+		highPass: highPassOutput,
 	});
 
 	const execute = (encoder) => {
@@ -168,6 +185,7 @@ export default (context, getInputs) => {
 		computePass.endPass();
 
 		renderPassConfig.colorAttachments[0].view = output.createView();
+		renderPassConfig.colorAttachments[1].view = highPassOutput.createView();
 		const renderPass = encoder.beginRenderPass(renderPassConfig);
 		renderPass.setPipeline(renderPipeline);
 		renderPass.setBindGroup(0, renderBindGroup);

shaders/wgsl/rainPass.wgsl

@@ -37,6 +37,7 @@
 	slantScale : f32;
 	slantVec : vec2<f32>;
 	volumetric : i32;
+	highPassThreshold : f32;
 };
 
 // The properties that change over time get their own buffer.
@@ -89,6 +90,7 @@ struct VertOutput {
 
 struct FragOutput {
 	[[location(0)]] color : vec4<f32>;
+	[[location(1)]] highPassColor : vec4<f32>;
 };
 
 // Constants
@@ -432,5 +434,17 @@ fn getSymbolUV(glyphCycle : f32) -> vec2<f32> {
 		output.color = vec4<f32>(input.channel * brightness * alpha, 1.0);
 	}
 
+	var highPassColor = output.color;
+	if (highPassColor.r < config.highPassThreshold) {
+		highPassColor.r = 0.0;
+	}
+	if (highPassColor.g < config.highPassThreshold) {
+		highPassColor.g = 0.0;
+	}
+	if (highPassColor.b < config.highPassThreshold) {
+		highPassColor.b = 0.0;
+	}
+	output.highPassColor = highPassColor;
+
 	return output;
 }