🔧 Make shaders compatible with GLES

resources/shaders/broken-glass.frag

@@ -31,7 +31,7 @@ void main() {
   float progress = uForOpening ? 1.0 - uProgress : uProgress;
 
   // Draw the individual shard layers.
-  for (float i = 0; i < SHARD_LAYERS; ++i) {
+  for (float i = 0.0; i < SHARD_LAYERS; ++i) {
 
     // To enable drawing shards outside of the window bounds, the actor was scaled
     // by ACTOR_SCALE. Here we scale and move the texture coordinates so that the
@@ -51,8 +51,8 @@ void main() {
 
     // Move down each layer a bit.
     float gravity =
-      (uForOpening ? -1.0 : 1.0) * uGravity * 0.1 * (i + 1) * progress * progress;
+      (uForOpening ? -1.0 : 1.0) * uGravity * 0.1 * (i + 1.0) * progress * progress;
-    coords += vec2(0, gravity);
+    coords += vec2(0.0, gravity);
 
     // Restore correct position.
     coords += uEpicenter;
@@ -66,10 +66,10 @@ void main() {
     // the bin of the current shard.
     float shardGroup = floor(shardMap.g * SHARD_LAYERS * 0.999);
 
-    if (shardGroup == i && (shardMap.x - pow(progress + 0.1, 2)) > 0.0) {
+    if (shardGroup == i && (shardMap.x - pow(progress + 0.1, 2.0)) > 0.0) {
       oColor = getInputColor(coords);
     }
   }
 
   setOutputColor(oColor);
-}
+}

resources/shaders/common.glsl

@@ -99,7 +99,7 @@ uniform vec2 uSize;
 uniform float uPadding;
 
 // On GNOME, we set iTexCoord to be an alias for the cogl variables.
-vec2 iTexCoord = cogl_tex_coord_in[0].st;
+#define iTexCoord vec2(cogl_tex_coord_in[0])
 
 // Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
 vec4 getInputColor(vec2 coords) {

resources/shaders/incinerate.frag

@@ -107,12 +107,14 @@ void main() {
   if ((!uForOpening && gradient > hideThreshold) ||
       (uForOpening && gradient < hideThreshold)) {
 
-    //  We add some distortion in the scorch zone
+    //  We add some distortion in the scorch zone. This is only possible if using GLES.
     vec2 distort = vec2(0.0);
 
+#ifndef GL_ES
     if (scorchRange.x < gradient && gradient < scorchRange.y) {
       distort = vec2(dFdx(gradient), dFdy(gradient)) * scorchMask * 5.0;
     }
+#endif
 
     oColor = getInputColor(iTexCoord + distort);
   }
@@ -154,4 +156,4 @@ void main() {
   }
 
   setOutputColor(oColor);
-}
+}

resources/shaders/matrix.frag

@@ -54,7 +54,7 @@ vec2 getRain(vec2 fragCoord) {
   float delay = fract(sin(column) * 78.233) * mix(0.0, 1.0, uRandomness);
   float speed = fract(cos(column) * 12.989) * mix(0.0, 0.3, uRandomness) + 1.5;
 
-  float distToDrop = (uProgress * 2 - delay) * speed - iTexCoord.y;
+  float distToDrop = (uProgress * 2.0 - delay) * speed - iTexCoord.y;
 
   float rainAlpha   = distToDrop >= 0.0 ? exp(-distToDrop / TRAIL_LENGTH) : 0.0;
   float windowAlpha = 1.0 - clamp(uSize.y * distToDrop, 0.0, FADE_WIDTH) / FADE_WIDTH;
@@ -91,7 +91,7 @@ void main() {
 
   // This is used to fade out the remaining trails in the end.
   float finalFade =
-    1 -
+    1.0 -
     clamp((uProgress - FINAL_FADE_START_TIME) / (1.0 - FINAL_FADE_START_TIME), 0.0, 1.0);
   float rainAlpha = finalFade * rainMask.x;
 
@@ -106,4 +106,4 @@ void main() {
   // oColor = vec4(vec3(rainMask.y), 1);
 
   setOutputColor(oColor);
-}
+}

resources/shaders/portal.frag

@@ -29,16 +29,16 @@ const float WINDOW_TILT            = -1.0;
 
 // Make sure that the portal and window open / close animations are quick even if the
 // duration is longer.
-float PORTAL_OPEN_TIME  = 0.4 / uDuration;
+float PORTAL_OPEN_TIME  = 0.4;
-float PORTAL_CLOSE_TIME = 0.4 / uDuration;
+float PORTAL_CLOSE_TIME = 0.4;
-float WINDOW_OPEN_TIME  = 0.35 / uDuration;
+float WINDOW_OPEN_TIME  = 0.35;
 
 // This will distort the given coordinate to achieve the wobble effect of the portal when
 // the window passes through. The wobble happens around the point where the window appears
 // or disappears (which is controlled by WINDOW_OPEN_TIME) and takes
 // PORTAL_WOBBLE_TIME.
 vec2 getPortalWobble(vec2 coords) {
-  float progress = (uForOpening ? (1.0 - uProgress) : uProgress) / WINDOW_OPEN_TIME;
+  float progress = (uForOpening ? (1.0 - uProgress) : uProgress) / WINDOW_OPEN_TIME * uDuration;
   progress       = clamp(1.0 - abs((progress - 1.0) / PORTAL_WOBBLE_TIME), 0.0, 1.0);
   progress       = easeInBack(progress, 1.7);
   float dist     = length(coords);
@@ -51,11 +51,13 @@ vec2 getPortalWobble(vec2 coords) {
 // PORTAL_CLOSE_TIME) and then decrease again.
 float getPortalScale() {
   float scale = 1.0;
-  if (uProgress < PORTAL_OPEN_TIME) {
+  float closeTime = PORTAL_CLOSE_TIME / uDuration;
-    scale = easeOutBack(uProgress / PORTAL_OPEN_TIME, 1.5);
+  float openTime = PORTAL_OPEN_TIME / uDuration;
-  } else if (uProgress > 1.0 - PORTAL_CLOSE_TIME) {
+  if (uProgress < openTime) {
+    scale = easeOutBack(uProgress / openTime, 1.5);
+  } else if (uProgress > 1.0 - closeTime) {
     scale =
-      easeOutBack(1.0 - (uProgress - 1.0 + PORTAL_CLOSE_TIME) / PORTAL_CLOSE_TIME, 1.5);
+      easeOutBack(1.0 - (uProgress - 1.0 + closeTime) / closeTime, 1.5);
   }
 
   return scale;
@@ -165,7 +167,7 @@ vec4 getPortalColor() {
 // window). The fraction of the animation time take for the window animation is defined by
 // WINDOW_OPEN_TIME.
 vec4 getWindowColor() {
-  float progress = (uForOpening ? (1.0 - uProgress) : uProgress) / WINDOW_OPEN_TIME;
+  float progress = (uForOpening ? (1.0 - uProgress) : uProgress) / WINDOW_OPEN_TIME * uDuration;
 
   // Add some elastic easing to make the effect more dynamic.
   progress = easeInBack(clamp(progress, 0.0, 1.0), 1.2);
@@ -203,4 +205,4 @@ void main() {
   // These can be useful for understanding how this works.
   // setOutputColor(portal);
   // setOutputColor(window);
-}
+}

resources/shaders/snap.frag

@@ -37,7 +37,7 @@ void main() {
 
   vec4 oColor = vec4(0.0);
 
-  for (float i = 0; i < DUST_LAYERS; ++i) {
+  for (float i = 0.0; i < DUST_LAYERS; ++i) {
 
     // Create a random direction.
     float factor   = DUST_LAYERS == 1.0 ? 0.0 : i / (DUST_LAYERS - 1.0);
@@ -84,7 +84,7 @@ void main() {
       windowColor.rgb = mix(windowColor.rgb, dustColor, progress);
 
       // Dissolve and blend the layers.
-      if (dustMap.x - progress > 0) {
+      if (dustMap.x - progress > 0.0) {
         oColor = windowColor;
       }
     }
@@ -94,4 +94,4 @@ void main() {
   // oColor = vec4(progress, 0, 0, 0);
 
   setOutputColor(oColor);
-}
+}

resources/shaders/trex.frag

@@ -23,9 +23,12 @@ uniform float uNumClaws;
 uniform float uWarpIntensity;
 
 const float FLASH_INTENSITY = 0.1;
-const float MAX_SPAWN_TIME =
+
-  0.6;  // Scratches will only start in the first half of the animation.
+// Scratches will only start in the first half of the animation.
-const float FF_TIME = 0.6;  // Relative time for the final fade to transparency.
+const float MAX_SPAWN_TIME = 0.6;
+
+// Relative time for the final fade to transparency.
+const float FF_TIME = 0.6;
 
 // This method generates a grid of randomly rotated, slightly shifted and scaled
 // UV squares. It returns the texture coords of the UV square at the given actor
@@ -82,15 +85,20 @@ void main() {
   // relative time when the respective part will become invisible. Therefore we can
   // add a value to make the scratch appear later.
   float scratchMap = 1.0;
-  for (int i = 0; i < uNumClaws; ++i) {
+  for (float i = 0.0; i < uNumClaws; ++i) {
-    vec2 uv     = getClawUV(coords, 1.0 / uClawSize, uSeed * (i + 1));
+    vec2 uv     = getClawUV(coords, 1.0 / uClawSize, uSeed * (i + 1.0));
     float delay = i / uNumClaws * MAX_SPAWN_TIME;
     scratchMap  = min(scratchMap, clamp(texture2D(uClawTexture, uv).r + delay, 0.0, 1.0));
   }
 
   // Get the window texture. We shift the texture lookup by the local derivative of
-  // the claw texture in order to mimic some folding distortion.
+  // the claw texture in order to mimic some folding distortion. This is only possible if not using GLES.
-  vec2 offset = vec2(dFdx(scratchMap), dFdy(scratchMap)) * progress * 0.5;
+  vec2 offset = vec2(0.0);
+  
+  #ifndef GL_ES
+    offset = vec2(dFdx(scratchMap), dFdy(scratchMap)) * progress * 0.5;
+  #endif
+
   vec4 oColor = getInputColor(coords + offset);
 
   // Add colorful flashes.
@@ -118,4 +126,4 @@ void main() {
   // oColor = vec4(vec3(scratchMap), 1);
 
   setOutputColor(oColor);
-}
+}