🔀 Merge branch 'main' into refactor/shader-resources

resources/shaders/common/easing.glsl

@@ -0,0 +1,5 @@
+// This provides some basic easing function. More can be added if required!
+// Taken from here:
+// https://gitlab.gnome.org/GNOME/mutter/-/blob/main/clutter/clutter/clutter-easing.c
+
+float easeOutQuad(float x) { return -1.0 * x * (x - 2); }

resources/shaders/energize-a-declarations.glsl

@@ -4,6 +4,7 @@
 #include "common/uniforms.glsl"
 #include "common/noise.glsl"
 #include "common/edgeMask.glsl"
+#include "common/easing.glsl"
 
 uniform vec3 uColor;
 uniform float uScale;
@@ -16,11 +17,11 @@ const float EDGE_FADE_WIDTH = 50;
 // This method returns two values:
 //  result.x: A mask for the particles.
 //  result.y: The opacity of the fading window.
-vec2 getMasks() {
-  float fadeInProgress  = clamp(uProgress / FADE_IN_TIME, 0, 1);
-  float fadeOutProgress = clamp((uProgress - FADE_IN_TIME) / FADE_OUT_TIME, 0, 1);
+vec2 getMasks(float progress) {
+  float fadeInProgress  = clamp(progress / FADE_IN_TIME, 0, 1);
+  float fadeOutProgress = clamp((progress - FADE_IN_TIME) / FADE_OUT_TIME, 0, 1);
   float heartProgress =
-    clamp((uProgress - (1.0 - HEART_FADE_TIME)) / HEART_FADE_TIME, 0, 1);
+    clamp((progress - (1.0 - HEART_FADE_TIME)) / HEART_FADE_TIME, 0, 1);
 
   // Compute mask for the "atom" particles.
   float dist     = length(cogl_tex_coord_in[0].st - 0.5) * 4.0;

resources/shaders/energize-a.glsl

@@ -1,4 +1,6 @@
-vec2 masks       = getMasks();
+float progress = easeOutQuad(uProgress);
+
+vec2 masks       = getMasks(progress);
 vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
 
 // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
@@ -10,7 +12,7 @@ if (windowColor.a > 0) {
 cogl_color_out.rgb = mix(uColor, windowColor.rgb, 0.2 * masks.y + 0.8);
 cogl_color_out.a   = windowColor.a * masks.y;
 
-vec2 scaledUV = (cogl_tex_coord_in[0].st - 0.5) * (1.0 + 0.1 * uProgress);
+vec2 scaledUV = (cogl_tex_coord_in[0].st - 0.5) * (1.0 + 0.1 * progress);
 scaledUV /= uScale;
 
 // Add molecule particles.

resources/shaders/energize-b-declarations.glsl

@@ -4,6 +4,7 @@
 #include "common/uniforms.glsl"
 #include "common/noise.glsl"
 #include "common/edgeMask.glsl"
+#include "common/easing.glsl"
 
 uniform vec3 uColor;
 uniform float uScale;
@@ -18,10 +19,10 @@ const float EDGE_FADE    = 50;
 //  result.y: A mask for the streaks which follow the shower particles.
 //  result.z: A mask for the final "atom" particles.
 //  result.w: The opacity of the fading window.
-vec4 getMasks() {
-  float showerProgress = uProgress / SHOWER_TIME;
-  float streakProgress = clamp((uProgress - SHOWER_TIME) / STREAK_TIME, 0, 1);
-  float fadeProgress   = clamp((uProgress - SHOWER_TIME) / (1.0 - SHOWER_TIME), 0, 1);
+vec4 getMasks(float progress) {
+  float showerProgress = progress / SHOWER_TIME;
+  float streakProgress = clamp((progress - SHOWER_TIME) / STREAK_TIME, 0, 1);
+  float fadeProgress   = clamp((progress - SHOWER_TIME) / (1.0 - SHOWER_TIME), 0, 1);
 
   // Gradient from top to bottom.
   float t = cogl_tex_coord_in[0].t;

resources/shaders/energize-b.glsl

@@ -1,4 +1,6 @@
-vec4 masks       = getMasks();
+float progress = easeOutQuad(uProgress);
+
+vec4 masks       = getMasks(progress);
 vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
 
 // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
@@ -11,21 +13,21 @@ cogl_color_out.rgb = mix(uColor, windowColor.rgb, 0.5 * masks.w + 0.5);
 cogl_color_out.a   = windowColor.a * masks.w;
 
 // Add leading shower particles.
-vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7 * uProgress / SHOWER_TIME);
+vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7 * progress / SHOWER_TIME);
 showerUV *= 0.02 * uSize / uScale;
 float shower = pow(simplex2D(showerUV), 10.0);
 cogl_color_out.rgb += uColor * shower * masks.x;
 cogl_color_out.a += shower * masks.x;
 
 // Add trailing streak lines.
-vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -uProgress / SHOWER_TIME);
+vec2 streakUV = cogl_tex_coord_in[0].st + vec2(0, -progress / SHOWER_TIME);
 streakUV *= vec2(0.05 * uSize.x, 0.001 * uSize.y) / uScale;
 float streaks = simplex2DFractal(streakUV) * 0.5;
 cogl_color_out.rgb += uColor * streaks * masks.y;
 cogl_color_out.a += streaks * masks.y;
 
 // Add glimmering atoms.
-vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025 * uProgress / SHOWER_TIME);
+vec2 atomUV = cogl_tex_coord_in[0].st + vec2(0, -0.025 * progress / SHOWER_TIME);
 atomUV *= 0.2 * uSize / uScale;
 float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0);
 cogl_color_out.rgb += uColor * atoms * masks.z;

resources/shaders/fire-declarations.glsl

@@ -5,6 +5,7 @@
 #include "common/compositing.glsl"
 #include "common/edgeMask.glsl"
 #include "common/noise.glsl"
+#include "common/easing.glsl"
 
 uniform bool u3DNoise;
 uniform float uScale;
@@ -50,8 +51,10 @@ vec4 getFireColor(float v) {
 // fadeWidth:     The relative size of the window-hiding gradient in [0..1].
 // edgeFadeWidth: The pixel width of the effect fading range at the edges of the window.
 vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
-  float burnProgress      = clamp(uProgress / hideTime, 0, 1);
-  float afterBurnProgress = clamp((uProgress - hideTime) / (1 - hideTime), 0, 1);
+  float progress = easeOutQuad(uProgress);
+
+  float burnProgress      = clamp(progress / hideTime, 0, 1);
+  float afterBurnProgress = clamp((progress - hideTime) / (1 - hideTime), 0, 1);
 
   // Gradient from top to bottom.
   float t = cogl_tex_coord_in[0].t * (1 - fadeWidth);
@@ -63,7 +66,7 @@ vec2 effectMask(float hideTime, float fadeWidth, float edgeFadeWidth) {
   float effectMask = clamp(t * (1 - windowMask) / burnProgress, 0, 1);
 
   // Fade-out when the window burned down.
-  if (uProgress > hideTime) {
+  if (progress > hideTime) {
     float fade = sqrt(1 - afterBurnProgress * afterBurnProgress);
     effectMask *= mix(1, 1 - t, afterBurnProgress) * fade;
   }

resources/shaders/trex-declarations.glsl

@@ -4,6 +4,7 @@
 #include "common/uniforms.glsl"
 #include "common/noise.glsl"
 #include "common/compositing.glsl"
+#include "common/easing.glsl"
 
 // See assets/README.md for how this texture was created.
 uniform sampler2D uClawTexture;

resources/shaders/trex.glsl

@@ -1,4 +1,4 @@
-float progress = uForOpening ? 1.0 - uProgress : uProgress;
+float progress = uForOpening ? 1.0 - easeOutQuad(uProgress) : easeOutQuad(uProgress);
 
 // Warp the texture coordinates to create a blow-up effect.
 vec2 coords = cogl_tex_coord_in[0].st * 2.0 - 1.0;
@@ -6,6 +6,10 @@ float dist  = length(coords);
 coords      = (coords / dist * pow(dist, 1.0 + uWarpIntensity)) * 0.5 + 0.5;
 coords      = mix(cogl_tex_coord_in[0].st, coords, progress);
 
+// Scale down the window according to the warp.
+float scale = 0.5 * uWarpIntensity * (1.0 - progress);
+coords      = coords * (scale + 1.0) - scale * 0.5;
+
 // Accumulate several random scratches. The color in the scratch map refers to the
 // relative time when the respective part will become invisible. Therefore we can
 // add a value to make the scratch appear later.

resources/shaders/tv-declarations.glsl

@@ -2,6 +2,7 @@
 // "common" directory. Also, the files in the "common" directory are not allowed to
 // include any further files.
 #include "common/uniforms.glsl"
+#include "common/easing.glsl"
 
 uniform vec3 uColor;
 
@@ -9,4 +10,5 @@ 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.
 const float LR_DELAY   = 0.6;   // Delay after which the left/right animation starts.
-const float FF_TIME    = 0.1;   // Relative time for the final fade to transparency.
+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.

resources/shaders/tv.glsl

@@ -1,4 +1,9 @@
-float progress = uForOpening ? 1.0 - uProgress : uProgress;
+float progress = uForOpening ? 1.0 - easeOutQuad(uProgress) : easeOutQuad(uProgress);
+
+// Scale down the window vertically.
+float scale = 1.0 / mix(1.0, SCALING, progress) - 1.0;
+vec2 coords = cogl_tex_coord_in[0].st;
+coords.y    = coords.y * (scale + 1.0) - scale * 0.5;
 
 // All of these are in [0..1] during the different stages of the animation.
 // tb refers to the top-bottom animation.
@@ -9,11 +14,11 @@ float lrProgress = smoothstep(0, 1, clamp((progress - LR_DELAY) / LR_TIME, 0, 1)
 float ffProgress = smoothstep(0, 1, clamp((progress - 1.0 + FF_TIME) / FF_TIME, 0, 1));
 
 // This is a top-center-bottom gradient in [0..1..0]
-float tb = cogl_tex_coord_in[0].t * 2;
+float tb = coords.y * 2;
 tb       = tb < 1 ? tb : 2 - tb;
 
 // This is a left-center-right gradient in [0..1..0]
-float lr = cogl_tex_coord_in[0].s * 2;
+float lr = coords.x * 2;
 lr       = lr < 1 ? lr : 2 - lr;
 
 // Combine the progress values with the gradients to create the alpha masks.
@@ -24,7 +29,7 @@ float ffMask = 1 - smoothstep(0, 1, ffProgress);
 // Assemble the final alpha value.
 float mask = tbMask * lrMask * ffMask;
 
-cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st);
+cogl_color_out = texture2D(uTexture, coords);
 
 // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
 if (cogl_color_out.a > 0) {

resources/shaders/wisps-declarations.glsl

@@ -5,6 +5,7 @@
 #include "common/noise.glsl"
 #include "common/edgeMask.glsl"
 #include "common/compositing.glsl"
+#include "common/easing.glsl"
 
 uniform vec2 uSeed;
 uniform vec3 uColor;
@@ -16,6 +17,7 @@ const float WISPS_SPACING   = 40 + WISPS_RADIUS;
 const int WISPS_LAYERS      = 8;
 const float WISPS_IN_TIME   = 0.5;
 const float WINDOW_OUT_TIME = 1.0;
+const float SCALING         = 0.9;
 
 // Returns a grid of randomly moving points. Each grid cell contains one point which
 // moves on an ellipse.

resources/shaders/wisps.glsl

@@ -1,7 +1,11 @@
-float progress = uForOpening ? 1.0 - uProgress : uProgress;
+float progress = uForOpening ? 1.0 - easeOutQuad(uProgress) : easeOutQuad(uProgress);
+
+// Scale down the window slightly.
+float scale = 1.0 / mix(1.0, SCALING, progress) - 1.0;
+vec2 coords = cogl_tex_coord_in[0].st * (scale + 1.0) - scale * 0.5;
 
 // Get the color of the window.
-cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st);
+cogl_color_out = texture2D(uTexture, coords);
 
 // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
 if (cogl_color_out.a > 0) {