A little reorganization of methods in the passes.

TODO.txt

@@ -1,5 +1,12 @@
 TODO:
 
+WebGPU
+  Switch post processing to compute shaders
+    Do one final render pass that draws the compute shader output to the canvas texture
+      This is a temporary requirement until the canvas context can be configured to generate storage textures
+  blur pass
+  Update links in issues
+
 gpu-buffer, working title
   Try and use it for the palette color buffer
   Test it
@@ -8,11 +15,6 @@ gpu-buffer, working title
   Capture expected requirements down the road, make roadmap
   License it and put it somewhere else
 
-WebGPU
-  blur pass
-  Update links in issues
-  Try to change post processing to compute shaders once they're easier to support
-
 Write an explanation of the rain pass (and include images)
   Compute
   Volumetric quads
@@ -28,6 +30,7 @@ Resurrection
 
 Audio
   Synthesize raindrop sound
+    https://www.instagram.com/tv/CWGodRcoq7T/?utm_medium=copy_link
   Use WebAudio to mess with it
 
 Idea: Build a UI

js/webgpu/imagePass.js

@@ -30,6 +30,10 @@ export default (context, getInputs) => {
 	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
 	const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")];
 
+	const getOutputs = () => ({
+		primary: output,
+	});
+
 	const ready = (async () => {
 		const [bgTex, imageShader] = await Promise.all(assets);
 
@@ -57,10 +61,6 @@ export default (context, getInputs) => {
 		output = makePassFBO(device, width, height, canvasFormat);
 	};
 
-	const getOutputs = () => ({
-		primary: output,
-	});
-
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;

js/webgpu/palettePass.js

@@ -100,6 +100,10 @@ export default (context, getInputs) => {
 	let paletteBuffer;
 	let output;
 
+	const getOutputs = () => ({
+		primary: output,
+	});
+
 	const assets = [loadShader(device, "shaders/wgsl/palettePass.wgsl")];
 
 	const ready = (async () => {
@@ -134,10 +138,6 @@ export default (context, getInputs) => {
 		output = makePassFBO(device, width, height, canvasFormat);
 	};
 
-	const getOutputs = () => ({
-		primary: output,
-	});
-
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;

js/webgpu/rainPass.js

@@ -92,6 +92,11 @@ export default (context, getInputs) => {
 	let output;
 	let highPassOutput;
 
+	const getOutputs = () => ({
+		primary: output,
+		highPass: highPassOutput,
+	});
+
 	const ready = (async () => {
 		const [msdfTexture, rainShader] = await Promise.all(assets);
 
@@ -168,11 +173,6 @@ export default (context, getInputs) => {
 		highPassOutput = makePassFBO(device, width, height, canvasFormat);
 	};
 
-	const getOutputs = () => ({
-		primary: output,
-		highPass: highPassOutput,
-	});
-
 	const execute = (encoder) => {
 		// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen