🔀 Merge pull request #368 from Schneegans/feature/colorful-wisps

This commit is contained in:
Simon Schneegans
2023-08-14 06:16:51 +02:00
committed by GitHub
11 changed files with 142 additions and 39 deletions
+1
View File
@@ -13,6 +13,7 @@ SPDX-License-Identifier: CC-BY-4.0
- Two convenience buttons have been added to the preferences dialog. One allows you to select all effects, the other one allows you to deselect all effects.
- A new main menu entry has been added which allows you to open the effect-profile directory. This is useful if you want to back up or share your profiles with others.
- The Wisps effect now supports colorful wisps. You can now specify three colors for the effect. These colors make up a gradient which is used to color the wisps.
#### Bug Fixes
+11 -1
View File
@@ -71,7 +71,17 @@ SPDX-License-Identifier: GPL-3.0-or-later
</widget>
</item>
<item row="1" column="1">
<widget class="KColorButton" name="kcfg_Color"></widget>
<layout class="QHBoxLayout" name="horizontalLayout">
<item>
<widget class="KColorButton" name="kcfg_Color1"></widget>
</item>
<item>
<widget class="KColorButton" name="kcfg_Color2"></widget>
</item>
<item>
<widget class="KColorButton" name="kcfg_Color3"></widget>
</item>
</layout>
</item>
</layout>
</widget>
+8 -3
View File
@@ -5,8 +5,7 @@ SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de>
SPDX-License-Identifier: GPL-3.0-or-later
-->
<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0
http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0 http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
<kcfgfile name="" />
<group name="">
<entry name="Duration" type="UInt">
@@ -15,8 +14,14 @@ SPDX-License-Identifier: GPL-3.0-or-later
<entry name="Scale" type="Double">
<default>1</default>
</entry>
<entry name="Color" type="Color">
<entry name="Color1" type="Color">
<default>#ff64c8</default>
</entry>
<entry name="Color2" type="Color">
<default>#6464ff</default>
</entry>
<entry name="Color3" type="Color">
<default>#64c8ff</default>
</entry>
</group>
</kcfg>
+3 -1
View File
@@ -7,4 +7,6 @@
effect.setUniform(this.shader, 'uDuration', this.duration * 0.001);
effect.setUniform(this.shader, 'uScale', effect.readConfig('Scale', 1.0));
effect.setUniform(this.shader, 'uColor', this.readRGBConfig('Color'));
effect.setUniform(this.shader, 'uColor1', this.readRGBConfig('Color1'));
effect.setUniform(this.shader, 'uColor2', this.readRGBConfig('Color2'));
effect.setUniform(this.shader, 'uColor3', this.readRGBConfig('Color3'));
+17
View File
@@ -64,6 +64,15 @@ vec4 getInputColor(vec2 coords) {
}
void setOutputColor(vec4 outColor) {
// If a uniform is not used, it will be optimized away. This condition is always
// false, but it will prevent the compiler from optimizing away the uniforms uForOpening
// and uIsFullscreen. On KWin, we need to do this as we do not have a way to check if a
// uniform is used in the shader.
if (outColor.a > 10e42 && uForOpening && uIsFullscreen) {
outColor = vec4(0.0);
}
fragColor = vec4(outColor.rgb * outColor.a, outColor.a);
}
@@ -90,6 +99,14 @@ vec4 getInputColor(vec2 coords) {
}
void setOutputColor(vec4 outColor) {
// If a uniform is not used, it will be optimized away. This condition is always
// false, but it will prevent the compiler from optimizing away the uniforms uForOpening
// and uIsFullscreen. On KWin, we need to do this as we do not have a way to check if a
// uniform is used in the shader.
if (outColor.a > 10e42 && uForOpening && uIsFullscreen) {
outColor = vec4(0.0);
}
gl_FragColor = vec4(outColor.rgb * outColor.a, outColor.a);
}
+13 -8
View File
@@ -15,8 +15,10 @@
// The content from common.glsl is automatically prepended to each shader effect.
uniform vec2 uSeed;
uniform vec3 uColor;
uniform float uScale;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform vec3 uColor3;
const float WISPS_RADIUS = 20.0;
const float WISPS_SPEED = 10.0;
@@ -28,7 +30,7 @@ const float SCALING = 0.9;
// Returns a grid of randomly moving points. Each grid cell contains one point which
// moves on an ellipse.
float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
vec4 getWisps(vec2 texCoords, float gridSize, vec2 seed) {
// Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
vec2 coords = (texCoords + hash22(seed)) * uSize;
@@ -56,13 +58,16 @@ float getWisps(vec2 texCoords, float gridSize, vec2 seed) {
cellUV += offset;
vec3 color = tritone(hash12(cellID * seed * 1.256), uColor1, uColor2, uColor3);
// Use distance to center of shifted / rotated UV coordinates to draw a glaring point.
float dist = length(cellUV - 0.5) * gridSize / radius;
if (dist < 1.0) {
return min(5.0, 0.01 / pow(dist, 2.0));
float alpha = min(5.0, 0.01 / pow(dist, 2.0));
return vec4(color * alpha, alpha);
}
return 0.0;
return vec4(0.0);
}
void main() {
@@ -78,9 +83,9 @@ void main() {
// Compute several layers of moving wisps.
vec2 uv = (iTexCoord.st - 0.5) / mix(1.0, 0.5, progress) + 0.5;
uv /= uScale;
float wisps = 0.0;
vec4 wisps = vec4(0.0);
for (float i = 0.0; i < WISPS_LAYERS; ++i) {
wisps += getWisps(uv * 0.3, WISPS_SPACING, uSeed * (i + 1.0));
wisps = alphaOver(wisps, getWisps(uv * 0.3, WISPS_SPACING, uSeed * (i + 1.0)));
}
// Compute shrinking edge mask.
@@ -100,8 +105,8 @@ void main() {
oColor.a *= windowMask * mask;
// Add the wisps.
vec4 wispColor = wisps * vec4(uColor, min(wispsIn, 1.0 - wispsOut) * mask);
oColor = alphaOver(oColor, wispColor);
wisps.a *= min(wispsIn, 1.0 - wispsOut) * mask;
oColor = alphaOver(oColor, wisps);
// These are pretty useful for understanding how this works.
// oColor = vec4(vec3(windowMask), 1.0);
+21 -5
View File
@@ -78,17 +78,33 @@ SPDX-License-Identifier: GPL-3.0-or-later
<child>
<object class="AdwActionRow">
<property name="title" translatable="yes">Color</property>
<property name="activatable-widget">wisps-color</property>
<child>
<object class="GtkColorButton" id="wisps-color">
<property name="use_alpha">0</property>
<object class="GtkBox">
<style>
<class name="linked" />
</style>
<child>
<object class="GtkColorButton" id="wisps-color-1">
<property name="show_editor">1</property>
<property name="width-request">250</property>
<property name="valign">center</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-color">
<object class="GtkColorButton" id="wisps-color-2">
<property name="show_editor">1</property>
<property name="valign">center</property>
</object>
</child>
<child>
<object class="GtkColorButton" id="wisps-color-3">
<property name="show_editor">1</property>
<property name="valign">center</property>
</object>
</child>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-colors">
<property name="icon-name">edit-clear-symbolic</property>
<property name="valign">center</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
+14 -6
View File
@@ -117,11 +117,13 @@ SPDX-License-Identifier: GPL-3.0-or-later
</object>
</child>
<child>
<object class="GtkListBoxRow">
<property name="activatable">0</property>
<child>
<object class="GtkBox">
<property name="spacing">8</property>
<child>
<object class="GtkLabel">
<property name="label" translatable="yes">Color</property>
@@ -132,16 +134,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
</object>
</child>
<child>
<object class="GtkColorButton" id="wisps-color">
<property name="use_alpha">0</property>
<object class="GtkColorButton" id="wisps-color-1">
<property name="show_editor">1</property>
<property name="margin-start">8</property>
<property name="margin-end">8</property>
<property name="width-request">250</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-color">
<object class="GtkColorButton" id="wisps-color-2">
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkColorButton" id="wisps-color-3">
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-colors">
<child>
<object class="GtkImage">
<property name="icon-name">edit-clear-symbolic</property>
+12 -6
View File
@@ -120,16 +120,22 @@ SPDX-License-Identifier: GPL-3.0-or-later
</object>
</child>
<child>
<object class="GtkColorButton" id="wisps-color">
<property name="use_alpha">0</property>
<object class="GtkColorButton" id="wisps-color-1">
<property name="show_editor">1</property>
<property name="margin-start">8</property>
<property name="margin-end">8</property>
<property name="width-request">250</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-color">
<object class="GtkColorButton" id="wisps-color-2">
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkColorButton" id="wisps-color-3">
<property name="show_editor">1</property>
</object>
</child>
<child>
<object class="GtkButton" id="reset-wisps-colors">
<property name="icon-name">edit-clear-symbolic</property>
<property name="tooltip-text" translatable="yes">Reset to Default Value</property>
<style>
@@ -695,10 +695,22 @@ SPDX-License-Identifier: CC0-1.0
<description>The size of the wisps.</description>
</key>
<key name="wisps-color" type="s">
<key name="wisps-color-1" type="s">
<default>"rgb(255, 100, 200)"</default>
<summary>Wisps Effect Color</summary>
<description>The color of the wisps effect.</description>
<summary>Wisps Effect Color 1</summary>
<description>A color of the wisps effect.</description>
</key>
<key name="wisps-color-2" type="s">
<default>"rgb(100, 100, 255)"</default>
<summary>Wisps Effect Color 2</summary>
<description>A color of the wisps effect.</description>
</key>
<key name="wisps-color-3" type="s">
<default>"rgb(100, 200, 255)"</default>
<summary>Wisps Effect Color 3</summary>
<description>A color of the wisps effect.</description>
</key>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+25 -4
View File
@@ -46,16 +46,23 @@ var Wisps = class {
// Store uniform locations of newly created shaders.
shader._uSeed = shader.get_uniform_location('uSeed');
shader._uColor = shader.get_uniform_location('uColor');
shader._uScale = shader.get_uniform_location('uScale');
shader._uColor = [
shader.get_uniform_location('uColor1'),
shader.get_uniform_location('uColor2'),
shader.get_uniform_location('uColor3'),
];
// Write all uniform values at the start of each animation.
shader.connect('begin-animation', (shader, settings, forOpening, testMode) => {
const c = Clutter.Color.from_string(settings.get_string('wisps-color'))[1];
for (let i = 1; i <= 3; i++) {
const c = Clutter.Color.from_string(settings.get_string('wisps-color-' + i))[1];
shader.set_uniform_float(shader._uColor[i - 1], 3,
[c.red / 255, c.green / 255, c.blue / 255]);
}
// clang-format off
shader.set_uniform_float(shader._uSeed, 2, [testMode ? 0 : Math.random(), testMode ? 0 : Math.random()]);
shader.set_uniform_float(shader._uColor, 3, [c.red / 255, c.green / 255, c.blue / 255]);
shader.set_uniform_float(shader._uScale, 1, [settings.get_double('wisps-scale')]);
// clang-format on
});
@@ -89,7 +96,21 @@ var Wisps = class {
bindPreferences(dialog) {
dialog.bindAdjustment('wisps-animation-time');
dialog.bindAdjustment('wisps-scale');
dialog.bindColorButton('wisps-color');
dialog.bindColorButton('wisps-color-1');
dialog.bindColorButton('wisps-color-2');
dialog.bindColorButton('wisps-color-3');
// Connect the buttons only once. The bindPreferences can be called multiple times...
if (!this._isConnected) {
this._isConnected = true;
// The wisps-color-reset button needs to be bound explicitly.
dialog.getBuilder().get_object('reset-wisps-colors').connect('clicked', () => {
dialog.getProfileSettings().reset('wisps-color-1');
dialog.getProfileSettings().reset('wisps-color-2');
dialog.getProfileSettings().reset('wisps-color-3');
});
}
}
// ---------------------------------------------------------------- API for extension.js