[framework] reduce ink sparkle uniform count. (flutter#133897)

Fixes flutter#133325

Due to the number of uniforms present, the ink_sparkle shader can't run without post processing (on all target platforms) that the impellerc offline compiler doesn't perform. However, we can't just move the uniforms into a uniform buffer object (UBO) because the Skia backend doesn't support it.

Rather than work around this in the compiler, we can reduce the uniform count by 1) packing four floats into a single vec4 2) removing a uniform for what is effectively a constant.

This should have no visible effects, and if any scubas fail it means I did this wrong �

Author: Jonah Williams

packages/flutter/lib/src/material/ink_sparkle.dart

@@ -326,50 +326,42 @@ class InkSparkle extends InteractiveInkFeature {
       ..setFloat(1, _color.green / 255.0)
       ..setFloat(2, _color.blue / 255.0)
       ..setFloat(3, _color.alpha / 255.0)
-      // uAlpha
+      // Composite 1 (u_alpha, u_sparkle_alpha, u_blur, u_radius_scale)
       ..setFloat(4, _alpha.value)
-      // uSparkleColor
-      ..setFloat(5, 1.0)
+      ..setFloat(5, _sparkleAlpha.value)
       ..setFloat(6, 1.0)
-      ..setFloat(7, 1.0)
-      ..setFloat(8, 1.0)
-      // uSparkleAlpha
-      ..setFloat(9, _sparkleAlpha.value)
-      // uBlur
-      ..setFloat(10, 1.0)
+      ..setFloat(7, _radiusScale.value)
       // uCenter
-      ..setFloat(11, _center.value.x)
-      ..setFloat(12, _center.value.y)
-      // uRadiusScale
-      ..setFloat(13, _radiusScale.value)
+      ..setFloat(8, _center.value.x)
+      ..setFloat(9, _center.value.y)
       // uMaxRadius
-      ..setFloat(14, _targetRadius)
+      ..setFloat(10, _targetRadius)
       // uResolutionScale
-      ..setFloat(15, 1.0 / _width)
-      ..setFloat(16, 1.0 / _height)
+      ..setFloat(11, 1.0 / _width)
+      ..setFloat(12, 1.0 / _height)
       // uNoiseScale
-      ..setFloat(17, _noiseDensity / _width)
-      ..setFloat(18, _noiseDensity / _height)
+      ..setFloat(13, _noiseDensity / _width)
+      ..setFloat(14, _noiseDensity / _height)
       // uNoisePhase
-      ..setFloat(19, noisePhase / 1000.0)
+      ..setFloat(15, noisePhase / 1000.0)
       // uCircle1
-      ..setFloat(20, turbulenceScale * 0.5 + (turbulencePhase * 0.01 * math.cos(turbulenceScale * 0.55)))
-      ..setFloat(21, turbulenceScale * 0.5 + (turbulencePhase * 0.01 * math.sin(turbulenceScale * 0.55)))
+      ..setFloat(16, turbulenceScale * 0.5 + (turbulencePhase * 0.01 * math.cos(turbulenceScale * 0.55)))
+      ..setFloat(17, turbulenceScale * 0.5 + (turbulencePhase * 0.01 * math.sin(turbulenceScale * 0.55)))
       // uCircle2
-      ..setFloat(22, turbulenceScale * 0.2 + (turbulencePhase * -0.0066 * math.cos(turbulenceScale * 0.45)))
-      ..setFloat(23, turbulenceScale * 0.2 + (turbulencePhase * -0.0066 * math.sin(turbulenceScale * 0.45)))
+      ..setFloat(18, turbulenceScale * 0.2 + (turbulencePhase * -0.0066 * math.cos(turbulenceScale * 0.45)))
+      ..setFloat(19, turbulenceScale * 0.2 + (turbulencePhase * -0.0066 * math.sin(turbulenceScale * 0.45)))
       // uCircle3
-      ..setFloat(24, turbulenceScale + (turbulencePhase * -0.0066 * math.cos(turbulenceScale * 0.35)))
-      ..setFloat(25, turbulenceScale + (turbulencePhase * -0.0066 * math.sin(turbulenceScale * 0.35)))
+      ..setFloat(20, turbulenceScale + (turbulencePhase * -0.0066 * math.cos(turbulenceScale * 0.35)))
+      ..setFloat(21, turbulenceScale + (turbulencePhase * -0.0066 * math.sin(turbulenceScale * 0.35)))
       // uRotation1
-      ..setFloat(26, math.cos(rotation1))
-      ..setFloat(27, math.sin(rotation1))
+      ..setFloat(22, math.cos(rotation1))
+      ..setFloat(23, math.sin(rotation1))
       // uRotation2
-      ..setFloat(28, math.cos(rotation2))
-      ..setFloat(29, math.sin(rotation2))
+      ..setFloat(24, math.cos(rotation2))
+      ..setFloat(25, math.sin(rotation2))
       // uRotation3
-      ..setFloat(30, math.cos(rotation3))
-      ..setFloat(31, math.sin(rotation3));
+      ..setFloat(26, math.cos(rotation3))
+      ..setFloat(27, math.sin(rotation3));
   }
 
   /// Transforms the canvas for an ink feature to be painted on the [canvas].

packages/flutter/lib/src/material/shaders/ink_sparkle.frag

@@ -11,22 +11,19 @@ precision highp float;
 // TODO(antrob): Put these in a more logical order (e.g. separate consts vs varying, etc)
 
 layout(location = 0) uniform vec4 u_color;
-layout(location = 1) uniform float u_alpha;
-layout(location = 2) uniform vec4 u_sparkle_color;
-layout(location = 3) uniform float u_sparkle_alpha;
-layout(location = 4) uniform float u_blur;
-layout(location = 5) uniform vec2 u_center;
-layout(location = 6) uniform float u_radius_scale;
-layout(location = 7) uniform float u_max_radius;
-layout(location = 8) uniform vec2 u_resolution_scale;
-layout(location = 9) uniform vec2 u_noise_scale;
-layout(location = 10) uniform float u_noise_phase;
-layout(location = 11) uniform vec2 u_circle1;
-layout(location = 12) uniform vec2 u_circle2;
-layout(location = 13) uniform vec2 u_circle3;
-layout(location = 14) uniform vec2 u_rotation1;
-layout(location = 15) uniform vec2 u_rotation2;
-layout(location = 16) uniform vec2 u_rotation3;
+// u_alpha, u_sparkle_alpha, u_blur, u_radius_scale
+layout(location = 1) uniform vec4 u_composite_1;
+layout(location = 2) uniform vec2 u_center;
+layout(location = 3) uniform float u_max_radius;
+layout(location = 4) uniform vec2 u_resolution_scale;
+layout(location = 5) uniform vec2 u_noise_scale;
+layout(location = 6) uniform float u_noise_phase;
+layout(location = 7) uniform vec2 u_circle1;
+layout(location = 8) uniform vec2 u_circle2;
+layout(location = 9) uniform vec2 u_circle3;
+layout(location = 10) uniform vec2 u_rotation1;
+layout(location = 11) uniform vec2 u_rotation2;
+layout(location = 12) uniform vec2 u_rotation3;
 
 layout(location = 0) out vec4 fragColor;
 
@@ -36,6 +33,11 @@ const float PI_ROTATE_LEFT = PI * -0.0078125;
 const float ONE_THIRD = 1./3.;
 const vec2 TURBULENCE_SCALE = vec2(0.8);
 
+float u_alpha = u_composite_1.x;
+float u_sparkle_alpha = u_composite_1.y;
+float u_blur = u_composite_1.z;
+float u_radius_scale = u_composite_1.w;
+
 float triangle_noise(highp vec2 n) {
   n = fract(n * vec2(5.3987, 5.4421));
   n += dot(n.yx, n.xy + vec2(21.5351, 14.3137));
@@ -99,6 +101,5 @@ void main() {
   float sparkle = sparkle(density_uv, u_noise_phase) * ring * turbulence * u_sparkle_alpha;
   float wave_alpha = soft_circle(p, u_center, radius, u_blur) * u_alpha * u_color.a;
   vec4 wave_color = vec4(u_color.rgb * wave_alpha, wave_alpha);
-  vec4 sparkle_color = vec4(u_sparkle_color.rgb * u_sparkle_color.a, u_sparkle_color.a);
-  fragColor = mix(wave_color, sparkle_color, sparkle);
+  fragColor = mix(wave_color, vec4(1.0), sparkle);
 }