eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-16 21:39:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
Rezmason
2022-08-02 03:39:57 -07:00
parent f0ffa6fce2
commit 503c97adeb
3 changed files with 35 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
js/regl/main.js
View File

@@ -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"],

35
js/regl/ripplesPass.js
View File

@@ -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: ()=>{
let inten = 1 - (Date.now() - window.ripples[0])/4000
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]
clicks: () => clicks,
aspectRatio: () => aspectRatio
},
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() })
);
};