Adding an FPS argument. The renderers now determine whether the current frame should be rendered, and passes use that to determine whether to render or not. The rain pass, however, will still update the simulation at full speed.

js/regl/bloomPass.js

@@ -98,7 +98,11 @@ export default ({ regl, config }, inputs) => {
 			resizePyramid(vBlurPyramid, w, h, bloomSize);
 			output.resize(w, h);
 		},
-		() => {
+		(shouldRender) => {
+			if (!shouldRender) {
+				return;
+			}
+
 			for (let i = 0; i < pyramidHeight; i++) {
 				const highPassFBO = highPassPyramid[i];
 				const hBlurFBO = hBlurPyramid[i];

js/regl/imagePass.js

@@ -26,6 +26,10 @@ export default ({ regl, config }, inputs) => {
 		},
 		Promise.all([background.loaded, imagePassFrag.loaded]),
 		(w, h) => output.resize(w, h),
-		() => render({ frag: imagePassFrag.text() })
+		(shouldRender) => {
+			if (shouldRender) {
+				render({ frag: imagePassFrag.text() });
+			}
+		}
 	);
 };

js/regl/main.js

@@ -88,10 +88,29 @@ export default async (canvas, config) => {
 	const screenUniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
 	const drawToScreen = regl({ uniforms: screenUniforms });
 	await Promise.all(pipeline.map((step) => step.ready));
+
+	const targetFrameTimeMilliseconds = 1000 / config.fps;
+	let last = NaN;
+
 	const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
 		if (config.once) {
 			tick.cancel();
 		}
+
+		const now = regl.now() * 1000;
+
+		if (isNaN(last)) {
+			last = now;
+		}
+
+		const shouldRender = config.fps >= 60 || now - last >= targetFrameTimeMilliseconds || config.once == true;
+
+		if (shouldRender) {
+			while (now - targetFrameTimeMilliseconds > last) {
+				last += targetFrameTimeMilliseconds;
+			}
+		}
+
 		if (config.useCamera) {
 			cameraTex(cameraCanvas);
 		}
@@ -104,7 +123,7 @@ export default async (canvas, config) => {
 		}
 		fullScreenQuad(() => {
 			for (const step of pipeline) {
-				step.execute();
+				step.execute(shouldRender);
 			}
 			drawToScreen();
 		});

js/regl/mirrorPass.js

@@ -41,6 +41,10 @@ export default ({ regl, config, cameraTex, cameraAspectRatio }, inputs) => {
 			output.resize(w, h);
 			aspectRatio = w / h;
 		},
-		() => render({ frag: mirrorPassFrag.text() })
+		(shouldRender) => {
+			if (shouldRender) {
+				render({ frag: mirrorPassFrag.text() });
+			}
+		}
 	);
 };

js/regl/palettePass.js

@@ -83,6 +83,10 @@ export default ({ regl, config }, inputs) => {
 		},
 		palettePassFrag.loaded,
 		(w, h) => output.resize(w, h),
-		() => render({ frag: palettePassFrag.text() })
+		(shouldRender) => {
+			if (shouldRender) {
+				render({ frag: palettePassFrag.text() });
+			}
+		}
 	);
 };

js/regl/quiltPass.js

@@ -25,6 +25,10 @@ export default ({ regl, config, lkg }, inputs) => {
 		},
 		Promise.all([quiltPassFrag.loaded]),
 		(w, h) => output.resize(w, h),
-		() => render({ frag: quiltPassFrag.text() })
+		(shouldRender) => {
+			if (shouldRender) {
+				render({ frag: quiltPassFrag.text() });
+			}
+		}
 	);
 };

js/regl/rainPass.js

@@ -292,19 +292,22 @@ export default ({ regl, config, lkg }) => {
 			}
 			[screenSize[0], screenSize[1]] = aspectRatio > 1 ? [1, aspectRatio] : [1 / aspectRatio, 1];
 		},
-		() => {
+		(shouldRender) => {
 			intro({ frag: rainPassIntro.text() });
 			raindrop({ frag: rainPassRaindrop.text() });
 			symbol({ frag: rainPassSymbol.text() });
 			effect({ frag: rainPassEffect.text() });
-			regl.clear({
-				depth: 1,
-				color: [0, 0, 0, 1],
-				framebuffer: output,
-			});
 
-			for (const vantagePoint of vantagePoints) {
-				render({ ...vantagePoint, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
+			if (shouldRender) {
+				regl.clear({
+					depth: 1,
+					color: [0, 0, 0, 1],
+					framebuffer: output,
+				});
+
+				for (const vantagePoint of vantagePoints) {
+					render({ ...vantagePoint, transform, screenSize, vert: rainPassVert.text(), frag: rainPassFrag.text() });
+				}
 			}
 		}
 	);

js/regl/stripePass.js

@@ -63,6 +63,10 @@ export default ({ regl, config }, inputs) => {
 		},
 		stripePassFrag.loaded,
 		(w, h) => output.resize(w, h),
-		() => render({ frag: stripePassFrag.text() })
+		(shouldRender) => {
+			if (shouldRender) {
+				render({ frag: stripePassFrag.text() });
+			}
+		}
 	);
 };