@solidtv/renderer 1.5.6 → 1.6.0

package/dist/src/core/shaders/canvas/utils/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../../src/core/shaders/canvas/utils/render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../../../../src/core/shaders/canvas/utils/render.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/webgl/Border.js

@@ -129,24 +129,25 @@ export const Border = {
       float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - edgeWidth);
       float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - edgeWidth);
 
-      if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
-        resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
-        resultColor = mix(resultColor, color, innerAlpha);
-        gl_FragColor = resultColor * u_alpha;
-        return;
-      }
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
       float nodeDist = box(boxUv, v_halfDimensions - edgeWidth);
       float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
 
       float borderDist = max(-innerDist, outerDist);
       float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
-      resultColor = mix(resultColor, color, nodeAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
 
-      gl_FragColor = resultColor * u_alpha;
+      // Branchless gap select -- Mali 400 serializes uniform branches, so both
+      // composites are computed and mix()-selected on hasGap instead.
+      vec4 resNoGap = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
+      resNoGap = mix(resNoGap, color, innerAlpha);
+
+      vec4 resGap = mix(resultColor, color, nodeAlpha);
+      resGap = mix(resGap, u_borderColor, borderAlpha * u_borderColor.a);
+
+      float hasGap = step(0.0001, abs(u_borderGap));
+      gl_FragColor = mix(resNoGap, resGap, hasGap) * u_alpha;
     }
   `,
 };

package/dist/src/core/shaders/webgl/Border.js.map

@@ -1 +1 @@
-{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAIxC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,CAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,GAAa,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAe,CAAC,CAAC;IAC/D,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DT;CACF,CAAC"}
+{"version":3,"file":"Border.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/Border.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AAIxC,MAAM,CAAC,MAAM,MAAM,GAAiC;IAClD,KAAK,EAAE,cAAc,CAAC,KAAK;IAC3B,MAAM,CAAC,IAAI;QACT,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,CAAS,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAK,CAAC,CAAC;QACrD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,GAAa,CAAC,CAAC;QACzD,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,KAAe,CAAC,CAAC;IAC/D,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DT;CACF,CAAC"}

package/dist/src/core/shaders/webgl/HolePunch.js

@@ -36,11 +36,18 @@ export const HolePunch = {
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
       vec2 p = (v_textureCoords.xy * u_dimensions.xy - u_pos) - u_size;
-      vec4 r = u_radius;
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      p = abs(p) - u_size + r.x;
-      float dist = min(max(p.x, p.y), 0.0) + length(max(p, 0.0)) - r.x + 2.0;
+
+      // Branchless radius selection based on quadrant
+      // x: TL, y: TR, z: BR, w: BL
+      vec2 stepVal = step(vec2(0.0), p);
+      float r = mix(
+        mix(u_radius.x, u_radius.y, stepVal.x),
+        mix(u_radius.w, u_radius.z, stepVal.x),
+        stepVal.y
+      );
+
+      p = abs(p) - u_size + r;
+      float dist = min(max(p.x, p.y), 0.0) + length(max(p, 0.0)) - r + 2.0;
       float roundedAlpha = 1.0 - smoothstep(0.0, u_pixelRatio, dist);
       gl_FragColor = mix(color, vec4(0.0), min(color.a, roundedAlpha));
     }

package/dist/src/core/shaders/webgl/HolePunch.js.map

@@ -1 +1 @@
-{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/HolePunch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAChE,CAAC;IACJ,CAAC;IACD,eAAe,CAAC,KAAqB;QACnC,OAAO,eAAe,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCT;CACF,CAAC"}
+{"version":3,"file":"HolePunch.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/HolePunch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,CAAC,MAAM,SAAS,GAAoC;IACxD,KAAK,EAAE,iBAAiB,CAAC,KAAK;IAC9B,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC1C,0DAA0D;QAC1D,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAEvD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAChE,CAAC;IACJ,CAAC;IACD,eAAe,CAAC,KAAqB;QACnC,OAAO,eAAe,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IACtD,CAAC;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCT;CACF,CAAC"}

package/dist/src/core/shaders/webgl/LinearGradient.js

@@ -1,5 +1,6 @@
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { LinearGradientTemplate, } from '../templates/LinearGradientTemplate.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 export const LinearGradient = {
     props: LinearGradientTemplate.props,
     update(node) {
@@ -45,7 +46,6 @@ export const LinearGradient = {
     # endif
 
     #define MAX_STOPS ${props.colors.length}
-    #define LAST_STOP ${props.colors.length - 1}
 
     uniform float u_alpha;
 
@@ -61,24 +61,8 @@ export const LinearGradient = {
 
     vec4 getGradientColor(float dist) {
       dist = clamp(dist, 0.0, 1.0);
-
-      if(dist <= u_stops[0]) {
-        return u_colors[0];
-      }
-
-      if(dist >= u_stops[LAST_STOP]) {
-        return u_colors[LAST_STOP];
-      }
-
-      for(int i = 0; i < LAST_STOP; i++) {
-        float left = u_stops[i];
-        float right = u_stops[i + 1];
-        if(dist >= left && dist <= right) {
-          float lDist = smoothstep(left, right, dist);
-          return mix(u_colors[i], u_colors[i + 1], lDist);
-        }
-      }
-      return u_colors[LAST_STOP];
+      ${genGradientColors(props.colors.length)}
+      return colorOut;
     }
 
     void main() {

package/dist/src/core/shaders/webgl/LinearGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/LinearGradient.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/webgl/RadialGradient.js

@@ -1,5 +1,6 @@
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { RadialGradientTemplate, } from '../templates/RadialGradientTemplate.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 export const RadialGradient = {
     props: RadialGradientTemplate.props,
     update(node) {
@@ -26,7 +27,6 @@ export const RadialGradient = {
       # endif
 
       #define MAX_STOPS ${props.colors.length}
-      #define LAST_STOP ${props.colors.length - 1}
 
       uniform float u_alpha;
       uniform vec2 u_dimensions;
@@ -45,25 +45,8 @@ export const RadialGradient = {
 
       vec4 getGradientColor(float dist) {
         dist = clamp(dist, 0.0, 1.0);
-
-        if(dist <= u_stops[0]) {
-          return u_colors[0];
-        }
-
-        if(dist >= u_stops[LAST_STOP]) {
-          return u_colors[LAST_STOP];
-        }
-
-        for(int i = 0; i < LAST_STOP; i++) {
-          float left = u_stops[i];
-          float right = u_stops[i + 1];
-          if(dist >= left && dist <= right) {
-            float lDist = smoothstep(left, right, dist);
-            return mix(u_colors[i], u_colors[i + 1], lDist);
-          }
-        }
-
-        return u_colors[LAST_STOP];
+        ${genGradientColors(props.colors.length)}
+        return colorOut;
       }
 
       void main() {

package/dist/src/core/shaders/webgl/RadialGradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAIhD,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CACZ,cAAc,EACd,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EACvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CACxB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;0BAOe,KAAK,CAAC,MAAM,CAAC,MAAM;0BACnB,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiD5C,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EACL,sBAAsB,GAEvB,MAAM,wCAAwC,CAAC;AAGhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,MAAM,CAAC,MAAM,cAAc,GAAyC;IAClE,KAAK,EAAE,sBAAsB,CAAC,KAAK;IACnC,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,CACZ,cAAc,EACd,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EACvB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CACxB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,SAAS,EAAE,IAAI,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAa,EAAE,CAAC;QAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,IAAI,GAAG,2BAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClD,CAAC;QACD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;IACxD,CAAC;IACD,eAAe,CAAC,KAA0B;QACxC,OAAO,UAAU,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IACD,QAAQ,CAAC,QAAuB,EAAE,KAA0B;QAC1D,OAAO;;;;;;;0BAOe,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;;;;UAmBnC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;;;;;;;;;;;;;KAa3C,CAAC;IACJ,CAAC;CACF,CAAC"}

package/dist/src/core/shaders/webgl/RadialProgress.js

@@ -1,5 +1,6 @@
 import { getNormalizedRgbaComponents } from '../../lib/utils.js';
 import { RadialProgressTemplate, } from '../templates/RadialProgressTemplate.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 export const RadialProgress = {
     props: RadialProgressTemplate.props,
     time: true,
@@ -38,7 +39,6 @@ export const RadialProgress = {
       # endif
 
       #define MAX_STOPS ${maxStops}
-      #define LAST_STOP ${maxStops - 1}
       #define CAP_ROUND ${props.cap}
       #define HAS_TRACK ${props.trackColor !== 0 ? 1 : 0}
 
@@ -68,22 +68,8 @@ export const RadialProgress = {
 
       vec4 getGradientColor(float dist) {
         dist = clamp(dist, 0.0, 1.0);
-
-        if (dist <= u_stops[0]) {
-          return u_colors[0];
-        }
-        if (dist >= u_stops[LAST_STOP]) {
-          return u_colors[LAST_STOP];
-        }
-        for (int i = 0; i < LAST_STOP; i++) {
-          float left = u_stops[i];
-          float right = u_stops[i + 1];
-          if (dist >= left && dist <= right) {
-            float lDist = smoothstep(left, right, dist);
-            return mix(u_colors[i], u_colors[i + 1], lDist);
-          }
-        }
-        return u_colors[LAST_STOP];
+        ${genGradientColors(maxStops)}
+        return colorOut;
       }
 
       // Coverage of a disc centered at \`c\` with radius \`r\` at pixel \`p\` (with 1px AA)
@@ -97,9 +83,13 @@ export const RadialProgress = {
         // Effective progress: when u_duration > 0 the shader self-animates from
         // u_time, otherwise we use the static u_progress prop. countdown == 1
         // drains (1 -> 0), countdown == 0 fills (0 -> 1).
-        float cyclePos = u_duration > 0.0 ? fract(u_time / u_duration) : 0.0;
-        float animProgress = u_countdown > 0.5 ? 1.0 - cyclePos : cyclePos;
-        float progress = u_duration > 0.0 ? animProgress : u_progress;
+        // Branchless (Mali 400 serializes uniform branches): the mix()-guarded
+        // denominator keeps the division finite when u_duration == 0 -- a
+        // max()-clamped epsilon would overflow fp16 mediump to Inf/NaN.
+        float hasDuration = step(0.0001, u_duration);
+        float cyclePos = fract(u_time / mix(1.0, u_duration, hasDuration)) * hasDuration;
+        float animProgress = mix(cyclePos, 1.0 - cyclePos, step(0.5, u_countdown));
+        float progress = mix(u_progress, animProgress, hasDuration);
 
         vec2 p = v_nodeCoords.xy * u_dimensions - u_center;
         float dist = length(p);
@@ -116,7 +106,7 @@ export const RadialProgress = {
 
         // Filled arc coverage (1 if in filled arc, else 0). When progress >= 1 the
         // whole ring is filled regardless of \`t\` -- guards against the mod() seam.
-        float arcCoverage = progress >= 1.0 ? 1.0 : step(t, progress);
+        float arcCoverage = max(step(1.0, progress), step(t, progress));
         float fillCoverage = ringCoverage * arcCoverage;
 
         #if CAP_ROUND
@@ -132,8 +122,10 @@ export const RadialProgress = {
         #endif
 
         // Sample gradient. Normalize \`t\` to the *filled* portion so the gradient
-        // spans the visible arc end-to-end regardless of progress.
-        float gradT = progress > 0.0 ? clamp(t / progress, 0.0, 1.0) : 0.0;
+        // spans the visible arc end-to-end regardless of progress. mix()-guarded
+        // denominator: safe at progress == 0 without fp16 overflow.
+        float hasProgress = step(0.000001, progress);
+        float gradT = clamp(t / mix(1.0, progress, hasProgress), 0.0, 1.0) * hasProgress;
         vec4 fillCol = getGradientColor(gradT);
 
         // Composite: track under fill (if track enabled), both gated by ringCoverage.

package/dist/src/core/shaders/webgl/RadialProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadialProgress.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialProgress.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"RadialProgress.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RadialProgress.ts"],"names":[],"mappings":"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"}

package/dist/src/core/shaders/webgl/RoundedWithBorder.js

@@ -53,6 +53,15 @@ export const RoundedWithBorder = {
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
+      // Defaults for the zero-border case: the fragment shader is branchless
+      // and always evaluates the border SDFs, so every varying must carry a
+      // finite value (an unwritten varying is undefined and can poison the
+      // final mix() with NaN).
+      v_outerBorderUv = vec2(0.0);
+      v_innerBorderUv = vec2(0.0);
+      v_outerBorderRadius = u_radius;
+      v_innerBorderRadius = u_radius;
+
       if(borderZero == 0.0) {
         vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
 
@@ -61,9 +70,6 @@ export const RoundedWithBorder = {
         float borderBottom = adjustedBorderWidth.z;
         float borderLeft = adjustedBorderWidth.w;
 
-        v_outerBorderUv = vec2(0.0);
-        v_innerBorderUv = vec2(0.0);
-
         vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
         vec2 extraSize = borderSize * u_borderAlign;
         float gapLeft = step(0.001, borderLeft) * u_borderGap;
@@ -148,52 +154,49 @@ export const RoundedWithBorder = {
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
 
+    // Branchless quadrant radius select (r: x TL, y TR, z BR, w BL) --
+    // Mali 400-class fragment pipelines serialize any branch, ternaries included.
+    float quadRadius(vec2 p, vec4 r) {
+      vec2 stepVal = step(vec2(0.0), p);
+      return mix(mix(r.x, r.y, stepVal.x), mix(r.w, r.z, stepVal.x), stepVal.y);
+    }
+
     float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+      float rad = quadRadius(p, r);
+      vec2 q = abs(p) - s + rad;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - rad;
     }
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
       float edgeWidth = 1.0 / u_pixelRatio;
 
-      float nodeDist;
-      float nodeAlpha;
-
-      if(borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
-        gl_FragColor = (color * nodeAlpha) * u_alpha;
-        return;
-      }
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
 
       float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
       float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
-
-      if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
-        resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
-        resultColor = mix(resultColor, color, innerAlpha);
-        gl_FragColor = resultColor * u_alpha;
-        return;
-      }
-
-      nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
       float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
-      float gapAlpha = max(0.0, innerAlpha - nodeAlpha);
 
+      float gapAlpha = max(0.0, innerAlpha - nodeAlpha);
       float borderDist = max(-innerDist, outerDist);
       float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
 
-      resultColor = (color * nodeAlpha) + (u_fillColor * gapAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+      // Branchless path select -- Mali 400 serializes uniform branches, so all
+      // three composites (no gap / gap / zero border) are computed and
+      // mix()-selected instead of if/else'd.
+      vec4 resNoGap = mix(vec4(0.0), u_borderColor, outerAlpha * u_borderColor.a);
+      resNoGap = mix(resNoGap, color, innerAlpha);
+
+      vec4 resGap = (color * nodeAlpha) + (u_fillColor * gapAlpha);
+      resGap = mix(resGap, u_borderColor, borderAlpha * u_borderColor.a);
+
+      float hasGap = step(0.0001, abs(u_borderGap));
+      vec4 resultColor = mix(resNoGap, resGap, hasGap);
+      resultColor = mix(resultColor, color * nodeAlpha, borderZero);
       gl_FragColor = resultColor * u_alpha;
     }
   `,

package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,aAAa,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC,CAAC;QAEvE,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyGP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgFT;CACF,CAAC"}
+{"version":3,"file":"RoundedWithBorder.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,aAAa,CAAC,CAAC,CAAC;QAC5D,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,UAAU,CAAS,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC,CAAC;QAEvE,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6ET;CACF,CAAC"}

package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js

@@ -58,6 +58,15 @@ export const RoundedWithBorderAndShadow = {
       v_innerSize = vec2(0.0);
       v_outerSize = vec2(0.0);
 
+      // Defaults for the zero-border case: the fragment shader is branchless
+      // and always evaluates the border SDFs, so every varying must carry a
+      // finite value (an unwritten varying is undefined and can poison the
+      // final mix() with NaN).
+      v_outerBorderUv = vec2(0.0);
+      v_innerBorderUv = vec2(0.0);
+      v_outerBorderRadius = u_radius;
+      v_innerBorderRadius = u_radius;
+
       if(borderZero == 0.0) {
         vec4 adjustedBorderWidth = u_borderWidth - 1.0 + clamp(u_borderWidth, -1.0, 1.0);
 
@@ -66,9 +75,6 @@ export const RoundedWithBorderAndShadow = {
         float borderBottom = adjustedBorderWidth.z;
         float borderLeft = adjustedBorderWidth.w;
 
-        v_outerBorderUv = vec2(0.0);
-        v_innerBorderUv = vec2(0.0);
-
         vec2 borderSize = vec2(borderRight + borderLeft, borderTop + borderBottom);
         vec2 extraSize = borderSize * u_borderAlign;
         float gapLeft = step(0.001, borderLeft) * u_borderGap;
@@ -153,67 +159,74 @@ export const RoundedWithBorderAndShadow = {
     varying vec4 v_outerBorderRadius;
     varying vec2 v_halfDimensions;
 
+    // Branchless quadrant radius select (r: x TL, y TR, z BR, w BL) --
+    // Mali 400-class fragment pipelines serialize any branch, ternaries included.
+    float quadRadius(vec2 p, vec4 r) {
+      vec2 stepVal = step(vec2(0.0), p);
+      return mix(mix(r.x, r.y, stepVal.x), mix(r.w, r.z, stepVal.x), stepVal.y);
+    }
+
     float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+      float rad = quadRadius(p, r);
+      vec2 q = abs(p) - s + rad;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - rad;
     }
 
     float shadowBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
+      float rad = quadRadius(p, r);
+      vec2 q = abs(p) - s + rad;
+      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - rad;
       return 1.0 - smoothstep(-u_shadow.w, u_shadow.w + u_shadow.z, dist);
     }
 
     void main() {
       vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
-      vec4 resultColor = vec4(0.0);
       vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
       float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0)));
       float edgeWidth = 1.0 / u_pixelRatio;
-      float nodeDist;
-      float nodeAlpha;
-      float shadowAlpha;
-
-      if(borderZero == 1.0) {
-        nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
-        nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
-        resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
-        gl_FragColor = mix(resultColor, color, nodeAlpha) * u_alpha;
-        return;
-      }
 
-      if(v_outerSize.x > v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) {
-        shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - edgeWidth, v_outerBorderRadius + u_shadow.z);
-      }
-      else {
-        shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z);
-      }
+      float nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
+      float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
+
+      // Shadow geometry select, branchless: when the border grows the quad
+      // beyond the node (outer size exceeds half dimensions on either axis)
+      // the shadow hugs the outer border box, otherwise the node box. This
+      // replaces a varying-driven if/else (worst offender: diverges per
+      // fragment) with a step()/mix() parameter select into ONE shadowBox call.
+      // When borderZero, v_outerSize is vec2(0.0) so outerSel is 0 and the
+      // node-box parameters win, matching the old zero-border path.
+      float outerSel = max(
+        step(v_halfDimensions.x, v_outerSize.x),
+        step(v_halfDimensions.y, v_outerSize.y)
+      );
+      float shadowAlpha = shadowBox(
+        boxUv + v_outerBorderUv * outerSel - u_shadow.xy,
+        mix(v_halfDimensions, v_outerSize, outerSel) + u_shadow.w - edgeWidth,
+        mix(u_radius, v_outerBorderRadius, outerSel) + u_shadow.z
+      );
 
       float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius);
       float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius);
+      float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
+      float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
 
-      if(u_borderGap == 0.0) {
-        float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist);
-        float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist);
-        resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
-        resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a);
-        resultColor = mix(resultColor, color, innerAlpha);
-        gl_FragColor = resultColor * u_alpha;
-        return;
-      }
-
-      nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius);
-      nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist);
       float borderDist = max(-innerDist, outerDist);
       float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist);
-      resultColor = mix(resultColor, u_shadowColor, shadowAlpha);
-      resultColor = mix(resultColor, color, nodeAlpha);
-      resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a);
+
+      // Branchless path select -- Mali 400 serializes uniform branches, so all
+      // three composites (no gap / gap / zero border) are computed and
+      // mix()-selected instead of if/else'd.
+      vec4 shadowBase = u_shadowColor * shadowAlpha;
+
+      vec4 resNoGap = mix(shadowBase, u_borderColor, outerAlpha * u_borderColor.a);
+      resNoGap = mix(resNoGap, color, innerAlpha);
+
+      vec4 resFill = mix(shadowBase, color, nodeAlpha);
+      vec4 resGap = mix(resFill, u_borderColor, borderAlpha * u_borderColor.a);
+
+      float hasGap = step(0.0001, abs(u_borderGap));
+      vec4 resultColor = mix(resNoGap, resGap, hasGap);
+      resultColor = mix(resultColor, resFill, borderZero);
       gl_FragColor = resultColor * u_alpha;
     }
   `,

package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAE5D,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CAAS,CAAC,CAAC;QAC5D,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC,CAAC;QAEvE,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAExD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAC9D,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGX;CACA,CAAC"}
+{"version":3,"file":"RoundedWithBorderAndShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithBorderAndShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,kCAAkC,GAEnC,MAAM,oDAAoD,CAAC;AAE5D,MAAM,CAAC,MAAM,0BAA0B,GACrC;IACE,KAAK,EAAE,kCAAkC,CAAC,KAAK;IAC/C,MAAM,CAAC,IAAc;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAM,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,EAAE,KAAK,CAAC,UAAU,CAAS,CAAC,CAAC;QAC5D,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC,KAAM,CAAC,YAAY,CAAW,CAAC,CAAC;QACnE,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAW,CAAC,CAAC;QAEvE,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC;QACzD,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAExD,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,KAAK,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAC9D,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiHT;IACC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuGX;CACA,CAAC"}

package/dist/src/core/shaders/webgl/RoundedWithShadow.js

@@ -88,18 +88,23 @@ export const RoundedWithShadow = {
     varying vec4 v_shadowRadius;
     varying vec2 v_shadowSmooth;
 
+    // Branchless quadrant radius select (r: x TL, y TR, z BR, w BL) --
+    // Mali 400-class fragment pipelines serialize any branch, ternaries included.
+    float quadRadius(vec2 p, vec4 r) {
+      vec2 stepVal = step(vec2(0.0), p);
+      return mix(mix(r.x, r.y, stepVal.x), mix(r.w, r.z, stepVal.x), stepVal.y);
+    }
+
     float roundedBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+      float rad = quadRadius(p, r);
+      vec2 q = abs(p) - s + rad;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - rad;
     }
 
     float shadowBox(vec2 p, vec2 s, vec4 r) {
-      r.xy = (p.x > 0.0) ? r.yz : r.xw;
-      r.x = (p.y > 0.0) ? r.y : r.x;
-      vec2 q = abs(p) - s + r.x;
-      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r.x;
+      float rad = quadRadius(p, r);
+      vec2 q = abs(p) - s + rad;
+      float dist = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - rad;
       return 1.0 - smoothstep(v_shadowSmooth.x, v_shadowSmooth.y, dist);
     }
 
@@ -109,11 +114,8 @@ export const RoundedWithShadow = {
       float boxDist = roundedBox(v_boxUv, v_boxSize, u_radius);
       float roundedAlpha = 1.0 - smoothstep(v_boxSmooth.x, v_boxSmooth.y, boxDist);
 
-      vec4 resColor = vec4(0.0);
-      if (u_shadow_color.a > 0.0) {
-        float shadowAlpha = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
-        resColor = u_shadow_color * shadowAlpha;
-      }
+      float shadowAlpha = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
+      vec4 resColor = u_shadow_color * (shadowAlpha * step(0.0001, u_shadow_color.a));
 
       resColor = mix(resColor, color, min(color.a, roundedAlpha));
       gl_FragColor = resColor * u_alpha;

package/dist/src/core/shaders/webgl/RoundedWithShadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAE,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAE,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDT;CACF,CAAC"}
+{"version":3,"file":"RoundedWithShadow.js","sourceRoot":"","sources":["../../../../../src/core/shaders/webgl/RoundedWithShadow.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAA4C;IACxE,KAAK,EAAE,yBAAyB,CAAC,KAAK;IACtC,MAAM,CAAC,IAAc;QACnB,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAM,CAAC,cAAc,CAAE,CAAC,CAAC;QACjE,IAAI,CAAC,UAAU,CAAC,UAAU,EAAE,IAAI,CAAC,KAAM,CAAC,mBAAmB,CAAE,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CACb,UAAU,EACV,uBAAuB,CAAC,IAAI,CAAC,KAAM,CAAC,MAAc,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CACpE,CAAC;IACJ,CAAC;IACD,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDP;IACD,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDT;CACF,CAAC"}