@solidtv/renderer 1.5.5 → 1.6.0

package/src/core/shaders/webgl/RadialProgress.ts

@@ -6,6 +6,7 @@ import {
 } from '../templates/RadialProgressTemplate.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
 import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 
 export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
   props: RadialProgressTemplate.props,
@@ -57,7 +58,6 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
       # endif
 
       #define MAX_STOPS ${maxStops}
-      #define LAST_STOP ${maxStops - 1}
       #define CAP_ROUND ${props.cap}
       #define HAS_TRACK ${props.trackColor !== 0 ? 1 : 0}
 
@@ -87,22 +87,8 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
 
       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)
@@ -116,9 +102,13 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
         // 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);
@@ -135,7 +125,7 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
 
         // 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
@@ -151,8 +141,10 @@ export const RadialProgress: WebGlShaderType<RadialProgressProps> = {
         #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/src/core/shaders/webgl/RoundedWithBorder.ts

@@ -64,6 +64,15 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
       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);
 
@@ -72,9 +81,6 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
         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;
@@ -159,52 +165,49 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
     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/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts

@@ -71,6 +71,15 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
       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);
 
@@ -79,9 +88,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
         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;
@@ -166,67 +172,74 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
     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/src/core/shaders/webgl/RoundedWithShadow.ts

@@ -98,18 +98,23 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
     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);
     }
 
@@ -119,11 +124,8 @@ export const RoundedWithShadow: WebGlShaderType<RoundedWithShadowProps> = {
       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/src/core/shaders/webgl/Shadow.ts

@@ -106,11 +106,10 @@ export const Shadow: WebGlShaderType<ShadowProps> = {
       float boxDist = box(v_boxUv, v_boxSize);
       float boxAlpha = 1.0 - smoothstep(v_boxSmooth.x, v_boxSmooth.y, boxDist);
 
-      vec4 resColor = vec4(0.0);
-      if (u_color.a > 0.0) {
-        float shadowDist = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
-        resColor = u_color * shadowDist;
-      }
+      // Branchless alpha gate -- Mali 400 serializes uniform branches; the
+      // step() zeroes the shadow term exactly when u_color.a == 0.
+      float shadowDist = shadowBox(v_shadowBox, v_shadowSize, v_shadowRadius);
+      vec4 resColor = u_color * (shadowDist * step(0.0001, u_color.a));
 
       resColor = mix(resColor, color, min(color.a, boxAlpha));
       gl_FragColor = resColor * u_alpha;

package/src/core/text-rendering/SdfTextRenderer.test.ts

@@ -133,6 +133,183 @@ describe('SdfTextRenderer layout cache', () => {
   });
 });
 
+describe('SdfTextRenderer renderQuads cache dispatch', () => {
+  type FakeRenderer = {
+    stage: unknown;
+    sdfBufferIdx: number;
+    fSdfBuffer: Float32Array;
+    addSdfQuads: ReturnType<typeof vi.fn>;
+    addSdfCachedQuads: ReturnType<typeof vi.fn>;
+    addSdfTranslatedQuads: ReturnType<typeof vi.fn>;
+  };
+
+  const GLYPHS = 2;
+
+  const makeRenderer = (): FakeRenderer => {
+    const renderer: FakeRenderer = {
+      stage: {
+        options: { textLayoutCacheSize: 10 },
+        shManager: {
+          registerShaderType: vi.fn(),
+          createShader: vi.fn(() => ({})),
+        },
+      },
+      sdfBufferIdx: 0,
+      fSdfBuffer: new Float32Array(1024),
+      // The miss path snapshots [startIdx, endIdx) of fSdfBuffer, so the
+      // fake must advance sdfBufferIdx like the real writer does.
+      addSdfQuads: vi.fn(() => {
+        renderer.sdfBufferIdx += GLYPHS * 24;
+      }),
+      addSdfCachedQuads: vi.fn(),
+      addSdfTranslatedQuads: vi.fn(),
+    };
+    return renderer;
+  };
+
+  const makeLayout = () => ({
+    glyphs: new Float32Array(GLYPHS * 8),
+    glyphCount: GLYPHS,
+    fontScale: 1,
+    distanceRange: 4,
+    width: 100,
+    height: 50,
+  });
+
+  const makeCache = () => ({
+    vertices: null as Float32Array | null,
+    glyphCount: 0,
+    color: 0,
+    alpha: -1,
+    transform: new Float32Array(6),
+    layoutRef: null as unknown,
+  });
+
+  const makeRenderProps = (
+    cache: ReturnType<typeof makeCache>,
+    transform: number[],
+  ) => ({
+    fontFamily: 'Test',
+    fontSize: 42,
+    color: 0xffffffff,
+    offsetY: 0,
+    worldAlpha: 1,
+    globalTransform: new Float32Array(transform),
+    clippingRect: { x: 0, y: 0, w: 0, h: 0, valid: false },
+    width: 100,
+    height: 50,
+    parentHasRenderTexture: false,
+    framebufferDimensions: null,
+    sdfCache: cache,
+  });
+
+  const IDENTITY = [1, 0, 0, 0, 1, 0, 0, 0, 1];
+  const TRANSLATED = [1, 0, 0, 0, 1, 0, 120, -40, 1];
+  const SCALED = [2, 0, 0, 0, 2, 0, 0, 0, 1];
+
+  const renderQuads = (
+    renderer: FakeRenderer,
+    layout: ReturnType<typeof makeLayout>,
+    renderProps: ReturnType<typeof makeRenderProps>,
+  ) =>
+    SdfTextRenderer.renderQuads(
+      renderer as never,
+      layout as never,
+      null as never,
+      renderProps as never,
+    );
+
+  const setupWithAtlas = () => {
+    initRenderer(10);
+    vi.mocked(SdfFontHandler.getAtlas).mockReturnValue({
+      ctxTexture: {},
+    } as never);
+  };
+
+  it('takes the miss path first and snapshots the cache', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(cache.vertices).not.toBeNull();
+    expect(cache.layoutRef).toBe(layout);
+    expect(cache.glyphCount).toBe(GLYPHS);
+  });
+
+  it('takes the mem-copy path when nothing changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfCachedQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+
+  it('takes the translation path when only tx/ty changed, keeping the cache base', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    const baseVertices = cache.vertices;
+
+    renderQuads(renderer, layout, makeRenderProps(cache, TRANSLATED));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(1);
+    expect(renderer.addSdfCachedQuads.mock.calls.length).toBe(0);
+    const calls = renderer.addSdfTranslatedQuads.mock.calls;
+    expect(calls.length).toBe(1);
+    // (cachedVertices, glyphCount, dx, dy, ...)
+    expect(calls[0]![0]).toBe(baseVertices);
+    expect(calls[0]![1]).toBe(GLYPHS);
+    expect(calls[0]![2]).toBe(120);
+    expect(calls[0]![3]).toBe(-40);
+    // The scroll path must not re-snapshot: base transform and vertices stay
+    expect(cache.vertices).toBe(baseVertices);
+    expect(cache.transform[4]).toBe(0);
+    expect(cache.transform[5]).toBe(0);
+  });
+
+  it('falls back to the miss path when scale or rotation changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+    renderQuads(renderer, layout, makeRenderProps(cache, SCALED));
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(2);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+
+  it('falls back to the miss path when color or alpha changed', () => {
+    setupWithAtlas();
+    const renderer = makeRenderer();
+    const layout = makeLayout();
+    const cache = makeCache();
+
+    renderQuads(renderer, layout, makeRenderProps(cache, IDENTITY));
+
+    const faded = makeRenderProps(cache, TRANSLATED);
+    faded.worldAlpha = 0.5;
+    renderQuads(renderer, layout, faded);
+
+    expect(renderer.addSdfQuads.mock.calls.length).toBe(2);
+    expect(renderer.addSdfTranslatedQuads.mock.calls.length).toBe(0);
+  });
+});
+
 describe('SdfTextRenderer lazy shader compile', () => {
   it('registers the SDF shader at init but defers compilation', () => {
     const shManager = {

package/src/core/text-rendering/SdfTextRenderer.ts

@@ -150,11 +150,14 @@ const addQuads = (_layout?: TextLayout): Float32Array | null => {
 /**
  * Submit SDF glyphs to the renderer's shared batched buffer.
  *
- * Two paths:
- * 1. **Cache hit** — layout, transform, color, and alpha haven't changed.
- *    The cached pre-transformed Float32Array is mem-copied directly into the
- *    shared SDF buffer (no per-glyph matrix math).
- * 2. **Cache miss** — re-computes per-glyph world-space vertices via
+ * Three paths:
+ * 1. **Exact cache hit** — layout, transform, color, and alpha haven't
+ *    changed. The cached pre-transformed Float32Array is mem-copied directly
+ *    into the shared SDF buffer (no per-glyph matrix math).
+ * 2. **Translation hit** — only tx/ty changed (the scroll path). The cached
+ *    vertices are copied with the position delta applied; the cache keeps its
+ *    original base so nothing is re-snapshotted.
+ * 3. **Cache miss** — re-computes per-glyph world-space vertices via
  *    `addSdfQuads`, then snapshots the result into the cache.
  */
 const renderQuads = (
@@ -176,7 +179,7 @@ const renderQuads = (
   // Compiles on the first real SDF draw; cheap memoized lookup thereafter.
   const shader = getSdfShader(webGlRenderer.stage);
 
-  // --- Cache-hit fast path ------------------------------------------------
+  // --- Cache-hit fast paths -----------------------------------------------
   if (cache !== undefined && cache.vertices !== null) {
     const ct = cache.transform;
     const t = renderProps.globalTransform;
@@ -187,13 +190,38 @@ const renderQuads = (
       ct[0] === t[0] &&
       ct[1] === t[1] &&
       ct[2] === t[3] &&
-      ct[3] === t[4] &&
-      ct[4] === t[6] &&
-      ct[5] === t[7]
+      ct[3] === t[4]
     ) {
-      webGlRenderer.addSdfCachedQuads(
+      const dx = t[6]! - ct[4]!;
+      const dy = t[7]! - ct[5]!;
+
+      if (dx === 0 && dy === 0) {
+        // Fully static: mem-copy the cached vertices as-is.
+        webGlRenderer.addSdfCachedQuads(
+          cache.vertices,
+          cache.glyphCount,
+          ctxTexture,
+          renderProps.clippingRect,
+          renderProps.worldAlpha,
+          layout.width,
+          layout.height,
+          renderProps.parentHasRenderTexture,
+          renderProps.framebufferDimensions,
+          shader,
+        );
+        return null;
+      }
+
+      // Pure translation (the scroll path): same glyphs, same scale/rotation,
+      // only tx/ty moved. Copy the cached vertices shifted by the delta from
+      // the cached base transform. The cache keeps its original base, so
+      // every frame recomputes from the same reference — no drift and no
+      // per-frame re-snapshot.
+      webGlRenderer.addSdfTranslatedQuads(
         cache.vertices,
         cache.glyphCount,
+        dx,
+        dy,
         ctxTexture,
         renderProps.clippingRect,
         renderProps.worldAlpha,