@weasel-js/renderer 1.10.0 → 1.10.1

package/dist/index.js

@@ -1,6 +1,6 @@
 export { createTilePattern } from './chunk-43YL7HZV.js';
-import { BATCH_ATTRIBUTE_LOCATIONS, BATCH_TEXTURE_SLOTS, registerProgram, BATCH_VERT_SRC, BATCH_FRAG_SRC, BATCH_FILL_UNIFORMS, BATCH_FILL_ATTRIBUTES, STRAIGHT_RGB_GLSL, GLImageCache, DrawBatch, getProgramSource, commandFill, commandPaint, uploadPremultiplied, cachedMarkerCommands, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-LFD47OV2.js';
-export { commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getPaintDrawKind, getProgramSource, imageStatus, isPaintKindKnown, isVectorImageSrc, paintDrawKindRegistry, programSourceRegistry, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, subscribeImageReady, warmPaintKinds } from './chunk-LFD47OV2.js';
+import { BATCH_ATTRIBUTE_LOCATIONS, BATCH_TEXTURE_SLOTS, registerProgram, STRAIGHT_RGB_GLSL, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_MATRICES_FRAG_SRC, BATCH_VERT_SRC, GLImageCache, DrawBatch, getProgramSource, commandFill, commandPaint, BATCH_FRAG_SRC, uploadPremultiplied, RAMP_SLOT, withMatrix, cachedMarkerCommands, BATCH_MATRIX_SLOTS, packSlot, WHITE_SLOT, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, PAINT_MODE_CONIC, getMesh, quantizeStrokeScale, strokeMesh, axisAlignedClipRect, intersectClipRects, getPaintDrawKind, outlineMesh, outlineStrokeMesh, quantizeEmWidth } from './chunk-K7XCWVQH.js';
+export { commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getPaintDrawKind, getProgramSource, imageStatus, isPaintKindKnown, isVectorImageSrc, paintDrawKindRegistry, programSourceRegistry, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, subscribeImageReady, warmPaintKinds } from './chunk-K7XCWVQH.js';
 import { textureRegistry, getTexture } from './chunk-Q4SIHV7Q.js';
 export { registerTexture, textureRegistry, unregisterTexture } from './chunk-Q4SIHV7Q.js';
 import { DEFAULT_BAKE_BUDGET, markAllFontsNotUploaded, resetBakeBudget, GLYPH_COVERAGE_GLSL, syncColorPageTexture, colorPageTextureId, syncDynamicPageTexture, ensureFontTexture, dynamicPageTextureId, textureCacheKey, GLYPH_MODE_R8, GLYPH_MODE_MSDF, glyphFieldScale } from '@weasel-js/font';
@@ -229,7 +229,6 @@ uniform mat4  u_colorMatrix;
 uniform vec4  u_colorBias;
 uniform float u_opacity;
 uniform int   u_gradKind;
-uniform vec2  u_gradP0;
 uniform vec2  u_gradDir;
 uniform float u_gradLen;
 uniform float u_gradRadius;
@@ -240,12 +239,11 @@ const float PI = 3.14159265358979323846;
 vec4 shadePaint(vec2 world) {
   float t;
   if (u_gradKind == 0) {
-    vec2 d = world - u_gradP0;
-    t = dot(d, u_gradDir) / max(u_gradLen, 0.0001);
+    t = dot(world, u_gradDir) / max(u_gradLen, 0.0001);
   } else if (u_gradKind == 1) {
-    t = length(world - u_gradP0) / max(u_gradRadius, 0.0001);
+    t = length(world) / max(u_gradRadius, 0.0001);
   } else {
-    float a = atan(world.y - u_gradP0.y, world.x - u_gradP0.x) - u_gradAngle;
+    float a = atan(world.y, world.x) - u_gradAngle;
     t = fract(a / (2.0 * PI));
   }
   t = clamp(t, 0.0, 1.0);
@@ -284,7 +282,6 @@ var GRAD_FILL_UNIFORMS = [
   "u_colorMatrix",
   "u_colorBias",
   "u_gradKind",
-  "u_gradP0",
   "u_gradDir",
   "u_gradLen",
   "u_gradRadius",
@@ -355,6 +352,72 @@ var PATTERN_FILL_UNIFORMS = [
   "u_colorBias"
 ];
 var PATTERN_FILL_ATTRIBUTES = ["a_position"];
+
+// src/shaders/builtinPrograms.ts
+var LazyProgram = class {
+  constructor(gl, spec) {
+    this.gl = gl;
+    this.spec = spec;
+  }
+  gl;
+  spec;
+  program = null;
+  get() {
+    if (!this.program) {
+      const { vert, frag, uniforms, attributes } = this.spec;
+      const program = new ShaderProgram(this.gl, vert, frag);
+      program.lookupUniforms(uniforms);
+      program.lookupAttributes(attributes);
+      this.program = program;
+    }
+    return this.program;
+  }
+  /** Delete the program if it was built. It builds again on the next `get`. */
+  release() {
+    if (this.program) this.gl.deleteProgram(this.program.handle);
+    this.program = null;
+  }
+  /** Forget a program its lost context already took with it. */
+  abandon() {
+    this.program = null;
+  }
+};
+var PATH_FILL_SPEC = {
+  vert: VERT_SRC,
+  frag: FRAG_SRC,
+  uniforms: PATH_FILL_UNIFORMS,
+  attributes: PATH_FILL_ATTRIBUTES
+};
+var PATH_FILL_VCOLOR_SPEC = {
+  vert: VCOLOR_VERT_SRC,
+  frag: VCOLOR_FRAG_SRC,
+  uniforms: PATH_FILL_UNIFORMS,
+  attributes: PATH_FILL_VCOLOR_ATTRIBUTES
+};
+var GRAD_FILL_SPEC = {
+  vert: GRAD_VERT_SRC,
+  frag: GRAD_FRAG_SRC,
+  uniforms: GRAD_FILL_UNIFORMS,
+  attributes: GRAD_FILL_ATTRIBUTES
+};
+var BATCH_FILL_MATRICES_SPEC = {
+  vert: BATCH_VERT_SRC,
+  frag: BATCH_MATRICES_FRAG_SRC,
+  uniforms: BATCH_FILL_UNIFORMS,
+  attributes: BATCH_FILL_ATTRIBUTES
+};
+var PATTERN_FILL_SPEC = {
+  vert: PATTERN_VERT_SRC,
+  frag: PATTERN_FRAG_SRC,
+  uniforms: PATTERN_FILL_UNIFORMS,
+  attributes: PATTERN_FILL_ATTRIBUTES
+};
+function createBatchFill(gl) {
+  const program = new ShaderProgram(gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
+  program.lookupUniforms(BATCH_FILL_UNIFORMS);
+  program.lookupAttributes(BATCH_FILL_ATTRIBUTES);
+  return program;
+}
 var L = BATCH_ATTRIBUTE_LOCATIONS;
 var GLYPH_PAINT_VERT_SRC = (
   /* glsl */
@@ -1553,6 +1616,83 @@ function meshHandle(ctx, mesh) {
 function fillMeshHandle(ctx, path) {
   return meshHandle(ctx, fillMesh(ctx, path));
 }
+
+// src/draw/foldColor.ts
+function isIdentityColorMatrix(cm) {
+  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function foldColor(ctx, r, g, b, a) {
+  const cm = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  if (isIdentityColorMatrix(cm)) return [r, g, b, a * alpha];
+  return [
+    clamp01(cm[0] * r + cm[1] * g + cm[2] * b + cm[3] * a + cm[4]),
+    clamp01(cm[5] * r + cm[6] * g + cm[7] * b + cm[8] * a + cm[9]),
+    clamp01(cm[10] * r + cm[11] * g + cm[12] * b + cm[13] * a + cm[14]),
+    clamp01(cm[15] * r + cm[16] * g + cm[17] * b + cm[18] * a + cm[19]) * alpha
+  ];
+}
+var NO_TINT = [1, 1, 1, 1];
+var DIAGONAL = [0, 6, 12, 18];
+function textureTint(ctx) {
+  const cm = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  if (isIdentityColorMatrix(cm)) return alpha === 1 ? NO_TINT : [1, 1, 1, alpha];
+  for (let i = 0; i < 20; i++) {
+    const v = cm[i];
+    if (DIAGONAL.includes(i) ? v < 0 || v > 1 : v !== 0) return null;
+  }
+  return [cm[0], cm[6], cm[12], cm[18] * alpha];
+}
+
+// src/draw/batchMatrices.ts
+function matrixIndex(matrices, colorMatrix, alpha) {
+  for (let i = 0; i < matrices.length; i++) {
+    const m = matrices[i];
+    if (m.alpha === alpha && (m.colorMatrix === colorMatrix || sameValues(m.colorMatrix, colorMatrix))) return i;
+  }
+  return matrices.length < (BATCH_MATRIX_SLOTS ) ? matrices.length : -1;
+}
+var MATRICES = new Float32Array(16 * BATCH_MATRIX_SLOTS);
+var BIASES = new Float32Array(4 * BATCH_MATRIX_SLOTS);
+var ALPHAS = new Float32Array(BATCH_MATRIX_SLOTS);
+var UPLOADED = /* @__PURE__ */ new WeakMap();
+function holds(held, matrices) {
+  if (held.length < matrices.length) return false;
+  for (let i = 0; i < matrices.length; i++) {
+    const a = held[i];
+    const b = matrices[i];
+    if (a.alpha !== b.alpha) return false;
+    if (a.colorMatrix !== b.colorMatrix && !sameValues(a.colorMatrix, b.colorMatrix)) return false;
+  }
+  return true;
+}
+function uploadBatchMatrices(ctx, prog, matrices) {
+  let byProgram = UPLOADED.get(ctx);
+  if (!byProgram) {
+    byProgram = /* @__PURE__ */ new WeakMap();
+    UPLOADED.set(ctx, byProgram);
+  }
+  const held = byProgram.get(prog);
+  if (held !== void 0 && holds(held, matrices)) return;
+  const n = matrices.length;
+  for (let i = 0; i < n; i++) {
+    const cm = matrices[i].colorMatrix;
+    for (let row = 0; row < 4; row++) {
+      for (let col = 0; col < 4; col++) MATRICES[16 * i + col * 4 + row] = cm[row * 5 + col];
+      BIASES[4 * i + row] = cm[row * 5 + 4];
+    }
+    ALPHAS[i] = matrices[i].alpha;
+  }
+  const gl = ctx.gl;
+  gl.uniformMatrix4fv(prog.uniform("u_colorMatrix"), false, MATRICES.subarray(0, 16 * n));
+  gl.uniform4fv(prog.uniform("u_colorBias"), BIASES.subarray(0, 4 * n));
+  gl.uniform1fv(prog.uniform("u_alpha"), ALPHAS.subarray(0, n));
+  byProgram.set(prog, matrices.slice());
+}
+
+// src/draw/flushBatch.ts
 var BATCH_MODEL = mat3.identity();
 var SAMPLER_UNITS = new Int32Array(
   Array.from({ length: BATCH_TEXTURE_SLOTS }, (_, i) => i)
@@ -1566,14 +1706,12 @@ function flushBatch(ctx) {
     return;
   }
   const gl = ctx.gl;
-  const prog = ctx.batchFill;
+  const prog = staged.matrices.length > 1 ? ctx.batchFillMatrices ?? ctx.batchFill : ctx.batchFill;
   gl.useProgram(prog.handle);
   const indexCount = batch.uploadAndBind();
   setProjAndModel(ctx, prog, BATCH_MODEL);
   setColorUniform(ctx, prog, 1, 1, 1, 1);
-  setAlphaUniform(ctx, prog, staged.alpha);
-  gl.uniform1f(prog.uniform("u_synthBold"), staged.synthBold);
-  setColorMatrixUniforms(ctx, prog, staged.colorMatrix);
+  uploadBatchMatrices(ctx, prog, staged.matrices);
   gl.activeTexture(gl.TEXTURE0);
   gl.bindTexture(gl.TEXTURE_2D, ctx.whiteTexture);
   for (let i = 0; i < staged.textures.length; i++) {
@@ -1584,16 +1722,13 @@ function flushBatch(ctx) {
       FIELD_SCALES[2 * (i + 1) + 1] = entry.fieldScale[1];
       continue;
     }
-    if (entry.kind === "ramps") {
-      ctx.gradRamps.bind(i + 1);
-      continue;
-    }
     ctx.imageCache.bind(entry.image, i + 1);
     ctx.imageCache.setMagFilter(
       entry.image,
       entry.sampling === "nearest" ? gl.NEAREST : gl.LINEAR
     );
   }
+  if (staged.ramps) ctx.gradRamps.bind(RAMP_SLOT);
   gl.uniform1iv(prog.uniform("u_samplers"), SAMPLER_UNITS);
   gl.uniform2fv(prog.uniform("u_fieldScale"), FIELD_SCALES);
   applyClipTest(ctx, staged.clipDepth);
@@ -1769,36 +1904,41 @@ function resolvedMarker(ref, scale) {
   return { ...ref, size: resolveMarkerSize(ref, 0, quantizeStrokeScale(ref.size.px, scale)) };
 }
 
-// src/draw/foldColor.ts
-function isIdentityColorMatrix(cm) {
-  return cm === IDENTITY_COLOR_MATRIX || sameValues(IDENTITY_COLOR_MATRIX, cm);
+// src/draw/batchRun.ts
+function slotForBitmap(staged, image, sampling) {
+  for (let i = 0; i < staged.textures.length; i++) {
+    const entry = staged.textures[i];
+    if (entry.kind !== "bitmap" || entry.image !== image) continue;
+    return entry.sampling === sampling ? i + 1 : -1;
+  }
+  return nextFreeSlot(staged);
 }
-var colorFolding = { enabled: true };
-var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
-function foldColor(ctx, staged, r, g, b, a) {
-  if (!staged.foldsAlpha) return [r, g, b, a];
-  const cm = ctx.state.colorMatrix;
-  const alpha = ctx.state.alpha;
-  if (isIdentityColorMatrix(cm)) return [r, g, b, a * alpha];
-  return [
-    clamp01(cm[0] * r + cm[1] * g + cm[2] * b + cm[3] * a + cm[4]),
-    clamp01(cm[5] * r + cm[6] * g + cm[7] * b + cm[8] * a + cm[9]),
-    clamp01(cm[10] * r + cm[11] * g + cm[12] * b + cm[13] * a + cm[14]),
-    clamp01(cm[15] * r + cm[16] * g + cm[17] * b + cm[18] * a + cm[19]) * alpha
-  ];
+function slotForRamps(staged) {
+  if (staged.ramps) return RAMP_SLOT;
+  return nextFreeSlot(staged) < 0 ? -1 : RAMP_SLOT;
 }
-var NO_TINT = [1, 1, 1, 1];
-var DIAGONAL = [0, 6, 12, 18];
-function textureTint(cm) {
-  if (isIdentityColorMatrix(cm)) return NO_TINT;
-  for (let i = 0; i < 20; i++) {
-    const v = cm[i];
-    if (DIAGONAL.includes(i) ? v < 0 || v > 1 : v !== 0) return null;
+function slotForAtlas(staged, id) {
+  for (let i = 0; i < staged.textures.length; i++) {
+    const entry = staged.textures[i];
+    if (entry.kind === "atlas" && entry.id === id) return i + 1;
   }
-  return [cm[0], cm[6], cm[12], cm[18]];
+  return nextFreeSlot(staged);
 }
-function stagedTint(staged, tint) {
-  return staged.foldsAlpha && tint !== null ? tint : NO_TINT;
+function nextFreeSlot(staged) {
+  const taken = staged.textures.length + (staged.ramps ? 1 : 0);
+  return taken + 1 < BATCH_TEXTURE_SLOTS ? staged.textures.length + 1 : -1;
+}
+function runTakes(ctx, staged, colorMatrix, alpha) {
+  return staged.clipDepth === runClipDepth(ctx) && matrixIndex(staged.matrices, colorMatrix, alpha) >= 0;
+}
+function openRun(ctx) {
+  ctx.batchState ??= { clipDepth: runClipDepth(ctx), matrices: [], textures: [], ramps: false };
+  return ctx.batchState;
+}
+function takeMatrix(staged, colorMatrix, alpha) {
+  const index = matrixIndex(staged.matrices, colorMatrix, alpha);
+  if (index === staged.matrices.length) staged.matrices.push({ colorMatrix, alpha });
+  return index;
 }
 function batchPaint(ctx, fill, hasVColors) {
   if (hasVColors) return void 0;
@@ -1887,39 +2027,6 @@ function spaceToDevice(ctx, units) {
 }
 
 // src/draw/batch.ts
-function stagedStateIsLive(ctx, staged, image, sampling, synthBold = 0, folds = false) {
-  if (staged.clipDepth !== (ctx.clipStack.length === 0 ? ctx.clipDepth : runClipDepth(ctx))) return false;
-  if (staged.synthBold !== synthBold) return false;
-  if (!staged.foldsAlpha && staged.alpha !== ctx.state.alpha) return false;
-  if (image !== void 0 && slotForBitmap(staged, image, sampling) < 0) return false;
-  const colorMatrix = ctx.state.colorMatrix;
-  if (staged.colorMatrix === colorMatrix || sameValues(staged.colorMatrix, colorMatrix)) return true;
-  return folds && staged.foldsAlpha;
-}
-function slotForBitmap(staged, image, sampling) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    const entry = staged.textures[i];
-    if (entry.kind !== "bitmap" || entry.image !== image) continue;
-    return entry.sampling === sampling ? i + 1 : -1;
-  }
-  return nextFreeSlot(staged);
-}
-function slotForRamps(staged) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    if (staged.textures[i].kind === "ramps") return i + 1;
-  }
-  return nextFreeSlot(staged);
-}
-function slotForAtlas(staged, id) {
-  for (let i = 0; i < staged.textures.length; i++) {
-    const entry = staged.textures[i];
-    if (entry.kind === "atlas" && entry.id === id) return i + 1;
-  }
-  return nextFreeSlot(staged);
-}
-function nextFreeSlot(staged) {
-  return staged.textures.length + 1 < BATCH_TEXTURE_SLOTS ? staged.textures.length + 1 : -1;
-}
 var MAX_BATCHED_MESH_VERTICES = 96;
 var MAX_BATCHED_MESH_VERTICES_IN_RUN = 1024;
 var meshBatching = {
@@ -1932,79 +2039,78 @@ function canBatchMesh(ctx, mesh) {
   return mesh.vertices.length >> 1 <= cap;
 }
 function stageSolid(ctx, vertices) {
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, 0, colorFolding.enabled)) {
-    flushBatch(ctx);
-  }
+  const colorMatrix = IDENTITY_COLOR_MATRIX ;
+  const alpha = 1 ;
+  const open = ctx.batchState;
+  if (open !== void 0 && !runTakes(ctx, open, colorMatrix, alpha)) flushBatch(ctx);
   if (ctx.drawBatch.wouldOverflow(vertices)) flushBatch(ctx);
-  return openRun(ctx, colorFolding.enabled);
-}
-function openRun(ctx, folds = false) {
-  if (ctx.batchState === void 0) {
-    const colorMatrix = folds ? IDENTITY_COLOR_MATRIX : ctx.state.colorMatrix;
-    const foldsAlpha = isIdentityColorMatrix(colorMatrix);
-    ctx.batchState = {
-      alpha: foldsAlpha ? 1 : ctx.state.alpha,
-      colorMatrix,
-      clipDepth: runClipDepth(ctx),
-      synthBold: 0,
-      foldsAlpha,
-      textures: []
-    };
-  }
-  return ctx.batchState;
+  const matrix = takeMatrix(openRun(ctx), colorMatrix, alpha);
+  return packSlot(withMatrix(WHITE_SLOT, matrix), PAINT_MODE_PLAIN);
+}
+var UNTINTED = [1, 1, 1, 1];
+function texturedUnder(ctx, alphaInEntry) {
+  const tint = textureTint(ctx);
+  if (tint !== null) return { colorMatrix: IDENTITY_COLOR_MATRIX, alpha: 1, tint, slot: 0 };
+  const colorMatrix = ctx.state.colorMatrix;
+  const alpha = ctx.state.alpha;
+  return alphaInEntry ? { colorMatrix, alpha, tint: UNTINTED, slot: 0 } : { colorMatrix, alpha: 1, tint: [1, 1, 1, alpha], slot: 0 };
 }
 function stageImage(ctx, image, sampling) {
-  const tint = textureTint(ctx.state.colorMatrix) ;
-  if (ctx.batchState !== void 0 && !stagedStateIsLive(ctx, ctx.batchState, image, sampling, 0, tint !== null)) {
+  const under = texturedUnder(ctx, false);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForBitmap(open, image, sampling) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
-  const staged = openRun(ctx, tint !== null);
+  const staged = openRun(ctx);
   let slot = slotForBitmap(staged, image, sampling);
   if (slot > staged.textures.length) {
     staged.textures.push({ kind: "bitmap", image, sampling });
     slot = staged.textures.length;
   }
-  return { staged, slot, tint: stagedTint(staged, tint) };
+  under.slot = withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha));
+  return under;
 }
-function stageGlyphs(ctx, atlasId, fieldScale, synthBold) {
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState, void 0, void 0, synthBold, colorFolding.enabled) || slotForAtlas(ctx.batchState, atlasId) < 0)) {
+function stageGlyphs(ctx, atlasId, fieldScale) {
+  const colorMatrix = IDENTITY_COLOR_MATRIX ;
+  const alpha = 1 ;
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, colorMatrix, alpha) || slotForAtlas(open, atlasId) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
-  const staged = openRun(ctx, colorFolding.enabled);
-  staged.synthBold = synthBold;
+  const staged = openRun(ctx);
   let slot = slotForAtlas(staged, atlasId);
   if (slot > staged.textures.length) {
     staged.textures.push({ kind: "atlas", id: atlasId, fieldScale });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  return withMatrix(slot, takeMatrix(staged, colorMatrix, alpha));
 }
 function stageRamps(ctx, stops, space, vertices) {
   if (ctx.gradRamps.wouldReshape(stops, space)) flushBatch(ctx);
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState) || slotForRamps(ctx.batchState) < 0)) {
+  const under = texturedUnder(ctx, true);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForRamps(open) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(vertices)) flushBatch(ctx);
   const staged = openRun(ctx);
-  let slot = slotForRamps(staged);
-  if (slot > staged.textures.length) {
-    staged.textures.push({ kind: "ramps" });
-    slot = staged.textures.length;
-  }
-  return { staged, slot, rowV: ctx.gradRamps.rowV(ctx.gradRamps.upload(stops, space)) };
-}
-function stagedAlpha(ctx, staged, opacity) {
-  return (opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  const slot = slotForRamps(staged);
+  staged.ramps = true;
+  return {
+    slot: withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha)),
+    tint: under.tint,
+    rowV: ctx.gradRamps.rowV(ctx.gradRamps.upload(stops, space))
+  };
 }
-function stagedColor(ctx, staged, paint) {
+function stagedColor(ctx, paint) {
   const [r, g, b, a] = resolveColor(paint.color);
-  return foldColor(ctx, staged, r, g, b, a * (paint.opacity ?? 1));
+  return foldColor(ctx, r, g, b, a * (paint.opacity ?? 1));
 }
 function pushRect(ctx, rect, fill) {
-  const staged = stageSolid(ctx, 4);
-  const [r, g, b, a] = stagedColor(ctx, staged, fill);
+  const slot = stageSolid(ctx, 4);
+  const [r, g, b, a] = stagedColor(ctx, fill);
   if (!ctx.drawBatch.pushRect(
     rect.x,
     rect.y,
@@ -2014,18 +2120,19 @@ function pushRect(ctx, rect, fill) {
     r,
     g,
     b,
-    a
+    a,
+    slot
   )) retryUncut(ctx, rect, fill, pushRect);
 }
 function pushMesh(ctx, mesh, paint) {
-  const staged = stageSolid(ctx, mesh.vertices.length >> 1);
-  const [r, g, b, a] = stagedColor(ctx, staged, paint);
-  if (!ctx.drawBatch.pushMesh(mesh, ctx.state.transform, r, g, b, a)) {
+  const slot = stageSolid(ctx, mesh.vertices.length >> 1);
+  const [r, g, b, a] = stagedColor(ctx, paint);
+  if (!ctx.drawBatch.pushMesh(mesh, ctx.state.transform, r, g, b, a, slot)) {
     retryUncut(ctx, mesh, paint, pushMesh);
   }
 }
 function pushRampRect(ctx, rect, paint) {
-  const { staged, slot, rowV } = stageRamps(ctx, paint.stops, paint.space, 4);
+  const { slot, tint, rowV } = stageRamps(ctx, paint.stops, paint.space, 4);
   const { uv, post } = rampVertices(paint, rowV);
   if (!ctx.drawBatch.pushGradientRect(
     rect.x,
@@ -2037,14 +2144,14 @@ function pushRampRect(ctx, rect, paint) {
     post,
     slot,
     paint.mode,
-    1,
-    1,
-    1,
-    stagedAlpha(ctx, staged, paint.opacity)
+    tint[0],
+    tint[1],
+    tint[2],
+    (paint.opacity ?? 1) * tint[3]
   )) retryUncut(ctx, rect, paint, pushRampRect);
 }
 function pushRampMesh(ctx, mesh, paint) {
-  const { staged, slot, rowV } = stageRamps(ctx, paint.stops, paint.space, mesh.vertices.length >> 1);
+  const { slot, tint, rowV } = stageRamps(ctx, paint.stops, paint.space, mesh.vertices.length >> 1);
   const { uv, post } = rampVertices(paint, rowV);
   if (!ctx.drawBatch.pushGradientMesh(
     mesh,
@@ -2053,10 +2160,10 @@ function pushRampMesh(ctx, mesh, paint) {
     post,
     slot,
     paint.mode,
-    1,
-    1,
-    1,
-    stagedAlpha(ctx, staged, paint.opacity)
+    tint[0],
+    tint[1],
+    tint[2],
+    (paint.opacity ?? 1) * tint[3]
   )) retryUncut(ctx, mesh, paint, pushRampMesh);
 }
 function tryStageFill(ctx, mesh, paint) {
@@ -2070,7 +2177,9 @@ function tryStageFill(ctx, mesh, paint) {
 }
 var NO_FIELD = [0, 0];
 function stageColorGlyphs(ctx, atlasId) {
-  if (ctx.batchState !== void 0 && (!stagedStateIsLive(ctx, ctx.batchState) || slotForAtlas(ctx.batchState, atlasId) < 0)) {
+  const under = texturedUnder(ctx, false);
+  const open = ctx.batchState;
+  if (open !== void 0 && (!runTakes(ctx, open, under.colorMatrix, under.alpha) || slotForAtlas(open, atlasId) < 0)) {
     flushBatch(ctx);
   }
   if (ctx.drawBatch.wouldOverflow(4)) flushBatch(ctx);
@@ -2080,7 +2189,8 @@ function stageColorGlyphs(ctx, atlasId) {
     staged.textures.push({ kind: "atlas", id: atlasId, fieldScale: NO_FIELD });
     slot = staged.textures.length;
   }
-  return { staged, slot };
+  under.slot = withMatrix(slot, takeMatrix(staged, under.colorMatrix, under.alpha));
+  return under;
 }
 function patternTileSpace(spaceInverse, origin, transform) {
   const [a, b, c, d] = transform ?? [1, 0, 0, 1];
@@ -2142,8 +2252,10 @@ function bindPattern(ctx, prog, fill, model) {
   gl.useProgram(prog.handle);
   setProjAndModel(ctx, prog, model);
   setColorMatrixUniforms(ctx, prog);
-  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(tileSpace));
   const [tw, th] = textureSize(entry.source);
+  tileSpace[6] -= Math.floor(tileSpace[6] / tw) * tw;
+  tileSpace[7] -= Math.floor(tileSpace[7] / th) * th;
+  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(tileSpace));
   gl.uniform2f(prog.uniform("u_tileSize"), tw, th);
   ctx.textureCache.bind(tex.id, 0);
   gl.uniform1i(prog.uniform("u_sampler"), 0);
@@ -2159,11 +2271,13 @@ function textureSize(source) {
 function bindGradient(ctx, prog, fill, model) {
   const inverse = gradientSpaceInverse(ctx, fill.units);
   if (!inverse) return null;
+  const about = fill.kind === "linear-gradient" ? fill.from : fill.center;
+  const aboutStart = mat3.multiply(mat3.translated(mat3.identity(), -about.x, -about.y), inverse);
   const gl = ctx.gl;
   const row = ctx.gradRamps.upload(fill.stops, fill.interpolate ?? "rgb");
   gl.useProgram(prog.handle);
   setProjAndModel(ctx, prog, model);
-  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(inverse));
+  gl.uniformMatrix3fv(prog.uniform("u_worldInv"), false, mat3.toUniform(aboutStart));
   setColorMatrixUniforms(ctx, prog);
   ctx.gradRamps.bind(0);
   gl.uniform1i(prog.uniform("u_ramp"), 0);
@@ -2175,21 +2289,18 @@ function bindGradient(ctx, prog, fill, model) {
     const dx = fill.to.x - fill.from.x;
     const dy = fill.to.y - fill.from.y;
     const len = Math.hypot(dx, dy) || 1;
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.from.x, fill.from.y);
     gl.uniform2f(prog.uniform("u_gradDir"), dx / len, dy / len);
     gl.uniform1f(prog.uniform("u_gradLen"), len);
     gl.uniform1f(prog.uniform("u_gradRadius"), 0);
     gl.uniform1f(prog.uniform("u_gradAngle"), 0);
   } else if (fill.kind === "radial-gradient") {
     gl.uniform1i(prog.uniform("u_gradKind"), 1);
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.center.x, fill.center.y);
     gl.uniform2f(prog.uniform("u_gradDir"), 0, 0);
     gl.uniform1f(prog.uniform("u_gradLen"), 0);
     gl.uniform1f(prog.uniform("u_gradRadius"), fill.radius);
     gl.uniform1f(prog.uniform("u_gradAngle"), 0);
   } else {
     gl.uniform1i(prog.uniform("u_gradKind"), 2);
-    gl.uniform2f(prog.uniform("u_gradP0"), fill.center.x, fill.center.y);
     gl.uniform2f(prog.uniform("u_gradDir"), 0, 0);
     gl.uniform1f(prog.uniform("u_gradLen"), 0);
     gl.uniform1f(prog.uniform("u_gradRadius"), 0);
@@ -2522,11 +2633,9 @@ function drawColorGlyphs(ctx, group, dx, dy) {
   const atlasId = colorPageTextureId(group.page);
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let { staged, slot } = stageColorGlyphs(ctx, atlasId);
-  let alpha = opacity * (staged.foldsAlpha ? ctx.state.alpha : 1);
+  let { slot, tint } = stageColorGlyphs(ctx, atlasId);
   const restage = () => {
-    ({ staged, slot } = stageColorGlyphs(ctx, atlasId));
-    alpha = opacity * (staged.foldsAlpha ? ctx.state.alpha : 1);
+    ({ slot, tint } = stageColorGlyphs(ctx, atlasId));
   };
   for (const q of group.quads) {
     if (batch.wouldOverflow(4)) {
@@ -2544,8 +2653,11 @@ function drawColorGlyphs(ctx, group, dx, dy) {
       q.v0,
       q.u1,
       q.v1,
-      alpha,
-      slot
+      opacity * tint[3],
+      slot,
+      tint[0],
+      tint[1],
+      tint[2]
     )) {
       cut = enterUncut(ctx);
       restage();
@@ -2694,14 +2806,19 @@ function drawTextDecorations(ctx, decorations, dx, dy) {
     const [r, g, b, a] = isSolidPaint(paint) ? resolveColor(paint.color) : [0, 0, 0, 1];
     let cut;
     for (; ; ) {
-      const staged = stageSolid(ctx, 4);
+      const slot = stageSolid(ctx, 4);
+      const rgba = foldColor(ctx, r, g, b, a);
       if (ctx.drawBatch.pushRect(
         d.x0 + dx,
         d.y0 + dy,
         d.x1 - d.x0,
         d.y1 - d.y0,
         ctx.state.transform,
-        ...foldColor(ctx, staged, r, g, b, a)
+        rgba[0],
+        rgba[1],
+        rgba[2],
+        rgba[3],
+        slot
       )) break;
       cut = enterUncut(ctx);
     }
@@ -2743,13 +2860,12 @@ function drawTextGroup(ctx, group, dx, dy) {
   const color = isSolidPaint(fill) ? resolveColor(fill.color) : [0, 0, 0, 1];
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let { staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold);
-  let rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+  let slot = stageGlyphs(ctx, atlasId, fieldScale);
+  const rgba = foldColor(ctx, color[0], color[1], color[2], color[3]);
   for (const q of group.quads) {
     if (batch.wouldOverflow(4)) {
       flushBatch(ctx);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     let cut;
     while (!batch.pushGlyph(
@@ -2769,16 +2885,15 @@ function drawTextGroup(ctx, group, dx, dy) {
       rgba[2],
       rgba[3],
       slot,
-      mode
+      mode,
+      bold
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot } = stageGlyphs(ctx, atlasId, fieldScale, bold));
-      rgba = foldColor(ctx, staged, color[0], color[1], color[2], color[3]);
+      slot = stageGlyphs(ctx, atlasId, fieldScale);
     }
   }
 }
@@ -2835,7 +2950,8 @@ function drawPaintedGlyphs(ctx, group, dx, dy, kind, atlasId, mode, bold, tanIta
       1,
       1,
       GLYPH_PAINT_ATLAS_UNIT,
-      mode
+      mode,
+      0
     );
   }
   drawStagedGlyphs(ctx);
@@ -2891,7 +3007,7 @@ function drawImage(ctx, cmd) {
     const sh = cmd.source?.h ?? cmd.image.height;
     if (isMinified(minifiedLimits(ctx), sw, sh, cmd.w, cmd.h)) ctx.imageCache.buildMipmaps(cmd.image);
   }
-  const { staged, slot, tint } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
+  const { slot, tint } = stageImage(ctx, cmd.image, cmd.sampling ?? "linear");
   const src = cmd.source;
   let u0 = 0, v0 = 0, u1 = 1, v1 = 1;
   if (src) {
@@ -2921,10 +3037,8 @@ function drawImage(ctx, cmd) {
     v0,
     u1,
     v1,
-    // Group alpha rides the vertices only where it rode the solid colors too:
-    // with a real color matrix in the run it is `u_alpha`, and folding it here
-    // as well would apply it twice.
-    (cmd.opacity ?? 1) * (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3],
+    // Group alpha rides here with the opacity, in the tint's fourth channel.
+    (cmd.opacity ?? 1) * tint[3],
     slot,
     tint[0],
     tint[1],
@@ -2945,17 +3059,15 @@ function drawSprites(ctx, cmd) {
     }
   }
   const sampling = cmd.sampling ?? "linear";
-  let { staged, slot, tint } = stageImage(ctx, cmd.image, sampling);
+  let { slot, tint } = stageImage(ctx, cmd.image, sampling);
   const batch = ctx.drawBatch;
   const m = ctx.state.transform;
-  let groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
   const tw = cmd.image.width;
   const th = cmd.image.height;
   for (let s = 0, i = 0; s < count; s++, i += SPRITE_STRIDE) {
     if (batch.wouldOverflow(4)) {
       flushBatch(ctx);
-      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
     const sx = data[i + 4], sy = data[i + 5], sw = data[i + 6], sh = data[i + 7];
     let cut;
@@ -2969,20 +3081,18 @@ function drawSprites(ctx, cmd) {
       sy / th,
       (sx + sw) / tw,
       (sy + sh) / th,
-      data[i + 8] * groupAlpha,
+      data[i + 8] * tint[3],
       slot,
       tint[0],
       tint[1],
       tint[2]
     )) {
       cut = enterUncut(ctx);
-      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
     if (cut !== void 0) {
       leaveUncut(ctx, cut);
-      ({ staged, slot, tint } = stageImage(ctx, cmd.image, sampling));
-      groupAlpha = (staged.foldsAlpha ? ctx.state.alpha : 1) * tint[3];
+      ({ slot, tint } = stageImage(ctx, cmd.image, sampling));
     }
   }
 }
@@ -3484,9 +3594,12 @@ var GLYPH_PAINT_SOURCES = {
 var WeaselRenderer = class {
   gl;
   stats = { drawCalls: 0, ms: 0, spans: [] };
+  /** Built on the first frame that draws with each, so a one-shot render of
+   *  plain shapes builds the batch program alone. */
   pathFill;
   pathFillVColor;
   batchFill;
+  batchFillMatrices;
   gradFill;
   patternFill;
   /** Compiled on first use: only atlas text under a texture paint needs one. */
@@ -3566,21 +3679,12 @@ var WeaselRenderer = class {
     }
     this.applyGlState();
     this.applyTarget();
-    this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
-    this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
-    this.pathFillVColor = new ShaderProgram(this.gl, VCOLOR_VERT_SRC, VCOLOR_FRAG_SRC);
-    this.pathFillVColor.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFillVColor.lookupAttributes(PATH_FILL_VCOLOR_ATTRIBUTES);
-    this.batchFill = new ShaderProgram(this.gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
-    this.batchFill.lookupUniforms(BATCH_FILL_UNIFORMS);
-    this.batchFill.lookupAttributes(BATCH_FILL_ATTRIBUTES);
-    this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
-    this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
-    this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
-    this.patternFill = new ShaderProgram(this.gl, PATTERN_VERT_SRC, PATTERN_FRAG_SRC);
-    this.patternFill.lookupUniforms(PATTERN_FILL_UNIFORMS);
-    this.patternFill.lookupAttributes(PATTERN_FILL_ATTRIBUTES);
+    this.pathFill = new LazyProgram(this.gl, PATH_FILL_SPEC);
+    this.pathFillVColor = new LazyProgram(this.gl, PATH_FILL_VCOLOR_SPEC);
+    this.gradFill = new LazyProgram(this.gl, GRAD_FILL_SPEC);
+    this.patternFill = new LazyProgram(this.gl, PATTERN_FILL_SPEC);
+    this.batchFillMatrices = new LazyProgram(this.gl, BATCH_FILL_MATRICES_SPEC);
+    this.batchFill = createBatchFill(this.gl);
     this.meshCache = new GLMeshCache(this.gl);
     this.textureCache = new GLTextureCache(this.gl);
     this.imageCache = new GLImageCache(this.gl, this.imageMinification);
@@ -3589,6 +3693,9 @@ var WeaselRenderer = class {
     this.drawBatch = new DrawBatch(this.gl, this.batchFill);
     this.whiteTexture = createWhiteTexture(this.gl);
   }
+  lazyPrograms() {
+    return [this.pathFill, this.pathFillVColor, this.gradFill, this.patternFill, this.batchFillMatrices];
+  }
   uploadQuadGeometry() {
     const gl = this.gl;
     this.quadVbo = gl.createBuffer();
@@ -3742,21 +3849,8 @@ var WeaselRenderer = class {
     this.paintScratch.release();
     this.paintResources.release();
     this.paintResources = createPaintResources();
-    this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
-    this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
-    this.pathFillVColor = new ShaderProgram(this.gl, VCOLOR_VERT_SRC, VCOLOR_FRAG_SRC);
-    this.pathFillVColor.lookupUniforms(PATH_FILL_UNIFORMS);
-    this.pathFillVColor.lookupAttributes(PATH_FILL_VCOLOR_ATTRIBUTES);
-    this.batchFill = new ShaderProgram(this.gl, BATCH_VERT_SRC, BATCH_FRAG_SRC);
-    this.batchFill.lookupUniforms(BATCH_FILL_UNIFORMS);
-    this.batchFill.lookupAttributes(BATCH_FILL_ATTRIBUTES);
-    this.gradFill = new ShaderProgram(this.gl, GRAD_VERT_SRC, GRAD_FRAG_SRC);
-    this.gradFill.lookupUniforms(GRAD_FILL_UNIFORMS);
-    this.gradFill.lookupAttributes(GRAD_FILL_ATTRIBUTES);
-    this.patternFill = new ShaderProgram(this.gl, PATTERN_VERT_SRC, PATTERN_FRAG_SRC);
-    this.patternFill.lookupUniforms(PATTERN_FILL_UNIFORMS);
-    this.patternFill.lookupAttributes(PATTERN_FILL_ATTRIBUTES);
+    for (const lazy of this.lazyPrograms()) lazy.abandon();
+    this.batchFill = createBatchFill(this.gl);
     this.glyphPaintPrograms.clear();
     this.meshCache = new GLMeshCache(this.gl);
     this.textureCache = new GLTextureCache(this.gl);
@@ -3795,14 +3889,8 @@ var WeaselRenderer = class {
     }
     this.meshCache.dispose();
     this.paintResources.release();
-    for (const prog of [
-      this.pathFill,
-      this.pathFillVColor,
-      this.batchFill,
-      this.gradFill,
-      this.patternFill,
-      ...this.glyphPaintPrograms.values()
-    ]) {
+    for (const lazy of this.lazyPrograms()) lazy.release();
+    for (const prog of [this.batchFill, ...this.glyphPaintPrograms.values()]) {
       gl.deleteProgram(prog.handle);
     }
     this.glyphPaintPrograms.clear();
@@ -3853,13 +3941,25 @@ var WeaselRenderer = class {
       gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
     }
     const device = this.deviceRect();
+    const { pathFill, pathFillVColor, gradFill, patternFill, batchFillMatrices } = this;
     const ctx = {
       gl,
-      pathFill: this.pathFill,
-      pathFillVColor: this.pathFillVColor,
+      get pathFill() {
+        return pathFill.get();
+      },
+      get pathFillVColor() {
+        return pathFillVColor.get();
+      },
       batchFill: this.batchFill,
-      gradFill: this.gradFill,
-      patternFill: this.patternFill,
+      get batchFillMatrices() {
+        return batchFillMatrices.get();
+      },
+      get gradFill() {
+        return gradFill.get();
+      },
+      get patternFill() {
+        return patternFill.get();
+      },
       meshCache: this.meshCache,
       textureCache: this.textureCache,
       imageCache: this.imageCache,
@@ -3933,11 +4033,11 @@ var WeaselRenderer = class {
   }
   /** @internal */
   _pathFill() {
-    return this.pathFill;
+    return this.pathFill.get();
   }
   /** @internal */
   _pathFillVColor() {
-    return this.pathFillVColor;
+    return this.pathFillVColor.get();
   }
   /** @internal */
   _drawBatch() {
@@ -3948,12 +4048,16 @@ var WeaselRenderer = class {
     return this.batchFill;
   }
   /** @internal */
+  _batchFillMatrices() {
+    return this.batchFillMatrices.get();
+  }
+  /** @internal */
   _gradFill() {
-    return this.gradFill;
+    return this.gradFill.get();
   }
   /** @internal */
   _patternFill() {
-    return this.patternFill;
+    return this.patternFill.get();
   }
   /** @internal */
   _meshCache() {