🎉 Add support for colorful wisps

This commit is contained in:
Simon Schneegans
2023-08-13 13:35:03 +02:00
parent 063826354f
commit 32d78ceced
10 changed files with 125 additions and 39 deletions
+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);
+23 -7
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>
<property name="show_editor">1</property>
<property name="width-request">250</property>
<property name="valign">center</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="valign">center</property>
</object>
</child>
<child>
<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-color">
<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>