From 0441402fa33e1a98cc36a45112372b9b80164b78 Mon Sep 17 00:00:00 2001 From: Simon Schneegans Date: Mon, 23 Jan 2023 13:17:16 +0100 Subject: [PATCH] :wrench: Add some vertical squishing to the TV Glitch effect --- resources/shaders/tv-glitch.frag | 63 +++++++++++++------------------- 1 file changed, 25 insertions(+), 38 deletions(-) diff --git a/resources/shaders/tv-glitch.frag b/resources/shaders/tv-glitch.frag index efadfd8..4d5abb8 100644 --- a/resources/shaders/tv-glitch.frag +++ b/resources/shaders/tv-glitch.frag @@ -20,8 +20,6 @@ uniform float uScale; uniform float uStrength; uniform float uSpeed; -// tv params - const float BLUR_WIDTH = 0.01; // Width of the gradients. const float TB_TIME = 0.7; // Relative time for the top/bottom animation. const float LR_TIME = 0.4; // Relative time for the left/right animation. @@ -29,22 +27,34 @@ const float LR_DELAY = 0.6; // Delay after which the left/right animation st const float FF_TIME = 0.1; // Relative time for the final fade to transparency. const float SCALING = 0.5; // Additional vertical scaling of the window. - -// Somewhat inspired by https://www.shadertoy.com/view/XtK3W3 +// This is a combination of the effects from tv.frag and glitch.frag. Credits go to Kurt +// Wilson (https://github.com/Kurtoid) for this idea! void main() { + + // Add the tv effect sooner/later in the animation, compared to the original TV effect. + float tOffset = uForOpening ? 0.0 : 1.0; + float tvProgress = clamp(uProgress * 2.0 - tOffset, 0.0, 1.0); + tvProgress = uForOpening ? 1.0 - easeOutQuad(tvProgress) : easeOutQuad(tvProgress); + + // Scale down the window vertically. + float scale = 1.0 / mix(1.0, SCALING, tvProgress) - 1.0; + vec2 coords = iTexCoord.st; + coords.y = coords.y * (scale + 1.0) - scale * 0.5; + + // This is from the original Glitch effect. float progress = easeInQuad(uForOpening ? 1.0 - uProgress : uProgress); float time = progress * uDuration * uSpeed; float strength = uStrength * progress; float displace = 1000.0 * strength / uSize.x; - float yPos = uScale * uSize.y * (iTexCoord.y + uSeed * 10.0); + float yPos = uScale * uSize.y * (coords.y + uSeed * 10.0); // Create large noise waves and add some smaller noise waves. float noise = clamp(simplex2D(vec2(time, yPos * 0.002)) - 0.5, 0.0, 1.0); noise += (simplex2D(vec2(time * 10.0, yPos * 0.05)) - 0.5) * 0.15; // Apply the noise as x displacement for every line. - float xPos = clamp(iTexCoord.x - displace * noise * noise, 0.0, 1.0); - vec4 oColor = getInputColor(vec2(xPos, iTexCoord.y)); + float xPos = clamp(coords.x - displace * noise * noise, 0.0, 1.0); + vec4 oColor = getInputColor(vec2(xPos, coords.y)); // Mix in some random interference lines. vec3 interference = uColor * hash12(vec2(yPos * time)); @@ -52,7 +62,7 @@ void main() { oColor.rgb = mix(oColor.rgb, interference, interferenceStrength); // Mix in some grainy noise. - vec3 grain = uColor * simplex2D(uSize * iTexCoord + vec2(time * 100.0)); + vec3 grain = uColor * simplex2D(uSize * coords + vec2(time * 100.0)); float grainStrength = 0.2 * min(strength, 1.0); oColor.rgb = mix(oColor.rgb, grain, grainStrength); @@ -63,33 +73,19 @@ void main() { // Shift green/blue channels. float offset = 0.1 * noise * displace; - oColor.g = mix(oColor.g, getInputColor(vec2(xPos + offset, iTexCoord.y)).g, 0.25); - oColor.b = mix(oColor.b, getInputColor(vec2(xPos - offset, iTexCoord.y)).b, 0.25); + oColor.g = mix(oColor.g, getInputColor(vec2(xPos + offset, coords.y)).g, 0.25); + oColor.b = mix(oColor.b, getInputColor(vec2(xPos - offset, coords.y)).b, 0.25); - // Dissolve the window. - // float fadeDelay = 1.5; - // float alpha = clamp(noise + 1.0 + fadeDelay - (3.0 + fadeDelay) * progress, 0.0, 1.0); - // oColor.a *= alpha; - - // add tv effect - we just want the shape transforms - - // add the tv effect sooner/later in the animation - float toffset = uForOpening ? 0.0 : 1.0; - float prog = clamp(uProgress * 2.0 - toffset, 0.0, 1.0); - prog = uForOpening ? 1.0 - easeOutQuad(prog) : easeOutQuad(prog); - - // Scale down the window vertically. - float scale = 1.0 / mix(1.0, SCALING, prog) - 1.0; - vec2 coords = iTexCoord.st; - coords.y = coords.y * (scale + 1.0) - scale * 0.5; + // Now hide the window according to the TV effect. // All of these are in [0..1] during the different stages of the animation. // tb refers to the top-bottom animation. // lr refers to the left-right animation. // ff refers to the final fade animation. - float tbProg = smoothstep(0.0, 1.0, clamp(prog / TB_TIME, 0.0, 1.0)); - float lrProg = smoothstep(0.0, 1.0, clamp((prog - LR_DELAY) / LR_TIME, 0.0, 1.0)); - float ffProg = smoothstep(0.0, 1.0, clamp((prog - 1.0 + FF_TIME) / FF_TIME, 0.0, 1.0)); + float tbProg = smoothstep(0.0, 1.0, clamp(tvProgress / TB_TIME, 0.0, 1.0)); + float lrProg = smoothstep(0.0, 1.0, clamp((tvProgress - LR_DELAY) / LR_TIME, 0.0, 1.0)); + float ffProg = + smoothstep(0.0, 1.0, clamp((tvProgress - 1.0 + FF_TIME) / FF_TIME, 0.0, 1.0)); // This is a top-center-bottom gradient in [0..1..0] float tb = coords.y * 2.0; @@ -107,16 +103,7 @@ void main() { // Assemble the final alpha value. float mask = tbMask * lrMask * ffMask; - // vec4 oColor = getInputColor(coords); - // don't add another color transform - // oColor.rgb = mix(oColor.rgb, uColor * oColor.a, smoothstep(0.0, 1.0, prog)); oColor.a *= mask; - // These are pretty useful for understanding how this works. - // oColor = vec4(vec3(tbMask), 1); - // oColor = vec4(vec3(lrMask), 1); - // oColor = vec4(vec3(ffMask), 1); - // oColor = vec4(vec3(mask), 1); - setOutputColor(oColor); }