@solidtv/renderer 1.5.6 → 1.6.0

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

@@ -127,6 +127,23 @@ export class WebGlRenderer extends CoreRenderer {
   sdfQuadCount = 0;
   sdfQuadBufferCollection: BufferCollection;
   curSdfRenderOp: SdfRenderOp | null = null;
+  /**
+   * Whether the shared SDF buffer's bytes may differ from what the GPU
+   * currently holds. Set by every write path that produces fresh bytes
+   * (cache-miss recompute, translated copy), by anything that can shift
+   * offsets or resize the buffer (render-list rebuild, RTT partial upload,
+   * backing-store growth), and consumed by {@link uploadSdfBuffer}. The
+   * exact cache-hit mem-copy path deliberately does NOT set it — it writes
+   * byte-identical data at identical offsets. Conservative direction: when
+   * in doubt, set it — a redundant upload is correct, a wrong skip is a
+   * glitch.
+   */
+  sdfBufferChanged = true;
+  /**
+   * Float32 length of the last main-pass SDF upload — the size half of the
+   * skip test in {@link uploadSdfBuffer}.
+   */
+  lastUploadedSdfSize = 0;
 
   /**
    * When true, the entire quad buffer is re-uploaded to the GPU via bufferData
@@ -212,7 +229,7 @@ export class WebGlRenderer extends CoreRenderer {
       gl,
       options.disableVertexArrayObject,
     ));
-    glw.viewport(0, 0, options.canvas.width, options.canvas.height);
+    glw.viewport(0, 0, glw.canvasW, glw.canvasH);
 
     this.attachContextLossListeners(options.canvas);
 
@@ -640,9 +657,21 @@ export class WebGlRenderer extends CoreRenderer {
       return true;
     }
 
-    // Check if the shader is the same
+    // Distinct shader nodes can still batch when they resolve to the same
+    // program and the value-key cache handed both the same uniform collection:
+    // collections are immutable after fill and shared by reference across
+    // equal value keys, so reference equality implies value equality. This is
+    // the common TV-rail case — many same-size cards, each app-created with
+    // its own shader node but equal props. Program identity is required
+    // because the value key does not include the shader type, so equal
+    // collections from different programs must not merge.
     if (curShader !== shader) {
-      return false;
+      if (
+        curShader.program !== shader.program ||
+        curShader.uniforms !== shader.uniforms
+      ) {
+        return false;
+      }
     }
 
     if (
@@ -729,6 +758,9 @@ export class WebGlRenderer extends CoreRenderer {
       return;
     }
 
+    // Full recompute writes fresh bytes — the GPU copy is now stale.
+    this.sdfBufferChanged = true;
+
     let idx = this.sdfBufferIdx;
     this.ensureSdfBufferCapacity(idx + glyphCount * 24);
 
@@ -891,6 +923,76 @@ export class WebGlRenderer extends CoreRenderer {
     );
   }
 
+  /**
+   * Append cached SDF vertices translated by (dx, dy) to the shared buffer.
+   *
+   * @remarks
+   * The scroll fast path: a text node whose transform changed by pure
+   * translation reuses its world-space vertex cache — one mem-copy plus two
+   * adds per vertex instead of full per-glyph matrix math, and the cache
+   * keeps its original base so nothing is re-snapshotted per frame.
+   *
+   * The copy MUST stay a typed-array `set` (bit-exact memcpy): packed ABGR
+   * colors live in the same Float32Array and some bit patterns are float32
+   * NaNs, which element-wise float reads/writes may canonicalize and corrupt.
+   * Only the two position floats of each vertex are touched after the copy.
+   */
+  addSdfTranslatedQuads(
+    cachedVertices: Float32Array,
+    numGlyphs: number,
+    dx: number,
+    dy: number,
+    atlasTexture: WebGlCtxTexture,
+    clippingRect: import('../../lib/utils.js').RectWithValid,
+    worldAlpha: number,
+    width: number,
+    height: number,
+    parentHasRenderTexture: boolean,
+    framebufferDimensions:
+      | import('../../../common/CommonTypes.js').Dimensions
+      | null,
+    sdfShader: WebGlShaderNode,
+  ): void {
+    if (numGlyphs === 0) {
+      return;
+    }
+
+    // Translated positions are fresh bytes — the GPU copy is now stale.
+    this.sdfBufferChanged = true;
+
+    const startQuad = this.sdfQuadCount;
+    const idx = this.sdfBufferIdx;
+
+    this.ensureSdfBufferCapacity(idx + cachedVertices.length);
+
+    // Read the buffer reference only after ensureSdfBufferCapacity — growth
+    // swaps the backing store.
+    const f = this.fSdfBuffer;
+    f.set(cachedVertices, idx);
+
+    const end = idx + cachedVertices.length;
+    for (let i = idx; i < end; i += 6) {
+      f[i] = f[i]! + dx;
+      f[i + 1] = f[i + 1]! + dy;
+    }
+
+    this.sdfBufferIdx = end;
+    this.sdfQuadCount += numGlyphs;
+
+    this.finalizeSdfBatch(
+      startQuad,
+      numGlyphs,
+      atlasTexture,
+      clippingRect,
+      worldAlpha,
+      width,
+      height,
+      parentHasRenderTexture,
+      framebufferDimensions,
+      sdfShader,
+    );
+  }
+
   /**
    * Shared batching logic for SDF render ops.
    * Called by both `addSdfQuads` (full compute) and `addSdfCachedQuads` (fast copy).
@@ -992,6 +1094,9 @@ export class WebGlRenderer extends CoreRenderer {
     this.sdfBuffer = newBuffer;
     this.fSdfBuffer = newFSdfBuffer;
     this.uiSdfBuffer = newUiSdfBuffer;
+
+    // New backing store — never skip the next upload.
+    this.sdfBufferChanged = true;
   }
 
   /**
@@ -1068,12 +1173,7 @@ export class WebGlRenderer extends CoreRenderer {
     }
 
     // Upload the shared SDF buffer if any SDF glyphs were written this frame.
-    if (this.sdfBufferIdx > 0) {
-      const sdfBuf =
-        this.sdfQuadBufferCollection.getBuffer('a_position') || null;
-      const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
-      glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
-    }
+    this.uploadSdfBuffer();
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
       this.renderOps[i]!.draw(this);
@@ -1087,6 +1187,34 @@ export class WebGlRenderer extends CoreRenderer {
     this.numQuadsRendered = this.quadBufferUsage / QUAD_SIZE_IN_BYTES;
   }
 
+  /**
+   * Upload the shared SDF buffer for the main pass, skipping the driver-side
+   * `bufferData` copy when the bytes provably match what the GPU already
+   * holds: every write this frame was an exact cache-hit mem-copy
+   * (`sdfBufferChanged` false) and the total size matches the previous
+   * upload. Exact hits write byte-identical data, and identical offsets are
+   * guaranteed because every source of reorder or resize — cache-miss
+   * recompute, translated copy, render-list rebuild, RTT partial upload,
+   * backing-store growth — sets `sdfBufferChanged`.
+   */
+  private uploadSdfBuffer(): void {
+    if (this.sdfBufferIdx === 0) {
+      return;
+    }
+    if (
+      this.sdfBufferChanged === false &&
+      this.sdfBufferIdx === this.lastUploadedSdfSize
+    ) {
+      return;
+    }
+    const glw = this.glw;
+    const sdfBuf = this.sdfQuadBufferCollection.getBuffer('a_position') || null;
+    const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
+    glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
+    this.lastUploadedSdfSize = this.sdfBufferIdx;
+    this.sdfBufferChanged = false;
+  }
+
   getQuadCount(): number {
     return this.numQuadsRendered;
   }
@@ -1264,7 +1392,7 @@ export class WebGlRenderer extends CoreRenderer {
     // Bind the default framebuffer
     glw.bindFramebuffer(null);
 
-    glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    glw.viewport(0, 0, glw.canvasW, glw.canvasH);
     this.renderToTextureActive = false;
   }
 
@@ -1323,6 +1451,9 @@ export class WebGlRenderer extends CoreRenderer {
         this.sdfQuadBufferCollection.getBuffer('a_position') || null;
       const sdfArr = new Float32Array(this.sdfBuffer, 0, this.sdfBufferIdx);
       glw.arrayBufferData(sdfBuf, sdfArr, glw.DYNAMIC_DRAW);
+      // This partial upload replaced the GL buffer's contents and size — the
+      // main pass upload can no longer be skipped this frame.
+      this.sdfBufferChanged = true;
     }
 
     for (let i = 0, length = this.renderOps.length; i < length; i++) {
@@ -1331,7 +1462,10 @@ export class WebGlRenderer extends CoreRenderer {
   }
 
   updateViewport(): void {
-    this.glw.viewport(0, 0, this.glw.canvas.width, this.glw.canvas.height);
+    // Called after the canvas is resized (Renderer.updateAppDimensions) —
+    // refresh the wrapper's cached dimensions before they're used again.
+    this.glw.updateCanvasDimensions();
+    this.glw.viewport(0, 0, this.glw.canvasW, this.glw.canvasH);
   }
 
   removeRTTNode(node: CoreNode) {
@@ -1486,6 +1620,12 @@ export class WebGlRenderer extends CoreRenderer {
    * next addQuad() pass will reassign compact, contiguous slots starting from 0.
    */
   override invalidateQuadBuffer(): void {
+    // A render-list rebuild can reorder text nodes without touching their
+    // SDF vertex caches; byte-identical glyph data would then land at
+    // different offsets, so the upload skip must not fire on the rebuild
+    // frame.
+    this.sdfBufferChanged = true;
+
     if (!DIRTY_QUAD_BUFFER) {
       return;
     }

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();
   },
 };