Consolidating all the bind groups, because I only have four. Stuff shared between render passes will get isolated somehow, but it might be by binding one buffer to multiple render passes' bind group at zero rather than having more than one bind group.

js/webgpu_main.js

@@ -105,7 +105,7 @@ export default async (canvas, config) => {
 		const aspectRatio = canvasSize[0] / canvasSize[1];
 		const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
 		queue.writeBuffer(cameraBuffer, 0, new Float32Array(screenSize));
-	}
+	};
 	updateCameraBuffer();
 
 	const [rainRenderShader] = await Promise.all(["shaders/rainRenderPass.wgsl"].map(async (path) => (await fetch(path)).text()));
@@ -145,7 +145,9 @@ export default async (canvas, config) => {
 		},
 	});
 
-	const configBindGroup = device.createBindGroup({
+	console.log(device.limits);
+
+	const bindGroup = device.createBindGroup({
 		layout: rainRenderPipeline.getBindGroupLayout(0),
 		entries: [
 			{
@@ -154,46 +156,28 @@ export default async (canvas, config) => {
 					buffer: configBuffer,
 				},
 			},
-		],
-	});
-
-	const msdfBindGroup = device.createBindGroup({
-		layout: rainRenderPipeline.getBindGroupLayout(1),
-		entries: [
 			{
-				binding: 0,
+				binding: 1,
 				resource: {
 					buffer: msdfBuffer,
 				},
 			},
 			{
-				binding: 1,
+				binding: 2,
 				resource: sampler,
 			},
 			{
-				binding: 2,
+				binding: 3,
 				resource: msdfTexture.createView(),
 			},
-		],
-	});
-
-	const timeBindGroup = device.createBindGroup({
-		layout: rainRenderPipeline.getBindGroupLayout(2),
-		entries: [
 			{
-				binding: 0,
+				binding: 4,
 				resource: {
 					buffer: timeBuffer,
 				},
 			},
-		],
-	});
-
-	const cameraBindGroup = device.createBindGroup({
-		layout: rainRenderPipeline.getBindGroupLayout(3),
-		entries: [
 			{
-				binding: 0,
+				binding: 5,
 				resource: {
 					buffer: cameraBuffer,
 				},
@@ -201,16 +185,12 @@ export default async (canvas, config) => {
 		],
 	});
 
-	const rainRenderPipelineBindGroups = [configBindGroup, msdfBindGroup, timeBindGroup, cameraBindGroup];
-
 	const bundleEncoder = device.createRenderBundleEncoder({
 		colorFormats: [presentationFormat],
 	});
 
 	bundleEncoder.setPipeline(rainRenderPipeline);
-	rainRenderPipelineBindGroups.forEach((bindGroup, index) => {
-		bundleEncoder.setBindGroup(index, bindGroup);
-	});
+	bundleEncoder.setBindGroup(0, bindGroup);
 	const numQuads = numColumns * numRows;
 	bundleEncoder.draw(NUM_VERTICES_PER_QUAD * numQuads, 1, 0, 0);
 	const renderBundles = [bundleEncoder.finish()];

shaders/rainRenderPass.wgsl

@@ -11,20 +11,20 @@ let TWO_PI:f32 = 6.28318530718; // No, I'm not using Tau.
 [[block]] struct MSDFUniforms {
 	numColumns: i32;
 };
-[[group(1), binding(0)]] var<uniform> msdfUniforms:MSDFUniforms;
-[[group(1), binding(1)]] var msdfSampler: sampler;
-[[group(1), binding(2)]] var msdfTexture: texture_2d<f32>;
+[[group(0), binding(1)]] var<uniform> msdfUniforms:MSDFUniforms;
+[[group(0), binding(2)]] var msdfSampler: sampler;
+[[group(0), binding(3)]] var msdfTexture: texture_2d<f32>;
 
 [[block]] struct TimeUniforms {
 	now: i32;
 	frame: i32;
 };
-[[group(2), binding(0)]] var<uniform> timeUniforms:TimeUniforms;
+[[group(0), binding(4)]] var<uniform> timeUniforms:TimeUniforms;
 
 [[block]] struct CameraUniforms {
 	screenSize: vec2<f32>;
 };
-[[group(3), binding(0)]] var<uniform> cameraUniforms:CameraUniforms;
+[[group(0), binding(5)]] var<uniform> cameraUniforms:CameraUniforms;
 
 // Vertex shader
 

webgpu_notes.txt

@@ -40,3 +40,5 @@ Textures were never resizable, you simply forgot
 
 Bind groups let you bind a bunch of resources at once
 Render bundles let you reissue commands
+
+You can only use up to FOUR bind groups on your laptop's device!