@solidtv/renderer 1.5.5 → 1.6.0

package/src/core/renderers/webgl/WebGlShaderProgram.reuseRenderOp.test.ts

@@ -0,0 +1,150 @@
+import { describe, expect, it, vi } from 'vitest';
+import { WebGlShaderProgram } from './WebGlShaderProgram.js';
+
+/**
+ * Tests for the batch test in WebGlShaderProgram.reuseRenderOp.
+ *
+ * The program instance is created without running the constructor (which
+ * compiles GLSL against a live GL context); only the fields reuseRenderOp
+ * touches are populated manually.
+ */
+
+type ProgramFlags = {
+  useSystemAlpha?: boolean;
+  useSystemDimensions?: boolean;
+  useTimeValue?: boolean;
+  canBatch?: (node: unknown, op: unknown) => boolean;
+};
+
+const makeProgram = (flags: ProgramFlags = {}): WebGlShaderProgram => {
+  const program = Object.create(
+    WebGlShaderProgram.prototype,
+  ) as WebGlShaderProgram;
+  const p = program as unknown as Record<string, unknown>;
+  p['useSystemAlpha'] = flags.useSystemAlpha === true;
+  p['useSystemDimensions'] = flags.useSystemDimensions === true;
+  p['useTimeValue'] = flags.useTimeValue === true;
+  p['lifecycle'] = { canBatch: flags.canBatch, update: undefined };
+  return program;
+};
+
+type FakeShaderNode = {
+  uniforms: object;
+  resolvedProps: Record<string, unknown> | undefined;
+};
+
+const makeShaderNode = (
+  uniforms: object,
+  resolvedProps?: Record<string, unknown>,
+): FakeShaderNode => ({ uniforms, resolvedProps });
+
+const makeNode = (
+  shader: FakeShaderNode,
+  overrides?: Record<string, unknown>,
+) => ({
+  worldAlpha: 1,
+  w: 200,
+  h: 100,
+  props: { shader },
+  ...overrides,
+});
+
+const makeOp = (shader: FakeShaderNode, overrides?: Record<string, unknown>) =>
+  ({
+    time: 0,
+    worldAlpha: 1,
+    w: 200,
+    h: 100,
+    shader,
+    ...overrides,
+  } as never);
+
+describe('WebGlShaderProgram.reuseRenderOp', () => {
+  it('batches the same shader node without comparing props', () => {
+    const program = makeProgram();
+    const shader = makeShaderNode({}, { radius: 16 });
+
+    expect(
+      program.reuseRenderOp(makeNode(shader) as never, makeOp(shader)),
+    ).toBe(true);
+  });
+
+  it('batches distinct shader nodes that share a uniform collection', () => {
+    const program = makeProgram();
+    const uniforms = {};
+    // Distinct resolvedProps objects — reference-inequal props must not matter
+    // when the value-key cache handed both nodes the same collection.
+    const shaderA = makeShaderNode(uniforms, { radius: [16, 16, 16, 16] });
+    const shaderB = makeShaderNode(uniforms, { radius: [16, 16, 16, 16] });
+
+    expect(
+      program.reuseRenderOp(makeNode(shaderA) as never, makeOp(shaderB)),
+    ).toBe(true);
+  });
+
+  it('falls back to a prop-value compare for distinct collections', () => {
+    const program = makeProgram();
+    const shaderA = makeShaderNode({}, { radius: 16, gap: 2 });
+    const shaderB = makeShaderNode({}, { radius: 16, gap: 2 });
+    const shaderC = makeShaderNode({}, { radius: 16, gap: 4 });
+
+    expect(
+      program.reuseRenderOp(makeNode(shaderA) as never, makeOp(shaderB)),
+    ).toBe(true);
+    expect(
+      program.reuseRenderOp(makeNode(shaderA) as never, makeOp(shaderC)),
+    ).toBe(false);
+  });
+
+  it('rejects on system alpha mismatch before any shader compare', () => {
+    const program = makeProgram({ useSystemAlpha: true });
+    const shader = makeShaderNode({});
+
+    expect(
+      program.reuseRenderOp(
+        makeNode(shader, { worldAlpha: 0.5 }) as never,
+        makeOp(shader),
+      ),
+    ).toBe(false);
+  });
+
+  it('rejects on dimension mismatch when the program uses u_dimensions', () => {
+    const program = makeProgram({ useSystemDimensions: true });
+    const shader = makeShaderNode({});
+
+    expect(
+      program.reuseRenderOp(
+        makeNode(shader, { w: 300 }) as never,
+        makeOp(shader),
+      ),
+    ).toBe(false);
+  });
+
+  it('does not read node.time when the program has no time uniform', () => {
+    const program = makeProgram();
+    const shader = makeShaderNode({});
+    const node = makeNode(shader);
+    let timeReads = 0;
+    Object.defineProperty(node, 'time', {
+      get: () => {
+        timeReads++;
+        return 0;
+      },
+    });
+
+    program.reuseRenderOp(node as never, makeOp(shader));
+
+    expect(timeReads).toBe(0);
+  });
+
+  it('delegates to the shader type canBatch hook when defined', () => {
+    const canBatch = vi.fn(() => false);
+    const program = makeProgram({ canBatch });
+    const shader = makeShaderNode({});
+
+    expect(
+      program.reuseRenderOp(makeNode(shader) as never, makeOp(shader)),
+    ).toBe(false);
+    expect(canBatch.mock.calls.length).toBe(1);
+  });
+});

package/src/core/renderers/webgl/WebGlShaderProgram.ts

@@ -158,40 +158,52 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       return this.lifecycle.canBatch(node, currentRenderOp);
     }
 
-    const { time, worldAlpha, w, h } = node;
-
+    // Read node getters only for the system uniforms this program actually
+    // uses — node.time in particular is a getter that runs per call.
     if (this.useTimeValue === true) {
-      if (time !== currentRenderOp.time) {
+      if (node.time !== currentRenderOp.time) {
         return false;
       }
     }
 
     if (this.useSystemAlpha === true) {
-      if (worldAlpha !== currentRenderOp.worldAlpha) {
+      if (node.worldAlpha !== currentRenderOp.worldAlpha) {
         return false;
       }
     }
 
     if (this.useSystemDimensions === true) {
-      if (w !== currentRenderOp.w || h !== currentRenderOp.h) {
+      if (node.w !== currentRenderOp.w || node.h !== currentRenderOp.h) {
         return false;
       }
     }
 
-    let shaderPropsA: Record<string, unknown> | undefined = undefined;
-    let shaderPropsB: Record<string, unknown> | undefined = undefined;
+    const shader = node.props.shader as WebGlShaderNode | null;
+    const opShader = currentRenderOp.shader as WebGlShaderNode | null;
 
-    const shader = node.props.shader;
+    // Same shader node — same resolved props by definition.
+    if (shader === opShader) {
+      return true;
+    }
 
-    if (shader !== null) {
-      shaderPropsA = (shader as WebGlShaderNode).resolvedProps;
+    if (shader === null || opShader === null) {
+      return false;
     }
 
-    const opShader = currentRenderOp.shader;
-    if (opShader !== null) {
-      shaderPropsB = (opShader as WebGlShaderNode).resolvedProps;
+    // Shader nodes with equal value keys share their uniform collection by
+    // reference (see WebGlShaderNode.update); reference equality implies the
+    // resolved prop values match without a key-by-key compare.
+    if (shader.uniforms === opShader.uniforms) {
+      return true;
     }
 
+    const shaderPropsA = shader.resolvedProps as
+      | Record<string, unknown>
+      | undefined;
+    const shaderPropsB = opShader.resolvedProps as
+      | Record<string, unknown>
+      | undefined;
+
     if (
       (shaderPropsA === undefined && shaderPropsB !== undefined) ||
       (shaderPropsA !== undefined && shaderPropsB === undefined)
@@ -243,8 +255,8 @@ export class WebGlShaderProgram implements CoreShaderProgram {
       resolutionH = framebufferDimensions.h;
     } else {
       pixelRatio = renderOp.stage.pixelRatio;
-      resolutionW = this.glw.canvas.width;
-      resolutionH = this.glw.canvas.height;
+      resolutionW = this.glw.canvasW;
+      resolutionH = this.glw.canvasH;
     }
 
     if (pixelRatio !== this.lastPixelRatio) {

package/src/core/renderers/webgl/WebGlShaderProgram.uniformDedup.test.ts

@@ -13,7 +13,8 @@ type FakeGlw = {
   uniform1f: ReturnType<typeof vi.fn>;
   uniform2f: ReturnType<typeof vi.fn>;
   uniform4f: ReturnType<typeof vi.fn>;
-  canvas: { width: number; height: number };
+  canvasW: number;
+  canvasH: number;
 };
 
 const makeProgram = (): { program: WebGlShaderProgram; glw: FakeGlw } => {
@@ -21,7 +22,8 @@ const makeProgram = (): { program: WebGlShaderProgram; glw: FakeGlw } => {
     uniform1f: vi.fn(),
     uniform2f: vi.fn(),
     uniform4f: vi.fn(),
-    canvas: { width: 1920, height: 1080 },
+    canvasW: 1920,
+    canvasH: 1080,
   };
 
   const program = Object.create(

package/src/core/renderers/webgl/internal/ShaderUtils.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from 'vitest';
+import { genGradientColors } from './ShaderUtils.js';
+
+type Vec4 = [number, number, number, number];
+
+const smoothstep = (e0: number, e1: number, x: number): number => {
+  const t = Math.min(Math.max((x - e0) / (e1 - e0), 0), 1);
+  return t * t * (3 - 2 * t);
+};
+
+const mix = (a: Vec4, b: Vec4, t: number): Vec4 => [
+  a[0] + (b[0] - a[0]) * t,
+  a[1] + (b[1] - a[1]) * t,
+  a[2] + (b[2] - a[2]) * t,
+  a[3] + (b[3] - a[3]) * t,
+];
+
+/**
+ * Evaluate the generated GLSL statements as JS. The generated code only uses
+ * `mix`, `smoothstep`, `u_colors[i]`, `u_stops[i]` and `dist`, so shimming
+ * those makes the string directly executable.
+ */
+function evalGradient(stops: number[], colors: Vec4[], dist: number): Vec4 {
+  const src = genGradientColors(stops.length).replace(
+    'vec4 colorOut =',
+    'let colorOut =',
+  );
+  const fn = new Function(
+    'mix',
+    'smoothstep',
+    'u_stops',
+    'u_colors',
+    'dist',
+    `${src}; return colorOut;`,
+  );
+  return fn(mix, smoothstep, stops, colors, dist) as Vec4;
+}
+
+/**
+ * Reference implementation: the original branchy segment select
+ * (below first stop / above last stop / smoothstep within the segment).
+ */
+function referenceGradient(
+  stops: number[],
+  colors: Vec4[],
+  dist: number,
+): Vec4 {
+  dist = Math.min(Math.max(dist, 0), 1);
+  if (dist <= stops[0]!) return colors[0]!;
+  const last = stops.length - 1;
+  if (dist >= stops[last]!) return colors[last]!;
+  for (let i = 0; i < last; i++) {
+    if (dist >= stops[i]! && dist <= stops[i + 1]!) {
+      return mix(
+        colors[i]!,
+        colors[i + 1]!,
+        smoothstep(stops[i]!, stops[i + 1]!, dist),
+      );
+    }
+  }
+  return colors[last]!;
+}
+
+const RED: Vec4 = [1, 0, 0, 1];
+const GREEN: Vec4 = [0, 1, 0, 1];
+const BLUE: Vec4 = [0, 0, 1, 0.5];
+const WHITE: Vec4 = [1, 1, 1, 1];
+
+describe('genGradientColors', () => {
+  it('emits no branches (no if / ternary / return)', () => {
+    const src = genGradientColors(4);
+    expect(src.includes('if')).toBe(false);
+    expect(src.includes('?')).toBe(false);
+    expect(src.includes('return')).toBe(false);
+  });
+
+  it('with a single stop resolves to the first color', () => {
+    const out = evalGradient([0], [RED], 0.7);
+    expect(out).toEqual(RED);
+  });
+
+  it('clamps to the first color below the first stop', () => {
+    const out = evalGradient([0.25, 0.75], [RED, GREEN], 0.1);
+    expect(out).toEqual(RED);
+  });
+
+  it('clamps to the last color above the last stop', () => {
+    const out = evalGradient([0.25, 0.75], [RED, GREEN], 0.9);
+    expect(out).toEqual(GREEN);
+  });
+
+  it('interpolates with smoothstep inside a segment', () => {
+    const dist = 0.5;
+    const out = evalGradient([0.25, 0.75], [RED, GREEN], dist);
+    const expected = mix(RED, GREEN, smoothstep(0.25, 0.75, dist));
+    for (let i = 0; i < 4; i++) {
+      expect(out[i]).toBeCloseTo(expected[i]!, 6);
+    }
+  });
+
+  it('matches the reference segment select across a multi-stop ramp', () => {
+    const stops = [0, 0.3, 0.6, 1];
+    const colors = [RED, GREEN, BLUE, WHITE];
+    for (let d = 0; d <= 100; d++) {
+      const dist = d / 100;
+      const out = evalGradient(stops, colors, dist);
+      const ref = referenceGradient(stops, colors, dist);
+      for (let i = 0; i < 4; i++) {
+        expect(out[i]).toBeCloseTo(ref[i]!, 6);
+      }
+    }
+  });
+
+  it('is exact at stop boundaries', () => {
+    const stops = [0, 0.5, 1];
+    const colors = [RED, GREEN, BLUE];
+    expect(evalGradient(stops, colors, 0)).toEqual(RED);
+    const mid = evalGradient(stops, colors, 0.5);
+    for (let i = 0; i < 4; i++) {
+      expect(mid[i]).toBeCloseTo(GREEN[i]!, 6);
+    }
+    expect(evalGradient(stops, colors, 1)).toEqual(BLUE);
+  });
+});

package/src/core/renderers/webgl/internal/ShaderUtils.ts

@@ -243,21 +243,22 @@ export const DefaultVertexSource = `
 `;
 
 /**
- * generate fragment source for
- * @param stops
- * @returns
+ * Generates branchless gradient-stop evaluation statements for a fragment
+ * shader. Expects a `float dist` in scope and `u_stops`/`u_colors` uniform
+ * arrays of length `stops`; leaves the result in `vec4 colorOut`.
+ *
+ * The accumulated `mix()` chain is exactly equivalent to selecting the
+ * segment containing `dist` (for ascending stops): below a segment the
+ * smoothstep is 0 (no-op), above it is 1 (fully replaced by the next color).
+ * No `if`/ternary — Mali 400-class fragment pipelines serialize any branch.
  */
 export function genGradientColors(stops: number): string {
-  let result = `
-    float stopCalc = (dist - u_stops[0]) / (u_stops[1] - u_stops[0]);
-    vec4 colorOut = mix(u_colors[0], u_colors[1], stopCalc);
-  `;
-  if (stops > 2) {
-    for (let i = 2; i < stops; i++) {
-      result += `colorOut = mix(colorOut, u_colors[${i}], clamp((dist - u_stops[${
-        i - 1
-      }]) / (u_stops[${i}] - u_stops[${i - 1}]), 0.0, 1.0));`;
-    }
+  let result = `vec4 colorOut = u_colors[0];`;
+  for (let i = 1; i < stops; i++) {
+    result += `
+      colorOut = mix(colorOut, u_colors[${i}], smoothstep(u_stops[${
+      i - 1
+    }], u_stops[${i}], dist));`;
   }
   return result;
 }

package/src/core/shaders/canvas/Rounded.ts

@@ -22,16 +22,16 @@ export const Rounded: CanvasShaderType<RoundedProps, ComputedRoundedValues> = {
     );
   },
   render(ctx, node, renderContext) {
-    const path = new Path2D();
+    ctx.beginPath();
     roundRect(
-      path,
+      ctx,
       node.globalTransform!.tx,
       node.globalTransform!.ty,
       node.props.w,
       node.props.h,
       this.computed.radius!,
     );
-    ctx.clip(path);
+    ctx.clip();
 
     renderContext();
   },

package/src/core/shaders/canvas/RoundedWithShadow.ts

@@ -49,9 +49,9 @@ export const RoundedWithShadow: CanvasShaderType<
       );
     }
 
-    const path = new Path2D();
-    render.roundRect(path, tx, ty, w, h, computed.radius);
-    ctx.clip(path);
+    ctx.beginPath();
+    render.roundRect(ctx, tx, ty, w, h, computed.radius);
+    ctx.clip();
     renderContext();
   },
 };

package/src/core/shaders/canvas/utils/render.ts

@@ -57,9 +57,9 @@ export function roundedRectWithBorder(
 
   //draw node content first
   ctx.save();
-  const path = new Path2D();
-  roundRect(path, x, y, width, height, radius);
-  ctx.clip(path);
+  ctx.beginPath();
+  roundRect(ctx, x, y, width, height, radius);
+  ctx.clip();
   renderContext();
   ctx.restore();
 

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

@@ -135,24 +135,25 @@ export const Border: WebGlShaderType<BorderProps> = {
       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/src/core/shaders/webgl/HolePunch.ts

@@ -46,11 +46,18 @@ export const HolePunch: WebGlShaderType<HolePunchProps> = {
     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/src/core/shaders/webgl/LinearGradient.ts

@@ -6,6 +6,7 @@ import {
 } from '../templates/LinearGradientTemplate.js';
 import type { WebGlRenderer } from '../../renderers/webgl/WebGlRenderer.js';
 import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
+import { genGradientColors } from '../../renderers/webgl/internal/ShaderUtils.js';
 
 export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
   props: LinearGradientTemplate.props,
@@ -56,7 +57,6 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
     # endif
 
     #define MAX_STOPS ${props.colors.length}
-    #define LAST_STOP ${props.colors.length - 1}
 
     uniform float u_alpha;
 
@@ -72,24 +72,8 @@ export const LinearGradient: WebGlShaderType<LinearGradientProps> = {
 
     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/src/core/shaders/webgl/RadialGradient.ts

@@ -6,6 +6,7 @@ import {
 } from '../templates/RadialGradientTemplate.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 RadialGradient: WebGlShaderType<RadialGradientProps> = {
   props: RadialGradientTemplate.props,
@@ -37,7 +38,6 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
       # endif
 
       #define MAX_STOPS ${props.colors.length}
-      #define LAST_STOP ${props.colors.length - 1}
 
       uniform float u_alpha;
       uniform vec2 u_dimensions;
@@ -56,25 +56,8 @@ export const RadialGradient: WebGlShaderType<RadialGradientProps> = {
 
       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() {