From b540ef4620c76eedcc3328ef51fa86d3d186edf0 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 17 Nov 2021 18:27:10 -0800
Subject: [PATCH] Explicitly using rgba8unorm format for rain pass render
 targets

---
 TODO.txt              |  5 ++++-
 js/webgpu/rainPass.js | 14 +++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/TODO.txt b/TODO.txt
index 4e6bf5d..881428c 100644
--- a/TODO.txt
+++ b/TODO.txt
@@ -1,7 +1,10 @@
 TODO:
 
 WebGPU
-  Get everything to load properly from gh pages
+  FF Nightly bugs
+    What's it warning about?
+    Why's it crashing?
+  Try https://github.com/brendan-duncan/wgsl_reflect
   Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture
   Switch to rgba32float somehow?
     Why isn't this straightforward?
diff --git a/js/webgpu/rainPass.js b/js/webgpu/rainPass.js
index d1ba43d..1531771 100644
--- a/js/webgpu/rainPass.js
+++ b/js/webgpu/rainPass.js
@@ -29,7 +29,7 @@ const makeConfigBuffer = (device, configUniforms, config, density, gridSize) =>
 	return makeUniformBuffer(device, configUniforms, configData);
 };
 
-export default ({ config, device, timeBuffer, canvasFormat }) => {
+export default ({ config, device, timeBuffer }) => {
 	const { mat4, vec3 } = glMatrix;
 
 	const assets = [loadTexture(device, config.glyphTexURL), loadShader(device, "shaders/wgsl/rainPass.wgsl")];
@@ -60,6 +60,10 @@ export default ({ config, device, timeBuffer, canvasFormat }) => {
 	}
 	const camera = mat4.create();
 
+	// It's handy to have multiple channels, in case we have
+	// multiple varieties of code, such as downward and upward flowing
+	const renderFormat = "rgba8unorm";
+
 	const linearSampler = device.createSampler({
 		magFilter: "linear",
 		minFilter: "linear",
@@ -122,14 +126,14 @@ export default ({ config, device, timeBuffer, canvasFormat }) => {
 				entryPoint: "fragMain",
 				targets: [
 					{
-						format: canvasFormat,
+						format: renderFormat,
 						blend: {
 							color: additiveBlendComponent,
 							alpha: additiveBlendComponent,
 						},
 					},
 					{
-						format: canvasFormat,
+						format: renderFormat,
 						blend: {
 							color: additiveBlendComponent,
 							alpha: additiveBlendComponent,
@@ -160,10 +164,10 @@ export default ({ config, device, timeBuffer, canvasFormat }) => {
 
 		// Update
 		output?.destroy();
-		output = makeRenderTarget(device, size, canvasFormat);
+		output = makeRenderTarget(device, size, renderFormat);
 
 		highPassOutput?.destroy();
-		highPassOutput = makeRenderTarget(device, size, canvasFormat);
+		highPassOutput = makeRenderTarget(device, size, renderFormat);
 
 		return {
 			primary: output,