code brightness is now intensified by the ripples. Added webcam support.

js/regl/ripplesPass.js

@@ -1,6 +1,6 @@
 import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
 
-const start = Date.now();
+let start = Date.now();
 const numClicks = 5;
 const clicks = Array(numClicks).fill([0, 0, -Infinity]).flat();
 let aspectRatio = 1;
@@ -13,7 +13,41 @@ window.onclick = (e) => {
 	index = (index + 1) % numClicks;
 }
 
+// TODO: switch to video-based texture
+// TODO: mipmap?
+const video = document.createElement("video");
+const canvas = document.createElement("canvas");
+const context = canvas.getContext("2d");
+let cameraAspectRatio = 1.0;
+
+const getCameraFeed = async () => {
+	try {
+		const stream = await navigator.mediaDevices.getUserMedia({video: {
+			width: { min: 800, ideal: 1280 },
+			frameRate: { ideal: 60 }
+		}, audio: false});
+		const videoTrack = stream.getVideoTracks()[0];
+		const {width, height} = videoTrack.getSettings();
+		console.log(videoTrack.getSettings());
+
+		video.width = width;
+		video.height = height;
+		canvas.width = width;
+		canvas.height = height;
+		cameraAspectRatio = width / height;
+
+		video.srcObject = stream;
+		video.play();
+	} catch (e) {}
+};
+
 export default ({ regl, config }, inputs) => {
+
+	getCameraFeed();
+	const cameraTex = regl.texture(canvas);
+
+	start = Date.now();
+
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const ripplesPassFrag = loadText("shaders/glsl/ripplesPass.frag.glsl");
 	const render = regl({
@@ -22,8 +56,10 @@ export default ({ regl, config }, inputs) => {
 			time: regl.context("time"),
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
+			cameraTex,
 			clicks: () => clicks,
-			aspectRatio: () => aspectRatio
+			aspectRatio: () => aspectRatio,
+			cameraAspectRatio: () => cameraAspectRatio
 		},
 		framebuffer: output,
 	});
@@ -36,6 +72,10 @@ export default ({ regl, config }, inputs) => {
 			output.resize(w, h);
 			aspectRatio = w / h;
 		},
-		() => render({ frag: ripplesPassFrag.text() })
+		() => {
+			context.drawImage(video, 0, 0);
+			cameraTex(canvas);
+			render({ frag: ripplesPassFrag.text() });
+		}
 	);
 };