spine-html 0.5.2 → 0.7.0

package/dist/SpineHtmlRenderer.js

@@ -1,4 +1,6 @@
 import { BlendMode, ClippingAttachment, MeshAttachment, RegionAttachment, } from '@esotericsoftware/spine-core';
+import { coreCompatFor } from './coreCompat.js';
+import { straightAlphaSource } from './DomTexture.js';
 import { getMeshGlBlitter } from './MeshGlBlitter.js';
 const regionVertices = new Float32Array(8);
 const SVG_NS = 'http://www.w3.org/2000/svg';
@@ -25,6 +27,56 @@ function expandPoint(x, y, cx, cy, amount) {
     const s = amount / len;
     return [x + dx * s, y + dy * s];
 }
+/**
+ * Formats one clip-path coordinate, rounded to 1/1000 of the element's local
+ * unit so that a pose which recomputes to a bit-different float does not
+ * defeat the write cache.
+ *
+ * Why 1/1000: the local unit is an atlas unit for a rigid `<img>` (the matrix
+ * denominator) and a CSS pixel for a mesh canvas, so the worst error this can
+ * add on screen is half a quantum times the element's local-to-screen scale.
+ * At a 50× upscale — far past anything a skeleton is posed at — that is
+ * 0.025 px, an order of magnitude under one device pixel at dpr 3, while
+ * still sitting three orders of magnitude above the f32 recomputation jitter
+ * of coordinates that run 10²–10³ units. Shortest-round-trip number
+ * formatting then keeps every coordinate at three decimals or fewer.
+ */
+function clipCoord(v) {
+    return `${clipNum(v)}px`;
+}
+/**
+ * The same quantized number without a unit, for `path()` data — SVG path
+ * coordinates are user units and a `px` suffix there is a parse error.
+ */
+function clipNum(v) {
+    return Math.round(v * 1000) / 1000;
+}
+/**
+ * Bound past which a local coordinate is treated as degenerate rather than
+ * written. Two reasons, and the second is the hard one: a near-singular
+ * element matrix sends the inverse — and with it these coordinates — toward
+ * infinity, and JavaScript switches to exponential notation at 1e21, which is
+ * not valid CSS. The browser would then drop the whole declaration and the
+ * element would render UNCLIPPED, which is the one failure mode a clip must
+ * never have. A billion local units is already far outside anything a
+ * skeleton poses, so nothing expressible is lost by stopping here.
+ */
+const CLIP_COORD_LIMIT = 1e9;
+/**
+ * Does `endSlot` still lie ahead of `index` in the draw order? A null end slot
+ * never does, and neither does the clip's own slot (the scan starts past it)
+ * nor one already passed — which is exactly why each of those clips runs to
+ * the end of the draw order instead of ending.
+ */
+function endsAhead(drawOrder, index, endSlot) {
+    if (!endSlot)
+        return false;
+    for (let i = index + 1, n = drawOrder.length; i < n; i++) {
+        if (drawOrder[i].data === endSlot)
+            return true;
+    }
+    return false;
+}
 const BLEND_CSS = {
     [BlendMode.Normal]: '',
     [BlendMode.Additive]: 'plus-lighter',
@@ -49,9 +101,9 @@ const BLEND_CSS = {
  * RGB tint (skeleton × slot × attachment color) is applied per element with
  * an SVG feColorMatrix reference filter — exact channel multiply, works the
  * same on <img> and <canvas>. Dark (two-color) tint is not expressible that
- * way and is unsupported. Clipping attachments are deliberately unsupported
- * (transparent layered parts make them unnecessary); they are counted in
- * clipSkipCount.
+ * way and is unsupported. Clipping attachments become a CSS clip-path per
+ * element, in that element's own local frame, on spine-core's semantics — one
+ * active clip at a time, ending at the end slot inclusive (see `clipping`).
  *
  * Coordinate mapping: Spine is Y-up, CSS is Y-down — world Y is negated.
  * spine-core computes everything (bones, constraints, physics, deformed
@@ -60,8 +112,42 @@ const BLEND_CSS = {
 export class SpineHtmlRenderer {
     root;
     regionImages;
-    /** Clipping attachments encountered (visible but unsupported). */
+    /**
+     * Apply clipping attachments (default). Each element drawn inside an active
+     * clip gets a CSS `clip-path` in its own local frame — an element-level
+     * feature, so both mesh backends see exactly the same thing and neither
+     * raster path knows clipping exists.
+     *
+     * spine-core's semantics, not an approximation of them: one clip is active
+     * at a time (a second clipping attachment met while one is active is
+     * ignored, as SkeletonClipping.clipStart does), a clip applies to the slots
+     * drawn after its own slot through its end slot inclusive, and an end slot
+     * that is the clip's own slot — or one already passed — never ends it, so
+     * the clip runs to the end of the draw order. That last case is the
+     * whole-skeleton clip, and it takes a fast path: one `clip-path` on the root
+     * instead of one per element. The root is the caller's element, so its
+     * inline `clip-path` is borrowed — saved on the first write and restored
+     * when the clip stops covering the frame, when `clipping` goes false, and by
+     * `dispose()`.
+     *
+     * False restores the pre-0.6 behaviour: clips are counted in clipSkipCount
+     * and nothing is clipped, with any clip-path this renderer wrote removed.
+     */
+    clipping = true;
+    /** Clipping attachments applied last frame. */
+    clipCount = 0;
+    /**
+     * Clipping attachments NOT applied last frame: `clipping` is false, another
+     * clip was already active (spine-core ignores the second one), the slot's
+     * bone is inactive, or the polygon has fewer than three points.
+     */
     clipSkipCount = 0;
+    /**
+     * `clip-path` style writes performed last frame, across slot elements and
+     * the root, clears included. A static polygon over static elements settles
+     * at zero: every clip-path is cached per element exactly as `transform` is.
+     */
+    clipWriteCount = 0;
     /** Mesh canvases rasterized last frame. */
     meshCount = 0;
     /** Mesh canvases that reused their previous raster last frame. */
@@ -105,6 +191,13 @@ export class SpineHtmlRenderer {
     meshBackend = 'canvas2d';
     /** Backend that actually rasterized the mesh tier during the last render(). */
     meshBackendActive = 'canvas2d';
+    /**
+     * How this renderer reaches spine-core, picked from the first skeleton it is
+     * handed and then reused — see coreCompat.ts. Null until then, because the
+     * constructor has no skeleton to look at and the installed core is not
+     * knowable from the root element.
+     */
+    core = null;
     views = new Map();
     pendingJobs = [];
     pendingViews = [];
@@ -116,6 +209,25 @@ export class SpineHtmlRenderer {
     glPages = null;
     scratchVertices = new Float32Array(256);
     tintDefs = null;
+    /** The clip in force at the current point of the draw order, if any. */
+    clipAttachment = null;
+    clipEndSlot = null;
+    clipInverse = false;
+    /** True while the active clip is served by one clip-path on the root. */
+    clipOnRoot = false;
+    /** Whether any element has been drawn yet this frame (the fast-path test). */
+    drewAnything = false;
+    /** The active clip polygon in CSS space (Y already negated), flat x,y. */
+    clipPolygon = new Float64Array(0);
+    clipPolygonLength = 0;
+    /**
+     * The root's inline `clip-path` before this renderer borrowed it; null means
+     * not borrowed. The root belongs to the caller, so the fast path gives back
+     * exactly the string it found.
+     */
+    rootClipSaved = null;
+    /** Last clip-path string written to the root, to skip no-op style writes. */
+    rootClipWritten = '';
     /**
      * @param root Positioned element (e.g. position:absolute) that becomes the
      *   skeleton origin. The renderer only appends slot elements to it — layout
@@ -216,20 +328,49 @@ export class SpineHtmlRenderer {
         return next;
     }
     render(skeleton) {
+        // One feature detection per renderer, never per slot and never per frame.
+        const core = (this.core ??= coreCompatFor(skeleton));
+        this.clipCount = 0;
         this.clipSkipCount = 0;
+        this.clipWriteCount = 0;
         this.meshCount = 0;
         this.meshReuseCount = 0;
         this.canvasReallocCount = 0;
         this.triangleCount = 0;
+        this.clipAttachment = null;
+        this.clipEndSlot = null;
+        this.clipInverse = false;
+        this.clipOnRoot = false;
+        this.drewAnything = false;
         const blitter = this.meshBackend === 'webgl' ? getMeshGlBlitter() : null;
         this.meshBackendActive = blitter ? 'webgl' : 'canvas2d';
-        const drawOrder = skeleton.drawOrder.appliedPose;
+        const drawOrder = core.drawOrder(skeleton);
         for (let i = 0, n = drawOrder.length; i < n; i++) {
             const slot = drawOrder[i];
-            const pose = slot.appliedPose;
+            const pose = core.pose(slot);
             const attachment = pose.attachment;
+            // The official draw loops take the clipping attachment before anything
+            // else and in this order: end whatever clip this slot closes, start this
+            // slot's clip, then `continue` — skipping the per-slot clipEnd at the
+            // bottom. That `continue` is the whole own-slot rule: the slot that
+            // STARTS a clip is never offered to clipEnd afterwards, so an end slot
+            // equal to the clip's own slot ends nothing and the clip runs to the end
+            // of the draw order. [spine-core 4.3.13 dist/SkeletonRendererCore.js,
+            // and dist/SkeletonRenderer.js of @esotericsoftware/spine-webgl 4.3.13.]
+            if (attachment instanceof ClippingAttachment) {
+                this.clipEnd(slot);
+                // An inactive bone means the official loop never reaches the clipping
+                // branch at all, so no clip starts.
+                if (slot.bone.active)
+                    this.clipStart(skeleton, slot, attachment, drawOrder, i);
+                else
+                    this.clipSkipCount++;
+                this.hide(slot);
+                continue;
+            }
             if (!slot.bone.active) {
                 this.hide(slot);
+                this.clipEnd(slot);
                 continue;
             }
             if (attachment instanceof RegionAttachment) {
@@ -239,11 +380,15 @@ export class SpineHtmlRenderer {
                 this.renderMesh(skeleton, slot, pose, attachment, i);
             }
             else {
-                if (attachment instanceof ClippingAttachment)
-                    this.clipSkipCount++;
                 this.hide(slot);
             }
+            // After the slot is drawn: the end slot is inside its own clip.
+            this.clipEnd(slot);
         }
+        // Only a clip that covered the whole frame keeps the root's style; every
+        // other frame hands the caller's inline value back.
+        if (!this.clipOnRoot)
+            this.releaseRootClip();
         if (this.pendingJobs.length) {
             if (!blitter || !blitter.flush(this.pendingJobs)) {
                 // Context lost mid-frame: rasterize this batch on the 2d path so the
@@ -251,7 +396,10 @@ export class SpineHtmlRenderer {
                 for (let i = 0; i < this.pendingJobs.length; i++) {
                     const job = this.pendingJobs[i];
                     this.pendingViews[i].meshBackendDrawn = 'canvas2d';
-                    this.rasterizeMesh2d(job.canvas, job.page, job.vertices, job.uvs, job.triangles, job.ratio);
+                    this.rasterizeMesh2d(job.canvas, 
+                    // The 2d path wants straight alpha where the upload wanted it
+                    // premultiplied; the derivation is cached, so this costs a lookup.
+                    straightAlphaSource(job.page, job.pma), job.vertices, job.uvs, job.triangles, job.ratio);
                 }
             }
             this.pendingJobs.length = 0;
@@ -260,8 +408,9 @@ export class SpineHtmlRenderer {
     }
     /**
      * Removes every element this renderer added to the root (slot elements and
-     * the tint filter defs), and hands the atlas pages it uploaded back to the
-     * shared GL blitter — the one resource here that outlives the instance, so
+     * the tint filter defs), restores the root's own inline `clip-path` if the
+     * whole-skeleton clip path borrowed it, and hands the atlas pages it
+     * uploaded back to the shared GL blitter — the one resource here that outlives the instance, so
      * the one that has to be given back explicitly (GPU memory, and no garbage
      * collector feels pressure from it). The pages are reference-counted there:
      * a page another live renderer still draws stays uploaded, and the texture
@@ -276,6 +425,9 @@ export class SpineHtmlRenderer {
      * releases nothing a second time.
      */
     dispose() {
+        // The root is the caller's element and outlives this renderer, so the
+        // borrowed inline clip-path goes back before the slot elements go.
+        this.releaseRootClip();
         for (const view of this.views.values())
             view.el.remove();
         this.views.clear();
@@ -291,8 +443,8 @@ export class SpineHtmlRenderer {
     }
     // --- rigid tier -----------------------------------------------------------
     renderRegion(skeleton, slot, pose, attachment, zIndex) {
-        const sequence = attachment.sequence;
-        const region = sequence.regions[sequence.resolveIndex(pose)];
+        const core = this.core;
+        const region = core.regionAt(attachment, slot, core.sequenceIndex(attachment, pose));
         const regionImage = region && this.regionImages.get(region.name);
         if (!regionImage) {
             this.hide(slot);
@@ -306,7 +458,7 @@ export class SpineHtmlRenderer {
             img.width = regionImage.width;
             img.height = regionImage.height;
         }
-        attachment.computeWorldVertices(slot, attachment.getOffsets(pose), regionVertices, 0, 2);
+        core.regionWorldVertices(attachment, slot, pose, regionVertices);
         // Corner order from spine-core is BL, UL, UR, BR — derived from
         // computeUVs, whose per-vertex UVs are (u,v2), (u,v), (u2,v), (u2,v2).
         // (The br/bl/ul/ur comments inside computeWorldVertices are stale.)
@@ -321,23 +473,30 @@ export class SpineHtmlRenderer {
         const c = (blx - ulx) / h;
         const d = (bly - uly) / h;
         this.setTransform(view, `matrix(${a},${b},${c},${d},${ulx},${uly})`);
+        // Rigid elements carry a full affine, so the clip polygon rides its
+        // inverse into the local (atlas-unit) frame the <img> box spans.
+        this.applyClip(view, a, b, c, d, ulx, uly, w, h);
         this.applyCommon(view, slot, pose, attachment.color, skeleton, zIndex);
     }
     // --- deform tier ----------------------------------------------------------
     renderMesh(skeleton, slot, pose, attachment, zIndex) {
-        const sequence = attachment.sequence;
-        const sequenceIndex = sequence.resolveIndex(pose);
-        const region = sequence.regions[sequenceIndex];
+        const core = this.core;
+        const sequenceIndex = core.sequenceIndex(attachment, pose);
+        const region = core.regionAt(attachment, slot, sequenceIndex);
         const page = region?.texture?.getImage();
-        if (!page) {
+        if (!region || !page) {
             this.hide(slot);
             return;
         }
+        // Which alpha convention the page's texels are in. The two backends consume
+        // opposite ones — GL wants them premultiplied, `drawImage` wants them
+        // straight — so this decides what each is handed, never what it does.
+        const pma = region.page.pma;
         const count = attachment.worldVerticesLength;
         if (this.scratchVertices.length < count)
             this.scratchVertices = new Float32Array(count);
         const vertices = this.scratchVertices;
-        attachment.computeWorldVertices(skeleton, slot, 0, count, vertices, 0, 2);
+        core.vertexWorldVertices(attachment, skeleton, slot, 0, count, vertices, 0, 2);
         // World bounds (in CSS coords: Y negated).
         let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
         for (let v = 0; v < count; v += 2) {
@@ -423,6 +582,11 @@ export class SpineHtmlRenderer {
             rel[v + 1] = y;
         }
         this.setTransform(view, `translate(${minX}px,${minY}px)`);
+        // A mesh canvas is posed by a translate only, so its local frame is the
+        // CSS-space polygon minus that translate. The clip never reaches the
+        // raster: it is not part of the dirty signature, and a mesh whose vertices
+        // held still still reuses its raster under a moving clip.
+        this.applyClip(view, 1, 0, 0, 1, minX, minY, view.canvasW / ratio, view.canvasH / ratio);
         if (!dirty) {
             this.meshReuseCount++;
         }
@@ -432,7 +596,7 @@ export class SpineHtmlRenderer {
             view.meshExpand = this.triangleExpand;
             view.meshVertexCount = count;
             view.meshBackendDrawn = this.meshBackendActive;
-            const uvs = sequence.getUVs(sequenceIndex);
+            const uvs = core.meshUVs(attachment, sequenceIndex);
             const triangles = attachment.triangles;
             if (this.meshBackendActive === 'webgl') {
                 // Queued, not drawn: render() flushes the whole batch through the
@@ -441,6 +605,7 @@ export class SpineHtmlRenderer {
                 this.pendingJobs.push({
                     canvas,
                     page,
+                    pma,
                     vertices: rel,
                     uvs,
                     triangles,
@@ -452,7 +617,7 @@ export class SpineHtmlRenderer {
                 this.retainPage(page);
             }
             else {
-                this.rasterizeMesh2d(canvas, page, rel, uvs, triangles, ratio);
+                this.rasterizeMesh2d(canvas, straightAlphaSource(page, pma), rel, uvs, triangles, ratio);
             }
             this.meshCount++;
             this.triangleCount += triangles.length / 3;
@@ -493,7 +658,9 @@ export class SpineHtmlRenderer {
         // [0, size] and texel i covers [i, i+1). drawImage-under-a-transform and
         // texture2D() both read that frame, so both backends land on the same
         // source pixels. (No half-texel term: the affine below *maps* corners, it
-        // does not sample — see drawTriangle.)
+        // does not sample — see drawTriangle.) `page` is the page image, or its
+        // straight-alpha derivation on a premultiplied one; the derivation is the
+        // image's own natural size, so the frame is the same either way.
         const uw = page.width;
         const uh = page.height;
         for (let t = 0; t < triangles.length; t += 3) {
@@ -639,6 +806,158 @@ export class SpineHtmlRenderer {
         ctx.drawImage(img, sx, sy, sw, sh, sx, sy, sw, sh);
         ctx.restore();
     }
+    // --- clipping tier ---------------------------------------------------------
+    /**
+     * Begins a clip, mirroring SkeletonClipping.clipStart — whose first line is
+     * `if (this.clipAttachment) return`, so a second clipping attachment met
+     * while one is active is ignored rather than nested.
+     *
+     * The polygon is spine-core's: computeWorldVertices gives it in world space
+     * each frame, and the only thing done to it here is the Y negation the rest
+     * of the renderer already applies. It is NOT convexified or triangulated the
+     * way the CPU clipper does — CSS `polygon()` takes a concave polygon
+     * directly, so the decomposition that exists to feed a triangle rasterizer
+     * has no job here.
+     */
+    clipStart(skeleton, slot, clip, drawOrder, index) {
+        const count = clip.worldVerticesLength;
+        if (this.clipAttachment || !this.clipping || count < 6) {
+            this.clipSkipCount++;
+            return;
+        }
+        const core = this.core;
+        if (this.scratchVertices.length < count)
+            this.scratchVertices = new Float32Array(count);
+        const world = this.scratchVertices;
+        core.vertexWorldVertices(clip, skeleton, slot, 0, count, world, 0, 2);
+        if (this.clipPolygon.length < count)
+            this.clipPolygon = new Float64Array(count);
+        const poly = this.clipPolygon;
+        for (let v = 0; v < count; v += 2) {
+            poly[v] = world[v];
+            poly[v + 1] = -world[v + 1]; // Spine is Y-up, CSS is Y-down.
+        }
+        this.clipPolygonLength = count;
+        this.clipAttachment = clip;
+        this.clipEndSlot = clip.endSlot;
+        this.clipInverse = core.inverse(clip);
+        this.clipCount++;
+        // Whole-skeleton fast path: nothing was drawn before this clip started and
+        // it never ends, so every element of this frame is inside it — one
+        // clip-path on the root beats one per element. An inverse clip is
+        // excluded: its CSS form needs an outer ring around the element's own box,
+        // and the root is an origin element with no box to use.
+        this.clipOnRoot =
+            !this.drewAnything && !this.clipInverse && !endsAhead(drawOrder, index, clip.endSlot);
+        if (this.clipOnRoot)
+            this.writeRootClip(this.rootClipPath());
+    }
+    /**
+     * Ends the active clip if this slot is its end slot, called after the slot
+     * has been drawn so that the end slot is itself clipped. Every other slot is
+     * ignored, exactly as SkeletonClipping.clipEnd ignores it.
+     *
+     * This cannot fire for a clip on the root fast path: that path is only taken
+     * when no slot ahead of the clip carries its end slot.
+     */
+    clipEnd(slot) {
+        if (this.clipAttachment && this.clipEndSlot === slot.data) {
+            this.clipAttachment = null;
+            this.clipEndSlot = null;
+        }
+    }
+    /**
+     * Writes (or clears) this element's clip-path. `a…f` is the element's own
+     * CSS transform, and the world polygon is carried through its INVERSE:
+     * clip-path is resolved in the element's local frame and then transformed
+     * along with the element, so the polygon has to arrive there already.
+     *
+     * `transform-origin` is `0 0` on every slot element (see view()), so the
+     * matrix maps local (0,0) to (e,f) with no origin term to undo, and
+     * `left/top: 0` puts the border box — clip-path's reference box — on that
+     * same local origin.
+     */
+    applyClip(view, a, b, c, d, e, f, boxW, boxH) {
+        if (!this.clipAttachment || this.clipOnRoot) {
+            this.setClipPath(view, '');
+            return;
+        }
+        const det = a * d - b * c;
+        // Singular: the element is collapsed onto a line or a point and draws
+        // nothing, so there is no clip to express and no style write to pay for.
+        if (det === 0)
+            return;
+        const inv = 1 / det;
+        const poly = this.clipPolygon;
+        const n = this.clipPolygonLength;
+        // An inverse clip shows what is OUTSIDE the polygon. That shape has a hole
+        // in it, so it needs TWO rings — an outer one and the polygon — and
+        // `polygon()` cannot carry two: it is one closed ring, and listing a box
+        // and a polygon inside it just makes one self-intersecting ring whose
+        // even-odd fill leaves a wedge of the seam between them (measured, on a
+        // corner of spineboy's boot). `path()` takes subpaths, so an inverse clip
+        // is written as two of them with the even-odd rule. The outer ring is the
+        // element's own box: the element paints nothing outside it anyway, so
+        // box-minus-polygon is exactly the visible part of the inverse region.
+        const inverse = this.clipInverse;
+        let s = inverse
+            ? `path(evenodd,'M0 0H${clipNum(boxW)}V${clipNum(boxH)}H0Z`
+            : 'polygon(';
+        for (let v = 0; v < n; v += 2) {
+            const dx = poly[v] - e;
+            const dy = poly[v + 1] - f;
+            const lx = (d * dx - c * dy) * inv;
+            const ly = (a * dy - b * dx) * inv;
+            // Near-singular matrices blow the inverse up; see CLIP_COORD_LIMIT for
+            // why an unwritable coordinate must not become a written-and-ignored one.
+            if (!(Math.abs(lx) <= CLIP_COORD_LIMIT) || !(Math.abs(ly) <= CLIP_COORD_LIMIT))
+                return;
+            if (inverse) {
+                s += `${v > 0 ? 'L' : 'M'}${clipNum(lx)} ${clipNum(ly)}`;
+            }
+            else {
+                s += `${v > 0 ? ',' : ''}${clipCoord(lx)} ${clipCoord(ly)}`;
+            }
+        }
+        this.setClipPath(view, inverse ? `${s}Z')` : `${s})`);
+    }
+    setClipPath(view, clipPath) {
+        if (view.clipPath === clipPath)
+            return;
+        view.clipPath = clipPath;
+        view.el.style.clipPath = clipPath;
+        this.clipWriteCount++;
+    }
+    /** The active polygon in the root's own frame — no element transform. */
+    rootClipPath() {
+        const poly = this.clipPolygon;
+        let s = 'polygon(';
+        for (let v = 0, n = this.clipPolygonLength; v < n; v += 2) {
+            if (v > 0)
+                s += ',';
+            s += `${clipCoord(poly[v])} ${clipCoord(poly[v + 1])}`;
+        }
+        return `${s})`;
+    }
+    writeRootClip(clipPath) {
+        // Borrow the caller's inline value once, so releaseRootClip gives back
+        // exactly what was there. Reading `.style` is CSSOM, not a layout read.
+        if (this.rootClipSaved === null)
+            this.rootClipSaved = this.root.style.clipPath;
+        if (this.rootClipWritten === clipPath)
+            return;
+        this.rootClipWritten = clipPath;
+        this.root.style.clipPath = clipPath;
+        this.clipWriteCount++;
+    }
+    releaseRootClip() {
+        if (this.rootClipSaved === null)
+            return;
+        this.root.style.clipPath = this.rootClipSaved;
+        this.rootClipSaved = null;
+        this.rootClipWritten = '';
+        this.clipWriteCount++;
+    }
     // --- shared plumbing -------------------------------------------------------
     setTransform(view, transform) {
         if (view.transform !== transform) {
@@ -647,6 +966,9 @@ export class SpineHtmlRenderer {
         }
     }
     applyCommon(view, slot, pose, attachmentColor, skeleton, zIndex) {
+        // This element is about to be visible: the whole-skeleton fast path is
+        // only open to a clip that starts before anything has been drawn.
+        this.drewAnything = true;
         const sc = skeleton.color;
         const pc = pose.color;
         if (view.zIndex !== zIndex) {
@@ -739,6 +1061,7 @@ export class SpineHtmlRenderer {
                 opacity: 1,
                 blendMode: BlendMode.Normal,
                 transform: '',
+                clipPath: '',
                 tintR: 1,
                 tintG: 1,
                 tintB: 1,
@@ -761,10 +1084,17 @@ export class SpineHtmlRenderer {
     }
     hide(slot) {
         const view = this.views.get(slot);
-        if (view && view.visible) {
+        if (!view)
+            return;
+        if (view.visible) {
             view.visible = false;
             view.el.style.display = 'none';
         }
+        // A hidden element keeps no clip-path: one left behind would sit there
+        // stale until the slot draws again, and "nothing is clipped" has to be
+        // true of the DOM, not only of what gets painted. Cached like every other
+        // write, so the sweep costs one write per element, once.
+        this.setClipPath(view, '');
     }
 }
 //# sourceMappingURL=SpineHtmlRenderer.js.map