From f0ae7731bbe72a4473d81f31dcef17b720becb30 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 3 Nov 2021 21:42:01 -0700
Subject: [PATCH] The webgpu project's multi-pass pipeline is borrowed from the
 regl project, but the outputs don't exist yet. Outputs will be tricky,
 because RTTs are thrown out and recreated when the canvas resizes, which I
 think means all the bind groups referencing the old texture have to be
 destroyed and recreated, too.

---
 js/webgpu/main.js     | 10 +++++-----
 js/webgpu/rainPass.js |  2 +-
 js/webgpu/utils.js    |  5 ++++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/js/webgpu/main.js b/js/webgpu/main.js
index ff8210f..01fb342 100644
--- a/js/webgpu/main.js
+++ b/js/webgpu/main.js
@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { getCanvasSize, makeUniformBuffer } from "./utils.js";
+import { getCanvasSize, makeUniformBuffer, makePipeline } from "./utils.js";
 import makeRain from "./rainPass.js";
 
 export default async (canvas, config) => {
@@ -27,9 +27,9 @@ export default async (canvas, config) => {
 		timeBuffer,
 	};
 
-	const passes = [makeRain(context)];
+	const pipeline = makePipeline([makeRain /*makeBloomPass, effects[effectName]*/], (p) => p.outputs, context);
 
-	await Promise.all(passes.map((pass) => pass.ready));
+	await Promise.all(pipeline.map((step) => step.ready));
 
 	let frame = 0;
 
@@ -38,14 +38,14 @@ export default async (canvas, config) => {
 		if (canvasSize[0] !== canvasConfig.size[0] || canvasSize[1] !== canvasConfig.size[1]) {
 			canvasConfig.size = canvasSize;
 			canvasContext.configure(canvasConfig);
-			passes.forEach((pass) => pass.setSize(...canvasSize));
+			pipeline.forEach((step) => step.setSize(...canvasSize));
 		}
 
 		device.queue.writeBuffer(timeBuffer, 0, timeLayout.build([now / 1000, frame]));
 		frame++;
 
 		const encoder = device.createCommandEncoder();
-		passes.forEach((pass) => pass.execute(encoder));
+		pipeline.forEach((step) => step.execute(encoder));
 		device.queue.submit([encoder.finish()]);
 		requestAnimationFrame(renderLoop);
 	};
diff --git a/js/webgpu/rainPass.js b/js/webgpu/rainPass.js
index bea34be..e6c721b 100644
--- a/js/webgpu/rainPass.js
+++ b/js/webgpu/rainPass.js
@@ -15,7 +15,7 @@ const cycleStyles = {
 
 const numVerticesPerQuad = 2 * 3;
 
-export default (context) => {
+export default (context, inputs) => {
 	const { config, adapter, device, canvasContext, timeBuffer } = context;
 
 	const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")];
diff --git a/js/webgpu/utils.js b/js/webgpu/utils.js
index c4d10d9..11fd30e 100644
--- a/js/webgpu/utils.js
+++ b/js/webgpu/utils.js
@@ -61,4 +61,7 @@ const makePass = (outputs, ready, setSize, execute) => {
 	};
 };
 
-export { getCanvasSize, loadTexture, loadShaderModule, makeUniformBuffer, makePass };
+const makePipeline = (steps, getInputs, context) =>
+	steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : getInputs(pipeline[i - 1]))], []);
+
+export { getCanvasSize, loadTexture, loadShaderModule, makeUniformBuffer, makePass, makePipeline };