Cherry-pick critical bug fixes from upstream PR #66 and add PR preview deployment

js/regl/main.js

@@ -73,7 +73,7 @@ export default async (canvas, config) => {
 	};
 	const effects = createEffectsMapping("regl", passModules);
 	const effectPass = getEffectPass(config.effect, effects, "palette");
-	const context = { regl, config, lkg, cameraTex, cameraAspectRatio };
+	const context = { regl, canvas, config, lkg, cameraTex, cameraAspectRatio };
 	const pipeline = makePipeline(context, [makeRain, makeBloomPass, effectPass, makeQuiltPass]);
 	const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
 	const drawToScreen = regl({ uniforms: screenUniforms });

js/regl/mirrorPass.js

@@ -1,19 +1,22 @@
 import { loadText, makePassFBO, makePass } from "./utils.js";
 
-let start;
-const numClicks = 5;
-const clicks = Array(numClicks).fill([0, 0, -Infinity]).flat();
-let aspectRatio = 1;
+export default ({ regl, canvas, config, cameraTex, cameraAspectRatio }, inputs) => {
+	let start;
+	const numClicks = 5;
+	const clicks = Array(numClicks)
+		.fill()
+		.map((_) => [0, 0, -Infinity]);
+	let aspectRatio = 1;
 
-let index = 0;
-window.onclick = (e) => {
-	clicks[index * 3 + 0] = 0 + e.clientX / e.srcElement.clientWidth;
-	clicks[index * 3 + 1] = 1 - e.clientY / e.srcElement.clientHeight;
-	clicks[index * 3 + 2] = (Date.now() - start) / 1000;
-	index = (index + 1) % numClicks;
-};
+	let index = 0;
+	canvas.onmousedown = (e) => {
+		const rect = e.srcElement.getBoundingClientRect();
+		clicks[index][0] = 0 + (e.clientX - rect.x) / rect.width;
+		clicks[index][1] = 1 - (e.clientY - rect.y) / rect.height;
+		clicks[index][2] = (performance.now() - start) / 1000;
+		index = (index + 1) % numClicks;
+	};
 
-export default ({ regl, config, cameraTex, cameraAspectRatio }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const mirrorPassFrag = loadText("shaders/glsl/mirrorPass.frag.glsl");
 	const render = regl({
@@ -23,14 +26,19 @@ export default ({ regl, config, cameraTex, cameraAspectRatio }, inputs) => {
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
 			cameraTex,
-			clicks: () => clicks,
+			// REGL bug can misinterpret array uniforms
+			["clicks[0]"]: () => clicks[0],
+			["clicks[1]"]: () => clicks[1],
+			["clicks[2]"]: () => clicks[2],
+			["clicks[3]"]: () => clicks[3],
+			["clicks[4]"]: () => clicks[4],
 			aspectRatio: () => aspectRatio,
 			cameraAspectRatio,
 		},
 		framebuffer: output,
 	});
 
-	start = Date.now();
+	start = performance.now();
 
 	return makePass(
 		{

js/webgpu/bloomPass.js

@@ -20,7 +20,7 @@ const makePyramid = (device, size, pyramidHeight) =>
 		.map((_, index) =>
 			makeComputeTarget(
 				device,
-				size.map((x) => Math.floor(x * 2 ** -index)),
+				size.map((x) => Math.max(1, Math.floor(x * 2 ** -index))),
 			),
 		);
 
@@ -102,7 +102,7 @@ export default ({ config, device }) => {
 
 	const build = (screenSize, inputs) => {
 		// Since the bloom is blurry, we downscale everything
-		scaledScreenSize = screenSize.map((x) => Math.floor(x * bloomSize));
+		scaledScreenSize = screenSize.map((x) => Math.max(1, Math.floor(x * bloomSize)));
 
 		destroyPyramid(hBlurPyramid);
 		hBlurPyramid = makePyramid(device, scaledScreenSize, pyramidHeight);
@@ -144,7 +144,11 @@ export default ({ config, device }) => {
 
 		computePass.setPipeline(blurPipeline);
 		for (let i = 0; i < pyramidHeight; i++) {
-			const dispatchSize = [Math.ceil(Math.floor(scaledScreenSize[0] * 2 ** -i) / 32), Math.floor(Math.floor(scaledScreenSize[1] * 2 ** -i)), 1];
+			const dispatchSize = [
+				Math.max(1, Math.ceil(Math.floor(scaledScreenSize[0] * 2 ** -i) / 32)),
+				Math.max(1, Math.floor(Math.floor(scaledScreenSize[1] * 2 ** -i))),
+				1,
+			];
 			computePass.setBindGroup(0, hBlurBindGroups[i]);
 			computePass.dispatchWorkgroups(...dispatchSize);
 			computePass.setBindGroup(0, vBlurBindGroups[i]);

js/webgpu/main.js

@@ -59,6 +59,7 @@ export default async (canvas, config) => {
 		config,
 		adapter,
 		device,
+		canvas,
 		canvasContext,
 		timeBuffer,
 		canvasFormat,

js/webgpu/mirrorPass.js

@@ -1,31 +1,32 @@
 import { structs } from "../../lib/gpu-buffer.js";
 import { makeComputeTarget, makeUniformBuffer, loadShader, makeBindGroup, makePass } from "./utils.js";
 
-let start;
-const numTouches = 5;
-const touches = Array(numTouches)
-	.fill()
-	.map((_) => [0, 0, -Infinity, 0]);
-let aspectRatio = 1;
-
-let index = 0;
-let touchesChanged = true;
-window.onclick = (e) => {
-	touches[index][0] = 0 + e.clientX / e.srcElement.clientWidth;
-	touches[index][1] = 1 - e.clientY / e.srcElement.clientHeight;
-	touches[index][2] = (Date.now() - start) / 1000;
-	index = (index + 1) % numTouches;
-	touchesChanged = true;
-};
-
-export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) => {
+export default ({ config, device, canvas, cameraTex, cameraAspectRatio, timeBuffer }) => {
 	const assets = [loadShader(device, "shaders/wgsl/mirrorPass.wgsl")];
 
 	const linearSampler = device.createSampler({
 		magFilter: "linear",
 		minFilter: "linear",
 	});
 
+	let start;
+	const numTouches = 5;
+	const touches = Array(numTouches)
+		.fill()
+		.map((_) => [0, 0, -Infinity, 0]);
+	let aspectRatio = 1;
+
+	let index = 0;
+	let touchesChanged = true;
+	canvas.onmousedown = (e) => {
+		const rect = e.srcElement.getBoundingClientRect();
+		touches[index][0] = 0 + (e.clientX - rect.x) / rect.width;
+		touches[index][1] = 1 - (e.clientY - rect.y) / rect.height;
+		touches[index][2] = (performance.now() - start) / 1000;
+		index = (index + 1) % numTouches;
+		touchesChanged = true;
+	};
+
 	let computePipeline;
 	let configBuffer;
 	let sceneUniforms;
@@ -99,7 +100,7 @@ export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) =>
 		computePass.end();
 	};
 
-	start = Date.now();
+	start = performance.now();
 
 	return makePass("Mirror", loaded, build, run);
 };