Experimenting with simplifying the names of the uniform buffers in the rain render pass shader.

js/webgpu_main.js

@@ -143,13 +143,13 @@ export default async (canvas, config) => {
 	configBuffer.unmap();
 
 	// prettier-ignore
-	const msdfStructLayout = computeStructLayout(["f32"]);
+	const msdfStructLayout = computeStructLayout(["i32", "i32"]);
 	const msdfBuffer = device.createBuffer({
 		size: msdfStructLayout.size,
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.FRAGMENT, // Which of these are necessary?
 		mappedAtCreation: true,
 	});
-	new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns]));
+	new Int32Array(msdfBuffer.getMappedRange()).set(buildStruct(msdfStructLayout, [config.glyphTextureColumns, config.glyphSequenceLength]));
 	msdfBuffer.unmap();
 
 	// prettier-ignore
@@ -160,9 +160,9 @@ export default async (canvas, config) => {
 	});
 
 	// prettier-ignore
-	const cameraStructLayout = computeStructLayout(["vec2<f32>", "mat4x4<f32>", "mat4x4<f32>"]);
+	const sceneStructLayout = computeStructLayout(["vec2<f32>", "mat4x4<f32>", "mat4x4<f32>"]);
-	const cameraBuffer = device.createBuffer({
+	const sceneBuffer = device.createBuffer({
-		size: cameraStructLayout.size,
+		size: sceneStructLayout.size,
 		usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.VERTEX | GPUBufferUsage.COMPUTE | GPUBufferUsage.COPY_DST, // Which of these are necessary?
 	});
 
@@ -178,7 +178,7 @@ export default async (canvas, config) => {
 		const aspectRatio = canvasSize[0] / canvasSize[1];
 		mat4.perspectiveZO(camera, (Math.PI / 180) * 90, aspectRatio, 0.0001, 1000);
 		const screenSize = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
-		queue.writeBuffer(cameraBuffer, 0, new Float32Array(buildStruct(cameraStructLayout, [screenSize, camera, transform])));
+		queue.writeBuffer(sceneBuffer, 0, new Float32Array(buildStruct(sceneStructLayout, [screenSize, camera, transform])));
 	};
 	updateCameraBuffer();
 
@@ -253,7 +253,7 @@ export default async (canvas, config) => {
 			{
 				binding: 5,
 				resource: {
-					buffer: cameraBuffer,
+					buffer: sceneBuffer,
 				},
 			},
 		],

shaders/rainRenderPass.wgsl

@@ -1,32 +1,33 @@
 let NUM_VERTICES_PER_QUAD:i32 = 6;
 let PI:f32 = 3.14159265359;
-let TWO_PI:f32 = 6.28318530718; // No, I'm not using Tau.
+let TWO_PI:f32 = 6.28318530718;
 
-[[block]] struct Uniforms {
+[[block]] struct Config {
 	numColumns: i32;
 	numRows: i32;
 };
-[[group(0), binding(0)]] var<uniform> uniforms:Uniforms;
+[[group(0), binding(0)]] var<uniform> config:Config;
 
-[[block]] struct MSDFUniforms {
+[[block]] struct MSDF {
-	numColumns: i32;
+	glyphTextureColumns: i32;
+	glyphSequenceLength: i32;
 };
-[[group(0), binding(1)]] var<uniform> msdfUniforms:MSDFUniforms;
+[[group(0), binding(1)]] var<uniform> msdf:MSDF;
 [[group(0), binding(2)]] var msdfSampler: sampler;
 [[group(0), binding(3)]] var msdfTexture: texture_2d<f32>;
 
-[[block]] struct TimeUniforms {
+[[block]] struct Time {
 	now: i32;
 	frame: i32;
 };
-[[group(0), binding(4)]] var<uniform> timeUniforms:TimeUniforms;
+[[group(0), binding(4)]] var<uniform> time:Time;
 
-[[block]] struct CameraUniforms {
+[[block]] struct Scene {
 	screenSize: vec2<f32>;
 	camera: mat4x4<f32>;
 	transform: mat4x4<f32>;
 };
-[[group(0), binding(5)]] var<uniform> cameraUniforms:CameraUniforms;
+[[group(0), binding(5)]] var<uniform> scene:Scene;
 
 // Vertex shader
 
@@ -45,20 +46,29 @@ struct VertexOutput {
 		f32(((i + 1) % NUM_VERTICES_PER_QUAD / 3))
 	);
 
-	var position = cornerPosition;
+	var cellPosition = vec2<i32>(
-	position = position + vec2<f32>(
+		quadIndex % config.numColumns,
-		f32(quadIndex % uniforms.numColumns),
+		quadIndex / config.numColumns
-		f32(quadIndex / uniforms.numColumns)
 	);
+
+	var position = cornerPosition;
+	position = position + vec2<f32>(cellPosition);
 	position = position / vec2<f32>(
-		f32(uniforms.numColumns),
+		f32(config.numColumns),
-		f32(uniforms.numRows)
+		f32(config.numRows)
 	);
 	position = 1.0 - position * 2.0;
-	position = position * cameraUniforms.screenSize;
+	position = position * scene.screenSize;
+
+	var depth:f32 = 0.0;
+
+	var pos: vec4<f32> = vec4<f32>(position, depth, 1.0);
+
+	// pos.x = pos.x / glyphHeightToWidth;
+	// pos = scene.camera * scene.transform * pos;
 
 	return VertexOutput(
-		vec4<f32>(position, 1.0, 1.0),
+		pos,
 		cornerPosition
 	);
 }
@@ -66,10 +76,10 @@ struct VertexOutput {
 // Fragment shader
 
 [[stage(fragment)]] fn fragMain([[location(0)]] UV:vec2<f32>) -> [[location(0)]] vec4<f32> {
-	var msdf:vec4<f32> = textureSample(msdfTexture, msdfSampler, UV / f32(msdfUniforms.numColumns));
+	var color:vec4<f32> = textureSample(msdfTexture, msdfSampler, UV / f32(msdf.glyphTextureColumns));
-	// msdf.b = msdf.b * (sin(f32(timeUniforms.now) / 1000.0 * TWO_PI) * 0.5 + 0.5);
+	// color.b = color.b * (sin(f32(time.now) / 1000.0 * TWO_PI) * 0.5 + 0.5);
-	msdf.b = msdf.b * f32(timeUniforms.frame / 60 % 2);
+	color.b = color.b * f32(time.frame / 60 % 2);
-	var now = timeUniforms.now;
+	var now = time.now;
 
-	return msdf;
+	return color;
 }