🔧 Streamline RGB warp effect

This commit is contained in:
Simon Schneegans
2025-02-09 08:00:49 +01:00
parent 00d6f9089d
commit 3ab1ffbc15
4 changed files with 113 additions and 152 deletions
+25 -46
View File
@@ -10,6 +10,7 @@
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
// SPDX-FileCopyrightText: Justin Garza JGarza9788@gmail.com // SPDX-FileCopyrightText: Justin Garza JGarza9788@gmail.com
// SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
// SPDX-License-Identifier: GPL-3.0-or-later // SPDX-License-Identifier: GPL-3.0-or-later
// The content from common.glsl is automatically prepended to each shader effect. This // The content from common.glsl is automatically prepended to each shader effect. This
@@ -31,65 +32,43 @@
// void setOutputColor(vec4 outColor) // void setOutputColor(vec4 outColor)
uniform float uBrightness; uniform float uBrightness;
uniform float uStretchR; uniform float uSpeedR;
uniform float uStretchG; uniform float uSpeedG;
uniform float uStretchB; uniform float uSpeedB;
float FadeInOut(float t, float power) {
float FadeInOut(float t, float power) float s = -1.0 * pow((t - 0.5) / (0.5), power) + 1.0;
{ s = clamp(s, 0.0, 1.0);
float s = -1.0 * pow((t-0.5)/(0.5),power)+1.0;
s = clamp(s,0.0,1.0);
return s; return s;
} }
void main() { void main() {
// Calculate the progression value based on the animation direction. // Calculate the progression value based on the animation direction.
// If opening, use uProgress as-is; if closing, invert the progression. float progress = uForOpening ? 1.0 - uProgress : uProgress;
float progress = uForOpening ? uProgress : 1.0 - uProgress;
//progress will now go from 0.5 to 1.0 // Percentage of the progress time which is spent until all pixels start moving up.
progress = mix(0.5,1.0,progress); float minSpeed = min(uSpeedR, min(uSpeedG, uSpeedB));
float waveTime = mix(0.1, 0.9, minSpeed);
float waveProgress = progress / waveTime;
// the UV // Gradient from top to bottom (0 at top, 1 at bottom).
vec2 uv = iTexCoord.st; float t = iTexCoord.t;
//flipped the uv
vec2 f = vec2(uv.x,1.0 - uv.y);
// w is the wave // Calculate the vertical wave offset.
float w = 0.0; float offset = max(waveProgress - t, 0.0);
offset /= (1.0 / waveTime) - 1.0;
offset *= (1.0 - waveTime);
vec4 colorR = getInputColor(iTexCoord + vec2(0.0, offset * (uSpeedR - minSpeed + 1.0)));
vec4 colorG = getInputColor(iTexCoord + vec2(0.0, offset * (uSpeedG - minSpeed + 1.0)));
vec4 colorB = getInputColor(iTexCoord + vec2(0.0, offset * (uSpeedB - minSpeed + 1.0)));
//w will be used to calculate the the size of the wave vec4 oColor =
float p = mix(0.0, 1.0 + 1.0, progress); vec4(colorR.r, colorG.g, colorB.b, (colorR.a + colorG.a + colorB.a) / 3.0);
w = 1.0 - abs(p - f.y); oColor.rgb *= mix(1.0, uBrightness, FadeInOut(progress, 4));
w = clamp(w,0.0,1.0);
w = pow(w, mix(100.0,1.0,1.0) );
//starting output color
vec4 oColor = vec4(0.0);
// outputs for RGB is based on the color of the window, times uStreatch(RG and B), and another multipler for the brightness
oColor.r = getInputColor(uv + vec2(0.0,w * uStretchR ) ).r * mix(1.0, uBrightness, FadeInOut(progress,4));
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));
//if you can think of a better way to handle the alpha ... try that
if (oColor.r + oColor.g + oColor.b > 0.0)
{
oColor.a = getInputColor(uv).a ;
}
else
{
oColor.a = 0.0;
}
oColor.a *= getRelativeEdgeMask(0.1);
setOutputColor(oColor); setOutputColor(oColor);
} }
+13 -17
View File
@@ -49,7 +49,6 @@ SPDX-License-Identifier: GPL-3.0-or-later
</child> </child>
<child> <child>
<object class="AdwActionRow"> <object class="AdwActionRow">
@@ -57,7 +56,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<!-- <property name="subtitle" translatable="yes"></property> --> <!-- <property name="subtitle" translatable="yes"></property> -->
<child> <child>
<object class="GtkScale" > <object class="GtkScale">
<property name="valign">center</property> <property name="valign">center</property>
<property name="draw-value">1</property> <property name="draw-value">1</property>
<property name="digits">2</property> <property name="digits">2</property>
@@ -91,11 +90,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
<child> <child>
<object class="AdwActionRow"> <object class="AdwActionRow">
<property name="title" translatable="yes">Offset Red</property> <property name="title" translatable="yes">Red Speed</property>
<!-- <property name="subtitle" translatable="yes"></property> -->
<child> <child>
<object class="GtkScale" > <object class="GtkScale">
<property name="valign">center</property> <property name="valign">center</property>
<property name="draw-value">1</property> <property name="draw-value">1</property>
<property name="digits">2</property> <property name="digits">2</property>
@@ -103,7 +101,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<property name="width-request">300</property> <property name="width-request">300</property>
<property name="adjustment"> <property name="adjustment">
<object class="GtkAdjustment" id="rgbwarp-offset-r"> <object class="GtkAdjustment" id="rgbwarp-speed-r">
<property name="upper">1.0</property> <property name="upper">1.0</property>
<property name="lower">0.0</property> <property name="lower">0.0</property>
<property name="step-increment">0.01</property> <property name="step-increment">0.01</property>
@@ -114,7 +112,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
</child> </child>
<child> <child>
<object class="GtkButton" id="reset-rgbwarp-offset-r"> <object class="GtkButton" id="reset-rgbwarp-speed-r">
<property name="icon-name">edit-clear-symbolic</property> <property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property> <property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property> <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
@@ -129,11 +127,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
<child> <child>
<object class="AdwActionRow"> <object class="AdwActionRow">
<property name="title" translatable="yes">Offset Green</property> <property name="title" translatable="yes">Green Speed</property>
<!-- <property name="subtitle" translatable="yes"></property> -->
<child> <child>
<object class="GtkScale" > <object class="GtkScale">
<property name="valign">center</property> <property name="valign">center</property>
<property name="draw-value">1</property> <property name="draw-value">1</property>
<property name="digits">2</property> <property name="digits">2</property>
@@ -141,7 +138,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<property name="width-request">300</property> <property name="width-request">300</property>
<property name="adjustment"> <property name="adjustment">
<object class="GtkAdjustment" id="rgbwarp-offset-g"> <object class="GtkAdjustment" id="rgbwarp-speed-g">
<property name="upper">1.0</property> <property name="upper">1.0</property>
<property name="lower">0.0</property> <property name="lower">0.0</property>
<property name="step-increment">0.01</property> <property name="step-increment">0.01</property>
@@ -152,7 +149,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
</child> </child>
<child> <child>
<object class="GtkButton" id="reset-rgbwarp-offset-g"> <object class="GtkButton" id="reset-rgbwarp-speed-g">
<property name="icon-name">edit-clear-symbolic</property> <property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property> <property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property> <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
@@ -167,11 +164,10 @@ SPDX-License-Identifier: GPL-3.0-or-later
<child> <child>
<object class="AdwActionRow"> <object class="AdwActionRow">
<property name="title" translatable="yes">Offset Blue</property> <property name="title" translatable="yes">Blue Speed</property>
<!-- <property name="subtitle" translatable="yes"></property> -->
<child> <child>
<object class="GtkScale" > <object class="GtkScale">
<property name="valign">center</property> <property name="valign">center</property>
<property name="draw-value">1</property> <property name="draw-value">1</property>
<property name="digits">2</property> <property name="digits">2</property>
@@ -179,7 +175,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
<property name="width-request">300</property> <property name="width-request">300</property>
<property name="adjustment"> <property name="adjustment">
<object class="GtkAdjustment" id="rgbwarp-offset-b"> <object class="GtkAdjustment" id="rgbwarp-speed-b">
<property name="upper">1.0</property> <property name="upper">1.0</property>
<property name="lower">0.0</property> <property name="lower">0.0</property>
<property name="step-increment">0.01</property> <property name="step-increment">0.01</property>
@@ -190,7 +186,7 @@ SPDX-License-Identifier: GPL-3.0-or-later
</child> </child>
<child> <child>
<object class="GtkButton" id="reset-rgbwarp-offset-b"> <object class="GtkButton" id="reset-rgbwarp-speed-b">
<property name="icon-name">edit-clear-symbolic</property> <property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property> <property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property> <property name="tooltip-text" translatable="yes">Reset to Default Value</property>
@@ -957,7 +957,6 @@ SPDX-License-Identifier: CC0-1.0
</key> </key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Aura Glow Effect Options --> <!-- Aura Glow Effect Options -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -1045,7 +1044,7 @@ SPDX-License-Identifier: CC0-1.0
</key> </key>
<key name="rgbwarp-animation-time" type="i"> <key name="rgbwarp-animation-time" type="i">
<default>1500</default> <default>750</default>
<summary>RGBWarp Animation Time</summary> <summary>RGBWarp Animation Time</summary>
<description>The time the RGBWarp effect takes.</description> <description>The time the RGBWarp effect takes.</description>
</key> </key>
@@ -1062,22 +1061,22 @@ SPDX-License-Identifier: CC0-1.0
<description>brightness of the effect.</description> <description>brightness of the effect.</description>
</key> </key>
<key name="rgbwarp-offset-r" type="d"> <key name="rgbwarp-speed-r" type="d">
<default>1.0</default> <default>1.0</default>
<summary>RGBWarp Red Offset</summary> <summary>RGBWarp Red Speed</summary>
<description>Red offset of the effect.</description> <description>Red speed of the effect.</description>
</key> </key>
<key name="rgbwarp-offset-g" type="d"> <key name="rgbwarp-speed-g" type="d">
<default>0.90</default> <default>0.90</default>
<summary>RGBWarp Green Offset</summary> <summary>RGBWarp Green Speed</summary>
<description>Green offset of the effect.</description> <description>Green speed of the effect.</description>
</key> </key>
<key name="rgbwarp-offset-b" type="d"> <key name="rgbwarp-speed-b" type="d">
<default>0.80</default> <default>0.80</default>
<summary>RGBWarp Blue Offset</summary> <summary>RGBWarp Blue Speed</summary>
<description>Blue offset of the effect.</description> <description>Blue speed of the effect.</description>
</key> </key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --> <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
@@ -1133,7 +1132,6 @@ SPDX-License-Identifier: CC0-1.0
</key> </key>
</schema> </schema>
</schemalist> </schemalist>
+12 -24
View File
@@ -39,28 +39,18 @@ export default class Effect {
this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => { this.shaderFactory = new ShaderFactory(Effect.getNick(), (shader) => {
// Store uniform locations of newly created shaders. // Store uniform locations of newly created shaders.
shader._uBrightness = shader.get_uniform_location('uBrightness'); shader._uBrightness = shader.get_uniform_location('uBrightness');
shader._uStretchR = shader.get_uniform_location('uStretchR'); shader._uSpeedR = shader.get_uniform_location('uSpeedR');
shader._uStretchG = shader.get_uniform_location('uStretchG'); shader._uSpeedG = shader.get_uniform_location('uSpeedG');
shader._uStretchB = shader.get_uniform_location('uStretchB'); shader._uSpeedB = shader.get_uniform_location('uSpeedB');
// Write all uniform values at the start of each animation. // Write all uniform values at the start of each animation.
shader.connect('begin-animation', (shader, settings) => { shader.connect('begin-animation', (shader, settings) => {
// clang-format off
shader.set_uniform_float(shader._uBrightness, 1, [ shader.set_uniform_float(shader._uBrightness, 1, [settings.get_double('rgbwarp-brightness')]);
settings.get_double('rgbwarp-brightness'), shader.set_uniform_float(shader._uSpeedR, 1, [settings.get_double('rgbwarp-speed-r')]);
]); shader.set_uniform_float(shader._uSpeedG, 1, [settings.get_double('rgbwarp-speed-g')]);
shader.set_uniform_float(shader._uSpeedB, 1, [settings.get_double('rgbwarp-speed-b')]);
shader.set_uniform_float(shader._uStretchR, 1, [ // clang-format on
settings.get_double('rgbwarp-offset-r'),
]);
shader.set_uniform_float(shader._uStretchG, 1, [
settings.get_double('rgbwarp-offset-g'),
]);
shader.set_uniform_float(shader._uStretchB, 1, [
settings.get_double('rgbwarp-offset-b'),
]);
}); });
}); });
} }
@@ -92,13 +82,11 @@ export default class Effect {
// This is called by the preferences dialog whenever a new effect profile is loaded. It // This is called by the preferences dialog whenever a new effect profile is loaded. It
// binds all user interface elements to the respective settings keys of the profile. // binds all user interface elements to the respective settings keys of the profile.
static bindPreferences(dialog) { static bindPreferences(dialog) {
// Empty for now... Code is added here later in the tutorial!
dialog.bindAdjustment('rgbwarp-animation-time'); dialog.bindAdjustment('rgbwarp-animation-time');
dialog.bindAdjustment('rgbwarp-brightness'); dialog.bindAdjustment('rgbwarp-brightness');
dialog.bindAdjustment('rgbwarp-offset-r'); dialog.bindAdjustment('rgbwarp-speed-r');
dialog.bindAdjustment('rgbwarp-offset-g'); dialog.bindAdjustment('rgbwarp-speed-g');
dialog.bindAdjustment('rgbwarp-offset-b'); dialog.bindAdjustment('rgbwarp-speed-b');
} }
// ---------------------------------------------------------------- API for extension.js // ---------------------------------------------------------------- API for extension.js