🔧 Use vec2 for size uniform

src/BrokenGlass.js

@@ -265,7 +265,7 @@ if (utils.isInShellProcess()) {
           coords += uEpicenter;
 
           // Retrieve information from the shard texture for our layer.
-          vec2 shardCoords = (coords + uSeed) * vec2(uSizeX, uSizeY) / uShardScale / 500.0;
+          vec2 shardCoords = (coords + uSeed) * uSize / uShardScale / 500.0;
           vec2 shardMap = texture2D(uShardTexture, shardCoords).rg;
 
           // The green channel contains a random value in [0..1] for each shard. We

src/EnergizeA.js

@@ -234,12 +234,12 @@ if (utils.isInShellProcess()) {
 
         // Add molecule particles.
         vec2 uv = scaledUV + vec2(0, 0.1*uTime);
-        uv *= 0.010598 * vec2(0.5*uSizeX, uSizeY);
+        uv *= 0.010598 * vec2(0.5*uSize.x, uSize.y);
         float particles = 0.2 * pow((simplex3D(vec3(uv, 0.0*uTime))), 3.0);
 
         // Add more molecule particles.
         for (int i=1; i<=3;++i) {
-          vec2 uv = scaledUV * 0.12154 / pow(1.5, i) * vec2(uSizeX, uSizeY);
+          vec2 uv = scaledUV * 0.12154 / pow(1.5, i) * uSize;
           float atoms = simplex3D(vec3(uv, 2.0*uTime/i));
           particles += 0.5 * pow(0.2 * (1.0 / (1.0 - atoms)-1.0), 2);
         }

src/EnergizeB.js

@@ -248,21 +248,21 @@ if (utils.isInShellProcess()) {
 
         // Add leading shower particles.
         vec2 showerUV = cogl_tex_coord_in[0].st + vec2(0, -0.7*uProgress/SHOWER_TIME);
-        showerUV *= 0.02 * vec2(uSizeX, uSizeY) / uScale;
+        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);
-        streakUV *= vec2(0.05 * uSizeX, 0.001 * uSizeY) / uScale;
+        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);
-        atomUV *= 0.2 * vec2(uSizeX, uSizeY) / uScale;
+        atomUV *= 0.2 * uSize / uScale;
         float atoms = pow((simplex3D(vec3(atomUV, uTime))), 5.0);
         cogl_color_out.rgb += uColor * atoms * masks.z;
         cogl_color_out.a += atoms * masks.z;

src/Fire.js

@@ -382,7 +382,7 @@ if (utils.isInShellProcess()) {
 
       const code = `
         // Get a noise value which moves vertically in time.
-        vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY) / vec2(400, 600) / uScale;
+        vec2 uv = cogl_tex_coord_in[0].st * uSize / vec2(400, 600) / uScale;
         uv.y += uTime * uMovementSpeed;
 
         float noise = u3DNoise ? simplex3DFractal(vec3(uv*4.0, uTime*uMovementSpeed*1.5))

src/Hexagon.js

@@ -258,7 +258,7 @@ if (utils.isInShellProcess()) {
         float glowProgress = smoothstep(0, 1, clamp(progress / 0.5, 0, 1));
         float tileProgress = smoothstep(0, 1, clamp((progress - 0.5) / 0.5, 0, 1));
 
-        vec2 texScale = 0.1 * vec2(uSizeX, uSizeY) / uScale;
+        vec2 texScale = 0.1 * uSize / uScale;
         vec4 hex = getHexagons(cogl_tex_coord_in[0].st * texScale);
 
         if (tileProgress > hex.z) {

src/Matrix.js

@@ -224,7 +224,7 @@ if (utils.isInShellProcess()) {
 
         // This returns a flickering grid of random letters.
         float getText(vec2 fragCoord) {
-          vec2 pixelCoords = fragCoord * vec2(uSizeX, uSizeY);
+          vec2 pixelCoords = fragCoord * uSize;
           vec2 uv = mod(pixelCoords.xy, uLetterSize)/uLetterSize;
           vec2 block = pixelCoords/uLetterSize - uv;
 
@@ -239,7 +239,7 @@ if (utils.isInShellProcess()) {
         // to one below each drop and to zero above it. This second value is used for fading
         // the window texture. 
         vec2 getRain(vec2 fragCoord) {
-          float column = cogl_tex_coord_in[0].x * uSizeX;
+          float column = cogl_tex_coord_in[0].x * uSize.x;
           column -= mod(column, uLetterSize);
 
           float delay = fract(sin(column)*78.233) * mix(0.0, 1.0, uRandomness);
@@ -248,7 +248,7 @@ if (utils.isInShellProcess()) {
           float distToDrop  = (uProgress*2-delay)*speed - cogl_tex_coord_in[0].y;
           
           float rainAlpha   = distToDrop >= 0 ? exp(-distToDrop/TRAIL_LENGTH) : 0;
-          float windowAlpha = 1 - clamp(uSizeY*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
+          float windowAlpha = 1 - clamp(uSize.y*distToDrop, 0, FADE_WIDTH) / FADE_WIDTH;
           
           // Fade at window borders.
           rainAlpha *= getAbsoluteEdgeMask(EDGE_FADE);

src/SnapOfDisintegration.js

@@ -259,7 +259,7 @@ if (utils.isInShellProcess()) {
         
           // Now check wether there is actually something in the current dust layer at
           // the coords position.
-          vec2 dustCoords = (coords + uSeed) * vec2(uSizeX, uSizeY) / uDustScale / 100.0;
+          vec2 dustCoords = (coords + uSeed) * uSize / uDustScale / 100.0;
           vec2 dustMap    = texture2D(uDustTexture, dustCoords).rg;
           float dustGroup = floor(dustMap.g * DUST_LAYERS * 0.999);
 

src/TRexAttack.js

@@ -219,7 +219,7 @@ if (utils.isInShellProcess()) {
 
           // Shift coordinates by a random offset and make sure the have a 1:1 aspect ratio.
           vec2 coords = texCoords + hash22(seed);
-          coords *= uSizeX < uSizeY ? vec2(1.0, 1.0 * uSizeY / uSizeX) : vec2(1.0 * uSizeX / uSizeY, 1.0);
+          coords *= uSize.x < uSize.y ? vec2(1.0, 1.0 * uSize.y / uSize.x) : vec2(1.0 * uSize.x / uSize.y, 1.0);
 
           // Apply global scale.
           coords *= gridScale;

src/Wisps.js

@@ -196,7 +196,7 @@ if (utils.isInShellProcess()) {
         float 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)) * vec2(uSizeX, uSizeY);
+          vec2 coords = (texCoords + hash22(seed)) * uSize;
 
           // Apply global scale.
           coords /= gridSize;
@@ -258,7 +258,7 @@ if (utils.isInShellProcess()) {
         float windowOut = smoothstep(0, 1, clamp(progress/WINDOW_OUT_TIME, 0, 1));
 
         // Use a noise function to dissolve the window.
-        float noise = smoothstep(1.0, 0.0, abs(2.0 * simplex2DFractal(uv * vec2(uSizeX, uSizeY) / 250) - 1.0));
+        float noise = smoothstep(1.0, 0.0, abs(2.0 * simplex2DFractal(uv * uSize / 250) - 1.0));
         float windowMask = 1.0 - (windowOut < 0.5 ? mix(0.0, noise, windowOut * 2.0) : mix(noise, 1.0, windowOut * 2.0 - 1.0));
         cogl_color_out.a *= windowMask * mask;
 

src/shaderSnippets.js

@@ -21,15 +21,13 @@
 // uTexture:    Contains the texture of the window.
 // uProgress:   A value which transitions from 0 to 1 during the entire animation.
 // uTime:       A steadily increasing value in seconds.
-// uSizeX:      The horizontal size of uTexture in pixels.
-// uSizeY:      The vertical size of uTexture in pixels.
+// uSize:       The size of uTexture in pixels.
 function standardUniforms() {
   return `
   uniform sampler2D uTexture;
   uniform float     uProgress;
   uniform float     uTime;
-  uniform float     uSizeX;
-  uniform float     uSizeY;
+  uniform vec2      uSize;
   `;
 }
 
@@ -78,8 +76,8 @@ function edgeMask() {
   }
 
   float getAbsoluteEdgeMask(float fadePixels) {
-    vec2 uv = cogl_tex_coord_in[0].st * vec2(uSizeX, uSizeY);
-    return getEdgeMask(uv, vec2(uSizeX, uSizeY), fadePixels);
+    vec2 uv = cogl_tex_coord_in[0].st * uSize;
+    return getEdgeMask(uv, uSize, fadePixels);
   }
   
   float getRelativeEdgeMask(float fadeAmount) {