diff --git a/js/regl/main.js b/js/regl/main.js index eb47144..abc2321 100644 --- a/js/regl/main.js +++ b/js/regl/main.js @@ -58,6 +58,15 @@ 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.clientY] + console.log(ripples) + + } + + const regl = createREGL({ canvas, extensions: ["OES_texture_half_float", "OES_texture_half_float_linear"], diff --git a/js/regl/ripplesPass.js b/js/regl/ripplesPass.js index c530b91..3eff1f7 100644 --- a/js/regl/ripplesPass.js +++ b/js/regl/ripplesPass.js @@ -1,8 +1,6 @@ import { loadImage, loadText, makePassFBO, makePass } from "./utils.js"; -// Multiplies the rendered rain and bloom by a loaded in image -// const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Flammarion_Colored.jpg/917px-Flammarion_Colored.jpg"; export default ({ regl, config }, inputs) => { console.log('ripples'); @@ -19,8 +17,17 @@ export default ({ regl, config }, inputs) => { time: regl.context("time"), tex: inputs.primary, bloomTex: inputs.bloom, + intensity: ()=>{ + let inten = 8 - (Date.now() - window.ripples[0])/500 + if (inten < 0) inten = 0 + return inten / 50 + }, height: regl.context("viewportWidth"), width: regl.context("viewportHeight"), + centerW: ()=> { + return window.ripples[1] + }, + centerH: ()=> window.ripples[2] }, framebuffer: output, }); diff --git a/shaders/glsl/ripplesPass.frag.glsl b/shaders/glsl/ripplesPass.frag.glsl index 7abb3ea..a031c88 100644 --- a/shaders/glsl/ripplesPass.frag.glsl +++ b/shaders/glsl/ripplesPass.frag.glsl @@ -2,6 +2,9 @@ precision mediump float; varying vec2 vUV; uniform float width, height; uniform float time; +uniform float intensity; +uniform float centerW; +uniform float centerH; uniform sampler2D tex; uniform sampler2D bloomTex; @@ -10,10 +13,22 @@ void main() { // gl_FragColor = texture2D(tex, vUV); // vec4 color = texture2D(bloomTex, vUV) + texture2D(tex, vUV); - vec2 iResolution = vec2(width,height); - vec2 cp = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy; + // float intensity = 0.1; + + + vec2 iResolution = vec2(height,width); + //vec2 cp = -1. + 2. * gl_FragCoord.xy / iResolution.xy; + //cp = -1. + 2. * vec2(centerW, centerH) / iResolution.xy; + vec2 cp = vec2( + -1. + 2.* gl_FragCoord.x /iResolution.x + -1.+ 2.*(iResolution.x-centerW)/iResolution.x, + -1. + 2.* gl_FragCoord.y /iResolution.y//gl_FragCoord.y //-1. + 2.*(gl_FragCoord.y)/iResolution.y + -1.+ 2.*(iResolution.y-centerH)/iResolution.y + ); + // cp.y = 1. - cp.y - 2. * centerH/iResolution.y; + + float cl = length(cp); - vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl/3.) * sin(cl * 1.0 - time * 4.) * 0.3; + + vec2 uv = gl_FragCoord.xy / iResolution.xy + (cp / cl / 4. ) * sin(cl*10. - time * 12.) * intensity*.5; // vec4 col=smoothstep(0.1,.91,texture2D(color).xyz); vec3 col = texture2D(tex, uv).xyz + texture2D(bloomTex, uv).xyz;;