Moving bloomPass's pyramids off of mipmaps fixes its appearance in Firefox Nightly

TODO.txt

@@ -1,8 +1,6 @@
 TODO:
 
 WebGPU
-  FF Nightly
-    Bloom pass isn't working right
   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?

js/webgpu/bloomPass.js

@@ -1,5 +1,30 @@
 import { structs } from "../../lib/gpu-buffer.js";
-import { makeComputeTarget, makePyramidView, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
+import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
+
+// const makePyramid = makeComputeTarget;
+
+// const destroyPyramid = (pyramid) => pyramid?.destroy();
+
+// const makePyramidLevelView = (pyramid, level) =>
+// 	pyramid.createView({
+// 		baseMipLevel: level,
+// 		mipLevelCount: 1,
+// 		dimension: "2d",
+// 	});
+
+// const makePyramidViews = (pyramid) => [pyramid.createView()];
+
+const makePyramid = (device, size, pyramidHeight) =>
+	Array(pyramidHeight).fill().map((_, index) => makeComputeTarget(
+		device,
+		size.map(x => Math.floor(x * 2 ** -(index + 1)))
+		));
+
+const destroyPyramid = (pyramid) => pyramid?.forEach(texture => texture.destroy());
+
+const makePyramidLevelView = (pyramid, level) => pyramid[level].createView();
+
+const makePyramidViews = (pyramid) => pyramid.map(tex => tex.createView());
 
 // The bloom pass is basically an added blur of the rain pass's high-pass output.
 // The blur approximation is the sum of a pyramid of downscaled, blurred textures.
@@ -71,11 +96,11 @@ export default ({ config, device }) => {
 		// Since the bloom is blurry, we downscale everything
 		scaledScreenSize = screenSize.map((x) => Math.floor(x * bloomSize));
 
-		hBlurPyramid?.destroy();
+		destroyPyramid(hBlurPyramid);
-		hBlurPyramid = makeComputeTarget(device, scaledScreenSize, pyramidHeight);
+		hBlurPyramid = makePyramid(device, scaledScreenSize, pyramidHeight);
 
-		vBlurPyramid?.destroy();
+		destroyPyramid(vBlurPyramid);
-		vBlurPyramid = makeComputeTarget(device, scaledScreenSize, pyramidHeight);
+		vBlurPyramid = makePyramid(device, scaledScreenSize, pyramidHeight);
 
 		output?.destroy();
 		output = makeComputeTarget(device, scaledScreenSize);
@@ -87,14 +112,14 @@ export default ({ config, device }) => {
 		// The subsequent levels of the pyramid are the preceding level blurred.
 		let srcView = inputs.highPass.createView();
 		for (let i = 0; i < pyramidHeight; i++) {
-			const hBlurPyramidView = makePyramidView(hBlurPyramid, i);
+			const hBlurPyramidView = makePyramidLevelView(hBlurPyramid, i);
-			const vBlurPyramidView = makePyramidView(vBlurPyramid, i);
+			const vBlurPyramidView = makePyramidLevelView(vBlurPyramid, i);
 			hBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [hBlurBuffer, linearSampler, srcView, hBlurPyramidView]);
 			vBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [vBlurBuffer, linearSampler, hBlurPyramidView, vBlurPyramidView]);
 			srcView = hBlurPyramidView;
 		}
 
-		combineBindGroup = makeBindGroup(device, combinePipeline, 0, [combineBuffer, linearSampler, vBlurPyramid.createView(), output.createView()]);
+		combineBindGroup = makeBindGroup(device, combinePipeline, 0, [combineBuffer, linearSampler, ...makePyramidViews(vBlurPyramid), output.createView()]);
 
 		return {
 			...inputs,

js/webgpu/utils.js

@@ -98,13 +98,6 @@ const make1DTexture = (device, rgbas) => {
 	return texture;
 };
 
-const makePyramidView = (texture, level) =>
-	texture.createView({
-		baseMipLevel: level,
-		mipLevelCount: 1,
-		dimension: "2d",
-	});
-
 const makeBindGroup = (device, pipeline, index, entries) =>
 	device.createBindGroup({
 		layout: pipeline.getBindGroupLayout(index),
@@ -129,7 +122,6 @@ export {
 	makeRenderTarget,
 	makeComputeTarget,
 	make1DTexture,
-	makePyramidView,
 	loadTexture,
 	loadShader,
 	makeUniformBuffer,

shaders/wgsl/bloomCombine.wgsl

@@ -5,8 +5,16 @@
 
 [[group(0), binding(0)]] var<uniform> config : Config;
 [[group(0), binding(1)]] var linearSampler : sampler;
-[[group(0), binding(2)]] var tex : texture_2d<f32>;
+
-[[group(0), binding(3)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
+// Currently mipmap textures aren't working as expected in Firefox Nightly
+// [[group(0), binding(2)]] var tex : texture_2d<f32>;
+// [[group(0), binding(3)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
+
+[[group(0), binding(2)]] var tex1 : texture_2d<f32>;
+[[group(0), binding(3)]] var tex2 : texture_2d<f32>;
+[[group(0), binding(4)]] var tex3 : texture_2d<f32>;
+[[group(0), binding(5)]] var tex4 : texture_2d<f32>;
+[[group(0), binding(6)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
 
 struct ComputeInput {
 	[[builtin(global_invocation_id)]] id : vec3<u32>;
@@ -23,10 +31,36 @@ struct ComputeInput {
 
 	var uv = (vec2<f32>(coord) + 0.5) / vec2<f32>(outputSize);
 	var sum = vec4<f32>(0.0);
-	for (var i = 0.0; i < config.pyramidHeight; i = i + 1.0) {
+
+	// for (var i = 0.0; i < config.pyramidHeight; i = i + 1.0) {
+	// 	var weight = (1.0 - i / config.pyramidHeight);
+	// 	weight = pow(weight + 0.5, 1.0 / 3.0);
+	// 	sum = sum + textureSampleLevel( tex, linearSampler, uv, i + 1.0 ) * weight;
+	// }
+
+	{
+		var i = 0.0;
 		var weight = (1.0 - i / config.pyramidHeight);
 		weight = pow(weight + 0.5, 1.0 / 3.0);
-		sum = sum + textureSampleLevel( tex, linearSampler, uv, i + 1.0 ) * weight;
+		sum = sum + textureSampleLevel( tex1, linearSampler, uv, i + 1.0 ) * weight;
+	}
+	{
+		var i = 1.0;
+		var weight = (1.0 - i / config.pyramidHeight);
+		weight = pow(weight + 0.5, 1.0 / 3.0);
+		sum = sum + textureSampleLevel( tex2, linearSampler, uv, i + 1.0 ) * weight;
+	}
+	{
+		var i = 2.0;
+		var weight = (1.0 - i / config.pyramidHeight);
+		weight = pow(weight + 0.5, 1.0 / 3.0);
+		sum = sum + textureSampleLevel( tex3, linearSampler, uv, i + 1.0 ) * weight;
+	}
+	{
+		var i = 3.0;
+		var weight = (1.0 - i / config.pyramidHeight);
+		weight = pow(weight + 0.5, 1.0 / 3.0);
+		sum = sum + textureSampleLevel( tex4, linearSampler, uv, i + 1.0 ) * weight;
 	}
 
 	textureStore(outputTex, coord, sum * config.bloomStrength);