@weasel-js/renderer 1.10.0 → 1.11.0

package/README.md

@@ -4,7 +4,7 @@ A WebGL2 renderer that turns a list of draw commands into pixels.
 
 Part of [weasel](https://github.com/orochi235/weasel), a domain-agnostic 2D
 scene-graph canvas kit for React. See the
-[API reference](https://orochi235.github.io/weasel/api/).
+[API reference](https://orochi235.github.io/weasel/#pkg/renderer).
 
 ```sh
 npm install @weasel-js/renderer

package/dist/{chunk-LFD47OV2.js → chunk-CUJEWF5G.js}

@@ -1,7 +1,7 @@
 import { ownTextureIds, rasterizeTile, drawTileShapes, tileGeometry, tileSize, registerTextureAs, textureRegistry, unregisterTexture } from './chunk-Q4SIHV7Q.js';
-import { defaultOpenFill, pathFromD, boundsOfPath } from '@weasel-js/geom';
+import { DEFAULT_FLATTEN_TOLERANCE, defaultOpenFill, pathFromD, boundsOfPath } from '@weasel-js/geom';
 import { tessellate } from '@weasel-js/geom/tessellate';
-import { createReflectable, createEmitter } from '@weasel-js/registry';
+import { createReflectable, createEmitter, isDev } from '@weasel-js/registry';
 import { resolveStrokeWidth, strokeInsets, tessellateStroke, markerGeneration, screenSpaceKey, markerHeads, metricKey, getMarker, markerKeyOf, markerReadsKey } from '@weasel-js/stroke';
 import { isTileKind, isPatternPaint, tileSpecOf, isTilePaint, patternPlacementOf } from '@weasel-js/paint';
 import { GLYPH_COVERAGE_GLSL } from '@weasel-js/font';
@@ -180,13 +180,17 @@ function wrapModes(gl, rep) {
       return [gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE];
   }
 }
+var FILL_TOLERANCES_PER_PATH = 4;
 var cache = /* @__PURE__ */ new WeakMap();
-function getMesh(path) {
+function getMesh(path, flattenTolerance = DEFAULT_FLATTEN_TOLERANCE) {
   const openFill = defaultOpenFill();
-  const cached = cache.get(path);
+  let byTolerance = cache.get(path);
+  if (byTolerance === void 0) cache.set(path, byTolerance = /* @__PURE__ */ new Map());
+  const cached = byTolerance.get(flattenTolerance);
   if (cached !== void 0 && cached.openFill === openFill) return cached.mesh;
-  const mesh = tessellate(path);
-  cache.set(path, { mesh, openFill });
+  const mesh = tessellate(path, { flattenTolerance });
+  if (cached === void 0 && byTolerance.size >= FILL_TOLERANCES_PER_PATH) byTolerance.clear();
+  byTolerance.set(flattenTolerance, { mesh, openFill });
   return mesh;
 }
 function _resetCacheForTests() {
@@ -200,7 +204,6 @@ function _resetProgramRegistryForTests() {
 function getProgramSource(id) {
   return registry.get(id) ?? null;
 }
-var isDev = () => typeof process !== "undefined" ? process.env.NODE_ENV !== "production" : true;
 function registerProgram(id, vert, frag) {
   if (registry.has(id) && !isDev()) {
     throw new Error(`weasel registerProgram: duplicate program id "${id}". In production, re-registration is not allowed. Pass a unique id or call in dev mode.`);
@@ -298,6 +301,7 @@ function configKey(stroke, flattenTolerance, spaces) {
     stroke.align ?? "center",
     (stroke.dash ?? []).join(","),
     stroke.varyingWidthJoinThreshold ?? "",
+    stroke.nib ? `${stroke.nib.angle}:${stroke.nib.ratio}` : "",
     flattenTolerance ?? "",
     insets.start,
     insets.end,
@@ -617,8 +621,12 @@ vec3 straightRgb(vec4 premultiplied) {
 );
 
 // src/shaders/batchFill.ts
-var BATCH_TEXTURE_SLOTS = 8;
+var BATCH_TEXTURE_SLOTS = 16;
 var WHITE_SLOT = 0;
+var RAMP_SLOT = BATCH_TEXTURE_SLOTS - 1;
+var BATCH_MATRIX_SLOTS = 8;
+var PAINT_MODES = 8;
+var MATRIX_STRIDE = BATCH_TEXTURE_SLOTS * PAINT_MODES;
 var PAINT_MODE_PLAIN = 0;
 var PAINT_MODE_RADIAL = 3;
 var PAINT_MODE_CONIC = 4;
@@ -627,6 +635,9 @@ var INV_TAU = (1 / (2 * Math.PI)).toFixed(10);
 function packSlot(slot, mode) {
   return slot + BATCH_TEXTURE_SLOTS * mode;
 }
+function withMatrix(slot, matrix) {
+  return slot + MATRIX_STRIDE * matrix;
+}
 var BATCH_ATTRIBUTE_LOCATIONS = {
   a_position: 0,
   a_vertexColor: 1,
@@ -635,12 +646,16 @@ var BATCH_ATTRIBUTE_LOCATIONS = {
   a_texSlot: 4
 };
 var L = BATCH_ATTRIBUTE_LOCATIONS;
-function sampleChain(slots) {
-  const arms = [];
-  for (let i = 1; i < slots; i++) {
-    arms.push(`  if (slot == ${i}) return texture(u_samplers[${i}], uv);`);
-  }
-  return arms.join("\n");
+function sampleTree(lo, hi, indent = "  ") {
+  if (lo === hi) return `${indent}return texture(u_samplers[${lo}], uv);`;
+  const mid = lo + hi + 1 >> 1;
+  return [
+    `${indent}if (slot < ${mid}) {`,
+    sampleTree(lo, mid - 1, `${indent}  `),
+    `${indent}} else {`,
+    sampleTree(mid, hi, `${indent}  `),
+    `${indent}}`
+  ].join("\n");
 }
 var BATCH_VERT_SRC = (
   /* glsl */
@@ -657,6 +672,7 @@ out vec2 v_uv;
 out float v_post;
 flat out int v_texSlot;
 flat out float v_paintMode;
+flat out int v_matrix;
 void main() {
   vec3 screen = u_model * vec3(a_position, 1.0);
   vec3 clip = u_proj * vec3(screen.xy, 1.0);
@@ -664,34 +680,39 @@ void main() {
   v_vertexColor = a_vertexColor;
   v_uv = a_uv;
   v_post = a_post;
-  // slot + 8 * mode, unpacked \u2014 see the file header for why they share a float.
+  // slot + 16 * mode + 128 * matrix, unpacked \u2014 see the file header for why
+  // they share a float.
   int packed = int(a_texSlot + 0.5);
   v_texSlot = packed % ${BATCH_TEXTURE_SLOTS};
-  v_paintMode = float(packed / ${BATCH_TEXTURE_SLOTS});
+  v_paintMode = float((packed / ${BATCH_TEXTURE_SLOTS}) % ${PAINT_MODES});
+  v_matrix = packed / ${MATRIX_STRIDE};
 }
 `
 );
-var BATCH_FRAG_SRC = (
-  /* glsl */
-  `#version 300 es
+function batchFragSrc(matrices) {
+  const m = matrices === 1 ? "0" : "v_matrix";
+  return (
+    /* glsl */
+    `#version 300 es
 precision highp float;
 in vec4 v_vertexColor;
 in vec2 v_uv;
 in float v_post;
 flat in int v_texSlot;
 flat in float v_paintMode;
+flat in int v_matrix;
 uniform sampler2D u_samplers[${BATCH_TEXTURE_SLOTS}];
 uniform vec4 u_color;
-uniform float u_alpha;
-uniform float u_synthBold;
+uniform float u_alpha[${matrices}];
 uniform vec2 u_fieldScale[${BATCH_TEXTURE_SLOTS}];
-uniform mat4 u_colorMatrix;
-uniform vec4 u_colorBias;
+uniform mat4 u_colorMatrix[${matrices}];
+uniform vec4 u_colorBias[${matrices}];
 out vec4 outColor;
 
 vec4 sampleSlot(int slot, vec2 uv) {
-${sampleChain(BATCH_TEXTURE_SLOTS)}
-  return texture(u_samplers[0], uv);
+${sampleTree(0, BATCH_TEXTURE_SLOTS - 1)}
+  // Never reached: every slot returns above.
+  return vec4(0.0);
 }
 ${GLYPH_COVERAGE_GLSL}
 ${STRAIGHT_RGB_GLSL}
@@ -714,7 +735,7 @@ void main() {
     float t = v_paintMode > ${PAINT_MODE_CONIC - 0.5}
       ? fract(atan(v_uv.y, v_uv.x) * ${INV_TAU})
       : length(v_uv);
-    texel = sampleSlot(v_texSlot, vec2(t, v_post));
+    texel = texture(u_samplers[${RAMP_SLOT}], vec2(t, v_post));
   } else {
     texel = sampleSlot(v_texSlot, v_uv);
   }
@@ -722,24 +743,26 @@ void main() {
   texel.rgb = mix(texel.rgb, straightRgb(texel), step(${PAINT_MODE_IMAGE - 0.5}, v_paintMode));
   float isGlyph = step(0.5, v_paintMode) * step(v_paintMode, 2.5);
   // Unconditional, and multiplied out afterwards rather than branched around:
-  // see the file header.
-  float coverage = glyphCoverage(texel, v_paintMode, u_synthBold, v_uv, u_fieldScale[v_texSlot]);
+  // see the file header. A glyph's a_post is its synthetic-bold shift.
+  float coverage = glyphCoverage(texel, v_paintMode, v_post * isGlyph, v_uv, u_fieldScale[v_texSlot]);
   // A glyph's texel is a distance field, so it takes no part in the color; a
   // plain vertex multiplies its texel in as it always did.
   vec4 src = mix(texel, vec4(1.0), isGlyph) * u_color * v_vertexColor;
-  vec4 mapped = clamp(u_colorMatrix * src + u_colorBias, 0.0, 1.0);
-  float a = mapped.a * u_alpha * mix(v_post, 1.0, isGrad) * mix(1.0, coverage, isGlyph);
+  vec4 mapped = clamp(u_colorMatrix[${m}] * src + u_colorBias[${m}], 0.0, 1.0);
+  float a = mapped.a * u_alpha[${m}] * mix(v_post, 1.0, max(isGrad, isGlyph)) * mix(1.0, coverage, isGlyph);
   outColor = vec4(mapped.rgb * a, a);
 }
 `
-);
+  );
+}
+var BATCH_FRAG_SRC = batchFragSrc(1);
+var BATCH_MATRICES_FRAG_SRC = batchFragSrc(BATCH_MATRIX_SLOTS);
 var BATCH_FILL_UNIFORMS = [
   "u_proj",
   "u_model",
   "u_samplers",
   "u_color",
   "u_alpha",
-  "u_synthBold",
   "u_fieldScale",
   "u_colorMatrix",
   "u_colorBias"
@@ -819,7 +842,6 @@ var INITIAL_VERTICES = 256;
 var INITIAL_INDICES = 384;
 var WHITE_U = 0.5;
 var WHITE_V = 0.5;
-var PLAIN_WHITE = packSlot(WHITE_SLOT, PAINT_MODE_PLAIN);
 var SOLID_RING_SIZE = 64;
 var BATCH_TIERS = [
   { vertices: 16, indices: 24 },
@@ -902,9 +924,9 @@ var DrawBatch = class {
   }
   /**
    * Append one rect's four corners through `m`, all carrying `rgba` (straight
-   * alpha).
+   * alpha) and `P` in `a_texSlot`: the white texel, and the run's matrix.
    */
-  pushRect(x, y, w, h, m, r, g, b, a) {
+  pushRect(x, y, w, h, m, r, g, b, a, P) {
     this.reserve(4, 6);
     let i = this.nVerts * FLOATS_PER_VERTEX;
     const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
@@ -914,7 +936,6 @@ var DrawBatch = class {
     const bx = ma * x1 + mc * y + mtx, by = mb * x1 + md * y + mty;
     const cx = ma * x1 + mc * y1 + mtx, cy = mb * x1 + md * y1 + mty;
     const dx = ma * x + mc * y1 + mtx, dy = mb * x + md * y1 + mty;
-    const P = PLAIN_WHITE;
     i = this.writeVertex(i, ax, ay, r, g, b, a, WHITE_U, WHITE_V, 1, P);
     i = this.writeVertex(i, bx, by, r, g, b, a, WHITE_U, WHITE_V, 1, P);
     i = this.writeVertex(i, cx, cy, r, g, b, a, WHITE_U, WHITE_V, 1, P);
@@ -926,7 +947,8 @@ var DrawBatch = class {
    * Append one image quad: the destination rect `(x, y, w, h)` mapped through
    * `m`, sampling `(u0, v0)`-`(u1, v1)`, every corner carrying `post` as the
    * after-the-color-matrix alpha factor and `rgb` as the scale on its texel.
-   * `slot` is the texture unit the corners sample.
+   * `slot` is the texture unit the corners sample, and may carry the index of
+   * the run's matrix they are mapped by as well (`withMatrix`).
    *
    * Corners wind top-left, top-right, bottom-right, bottom-left — the same
    * winding `pushRect` uses, which is what lets a run of mixed rects and quads
@@ -956,13 +978,13 @@ var DrawBatch = class {
    * `rgba`.
    *
    * `mode` says which channels of that atlas carry the distance field, and
-   * rides the vertices packed into the slot. The synthetic-bold threshold does
-   * not: it is `u_synthBold`, and the caller breaks the run when it changes.
+   * rides the vertices packed into the slot. `synthBold` is the shift on the
+   * field's threshold, in `a_post`: a glyph has no use for an alpha factor there.
    *
    * A synthetic oblique is sheared here, before `m`; `tanItalic` is 0 for an
    * upright face. Corners wind as `pushQuad`'s do.
    */
-  pushGlyph(x0, y0, x1, y1, baselineY, tanItalic, m, u0, v0, u1, v1, r, g, b, a, slot, mode) {
+  pushGlyph(x0, y0, x1, y1, baselineY, tanItalic, m, u0, v0, u1, v1, r, g, b, a, slot, mode, synthBold) {
     this.reserve(4, 6);
     let i = this.nVerts * FLOATS_PER_VERTEX;
     const ma = m[0], mb = m[1], mc = m[3], md = m[4], mtx = m[6], mty = m[7];
@@ -975,10 +997,10 @@ var DrawBatch = class {
     const cx = ma * bx1 + mc * y1 + mtx, cy = mb * bx1 + md * y1 + mty;
     const dx = ma * bx0 + mc * y1 + mtx, dy = mb * bx0 + md * y1 + mty;
     const P = packSlot(slot, mode);
-    i = this.writeVertex(i, ax, ay, r, g, b, a, u0, v0, 1, P);
-    i = this.writeVertex(i, bx, by, r, g, b, a, u1, v0, 1, P);
-    i = this.writeVertex(i, cx, cy, r, g, b, a, u1, v1, 1, P);
-    this.writeVertex(i, dx, dy, r, g, b, a, u0, v1, 1, P);
+    i = this.writeVertex(i, ax, ay, r, g, b, a, u0, v0, synthBold, P);
+    i = this.writeVertex(i, bx, by, r, g, b, a, u1, v0, synthBold, P);
+    i = this.writeVertex(i, cx, cy, r, g, b, a, u1, v1, synthBold, P);
+    this.writeVertex(i, dx, dy, r, g, b, a, u0, v1, synthBold, P);
     this.pushQuadIndices();
     return this.clip === null || this.clipQuad(this.nVerts - 4, this.nIdx - 6, this.clip);
   }
@@ -1058,11 +1080,11 @@ var DrawBatch = class {
     return this.clip === null || this.clipMesh(base, this.nIdx - srcIdx.length, this.clip);
   }
   /**
-   * Append a tessellated mesh through `m`, all vertices carrying `rgba`. The
-   * mesh's own indices are rebased onto the staged vertices, which is why the
-   * index buffer is uploaded per flush rather than written once.
+   * Append a tessellated mesh through `m`, all vertices carrying `rgba` and
+   * `P`, as `pushRect`'s do. The mesh's own indices are rebased onto the staged
+   * vertices, which is why the index buffer is uploaded per flush.
    */
-  pushMesh(mesh, m, r, g, b, a) {
+  pushMesh(mesh, m, r, g, b, a, P) {
     const src = mesh.vertices;
     const srcIdx = mesh.indices;
     const n = src.length >> 1;
@@ -1083,7 +1105,7 @@ var DrawBatch = class {
       v[i++] = WHITE_U;
       v[i++] = WHITE_V;
       v[i++] = 1;
-      v[i++] = PLAIN_WHITE;
+      v[i++] = P;
     }
     const base = this.nVerts;
     const out = this.idx;
@@ -1443,6 +1465,7 @@ function maybeReraster(src, entry, v, drawnAt) {
   );
 }
 function getImageBitmap(src, drawnAt) {
+  if (src.startsWith(BITMAP_SCHEME)) return held.get(src)?.deref();
   const entry = cache6.get(src);
   if (!entry) {
     startLoad2(src);
@@ -1452,10 +1475,35 @@ function getImageBitmap(src, drawnAt) {
   if (drawnAt && entry.vector) maybeReraster(src, entry, entry.vector, drawnAt);
   return entry.bitmap;
 }
+var BITMAP_SCHEME = "weasel-bitmap:";
+var held = /* @__PURE__ */ new Map();
+var srcOfBitmap = /* @__PURE__ */ new WeakMap();
+var minted = 0;
+var forget = new FinalizationRegistry((src) => {
+  if (held.get(src)?.deref() === void 0) held.delete(src);
+});
+function bitmapSrc(bitmap) {
+  let src = srcOfBitmap.get(bitmap);
+  if (src === void 0) {
+    src = `${BITMAP_SCHEME}${++minted}`;
+    srcOfBitmap.set(bitmap, src);
+    held.set(src, new WeakRef(bitmap));
+    forget.register(bitmap, src, bitmap);
+  }
+  return src;
+}
 function imageStatus(src) {
+  if (src.startsWith(BITMAP_SCHEME)) return getImageBitmap(src) === void 0 ? "idle" : "ready";
   return cache6.get(src)?.status ?? "idle";
 }
 function releaseImage(src) {
+  const bitmap = held.get(src)?.deref();
+  held.delete(src);
+  if (bitmap !== void 0) {
+    srcOfBitmap.delete(bitmap);
+    forget.unregister(bitmap);
+    releaseImageSource(bitmap);
+  }
   const entry = cache6.get(src);
   cache6.delete(src);
   decodedVectors.delete(src);
@@ -1474,6 +1522,8 @@ function __setImageLoaderForTests(fn) {
 }
 function _resetImageCacheForTests() {
   cache6.clear();
+  held = /* @__PURE__ */ new Map();
+  srcOfBitmap = /* @__PURE__ */ new WeakMap();
   ready = createEmitter();
   decodedVectors.clear();
   loader = defaultLoader;
@@ -1482,6 +1532,6 @@ function _resetImageCacheForTests() {
   readsAtLastPass = 0;
 }
 
-export { BATCH_ATTRIBUTE_LOCATIONS, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_FRAG_SRC, BATCH_TEXTURE_SLOTS, BATCH_VERT_SRC, DrawBatch, FLOATS_PER_VERTEX, GLImageCache, PAINT_MODE_CONIC, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, STRAIGHT_RGB_GLSL, __setImageLoaderForTests, _resetCacheForTests, _resetImageCacheForTests, _resetMarkerCommandCacheForTests, _resetOutlineMeshCacheForTests, _resetOutlineStrokeMeshCacheForTests, _resetPaintDrawKindsForTests, _resetPatternSpecCacheForTests, _resetProgramRegistryForTests, _resetStrokeMeshCacheForTests, axisAlignedClipRect, cachedMarkerCommands, commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getMesh, getPaintDrawKind, getProgramSource, imageStatus, intersectClipRects, isPaintKindKnown, isVectorImageSrc, outlineMesh, outlineStrokeMesh, paintDrawKindRegistry, programSourceRegistry, quantizeEmWidth, quantizeStrokeScale, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, strokeMesh, subscribeImageReady, uploadPremultiplied, warmPaintKinds };
-//# sourceMappingURL=chunk-LFD47OV2.js.map
-//# sourceMappingURL=chunk-LFD47OV2.js.map
+export { BATCH_ATTRIBUTE_LOCATIONS, BATCH_FILL_ATTRIBUTES, BATCH_FILL_UNIFORMS, BATCH_FRAG_SRC, BATCH_MATRICES_FRAG_SRC, BATCH_MATRIX_SLOTS, BATCH_TEXTURE_SLOTS, BATCH_VERT_SRC, DrawBatch, FLOATS_PER_VERTEX, GLImageCache, PAINT_MODE_CONIC, PAINT_MODE_PLAIN, PAINT_MODE_RADIAL, RAMP_SLOT, STRAIGHT_RGB_GLSL, WHITE_SLOT, __setImageLoaderForTests, _resetCacheForTests, _resetImageCacheForTests, _resetMarkerCommandCacheForTests, _resetOutlineMeshCacheForTests, _resetOutlineStrokeMeshCacheForTests, _resetPaintDrawKindsForTests, _resetPatternSpecCacheForTests, _resetProgramRegistryForTests, _resetStrokeMeshCacheForTests, axisAlignedClipRect, bitmapSrc, cachedMarkerCommands, commandFill, commandPaint, commandStroke, fillInPoseFrame, fillToBoundsFrame, getImageBitmap, getMesh, getPaintDrawKind, getProgramSource, imageStatus, intersectClipRects, isPaintKindKnown, isVectorImageSrc, outlineMesh, outlineStrokeMesh, packSlot, paintDrawKindRegistry, programSourceRegistry, quantizeEmWidth, quantizeStrokeScale, registerPaintDrawKind, registerPaintDrawKindLoader, registerProgram, releaseImage, releaseImageSource, resolveFillPattern, resolvePatternSpec, retryImage, setImageCacheBudget, strokeMesh, subscribeImageReady, uploadPremultiplied, warmPaintKinds, withMatrix };
+//# sourceMappingURL=chunk-CUJEWF5G.js.map
+//# sourceMappingURL=chunk-CUJEWF5G.js.map