Fixing the names of shaders in the passes. The loadShader utility function now returns the code and the module, since I'm hoping to parse uniform buffer layouts from the code.

TODO.txt

@@ -3,13 +3,16 @@ TODO:
 WebGPU
   blur pass
 
+  Cleanup
+    Maybe buffer layouts and buffers can be consolidated somehow
+
   Update links in issues
 
   Try to change post processing to compute shaders once they're easier to support
 
-  std140
+  buffer-stuffer (was "std140")
-    Expand it to add array support
+    Resolve the memory positions of the fields in the parse layouts
-    Contemplate adding struct support
+    Resolve each layout into a Proxy around an ArrayBuffer
     Document and share it
 
 

js/webgpu/imagePass.js

@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { loadTexture, loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
+import { loadTexture, loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
 
 // Multiplies the rendered rain and bloom by a loaded in image
 
@@ -35,20 +35,20 @@ export default (context, getInputs) => {
 	let backgroundTex;
 
 	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
-	const assets = [loadTexture(device, bgURL), loadShaderModule(device, "shaders/wgsl/imagePass.wgsl")];
+	const assets = [loadTexture(device, bgURL), loadShader(device, "shaders/wgsl/imagePass.wgsl")];
 
 	const ready = (async () => {
-		const [bgTex, rainShader] = await Promise.all(assets);
+		const [bgTex, imageShader] = await Promise.all(assets);
 
 		backgroundTex = bgTex;
 
 		renderPipeline = device.createRenderPipeline({
 			vertex: {
-				module: rainShader,
+				module: imageShader.module,
 				entryPoint: "vertMain",
 			},
 			fragment: {
-				module: rainShader,
+				module: imageShader.module,
 				entryPoint: "fragMain",
 				targets: [
 					{

js/webgpu/palettePass.js

@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
+import { loadShader, makeUniformBuffer, makePassFBO, 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
@@ -106,18 +106,18 @@ export default (context, getInputs) => {
 	let renderPipeline;
 	let output;
 
-	const assets = [loadShaderModule(device, "shaders/wgsl/palettePass.wgsl")];
+	const assets = [loadShader(device, "shaders/wgsl/palettePass.wgsl")];
 
 	const ready = (async () => {
-		const [rainShader] = await Promise.all(assets);
+		const [paletteShader] = await Promise.all(assets);
 
 		renderPipeline = device.createRenderPipeline({
 			vertex: {
-				module: rainShader,
+				module: paletteShader.module,
 				entryPoint: "vertMain",
 			},
 			fragment: {
-				module: rainShader,
+				module: paletteShader.module,
 				entryPoint: "fragMain",
 				targets: [
 					{

js/webgpu/rainPass.js

@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { makePassFBO, loadTexture, loadShaderModule, makeUniformBuffer, makePass } from "./utils.js";
+import { makePassFBO, loadTexture, loadShader, makeUniformBuffer, makePass } from "./utils.js";
 
 const { mat4, vec3 } = glMatrix;
 
@@ -72,7 +72,7 @@ const makeConfigBuffer = (device, config, density, gridSize) => {
 export default (context, getInputs) => {
 	const { config, adapter, device, canvasContext, timeBuffer } = context;
 
-	const assets = [loadTexture(device, config.glyphTexURL), loadShaderModule(device, "shaders/wgsl/rainPass.wgsl")];
+	const assets = [loadTexture(device, config.glyphTexURL), loadShader(device, "shaders/wgsl/rainPass.wgsl")];
 
 	// The volumetric mode multiplies the number of columns
 	// to reach the desired density, and then overlaps them
@@ -126,7 +126,7 @@ export default (context, getInputs) => {
 
 		computePipeline = device.createComputePipeline({
 			compute: {
-				module: rainShader,
+				module: rainShader.module,
 				entryPoint: "computeMain",
 			},
 		});
@@ -139,11 +139,11 @@ export default (context, getInputs) => {
 
 		renderPipeline = device.createRenderPipeline({
 			vertex: {
-				module: rainShader,
+				module: rainShader.module,
 				entryPoint: "vertMain",
 			},
 			fragment: {
-				module: rainShader,
+				module: rainShader.module,
 				entryPoint: "fragMain",
 				targets: [
 					{

js/webgpu/resurrectionPass.js

@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { loadShaderModule, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
+import { loadShader, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
 
 // Matrix Resurrections isn't in theaters yet,
 // and this version of the effect is still a WIP.
@@ -38,18 +38,18 @@ export default (context, getInputs) => {
 	let renderPipeline;
 	let output;
 
-	const assets = [loadShaderModule(device, "shaders/wgsl/resurrectionPass.wgsl")];
+	const assets = [loadShader(device, "shaders/wgsl/resurrectionPass.wgsl")];
 
 	const ready = (async () => {
-		const [rainShader] = await Promise.all(assets);
+		const [resurrectionShader] = await Promise.all(assets);
 
 		renderPipeline = device.createRenderPipeline({
 			vertex: {
-				module: rainShader,
+				module: resurrectionShader.module,
 				entryPoint: "vertMain",
 			},
 			fragment: {
-				module: rainShader,
+				module: resurrectionShader.module,
 				entryPoint: "fragMain",
 				targets: [
 					{

js/webgpu/stripePass.js

@@ -1,5 +1,5 @@
 import std140 from "./std140.js";
-import { loadShaderModule, make1DTexture, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
+import { loadShader, make1DTexture, makeUniformBuffer, makePassFBO, makePass } from "./utils.js";
 
 // Multiplies the rendered rain and bloom by a 1D gradient texture
 // generated from the passed-in color sequence
@@ -73,18 +73,18 @@ export default (context, getInputs) => {
 	let renderPipeline;
 	let output;
 
-	const assets = [loadShaderModule(device, "shaders/wgsl/stripePass.wgsl")];
+	const assets = [loadShader(device, "shaders/wgsl/stripePass.wgsl")];
 
 	const ready = (async () => {
-		const [rainShader] = await Promise.all(assets);
+		const [stripeShader] = await Promise.all(assets);
 
 		renderPipeline = device.createRenderPipeline({
 			vertex: {
-				module: rainShader,
+				module: stripeShader.module,
 				entryPoint: "vertMain",
 			},
 			fragment: {
-				module: rainShader,
+				module: stripeShader.module,
 				entryPoint: "fragMain",
 				targets: [
 					{

js/webgpu/utils.js

@@ -35,10 +35,13 @@ const makePassFBO = (device, width, height, format = "rgba8unorm") =>
 		// TODO: whittle these down
 	});
 
-const loadShaderModule = async (device, url) => {
+const loadShader = async (device, url) => {
 	const response = await fetch(url);
 	const code = await response.text();
-	return device.createShaderModule({ code });
+	return {
+		code,
+		module: device.createShaderModule({ code }),
+	};
 };
 
 const makeUniformBuffer = (device, structLayout, values = null) => {
@@ -77,4 +80,4 @@ const makePass = (ready, setSize, getOutputs, execute) => ({
 const makePipeline = (context, steps) =>
 	steps.filter((f) => f != null).reduce((pipeline, f, i) => [...pipeline, f(context, i == 0 ? null : pipeline[i - 1].getOutputs)], []);
 
-export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShaderModule, makeUniformBuffer, makePass, makePipeline };
+export { getCanvasSize, makePassFBO, make1DTexture, loadTexture, loadShader, makeUniformBuffer, makePass, makePipeline };

webgpu_notes.txt

@@ -42,7 +42,8 @@ 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!
-Here's an annoying gotcha: uniform buffers are like classic UBOs, and have esoteric ("std140") layout requirements!
+Here's an annoying gotcha: uniform buffers have layout requirements listed in the WGSL spec
+	https://gpuweb.github.io/gpuweb/wgsl/#structure-layout-rules
 
 Texture lookup in vertex shader
 	You can only sample textures in fragment stages