All the post processing passes are now based on compute pipelines instead of render pipelines.

js/webgpu/bloomPass.js

@@ -1,5 +1,5 @@
 import { structs } from "/lib/gpu-buffer.js";
-import { loadShader, makeUniformBuffer, makeBindGroup, makeRenderTarget, makePass } from "./utils.js";
+import { loadShader, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
 
 // The bloom pass is basically an added blur of the high-pass rendered output.
 // The blur approximation is the sum of a pyramid of downscaled textures.
@@ -11,13 +11,13 @@ const levelStrengths = Array(pyramidHeight)
 	.reverse();
 
 export default (context, getInputs) => {
-	const { config, device, canvasFormat } = context;
+	const { config, device } = context;
 
-	const enabled = config.bloomSize > 0 && config.bloomStrength > 0;
+	const enabled = false; // config.bloomSize > 0 && config.bloomStrength > 0;
 
 	// If there's no bloom to apply, return a no-op pass with an empty bloom texture
 	if (!enabled) {
-		const emptyTexture = makeRenderTarget(device, 1, 1, canvasFormat);
+		const emptyTexture = makeComputeTarget(device, 1, 1);
 		const getOutputs = () => ({ ...getInputs(), bloom: emptyTexture });
 		return makePass(getOutputs);
 	}
@@ -26,11 +26,11 @@ export default (context, getInputs) => {
 
 	// TODO: generate sum shader code
 
-	const renderTarget = makeRenderTarget(device, 1, 1, canvasFormat);
-	const getOutputs = () => ({ ...getInputs(), bloom: renderTarget }); // TODO
+	const computeTarget = makeComputeTarget(device, 1, 1);
+	const getOutputs = () => ({ ...getInputs(), bloom: computeTarget }); // TODO
 
-	let blurRenderPipeline;
-	let sumRenderPipeline;
+	let blurPipeline;
+	let sumPipeline;
 
 	const ready = (async () => {
 		const [blurShader] = await Promise.all(assets);
@@ -74,7 +74,7 @@ export default (context, getInputs) => {
 const makePyramid = (regl, height, halfFloat) =>
 	Array(height)
 		.fill()
-		.map((_) => makeRenderTarget(regl, halfFloat));
+		.map((_) => makePassFBO(regl, halfFloat));
 
 const resizePyramid = (pyramid, vw, vh, scale) =>
 	pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));
@@ -85,7 +85,7 @@ export default ({ regl, config }, inputs) => {
 	const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
 	const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
 	const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
-	const output = makeRenderTarget(regl, config.useHalfFloat);
+	const output = makePassFBO(regl, config.useHalfFloat);
 
 	// The high pass restricts the blur to bright things in our input texture.
 	const highPassFrag = loadText("shaders/glsl/highPass.frag.glsl");

js/webgpu/imagePass.js

@@ -1,35 +1,25 @@
-import { loadTexture, loadShader, makeBindGroup, makeRenderTarget, makePass } from "./utils.js";
+import { makeComputeTarget, loadTexture, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
 
 // Multiplies the rendered rain and bloom by a loaded in image
 
 const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg";
-const numVerticesPerQuad = 2 * 3;
 
 export default (context, getInputs) => {
-	const { config, device, canvasFormat } = context;
+	const { config, device } = context;
+
+	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
+	const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")];
 
 	const linearSampler = device.createSampler({
 		magFilter: "linear",
 		minFilter: "linear",
 	});
 
-	const renderPassConfig = {
-		colorAttachments: [
-			{
-				view: null,
-				loadValue: { r: 0, g: 0, b: 0, a: 1 },
-				storeOp: "store",
-			},
-		],
-	};
-
-	let renderPipeline;
+	let computePipeline;
 	let output;
+	let screenSize;
 	let backgroundTex;
 
-	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
-	const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")];
-
 	const getOutputs = () => ({
 		primary: output,
 	});
@@ -39,39 +29,36 @@ export default (context, getInputs) => {
 
 		backgroundTex = bgTex;
 
-		renderPipeline = device.createRenderPipeline({
-			vertex: {
+		computePipeline = device.createComputePipeline({
+			compute: {
 				module: imageShader.module,
-				entryPoint: "vertMain",
-			},
-			fragment: {
-				module: imageShader.module,
-				entryPoint: "fragMain",
-				targets: [
-					{
-						format: canvasFormat,
-					},
-				],
+				entryPoint: "computeMain",
 			},
 		});
 	})();
 
 	const setSize = (width, height) => {
 		output?.destroy();
-		output = makeRenderTarget(device, width, height, canvasFormat);
+		output = makeComputeTarget(device, width, height);
+		screenSize = [width, height];
 	};
 
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;
-		const bloomTex = inputs.bloom; // TODO: bloom
-		const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [linearSampler, tex.createView(), bloomTex.createView(), backgroundTex.createView()]);
-		renderPassConfig.colorAttachments[0].view = output.createView();
-		const renderPass = encoder.beginRenderPass(renderPassConfig);
-		renderPass.setPipeline(renderPipeline);
-		renderPass.setBindGroup(0, renderBindGroup);
-		renderPass.draw(numVerticesPerQuad, 1, 0, 0);
-		renderPass.endPass();
+		const bloomTex = inputs.bloom;
+		const computePass = encoder.beginComputePass();
+		computePass.setPipeline(computePipeline);
+		const computeBindGroup = makeBindGroup(device, computePipeline, 0, [
+			linearSampler,
+			tex.createView(),
+			bloomTex.createView(),
+			backgroundTex.createView(),
+			output.createView(),
+		]);
+		computePass.setBindGroup(0, computeBindGroup);
+		computePass.dispatch(Math.ceil(screenSize[0] / 32), screenSize[1], 1);
+		computePass.endPass();
 	};
 
 	return makePass(getOutputs, ready, setSize, execute);

js/webgpu/main.js

@@ -7,7 +7,6 @@ import makePalettePass from "./palettePass.js";
 import makeStripePass from "./stripePass.js";
 import makeImagePass from "./imagePass.js";
 import makeResurrectionPass from "./resurrectionPass.js";
-import makePostProcessingPass from "./postProcessingPass.js";
 import makeEndPass from "./endPass.js";
 
 const effects = {
@@ -53,7 +52,7 @@ export default async (canvas, config) => {
 	};
 
 	const effectName = config.effect in effects ? config.effect : "plain";
-	const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makePostProcessingPass, makeEndPass]);
+	const pipeline = makePipeline(context, [makeRain, makeBloomPass, effects[effectName], makeEndPass]);
 
 	await Promise.all(pipeline.map((step) => step.ready));
 

js/webgpu/palettePass.js

@@ -1,5 +1,5 @@
 import { structs } from "/lib/gpu-buffer.js";
-import { loadShader, makeUniformBuffer, makeBindGroup, makeRenderTarget, makePass } from "./utils.js";
+import { loadShader, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
 
 // Maps the brightness of the rendered rain and bloom to colors
 // in a linear gradient buffer generated from the passed-in color sequence
@@ -15,8 +15,6 @@ const colorToRGB = ([hue, saturation, lightness]) => {
 	return [f(0), f(8), f(4)];
 };
 
-const numVerticesPerQuad = 2 * 3;
-
 const makePalette = (device, paletteUniforms, entries) => {
 	const PALETTE_SIZE = 512;
 	const paletteColors = Array(PALETTE_SIZE);
@@ -78,27 +76,18 @@ const makePalette = (device, paletteUniforms, entries) => {
 // in screen space.
 
 export default (context, getInputs) => {
-	const { config, device, timeBuffer, canvasFormat } = context;
+	const { config, device, timeBuffer } = context;
 
 	const linearSampler = device.createSampler({
 		magFilter: "linear",
 		minFilter: "linear",
 	});
 
-	const renderPassConfig = {
-		colorAttachments: [
-			{
-				view: null,
-				loadValue: { r: 0, g: 0, b: 0, a: 1 },
-				storeOp: "store",
-			},
-		],
-	};
-
-	let renderPipeline;
+	let computePipeline;
 	let configBuffer;
 	let paletteBuffer;
 	let output;
+	let screenSize;
 
 	const getOutputs = () => ({
 		primary: output,
@@ -109,19 +98,10 @@ export default (context, getInputs) => {
 	const ready = (async () => {
 		const [paletteShader] = await Promise.all(assets);
 
-		renderPipeline = device.createRenderPipeline({
-			vertex: {
+		computePipeline = device.createComputePipeline({
+			compute: {
 				module: paletteShader.module,
-				entryPoint: "vertMain",
-			},
-			fragment: {
-				module: paletteShader.module,
-				entryPoint: "fragMain",
-				targets: [
-					{
-						format: canvasFormat,
-					},
-				],
+				entryPoint: "computeMain",
 			},
 		});
 
@@ -135,28 +115,28 @@ export default (context, getInputs) => {
 
 	const setSize = (width, height) => {
 		output?.destroy();
-		output = makeRenderTarget(device, width, height, canvasFormat);
+		output = makeComputeTarget(device, width, height);
+		screenSize = [width, height];
 	};
 
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;
-		const bloomTex = inputs.bloom; // TODO: bloom
-		const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
+		const bloomTex = inputs.bloom;
+		const computePass = encoder.beginComputePass();
+		computePass.setPipeline(computePipeline);
+		const computeBindGroup = makeBindGroup(device, computePipeline, 0, [
 			configBuffer,
 			paletteBuffer,
 			timeBuffer,
 			linearSampler,
 			tex.createView(),
 			bloomTex.createView(),
+			output.createView(),
 		]);
-
-		renderPassConfig.colorAttachments[0].view = output.createView();
-		const renderPass = encoder.beginRenderPass(renderPassConfig);
-		renderPass.setPipeline(renderPipeline);
-		renderPass.setBindGroup(0, renderBindGroup);
-		renderPass.draw(numVerticesPerQuad, 1, 0, 0);
-		renderPass.endPass();
+		computePass.setBindGroup(0, computeBindGroup);
+		computePass.dispatch(Math.ceil(screenSize[0] / 32), screenSize[1], 1);
+		computePass.endPass();
 	};
 
 	return makePass(getOutputs, ready, setSize, execute);

js/webgpu/postProcessingPass.js

@@ -1,52 +0,0 @@
-import { structs, byteSizeOf } from "/lib/gpu-buffer.js";
-import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
-
-export default (context, getInputs) => {
-	const { config, device, timeBuffer } = context;
-
-	const assets = [loadShader(device, "shaders/wgsl/postProcessingPass.wgsl")];
-
-	let configBuffer;
-	let computePipeline;
-	let output;
-	let screenSize;
-
-	const getOutputs = () => ({
-		primary: output,
-	});
-
-	const ready = (async () => {
-		const [postProcessingShader] = await Promise.all(assets);
-
-		computePipeline = device.createComputePipeline({
-			compute: {
-				module: postProcessingShader.module,
-				entryPoint: "computeMain",
-			},
-		});
-
-		const configUniforms = structs.from(postProcessingShader.code).Config;
-		configBuffer = makeUniformBuffer(device, configUniforms, {
-			/* TODO */
-		});
-	})();
-
-	const setSize = (width, height) => {
-		output?.destroy();
-		output = makeComputeTarget(device, width, height);
-		screenSize = [width, height];
-	};
-
-	const execute = (encoder) => {
-		const inputs = getInputs();
-		const tex = inputs.primary;
-		const computePass = encoder.beginComputePass();
-		computePass.setPipeline(computePipeline);
-		const computeBindGroup = makeBindGroup(device, computePipeline, 0, [configBuffer, timeBuffer, tex.createView(), output.createView()]);
-		computePass.setBindGroup(0, computeBindGroup);
-		computePass.dispatch(Math.ceil(screenSize[0] / 32), screenSize[1], 1);
-		computePass.endPass();
-	};
-
-	return makePass(getOutputs, ready, setSize, execute);
-};

js/webgpu/resurrectionPass.js

@@ -1,5 +1,5 @@
 import { structs } from "/lib/gpu-buffer.js";
-import { loadShader, makeUniformBuffer, makeRenderTarget, makePass } from "./utils.js";
+import { loadShader, makeUniformBuffer, makeComputeTarget, makeBindGroup, makePass } from "./utils.js";
 
 // Matrix Resurrections isn't in theaters yet,
 // and this version of the effect is still a WIP.
@@ -12,45 +12,27 @@ import { loadShader, makeUniformBuffer, makeRenderTarget, makePass } from "./uti
 const numVerticesPerQuad = 2 * 3;
 
 export default (context, getInputs) => {
-	const { config, device, timeBuffer, canvasFormat } = context;
+	const { config, device, timeBuffer } = context;
 
 	const linearSampler = device.createSampler({
 		magFilter: "linear",
 		minFilter: "linear",
 	});
 
-	const renderPassConfig = {
-		colorAttachments: [
-			{
-				view: null,
-				loadValue: { r: 0, g: 0, b: 0, a: 1 },
-				storeOp: "store",
-			},
-		],
-	};
-
-	let renderPipeline;
+	let computePipeline;
 	let configBuffer;
 	let output;
+	let screenSize;
 
 	const assets = [loadShader(device, "shaders/wgsl/resurrectionPass.wgsl")];
 
 	const ready = (async () => {
 		const [resurrectionShader] = await Promise.all(assets);
 
-		renderPipeline = device.createRenderPipeline({
-			vertex: {
+		computePipeline = device.createComputePipeline({
+			compute: {
 				module: resurrectionShader.module,
-				entryPoint: "vertMain",
-			},
-			fragment: {
-				module: resurrectionShader.module,
-				entryPoint: "fragMain",
-				targets: [
-					{
-						format: canvasFormat,
-					},
-				],
+				entryPoint: "computeMain",
 			},
 		});
 
@@ -60,7 +42,8 @@ export default (context, getInputs) => {
 
 	const setSize = (width, height) => {
 		output?.destroy();
-		output = makeRenderTarget(device, width, height, canvasFormat);
+		output = makeComputeTarget(device, width, height);
+		screenSize = [width, height];
 	};
 
 	const getOutputs = () => ({
@@ -70,15 +53,20 @@ export default (context, getInputs) => {
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;
-		const bloomTex = inputs.bloom; // TODO: bloom
-		const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [configBuffer, timeBuffer, linearSampler, tex.createView(), bloomTex.createView()]);
-
-		renderPassConfig.colorAttachments[0].view = output.createView();
-		const renderPass = encoder.beginRenderPass(renderPassConfig);
-		renderPass.setPipeline(renderPipeline);
-		renderPass.setBindGroup(0, renderBindGroup);
-		renderPass.draw(numVerticesPerQuad, 1, 0, 0);
-		renderPass.endPass();
+		const bloomTex = inputs.bloom;
+		const computePass = encoder.beginComputePass();
+		computePass.setPipeline(computePipeline);
+		const computeBindGroup = makeBindGroup(device, computePipeline, 0, [
+			configBuffer,
+			timeBuffer,
+			linearSampler,
+			tex.createView(),
+			bloomTex.createView(),
+			output.createView(),
+		]);
+		computePass.setBindGroup(0, computeBindGroup);
+		computePass.dispatch(Math.ceil(screenSize[0] / 32), screenSize[1], 1);
+		computePass.endPass();
 	};
 
 	return makePass(getOutputs, ready, setSize, execute);

js/webgpu/stripePass.js

@@ -1,5 +1,5 @@
 import { structs } from "/lib/gpu-buffer.js";
-import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeRenderTarget, makePass } from "./utils.js";
+import { loadShader, make1DTexture, makeUniformBuffer, makeBindGroup, makeComputeTarget, makePass } from "./utils.js";
 
 // Multiplies the rendered rain and bloom by a 1D gradient texture
 // generated from the passed-in color sequence
@@ -38,7 +38,7 @@ const numVerticesPerQuad = 2 * 3;
 // in screen space.
 
 export default (context, getInputs) => {
-	const { config, device, timeBuffer, canvasFormat } = context;
+	const { config, device, timeBuffer } = context;
 
 	// Expand and convert stripe colors into 1D texture data
 	const input =
@@ -55,38 +55,20 @@ export default (context, getInputs) => {
 		minFilter: "linear",
 	});
 
-	const renderPassConfig = {
-		colorAttachments: [
-			{
-				view: null,
-				loadValue: { r: 0, g: 0, b: 0, a: 1 },
-				storeOp: "store",
-			},
-		],
-	};
-
-	let renderPipeline;
+	let computePipeline;
 	let configBuffer;
 	let output;
+	let screenSize;
 
 	const assets = [loadShader(device, "shaders/wgsl/stripePass.wgsl")];
 
 	const ready = (async () => {
 		const [stripeShader] = await Promise.all(assets);
 
-		renderPipeline = device.createRenderPipeline({
-			vertex: {
+		computePipeline = device.createComputePipeline({
+			compute: {
 				module: stripeShader.module,
-				entryPoint: "vertMain",
-			},
-			fragment: {
-				module: stripeShader.module,
-				entryPoint: "fragMain",
-				targets: [
-					{
-						format: canvasFormat,
-					},
-				],
+				entryPoint: "computeMain",
 			},
 		});
 
@@ -96,7 +78,8 @@ export default (context, getInputs) => {
 
 	const setSize = (width, height) => {
 		output?.destroy();
-		output = makeRenderTarget(device, width, height, canvasFormat);
+		output = makeComputeTarget(device, width, height);
+		screenSize = [width, height];
 	};
 
 	const getOutputs = () => ({
@@ -106,22 +89,21 @@ export default (context, getInputs) => {
 	const execute = (encoder) => {
 		const inputs = getInputs();
 		const tex = inputs.primary;
-		const bloomTex = inputs.bloom; // TODO: bloom
-		const renderBindGroup = makeBindGroup(device, renderPipeline, 0, [
+		const bloomTex = inputs.bloom;
+		const computePass = encoder.beginComputePass();
+		computePass.setPipeline(computePipeline);
+		const computeBindGroup = makeBindGroup(device, computePipeline, 0, [
 			configBuffer,
 			timeBuffer,
 			linearSampler,
 			tex.createView(),
 			bloomTex.createView(),
 			stripeTexture.createView(),
+			output.createView(),
 		]);
-
-		renderPassConfig.colorAttachments[0].view = output.createView();
-		const renderPass = encoder.beginRenderPass(renderPassConfig);
-		renderPass.setPipeline(renderPipeline);
-		renderPass.setBindGroup(0, renderBindGroup);
-		renderPass.draw(numVerticesPerQuad, 1, 0, 0);
-		renderPass.endPass();
+		computePass.setBindGroup(0, computeBindGroup);
+		computePass.dispatch(Math.ceil(screenSize[0] / 32), screenSize[1], 1);
+		computePass.endPass();
 	};
 
 	return makePass(getOutputs, ready, setSize, execute);