Ripples pass now supports five simultaneous clicks; the ripples are circular, accounting for the aspect ratio; click event is handled within the ripples pass module.

js/regl/main.js

@@ -58,15 +58,6 @@ export default async (canvas, config) => {
 	// }
 	resize();
 
-	window.ripples = [0,0,0]
-	window.onclick = (e) => { // ripple init
-		console.log(e)
-		window.ripples = [Date.now(), (e.clientX/e.srcElement.clientWidth*2)-1, (e.clientY/e.srcElement.clientHeight*2)-1]
-		// console.log(ripples)
-
-	}
-
-
 	const regl = createREGL({
 		canvas,
 		extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"],

js/regl/ripplesPass.js

@@ -1,33 +1,29 @@
 import { loadImage, loadText, makePassFBO, makePass } from "./utils.js";
 
+const start = Date.now();
+const numClicks = 5;
+const clicks = Array(numClicks).fill([0, 0, -Infinity]).flat();
+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;
+}
 
 export default ({ regl, config }, inputs) => {
-    console.log('ripples');
-    
 	const output = makePassFBO(regl, config.useHalfFloat);
-	// const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
-	// const bloomStrength = config.bloomStrength;
-	// const background = loadImage(regl, bgURL);
 	const ripplesPassFrag = loadText("shaders/glsl/ripplesPass.frag.glsl");
 	const render = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
-			// bloomStrength,
 			time: regl.context("time"),
 			tex: inputs.primary,
 			bloomTex: inputs.bloom,
-			intensity: ()=>{
+			clicks: () => clicks,
-				let inten = 1 - (Date.now() - window.ripples[0])/4000 
+			aspectRatio: () => aspectRatio
-				if (inten < 0) inten = 0
-				return inten / 10
-			},
-			height: regl.context("viewportWidth"),
-			width: regl.context("viewportHeight"),
-			centerW: ()=> {
-				return window.ripples[1]
-			},
-			centerH: ()=> window.ripples[2]
 		},
 		framebuffer: output,
 	});
@@ -36,7 +32,10 @@ export default ({ regl, config }, inputs) => {
 			primary: output,
 		},
 		Promise.all([ripplesPassFrag.loaded]),
-		(w, h) => output.resize(w, h),
+		(w, h) => {
+			output.resize(w, h);
+			aspectRatio = w / h;
+		},
 		() => render({ frag: ripplesPassFrag.text() })
 	);
 };

shaders/glsl/ripplesPass.frag.glsl

@@ -1,22 +1,25 @@
 precision mediump float;
 varying vec2 vUV;
-uniform float width, height;
+uniform float aspectRatio;
 uniform float time;
-uniform float intensity;
+uniform vec3 clicks[5];
-uniform float centerW;
+
-uniform float centerH;
 uniform sampler2D tex;
 uniform sampler2D bloomTex;
 
 void main() {
-	vec2 iResolution = vec2(height,width);
+
-	vec2 cp = vec2(
+	float total = 0.0;
-		-1. + 2.* gl_FragCoord.x /iResolution.x - centerW,
+	for (int i = 0; i < 5; i++) {
-		-1. + 2.* gl_FragCoord.y /iResolution.y + centerH
+		vec3 click = clicks[i];
-	);
+		float distanceToClick = length((click.xy - vUV) * vec2(aspectRatio, 1.0));
-	float cl = length(cp);//*(intensity+1.)*.9;
+		total += (1.0 - distanceToClick)
-    vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl / 2. ) * sin(cl*15. - time * 10.) * intensity*.5;
+		* sin(distanceToClick * 50.0 - time * 12.0)
-	vec3 col = texture2D(tex, uv).xyz + texture2D(bloomTex, uv).xyz;;
+		* pow(1.0 - min(1.0, (time - click.z) / 3.0), 2.0);
-	col.y = col.x; col.x = 0.; col.z = 0.;
+	}
-	gl_FragColor = vec4(col,1.0);
+	total *= 0.2;
-}
+
+	vec2 uv = vUV + total * 0.03;
+	gl_FragColor = vec4(mix(vec3(0.0), vec3(0.3, 1.0, 0.2), texture2D(tex, uv).r + texture2D(bloomTex, uv).r * 0.5), 1.0);
+	// gl_FragColor = vec4(uv, 0.5, 1.0);
+}