@weasel-js/renderer 1.10.0 → 1.10.1

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-K7XCWVQH.js}

@@ -617,8 +617,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 +631,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 +642,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 +668,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 +676,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 +731,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 +739,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 +838,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 +920,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 +932,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 +943,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 +974,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 +993,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 +1076,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 +1101,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;
@@ -1482,6 +1500,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, 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-K7XCWVQH.js.map
+//# sourceMappingURL=chunk-K7XCWVQH.js.map