@blakron/core 0.2.4 → 0.3.3

package/dist/blakron/player/webgl/WebGLRenderer.js

@@ -0,0 +1,721 @@
+import { DisplayObjectContainer } from '../../display/DisplayObjectContainer.js';
+import { Matrix } from '../../geom/Matrix.js';
+import { CanvasRenderer } from '../CanvasRenderer.js';
+import { InstructionSet } from '../InstructionSet.js';
+import { BitmapPipe } from '../pipes/BitmapPipe.js';
+import { GraphicsPipe } from '../pipes/GraphicsPipe.js';
+import { MeshPipe } from '../pipes/MeshPipe.js';
+import { FilterPipe } from '../pipes/FilterPipe.js';
+import { MaskPipe } from '../pipes/MaskPipe.js';
+import { TextPipe } from '../pipes/TextPipe.js';
+import { WebGLRenderBuffer } from './WebGLRenderBuffer.js';
+// ── WebGLRenderer ─────────────────────────────────────────────────────────────
+/**
+ * Two-phase WebGL renderer inspired by Pixi.js 8's RenderPipe / InstructionSet pattern.
+ *
+ * Phase A — Build (only when structureDirty):
+ *   Traverse the DisplayObject tree and produce a flat InstructionSet.
+ *   Each instruction captures the object reference + transform snapshot.
+ *
+ * Phase B — Execute (every frame):
+ *   Walk the InstructionSet and dispatch each instruction to its pipe.
+ *   No scene-graph traversal happens here.
+ *
+ * When only data changes (renderDirty but not structureDirty):
+ *   Call pipe.updateRenderable() for each dirty object, then execute.
+ */
+export class WebGLRenderer {
+    // ── Pipes ─────────────────────────────────────────────────────────────────
+    _canvasRenderer = new CanvasRenderer();
+    _bitmapPipe;
+    _graphicsPipe;
+    _meshPipe;
+    _textPipe;
+    _filterPipe = new FilterPipe();
+    _maskPipe = new MaskPipe();
+    // ── Instruction set ───────────────────────────────────────────────────────
+    _instructionSet = new InstructionSet();
+    _renderGroupSets = new WeakMap();
+    _renderGroupSetList = [];
+    // ── Nesting (for recursive offscreen renders, e.g. cacheAsBitmap) ────────
+    _nestLevel = 0;
+    constructor() {
+        this._bitmapPipe = new BitmapPipe();
+        this._graphicsPipe = new GraphicsPipe(this._canvasRenderer);
+        this._meshPipe = new MeshPipe();
+        this._textPipe = new TextPipe(this._canvasRenderer);
+    }
+    // ── Public entry point ────────────────────────────────────────────────────
+    // Release pooled instructions back to their respective pipes before a rebuild.
+    _releaseInstructions(set) {
+        for (let i = 0; i < set.instructionSize; i++) {
+            const inst = set.instructions[i];
+            switch (inst.renderPipeId) {
+                case 'filterPush':
+                    FilterPipe.releasePush(inst);
+                    break;
+                case 'filterPop':
+                    FilterPipe.releasePop(inst);
+                    break;
+                case 'maskPush':
+                    MaskPipe.releasePush(inst);
+                    break;
+                case 'maskPop':
+                    MaskPipe.releasePop(inst);
+                    break;
+            }
+        }
+    }
+    render(displayObject, buffer, matrix) {
+        this._nestLevel++;
+        const ctx = buffer.context;
+        ctx.pushBuffer(buffer);
+        // Set (not multiply) the root transform so it doesn't accumulate across frames.
+        buffer.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, 0, 0);
+        const set = this._instructionSet;
+        // ── Phase A: build instructions if scene structure changed ────────────
+        if (set.structureDirty) {
+            this._releaseInstructions(set);
+            set.reset();
+            buffer.globalAlpha = 1;
+            buffer.globalTintColor = 0xffffff;
+            this._buildInstructions(displayObject, set, buffer, matrix.tx, matrix.ty, true);
+            set.structureDirty = false;
+        }
+        else {
+            // ── Partial update: patch GPU data for dirty renderables ──────────
+            this._updateDirtyRenderables(set);
+        }
+        // ── Phase B: execute ──────────────────────────────────────────────────
+        this._executeInstructions(set, buffer);
+        ctx.flush();
+        const drawCalls = buffer.drawCalls;
+        buffer.onRenderFinish();
+        ctx.popBuffer();
+        // Reset to identity — clean slate for next frame.
+        buffer.setTransform(1, 0, 0, 1, 0, 0);
+        // Root renderDirty is consumed after a full render pass.
+        displayObject.renderDirty = false;
+        this._nestLevel--;
+        if (this._nestLevel === 0) {
+            WebGLRenderBuffer.release(WebGLRenderBuffer.create(buffer.context, 0, 0));
+        }
+        return drawCalls;
+    }
+    // ── Phase A: build ────────────────────────────────────────────────────────
+    /**
+     * Recursively traverse the DisplayObject tree and append instructions to `set`.
+     * Captures the current transform/alpha/tint state into each instruction.
+     */
+    _buildInstructions(displayObject, set, buffer, offsetX, offsetY, isStage = false) {
+        // cacheAsBitmap — treat as a single opaque leaf; render offscreen lazily.
+        const displayList = displayObject.displayList;
+        if (displayList && !isStage) {
+            // Emit a synthetic BitmapInstruction backed by the DisplayList cache.
+            // The execute phase will refresh the cache if dirty.
+            const inst = this._makeCacheInstruction(displayObject, offsetX, offsetY, buffer);
+            if (inst)
+                set.add(inst);
+            return;
+        }
+        // Emit self instruction (Bitmap / Shape / Sprite / Mesh).
+        this._buildLeaf(displayObject, set, buffer, offsetX, offsetY);
+        const children = displayObject.children;
+        if (!children || children.length === 0)
+            return;
+        for (const child of children) {
+            if (child.renderMode === 1 /* RenderMode.NONE */)
+                continue;
+            // Compute child transform.
+            let ox, oy;
+            let savedMatrix;
+            if (child.useTranslate) {
+                const m = child.getMatrix();
+                ox = offsetX + child.internalX;
+                oy = offsetY + child.internalY;
+                savedMatrix = Matrix.create();
+                savedMatrix.copyFrom(buffer.globalMatrix);
+                buffer.transform(m.a, m.b, m.c, m.d, ox, oy);
+                ox = -child.internalAnchorOffsetX;
+                oy = -child.internalAnchorOffsetY;
+            }
+            else {
+                ox = offsetX + child.internalX - child.internalAnchorOffsetX;
+                oy = offsetY + child.internalY - child.internalAnchorOffsetY;
+            }
+            const prevAlpha = buffer.globalAlpha;
+            if (child.internalAlpha !== 1)
+                buffer.globalAlpha *= child.internalAlpha;
+            const prevTint = buffer.globalTintColor;
+            if (child.tintRGB !== 0xffffff)
+                buffer.globalTintColor = child.tintRGB;
+            // Emit effect wrappers then recurse.
+            // RenderGroup: build the subtree into its own InstructionSet and
+            // emit a single renderGroup instruction into the parent set.
+            if (child instanceof DisplayObjectContainer && child.isRenderGroup) {
+                this._buildRenderGroup(child, set, buffer, ox, oy);
+            }
+            else {
+                switch (child.renderMode) {
+                    case 2 /* RenderMode.FILTER */:
+                        this._buildFilter(child, set, buffer, ox, oy);
+                        break;
+                    case 3 /* RenderMode.CLIP */:
+                        this._buildClip(child, set, buffer, ox, oy);
+                        break;
+                    case 4 /* RenderMode.SCROLLRECT */:
+                        this._buildScrollRect(child, set, buffer, ox, oy);
+                        break;
+                    default:
+                        this._buildInstructions(child, set, buffer, ox, oy);
+                }
+            }
+            buffer.globalAlpha = prevAlpha;
+            buffer.globalTintColor = prevTint;
+            if (savedMatrix) {
+                buffer.globalMatrix.copyFrom(savedMatrix);
+                Matrix.release(savedMatrix);
+            }
+        }
+    }
+    // Emit a leaf instruction for a single DisplayObject (no children).
+    _buildLeaf(obj, set, buffer, offsetX, offsetY) {
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        switch (obj.renderObjectType) {
+            case 2 /* RenderObjectType.MESH */:
+                set.addLeaf({
+                    renderPipeId: 'mesh',
+                    renderable: obj,
+                    offsetX,
+                    offsetY,
+                    transform,
+                });
+                break;
+            case 1 /* RenderObjectType.BITMAP */:
+                set.addLeaf({
+                    renderPipeId: 'bitmap',
+                    renderable: obj,
+                    offsetX,
+                    offsetY,
+                    transform,
+                });
+                break;
+            case 3 /* RenderObjectType.SHAPE */:
+                set.addLeaf({
+                    renderPipeId: 'graphics',
+                    renderable: obj,
+                    graphics: obj.graphics,
+                    offsetX,
+                    offsetY,
+                    transform,
+                });
+                break;
+            case 5 /* RenderObjectType.TEXT */:
+                set.addLeaf({
+                    renderPipeId: 'text',
+                    renderable: obj,
+                    offsetX,
+                    offsetY,
+                    transform,
+                });
+                break;
+            case 4 /* RenderObjectType.SPRITE */: {
+                const sprite = obj;
+                if (sprite.graphics.commands.length > 0) {
+                    set.addLeaf({
+                        renderPipeId: 'graphics',
+                        renderable: obj,
+                        graphics: sprite.graphics,
+                        offsetX,
+                        offsetY,
+                        transform,
+                    });
+                }
+                break;
+            }
+        }
+    }
+    _buildFilter(obj, set, buffer, offsetX, offsetY) {
+        const filters = obj.internalFilters;
+        if (!filters.length) {
+            this._buildInstructions(obj, set, buffer, offsetX, offsetY);
+            return;
+        }
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        const push = Object.assign(FilterPipe.makePush(obj, filters, offsetX, offsetY), {
+            transform,
+        });
+        set.add(push);
+        this._buildInstructions(obj, set, buffer, offsetX, offsetY);
+        set.add(FilterPipe.makePop(obj, push));
+    }
+    _buildClip(obj, set, buffer, offsetX, offsetY) {
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        const push = Object.assign(MaskPipe.makePush(obj, offsetX, offsetY), { transform });
+        set.add(push);
+        this._buildInstructions(obj, set, buffer, offsetX, offsetY);
+        set.add(MaskPipe.makePop(obj, push));
+    }
+    _buildScrollRect(obj, set, buffer, offsetX, offsetY) {
+        const rect = obj.internalScrollRect ?? obj.internalMaskRect;
+        if (!rect || rect.isEmpty())
+            return;
+        let ox = offsetX, oy = offsetY;
+        if (obj.internalScrollRect) {
+            ox -= rect.x;
+            oy -= rect.y;
+        }
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        const push = Object.assign(MaskPipe.makePush(obj, offsetX, offsetY), { transform });
+        // Tag as scrollRect so execute knows which path to take.
+        push.isScrollRect = true;
+        set.add(push);
+        this._buildInstructions(obj, set, buffer, ox, oy);
+        set.add(MaskPipe.makePop(obj, push));
+    }
+    /**
+     * Build a RenderGroup subtree into its own InstructionSet and emit a
+     * single `renderGroup` instruction into the parent set.
+     *
+     * The child set is rebuilt only when its own `structureDirty` flag is set,
+     * so changes inside the group never force a rebuild of the parent set.
+     */
+    _buildRenderGroup(obj, parentSet, buffer, offsetX, offsetY) {
+        let groupSet = this._renderGroupSets.get(obj);
+        if (!groupSet) {
+            groupSet = new InstructionSet();
+            this._renderGroupSets.set(obj, groupSet);
+            this._renderGroupSetList.push(new WeakRef(obj));
+        }
+        if (groupSet.structureDirty) {
+            this._releaseInstructions(groupSet);
+            groupSet.reset();
+            this._buildInstructions(obj, groupSet, buffer, offsetX, offsetY);
+            groupSet.structureDirty = false;
+        }
+        else {
+            this._updateDirtyRenderables(groupSet);
+        }
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        parentSet.add({
+            renderPipeId: 'renderGroup',
+            renderable: obj,
+            set: groupSet,
+            offsetX,
+            offsetY,
+            transform,
+        });
+    }
+    // Build a synthetic instruction for a cacheAsBitmap object.
+    _makeCacheInstruction(obj, offsetX, offsetY, buffer) {
+        const displayList = obj.displayList;
+        if (!displayList)
+            return undefined;
+        const transform = this._snapshotTransform(buffer, offsetX, offsetY);
+        return {
+            renderPipeId: 'displayListCache',
+            renderable: obj,
+            offsetX,
+            offsetY,
+            transform,
+        };
+    }
+    // ── Phase A helpers ───────────────────────────────────────────────────────
+    _snapshotTransform(buffer, offsetX, offsetY) {
+        const m = buffer.globalMatrix;
+        return {
+            a: m.a,
+            b: m.b,
+            c: m.c,
+            d: m.d,
+            tx: m.tx,
+            ty: m.ty,
+            offsetX,
+            offsetY,
+            alpha: buffer.globalAlpha,
+            tint: buffer.globalTintColor,
+        };
+    }
+    // ── Partial update ────────────────────────────────────────────────────────
+    _updateDirtyRenderables(set) {
+        for (let i = 0; i < set.dirtyRenderableCount; i++) {
+            const obj = set.dirtyRenderables[i];
+            // Look up the instruction index for this object.
+            const idx = set.renderableIndex.get(obj);
+            if (idx === undefined)
+                continue;
+            const inst = set.instructions[idx];
+            if (!inst)
+                continue;
+            // Recompute the transform snapshot from the object's current world state.
+            // We can't use buffer.globalMatrix here (it's the main buffer's current
+            // state, not the object's world transform), so we rebuild from scratch.
+            this._refreshLeafTransform(obj, inst);
+        }
+        set.dirtyRenderableCount = 0;
+    }
+    /**
+     * Recompute the transform snapshot for a leaf instruction from the object's
+     * current concatenated matrix and cached world alpha/tint.
+     */
+    _refreshLeafTransform(obj, inst) {
+        const cm = obj.getConcatenatedMatrix();
+        const t = inst.transform;
+        t.a = cm.a;
+        t.b = cm.b;
+        t.c = cm.c;
+        t.d = cm.d;
+        t.tx = cm.tx;
+        t.ty = cm.ty;
+        t.offsetX = 0;
+        t.offsetY = 0;
+        t.alpha = obj.worldAlpha;
+        t.tint = obj.worldTint;
+    }
+    // ── Phase B: execute ──────────────────────────────────────────────────────
+    _executeInstructions(set, buffer) {
+        // Stack for offscreen buffers opened by filter/mask push instructions.
+        const offscreenStack = [];
+        const scissorStack = [];
+        // Track the currently active buffer — leaf instructions draw into this.
+        let activeBuffer = buffer;
+        for (let i = 0; i < set.instructionSize; i++) {
+            const inst = set.instructions[i];
+            switch (inst.renderPipeId) {
+                // ── Leaf nodes ────────────────────────────────────────────────
+                case 'bitmap': {
+                    const leaf = inst;
+                    this._applyTransform(activeBuffer, leaf.transform);
+                    this._bitmapPipe.execute(leaf, activeBuffer);
+                    break;
+                }
+                case 'mesh': {
+                    const leaf = inst;
+                    this._applyTransform(activeBuffer, leaf.transform);
+                    this._meshPipe.execute(leaf, activeBuffer);
+                    break;
+                }
+                case 'graphics': {
+                    const leaf = inst;
+                    this._applyTransform(activeBuffer, leaf.transform);
+                    this._graphicsPipe.execute(leaf, activeBuffer);
+                    break;
+                }
+                case 'text': {
+                    const leaf = inst;
+                    this._applyTransform(activeBuffer, leaf.transform);
+                    this._textPipe.execute(leaf, activeBuffer);
+                    break;
+                }
+                // ── DisplayList cache ─────────────────────────────────────────
+                case 'displayListCache': {
+                    const cacheInst = inst;
+                    this._applyTransform(activeBuffer, cacheInst.transform);
+                    this._executeDisplayListCache(cacheInst.renderable, activeBuffer, cacheInst.offsetX, cacheInst.offsetY);
+                    break;
+                }
+                // ── RenderGroup ───────────────────────────────────────────────
+                case 'renderGroup': {
+                    const rgInst = inst;
+                    this._applyTransform(activeBuffer, rgInst.transform);
+                    this._executeInstructions(rgInst.set, activeBuffer);
+                    break;
+                }
+                // ── Filter push/pop ───────────────────────────────────────────
+                case 'filterPush': {
+                    const push = inst;
+                    const pushT = push.transform;
+                    this._applyTransform(activeBuffer, pushT);
+                    const offscreen = this._filterPipe.executePush(push, activeBuffer);
+                    offscreenStack.push(offscreen);
+                    if (offscreen) {
+                        this._setOffscreenOrigin(offscreen, push.renderable.getOriginalBounds(), pushT);
+                        activeBuffer = offscreen;
+                    }
+                    break;
+                }
+                case 'filterPop': {
+                    const pop = inst;
+                    const offscreen = offscreenStack.pop();
+                    if (offscreen)
+                        activeBuffer =
+                            offscreenStack.length > 0 ? (offscreenStack[offscreenStack.length - 1] ?? buffer) : buffer;
+                    this._filterPipe.executePop(pop, activeBuffer, offscreen);
+                    break;
+                }
+                // ── Mask / clip push/pop ──────────────────────────────────────
+                case 'maskPush': {
+                    const push = inst;
+                    const pushT = push.transform;
+                    this._applyTransform(activeBuffer, pushT);
+                    if (push.isScrollRect) {
+                        const usedScissor = this._maskPipe.executeScrollRectPush(push, activeBuffer);
+                        scissorStack.push(usedScissor);
+                        offscreenStack.push(undefined);
+                    }
+                    else {
+                        const displayBuffer = this._maskPipe.executeClipPush(push, activeBuffer, this);
+                        offscreenStack.push(displayBuffer);
+                        if (displayBuffer) {
+                            this._setOffscreenOrigin(displayBuffer, push.renderable.getOriginalBounds(), pushT);
+                            activeBuffer = displayBuffer;
+                        }
+                    }
+                    break;
+                }
+                case 'maskPop': {
+                    const pop = inst;
+                    if (pop.push.isScrollRect) {
+                        const usedScissor = scissorStack.pop() ?? false;
+                        offscreenStack.pop();
+                        this._maskPipe.executeScrollRectPop(activeBuffer, usedScissor);
+                    }
+                    else {
+                        const displayBuffer = offscreenStack.pop();
+                        // Restore the parent buffer before compositing.
+                        if (displayBuffer)
+                            activeBuffer =
+                                offscreenStack.length > 0
+                                    ? (offscreenStack[offscreenStack.length - 1] ?? buffer)
+                                    : buffer;
+                        this._maskPipe.executeClipPop(pop, activeBuffer, displayBuffer, this);
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    // Restore the buffer's global matrix / alpha / tint from a snapshot.
+    _applyTransform(buffer, t) {
+        const m = buffer.globalMatrix;
+        m.a = t.a;
+        m.b = t.b;
+        m.c = t.c;
+        m.d = t.d;
+        m.tx = t.tx + t.offsetX - buffer.offscreenOriginX;
+        m.ty = t.ty + t.offsetY - buffer.offscreenOriginY;
+        buffer.globalAlpha = t.alpha;
+        buffer.globalTintColor = t.tint;
+    }
+    /**
+     * Compute the world-space position that should map to (padX, padY) in the
+     * offscreen buffer.  Because the buffer includes filter padding, the
+     * content's bounds origin must land at (padX, padY) rather than (0,0).
+     */
+    _setOffscreenOrigin(buf, bounds, t) {
+        const padX = buf.filterPadX;
+        const padY = buf.filterPadY;
+        // World position of bounds origin:
+        const worldBX = t.a * bounds.x + t.c * bounds.y + t.tx + t.offsetX;
+        const worldBY = t.b * bounds.x + t.d * bounds.y + t.ty + t.offsetY;
+        // We want: _applyTransform gives globalMatrix.tx = worldBX - originX = padX
+        // So: originX = worldBX - padX
+        buf.offscreenOriginX = worldBX - padX;
+        buf.offscreenOriginY = worldBY - padY;
+    }
+    // Execute a cacheAsBitmap DisplayList instruction.
+    _executeDisplayListCache(obj, buffer, offsetX, offsetY) {
+        const displayList = obj.displayList;
+        if (!displayList)
+            return;
+        if (obj.cacheDirty || obj.renderDirty) {
+            if (displayList.updateSurfaceSize()) {
+                displayList.renderBuffer.clear();
+                this._canvasRenderer.renderToContext(obj, displayList.renderBuffer.context, displayList.offsetX, displayList.offsetY);
+                displayList.updateBitmapData();
+            }
+            obj.cacheDirty = false;
+            obj.renderDirty = false;
+            // Structure may have changed inside the cached subtree — mark dirty
+            // so next frame rebuilds if the cache is invalidated.
+        }
+        if (!displayList.bitmapData?.source)
+            return;
+        const bd = displayList.bitmapData;
+        const w = displayList.renderBuffer.width;
+        const h = displayList.renderBuffer.height;
+        // offsetX/Y already in globalMatrix via _applyTransform.
+        if (offsetX !== 0 || offsetY !== 0) {
+            buffer.globalMatrix.append(1, 0, 0, 1, offsetX, offsetY);
+        }
+        buffer.context.drawImage(bd, 0, 0, w, h, -displayList.offsetX, -displayList.offsetY, w, h, w, h, false);
+        if (offsetX !== 0 || offsetY !== 0) {
+            buffer.globalMatrix.append(1, 0, 0, 1, -offsetX, -offsetY);
+        }
+    }
+    // ── Public accessor for MaskPipe (needs to call _drawDisplayObject) ───────
+    /**
+     * @internal Used by MaskPipe.executeClipPush() to render mask objects
+     * into offscreen buffers during the execute phase.
+     */
+    _drawDisplayObject(obj, buffer, offsetX, offsetY) {
+        // For mask rendering we do a direct (non-instruction-set) traversal
+        // into the offscreen buffer — this is the same as the old approach.
+        return this._directDraw(obj, buffer, offsetX, offsetY);
+    }
+    // Direct draw (used for offscreen mask/filter buffers).
+    _directDraw(obj, buffer, offsetX, offsetY) {
+        let drawCalls = 0;
+        // Bake offset into globalMatrix instead of buffer.offsetX
+        // so that GraphicsPipe / BitmapPipe / MeshPipe see it in the matrix.
+        if (offsetX !== 0 || offsetY !== 0) {
+            buffer.globalMatrix.append(1, 0, 0, 1, offsetX, offsetY);
+        }
+        switch (obj.renderObjectType) {
+            case 2 /* RenderObjectType.MESH */: {
+                const inst = { renderPipeId: 'mesh', renderable: obj, offsetX: 0, offsetY: 0 };
+                this._meshPipe.execute(inst, buffer);
+                drawCalls++;
+                break;
+            }
+            case 1 /* RenderObjectType.BITMAP */: {
+                const inst = {
+                    renderPipeId: 'bitmap',
+                    renderable: obj,
+                    offsetX: 0,
+                    offsetY: 0,
+                };
+                this._bitmapPipe.execute(inst, buffer);
+                drawCalls++;
+                break;
+            }
+            case 3 /* RenderObjectType.SHAPE */: {
+                const inst = {
+                    renderPipeId: 'graphics',
+                    renderable: obj,
+                    graphics: obj.graphics,
+                    offsetX: 0,
+                    offsetY: 0,
+                };
+                this._graphicsPipe.execute(inst, buffer);
+                drawCalls++;
+                break;
+            }
+            case 5 /* RenderObjectType.TEXT */: {
+                const inst = {
+                    renderPipeId: 'text',
+                    renderable: obj,
+                    offsetX: 0,
+                    offsetY: 0,
+                };
+                this._textPipe.execute(inst, buffer);
+                drawCalls++;
+                break;
+            }
+            case 4 /* RenderObjectType.SPRITE */: {
+                const sprite = obj;
+                if (sprite.graphics && sprite.graphics.commands.length > 0) {
+                    const inst = {
+                        renderPipeId: 'graphics',
+                        renderable: obj,
+                        graphics: sprite.graphics,
+                        offsetX: 0,
+                        offsetY: 0,
+                    };
+                    this._graphicsPipe.execute(inst, buffer);
+                    drawCalls++;
+                }
+                break;
+            }
+        }
+        if (offsetX !== 0 || offsetY !== 0) {
+            buffer.globalMatrix.append(1, 0, 0, 1, -offsetX, -offsetY);
+        }
+        const children = obj.children;
+        if (!children)
+            return drawCalls;
+        for (const child of children) {
+            if (child.renderMode === 1 /* RenderMode.NONE */)
+                continue;
+            let ox, oy;
+            let savedMatrix;
+            if (child.useTranslate) {
+                const m = child.getMatrix();
+                ox = offsetX + child.internalX;
+                oy = offsetY + child.internalY;
+                savedMatrix = Matrix.create();
+                savedMatrix.copyFrom(buffer.globalMatrix);
+                buffer.transform(m.a, m.b, m.c, m.d, ox, oy);
+                ox = -child.internalAnchorOffsetX;
+                oy = -child.internalAnchorOffsetY;
+            }
+            else {
+                ox = offsetX + child.internalX - child.internalAnchorOffsetX;
+                oy = offsetY + child.internalY - child.internalAnchorOffsetY;
+            }
+            const prevAlpha = buffer.globalAlpha;
+            if (child.internalAlpha !== 1)
+                buffer.globalAlpha *= child.internalAlpha;
+            const prevTint = buffer.globalTintColor;
+            if (child.tintRGB !== 0xffffff)
+                buffer.globalTintColor = child.tintRGB;
+            drawCalls += this._directDraw(child, buffer, ox, oy);
+            buffer.globalAlpha = prevAlpha;
+            buffer.globalTintColor = prevTint;
+            if (savedMatrix) {
+                buffer.globalMatrix.copyFrom(savedMatrix);
+                Matrix.release(savedMatrix);
+            }
+        }
+        return drawCalls;
+    }
+    // ── Structure dirty notification ──────────────────────────────────────────
+    /**
+     * Call this when the scene graph structure changes (child added/removed,
+     * visibility toggled, filter added, etc.) to trigger a full rebuild next frame.
+     *
+     * If `owner` is provided and is a RenderGroup, only that group's set is
+     * marked dirty — the parent set is left untouched.
+     */
+    markStructureDirty(owner) {
+        if (owner?.isRenderGroup) {
+            const groupSet = this._renderGroupSets.get(owner);
+            if (groupSet) {
+                groupSet.structureDirty = true;
+                return;
+            }
+        }
+        this._instructionSet.structureDirty = true;
+        // When no specific owner is given (e.g. context restored), mark ALL
+        // RenderGroup sets dirty so they also rebuild with fresh texture refs.
+        if (!owner) {
+            for (let i = this._renderGroupSetList.length - 1; i >= 0; i--) {
+                const container = this._renderGroupSetList[i].deref();
+                if (!container) {
+                    // GC'd — remove dead entry.
+                    this._renderGroupSetList.splice(i, 1);
+                    continue;
+                }
+                const groupSet = this._renderGroupSets.get(container);
+                if (groupSet)
+                    groupSet.structureDirty = true;
+            }
+        }
+    }
+    /**
+     * @internal Called by Player when a DisplayObject's data changes but the
+     * scene structure is stable. Queues the object for a transform-snapshot
+     * update instead of a full rebuild.
+     *
+     * Routes to the RenderGroup's set if the object lives inside one.
+     */
+    markRenderableDirty(obj) {
+        // Walk up to find the nearest RenderGroup ancestor (if any).
+        let p = obj.internalParent;
+        while (p) {
+            if (p instanceof DisplayObjectContainer && p.isRenderGroup) {
+                const groupSet = this._renderGroupSets.get(p);
+                if (groupSet) {
+                    if (!groupSet.structureDirty)
+                        groupSet.markRenderableDirty(obj);
+                    return;
+                }
+            }
+            p = p.internalParent;
+        }
+        // No RenderGroup ancestor — route to the root set.
+        if (!this._instructionSet.structureDirty)
+            this._instructionSet.markRenderableDirty(obj);
+    }
+}
+//# sourceMappingURL=WebGLRenderer.js.map