diff --git a/README.md b/README.md index acdb4cc..421cda5 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ This extension is not only more useless than the cube, but it is also much more | **Pixel Wheel**
This simple effect pixelates the window and hides the pixels in a wheel-like fashion. | | | **Pixel Wipe**
This effect pixelates the window and hides the pixels radially, starting from the pointer position. | | | **Portal**
This ridiculous effect teleports your windows from and to alternative dimensions. It may resemble the portal from a well-known cartoon series... | | +| **RGB Warp**
Red Blue and Green go bye bye. | | | **Snap of Disintegration**
Dissolve your windows into a cloud of dust. | | | **T-Rex Attack**
Destroy your windows with a series of violent slashes! | | | **TV Effect**
This is a very simple effect to demonstrate that this extension could also be used in a more professional environment. | | @@ -86,6 +87,7 @@ Below is a table which summarizes the current availability for all effects. Pixel Wheel ✅ ✅ ✅ ✅ Pixel Wipe ✅ ✅ ✅ ✅ Portal ✅ ✅ ✅ ✅ +RGB Warp ✅ ✅ ✅ ✅ Snap of Disintegration ✅ T-Rex Attack ✅ TV Effect ✅ ✅ ✅ ✅ diff --git a/docs/pics/rgbwarp.gif b/docs/pics/rgbwarp.gif new file mode 100644 index 0000000..9cb7506 Binary files /dev/null and b/docs/pics/rgbwarp.gif differ diff --git a/resources/shaders/rgbwarp.frag b/resources/shaders/rgbwarp.frag index e362799..0892226 100644 --- a/resources/shaders/rgbwarp.frag +++ b/resources/shaders/rgbwarp.frag @@ -30,19 +30,12 @@ // vec4 getInputColor(vec2 coords) // void setOutputColor(vec4 outColor) - uniform float uWavesize; uniform float uBrightness; uniform float uStretchR; uniform float uStretchG; uniform float uStretchB; -// float wavesize = 1.0; -// float brightness = 1.0; -// float stretchR = 0.25; -// float stretchG = 0.20; -// float stretchB = 0.15; - float FadeInOut(float t, float power) { @@ -66,15 +59,16 @@ void main() { // the UV vec2 uv = iTexCoord.st; + //flipped the uv vec2 f = vec2(uv.x,1.0 - uv.y); + // w is the wave float w = 0.0; float p = mix(0.0, 1.0 + uWavesize, progress); w = 1.0 - abs(p - f.y); w = clamp(w,0.0,1.0); - w = pow(w, mix(100.0,1.0,uWavesize) ); float mask = 1.0; @@ -90,27 +84,9 @@ void main() { oColor.g = getInputColor(uv + vec2(0.0,w * uStretchG ) ).g * mix(1.0, uBrightness, FadeInOut(progress,4)); oColor.b = getInputColor(uv + vec2(0.0,w * uStretchB ) ).b * mix(1.0, uBrightness, FadeInOut(progress,4)); - // float stretchA = min(min(uStretchR,uStretchG),uStretchB); - // oColor.a = getInputColor(uv).a * mask * (1.0 - w); - - // float mask = (oColor.r + oColor.g + oColor.b)/3.0; - // float mask = max(max(oColor.r,oColor.g),oColor.b); - // oColor.a = getInputColor(uv).a * progress; - - //this will not work well on very dark themes - // float mask = (oColor.r + oColor.g + oColor.b)/3.0; - // if (mask > 0.0) - // { - // oColor.a = getInputColor(uv).a; - // } - - + //if you can think of a better way to handle the alpha ... try that oColor.a = getInputColor(uv).a * easeInOutSine(progress) * mask; - - // float a = getInputColor(uv).a * easeOutExpo(progress); - // oColor.a = clamp(a,0.0,1.0); - // oColor.a = getInputColor(uv).a ; - // oColor.a = mask * getInputColor(uv).a * cmax ; + setOutputColor(oColor); } \ No newline at end of file diff --git a/src/effects/RGBWarp.js b/src/effects/RGBWarp.js index 762f858..bc87b77 100644 --- a/src/effects/RGBWarp.js +++ b/src/effects/RGBWarp.js @@ -9,7 +9,7 @@ // |__/ // ////////////////////////////////////////////////////////////////////////////////////////// -// SPDX-FileCopyrightText: Your Name +// SPDX-FileCopyrightText: Justin Garza JGarza9788@gmail.com // SPDX-License-Identifier: GPL-3.0-or-later 'use strict'; @@ -24,8 +24,7 @@ const ShaderFactory = await utils.importInShellOnly('./ShaderFactory.js'); const _ = await utils.importGettext(); ////////////////////////////////////////////////////////////////////////////////////////// -// This effect ... // -// <- Please add a description of your effect here -> // +// This effect warps the Red Green Blue values // ////////////////////////////////////////////////////////////////////////////////////////// // The effect class can be used to get some metadata (like the effect's name or supported