@driftengine/core 4.4.1 → 4.5.0

package/dist/render/backend/webgpu/gpuDrivenPass.js

@@ -70,6 +70,9 @@ import { FRUSTUM_FLOATS, frustumPlanes } from '../../gpudriven/frustum.js';
 import { VIS_EMPTY } from '../../gpudriven/visbuffer.js';
 import { jitterClip } from '../../recon/jitter.js';
 import { GPU_DRIVEN_ORDERED, GPU_DRIVEN_PASSES, GPU_DRIVEN_RESOURCES, gpuDrivenLive, gpuDrivenRefusal, gpuDrivenSupported, recordGpuDrivenStages, } from '../../gpudriven/pipeline.js';
+import { resolveGlass } from '../../glass.js';
+import { GLASS_TINT_BLEND } from './glassTintPass.js';
+import { SnapshotMips } from './snapshotMips.js';
 import { createDeps, resetDeps } from '../../frame/deps.js';
 import { createGraphPasses, createGraphScratch, scheduleGraph } from '../../frame/graphSchedule.js';
 import { hzbMipCount, hzbMipSize } from '../../gpudriven/hzb.js';
@@ -384,6 +387,30 @@ export class GpuDrivenPass {
     latentClamp = null;
     latentRepeat = null;
     shadowView = null;
+    /** The nearest pane's depth from the sun: the shadow texture's second layer, where glass casts. */
+    glassDepthView = null;
+    /** What the panes let through, as the sun sees them, with the chain frost reads. */
+    glassTintTexture = null;
+    glassTintTarget = null;
+    glassTintSampled = null;
+    glassTintMips = null;
+    /** One white texel, bound where no glass casts, which the lookup reads as none. */
+    glassTintNone = null;
+    glassMode;
+    /** Whether the sun's glass pass runs at all: a glass material, and glass shadows not off. */
+    castsGlass;
+    glassList = null;
+    glassArgs = null;
+    glassLodBuffer = null;
+    lodParamsGlass = new Float32Array(8);
+    shadowCullSettingsGlass = null;
+    glassLodGroup = null;
+    glassCullGroup = null;
+    glassCompactGroup = null;
+    glassDepthPipeline = null;
+    glassDepthGroup = null;
+    glassTintPipeline = null;
+    glassTintGroup = null;
     /**
      * What is bound as the probe where the frame has none.
      *
@@ -497,7 +524,27 @@ export class GpuDrivenPass {
     visibilityTexture = null;
     depthTexture = null;
     colourTexture = null;
+    /** Level 0: what the shading writes, the resolve lays over and the blit presents. */
     colourView = null;
+    /** Every level, for glass to read at the level its frost picks. Level 0 alone with no glass. */
+    colourSampledView = null;
+    /** The chain glass reads, filled from the shaded picture each frame; null in a scene with none. */
+    colourMips = null;
+    /** Whether any material is glass, which is what earns the colour its chain: see `buildTargets`. */
+    hasGlass;
+    /** The pipelines the chain draws with, one a format. */
+    mipPipelineCache = new Map();
+    mipPipelines = {
+        get: (key, describe) => {
+            const held = this.mipPipelineCache.get(key);
+            if (held !== undefined)
+                return held;
+            const made = this.device.createRenderPipeline(describe());
+            this.mipPipelineCache.set(key, made);
+            return made;
+        },
+    };
+    glassSampler = null;
     visibility = null;
     hzb = null;
     levelStart = null;
@@ -613,7 +660,10 @@ export class GpuDrivenPass {
         this.decode = packDecodeTables(this.programs.programs);
         this.scene = scene;
         this.materials = materials;
+        this.hasGlass = materials.some((material) => resolveGlass(material.glass, glassProbe));
         this.shadowSize = shadow.mapSize ?? DEFAULT_RENDER_QUALITY.directionalShadowMapSize;
+        this.glassMode = shadow.glass ?? DEFAULT_RENDER_QUALITY.glassShadows;
+        this.castsGlass = this.hasGlass && this.glassMode !== 'off';
         this.shadowMaxDistance =
             shadow.maxDistance ?? DEFAULT_RENDER_QUALITY.directionalShadowMaxDistance;
         this.shadowMaxSlope = shadow.maxSlope ?? DEFAULT_RENDER_QUALITY.directionalShadowMaxSlope;
@@ -840,6 +890,10 @@ export class GpuDrivenPass {
         this.shadowArgs = this.storage(device, 'draw shadow', shadowArgs, INDIRECT | COPY_SRC);
         this.shadowArgsTwo = this.storage(device, 'draw shadow two', shadowArgs, INDIRECT | COPY_SRC);
         this.shadowSelected = this.empty(device, 'shadow selected', count * 4);
+        /* The sun's glass: its own list and arguments, over the light's selection once the map is done. */
+        this.glassList = this.empty(device, 'shadow glass list', count * 4);
+        this.glassArgs = this.storage(device, 'draw shadow glass', shadowArgs, INDIRECT | COPY_SRC);
+        this.glassLodBuffer = this.empty(device, 'lod params glass', 8 * 4);
         this.shadowKeep = this.empty(device, 'shadow keep', count * 4);
         this.shadowPlanes = this.empty(device, 'shadow planes', FRUSTUM_FLOATS * 4);
         this.shadowHistories = [
@@ -862,6 +916,8 @@ export class GpuDrivenPass {
         this.shadowCullValues[CULL_CONES] = 1;
         this.shadowCullSettings = this.storage(device, 'cull settings, shadow', this.shadowCullValues);
         this.shadowCullSettingsTwo = this.storage(device, 'cull settings, shadow two', this.shadowCullValues);
+        /* The glass pass's: no pyramid and no cones, since a pane casts from either side. */
+        this.shadowCullSettingsGlass = this.storage(device, 'cull settings, shadow glass', this.shadowCullValues);
         this.shadowCompactSettings = this.storage(device, 'phase shadow', Uint32Array.from([PHASE_ONE, count]));
         this.shadowCompactSettingsTwo = this.storage(device, 'phase shadow two', Uint32Array.from([PHASE_TWO, count]));
         /* Nonzero is hidden, and the light hides nothing: see `CULL_INSTANCES_WGSL`. */
@@ -875,11 +931,47 @@ export class GpuDrivenPass {
          */
         this.shadowTexture = device.createTexture({
             label: 'gpu-driven shadow',
-            size: { width: this.shadowSize, height: this.shadowSize },
+            /* A second layer for the nearest pane where a material is glass, and none where none is. */
+            size: {
+                width: this.shadowSize,
+                height: this.shadowSize,
+                depthOrArrayLayers: this.castsGlass ? 2 : 1,
+            },
             format: SHADOW_FORMAT,
             usage: RENDER_ATTACHMENT | TEXTURE_BINDING,
         });
-        this.shadowView = this.shadowTexture.createView();
+        const layer = (at) => this.shadowTexture.createView({
+            dimension: '2d',
+            baseArrayLayer: at,
+            arrayLayerCount: 1,
+        });
+        this.shadowView = layer(0);
+        this.glassDepthView = this.castsGlass ? layer(1) : null;
+        const tintSize = this.glassMode === 'half' ? Math.max(1, this.shadowSize >> 1) : this.shadowSize;
+        this.glassTintTexture = this.castsGlass
+            ? device.createTexture({
+                label: 'gpu-driven glass tint',
+                size: { width: tintSize, height: tintSize },
+                format: 'rgba8unorm',
+                mipLevelCount: Math.floor(Math.log2(tintSize)) + 1,
+                usage: RENDER_ATTACHMENT | TEXTURE_BINDING,
+            })
+            : null;
+        if (this.glassTintTexture !== null) {
+            this.glassTintTarget = this.glassTintTexture.createView({
+                baseMipLevel: 0,
+                mipLevelCount: 1,
+            });
+            this.glassTintSampled = this.glassTintTexture.createView();
+            this.glassTintMips = new SnapshotMips(device, this.mipPipelines, this.glassTintTexture, 'rgba8unorm', null, 'gpu-driven glass tint mips');
+        }
+        this.glassTintNone = device.createTexture({
+            label: 'gpu-driven no glass',
+            size: { width: 1, height: 1 },
+            format: 'rgba8unorm',
+            usage: TEXTURE_BINDING | TEXTURE_COPY_DST,
+        });
+        device.queue.writeTexture({ texture: this.glassTintNone }, new Uint8Array([255, 255, 255, 255]), { bytesPerRow: 4 }, { width: 1, height: 1 });
         this.emptyEnvironment = device.createTexture({
             label: 'gpu-driven no environment',
             size: { width: 1, height: 1, depthOrArrayLayers: 1 },
@@ -1171,6 +1263,37 @@ export class GpuDrivenPass {
         });
         this.shadowGroup = shadowRasterFor(this.shadowList);
         this.shadowGroupTwo = shadowRasterFor(this.shadowListTwo);
+        /*
+         * **The nearest pane, from the sun: the same raster, culling nothing**, since a pane casts from
+         * either side; into the shadow texture's second layer. Built only where glass casts.
+         */
+        if (this.castsGlass) {
+            this.glassDepthPipeline = device.createRenderPipeline({
+                label: 'gpu-driven shadow glass',
+                layout: 'auto',
+                vertex: { module: raster, entryPoint: 'vertexMain' },
+                primitive: { topology: 'triangle-list', cullMode: 'none', frontFace: 'cw' },
+                depthStencil: {
+                    format: SHADOW_FORMAT,
+                    depthWriteEnabled: true,
+                    depthCompare: 'less',
+                    depthBias: 4,
+                    depthBiasSlopeScale: 1.1,
+                },
+            });
+            this.glassDepthGroup = device.createBindGroup({
+                layout: this.glassDepthPipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: this.shadowMatrix } },
+                    { binding: 1, resource: { buffer: this.glassList } },
+                    { binding: 2, resource: { buffer: this.clusterMeta } },
+                    { binding: 3, resource: { buffer: this.indices } },
+                    { binding: 4, resource: { buffer: this.vertices } },
+                    { binding: 5, resource: { buffer: this.transformBuffer } },
+                    { binding: 6, resource: { buffer: this.materialOf } },
+                ],
+            });
+        }
         /*
          * **The transparent half's raster: one indirect draw into two targets at once.**
          *
@@ -1236,6 +1359,38 @@ export class GpuDrivenPass {
             },
         });
         this.watchBlendPipeline(device);
+        /*
+         * **What a pane lets through, from the sun**: the blended raster's vertex stage handed the
+         * light's matrix and the glass list, and \`glassTintFrag\` for the colour — white target, a
+         * multiplying blend, no depth, so every pane on a ray counts in any order.
+         */
+        if (this.castsGlass) {
+            this.glassTintPipeline = device.createRenderPipeline({
+                label: 'gpu-driven shadow tint',
+                layout: 'auto',
+                vertex: { module: blend, entryPoint: 'blendVert' },
+                fragment: {
+                    module: blend,
+                    entryPoint: 'glassTintFrag',
+                    targets: [{ format: 'rgba8unorm', blend: GLASS_TINT_BLEND }],
+                },
+                primitive: { topology: 'triangle-list', cullMode: 'none' },
+            });
+            this.glassTintGroup = device.createBindGroup({
+                layout: this.glassTintPipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: this.shadowMatrix } },
+                    { binding: 1, resource: { buffer: this.glassList } },
+                    { binding: 2, resource: { buffer: this.clusterMeta } },
+                    { binding: 3, resource: { buffer: this.indices } },
+                    { binding: 4, resource: { buffer: this.vertices } },
+                    { binding: 5, resource: { buffer: this.transformBuffer } },
+                    { binding: 6, resource: { buffer: this.materialOf } },
+                    { binding: 7, resource: { buffer: this.materialTable } },
+                    { binding: 8, resource: { buffer: this.frameBuffer } },
+                ],
+            });
+        }
         /*
          * **Premultiplied over, where `renderer.ts`'s composite is a lerp**, and `blendRaster.wgsl.ts`
          * carries why: this pipeline's colour target has a coverage mask in its alpha, which the blit
@@ -1402,6 +1557,39 @@ export class GpuDrivenPass {
             shadowCullFor(this.shadowCullSettings),
             shadowCullFor(this.shadowCullSettingsTwo),
         ];
+        /*
+         * **The sun's glass cut: the light's selection again, of the glass alone**, once the map is
+         * drawn and those buffers are free. The camera's level of detail, as the map's; every pane in
+         * the light's frustum kept, as the blended half keeps every pane — so compacted as phase two
+         * against a history of zeros, exactly as that half is.
+         */
+        if (this.castsGlass) {
+            this.glassLodGroup = device.createBindGroup({
+                layout: this.lodPipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: this.glassLodBuffer } },
+                    { binding: 1, resource: { buffer: this.clusterLod } },
+                    { binding: 2, resource: { buffer: this.shadowSelected } },
+                    { binding: 3, resource: { buffer: this.clusterMeta } },
+                    { binding: 4, resource: { buffer: this.instanceNone } },
+                    { binding: 5, resource: { buffer: this.materialOf } },
+                    { binding: 6, resource: { buffer: this.materialTable } },
+                ],
+            });
+            this.glassCullGroup = shadowCullFor(this.shadowCullSettingsGlass);
+            this.glassCompactGroup = device.createBindGroup({
+                layout: this.compactPipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: { buffer: this.blendCompactSettings } },
+                    { binding: 1, resource: { buffer: this.shadowSelected } },
+                    { binding: 2, resource: { buffer: this.shadowKeep } },
+                    { binding: 3, resource: { buffer: this.zeroHistory } },
+                    { binding: 4, resource: { buffer: this.glassList } },
+                    { binding: 5, resource: { buffer: this.historySink } },
+                    { binding: 6, resource: { buffer: this.glassArgs } },
+                ],
+            });
+        }
         this.shadowSeedGroup = device.createBindGroup({
             layout: this.shadowSeedPipeline.getBindGroupLayout(0),
             entries: [
@@ -1582,11 +1770,22 @@ export class GpuDrivenPass {
             label: 'gpu-driven colour',
             size: { width: stride, height },
             format: 'rgba16float',
+            /*
+             * **A chain only where a material is glass**, which a frosted pane reads a coarser level of,
+             * as the forward path's refraction copy does. A scene with no glass allocates exactly the one
+             * level it always did.
+             */
+            mipLevelCount: this.hasGlass ? Math.floor(Math.log2(Math.max(stride, height))) + 1 : 1,
             /* `RENDER_ATTACHMENT` only so a clear-only render pass can empty it each frame: a storage
                texture has no clear, and the alternative is a dispatch over every pixel. */
             usage: STORAGE_BINDING | TEXTURE_BINDING | RENDER_ATTACHMENT,
         });
-        this.colourView = this.colourTexture.createView();
+        /* A storage binding takes one level, so everything that writes or presents reads level 0. */
+        this.colourView = this.colourTexture.createView({ baseMipLevel: 0, mipLevelCount: 1 });
+        this.colourSampledView = this.colourTexture.createView();
+        this.colourMips = this.hasGlass
+            ? new SnapshotMips(device, this.mipPipelines, this.colourTexture, 'rgba16float', null, 'gpu-driven colour mips')
+            : null;
         this.oitAccum = device.createTexture({
             label: 'gpu-driven oit accum',
             size: { width: stride, height },
@@ -1726,12 +1925,22 @@ export class GpuDrivenPass {
                 { binding: 16, resource: this.latentRepeat },
                 { binding: 17, resource: { buffer: this.decodeNodes } },
                 { binding: 18, resource: { buffer: this.decodeWeights } },
+                /* The sun's glass, or the opaque map and a white texel where none casts. */
+                {
+                    binding: 19,
+                    resource: this.glassDepthView ?? this.shadowView,
+                },
+                {
+                    binding: 20,
+                    resource: this.glassTintSampled ?? this.glassTintNone.createView(),
+                },
+                { binding: 21, resource: this.glassSamplerFor(device) },
             ],
         });
         this.blitGroup = device.createBindGroup({
             layout: this.blitPipeline.getBindGroupLayout(0),
             entries: [
-                { binding: 0, resource: this.colourTexture.createView() },
+                { binding: 0, resource: this.colourView },
                 /* The depth the raster wrote, sampled so the blit can hand it to the frame. */
                 ...(this.presentDepth
                     ? [
@@ -1774,6 +1983,12 @@ export class GpuDrivenPass {
                 { binding: 13, resource: this.latentRepeat },
                 { binding: 14, resource: { buffer: this.decodeNodes } },
                 { binding: 15, resource: { buffer: this.decodeWeights } },
+                /* What the opaque half drew, for glass to show: `blendRaster.wgsl.ts`. */
+                { binding: 16, resource: this.colourSampledView },
+                {
+                    binding: 17,
+                    resource: this.glassSamplerFor(device),
+                },
             ],
         });
         /*
@@ -1979,6 +2194,16 @@ export class GpuDrivenPass {
         queue.writeBuffer(this.shadowCullSettings, 0, this.shadowCullValues);
         this.shadowCullValues[3] = this.occlusion ? 1 : 0;
         queue.writeBuffer(this.shadowCullSettingsTwo, 0, this.shadowCullValues);
+        if (this.castsGlass) {
+            /* No pyramid and no cones, and the cones put back for the next frame's first write. */
+            this.shadowCullValues[3] = 0;
+            this.shadowCullValues[CULL_CONES] = 0;
+            queue.writeBuffer(this.shadowCullSettingsGlass, 0, this.shadowCullValues);
+            this.shadowCullValues[CULL_CONES] = 1;
+            this.lodParamsGlass.set(this.lodParamsBlend);
+            this.lodParamsGlass[7] = 1;
+            queue.writeBuffer(this.glassLodBuffer, 0, this.lodParamsGlass);
+        }
         queue.writeBuffer(this.planesBuffer, 0, this.planes);
         queue.writeBuffer(this.frameBuffer, 0, params);
         queue.writeBuffer(this.lodBuffer, 0, this.lodParams);
@@ -2038,7 +2263,9 @@ export class GpuDrivenPass {
          * one: the table is written when the pass is built. A scene with nothing blended schedules the
          * three transparent stages away entirely and encodes the frame it encoded before they existed.
          */
-        this.shape.blended = this.materials.some((material) => material.blend === true);
+        /* Glass is the blended half's whatever its flag says: a visibility buffer holds one surface. */
+        this.shape.blended =
+            this.hasGlass || this.materials.some((material) => material.blend === true);
         /* `instanceCount` is the one word the compaction touches; the other three never change. */
         encoder.clearBuffer(argsOne, 4, 4);
         encoder.clearBuffer(argsTwo, 4, 4);
@@ -2212,6 +2439,8 @@ export class GpuDrivenPass {
                  */
                 if (!this.blendUsable || this.blendPipeline === null || this.blendRasterGroup === null)
                     return;
+                /* The shaded picture's chain, which glass reads: after `shade`, before the panes. */
+                this.colourMips?.record(encoder);
                 const pass = encoder.beginRenderPass({
                     label: 'gpu-driven blend draw',
                     colorAttachments: [
@@ -2519,6 +2748,57 @@ export class GpuDrivenPass {
         second.end();
         this.drawShadowHalf(encoder, 1, writes);
         this.shadowFlipped = !this.shadowFlipped;
+        if (this.castsGlass && this.blendUsable)
+            this.drawShadowGlass(encoder, groups);
+    }
+    /**
+     * The sun's glass, after its opaque map: the glass cut from the light, then the panes drawn
+     * twice — where the nearest one is, and what they let through, multiplied — and the tint's
+     * chain filled for frost to read. The forward path's `flushSunGlass`, in this pipeline's terms.
+     */
+    drawShadowGlass(encoder, groups) {
+        encoder.clearBuffer(this.glassArgs, 4, 4);
+        const cut = encoder.beginComputePass({ label: 'gpu-driven shadow glass cut' });
+        cut.setPipeline(this.lodPipeline);
+        cut.setBindGroup(0, this.glassLodGroup);
+        cut.dispatchWorkgroups(groups);
+        cut.setPipeline(this.cullPipeline);
+        cut.setBindGroup(0, this.glassCullGroup);
+        cut.dispatchWorkgroups(groups);
+        cut.setPipeline(this.compactPipeline);
+        cut.setBindGroup(0, this.glassCompactGroup);
+        cut.dispatchWorkgroups(groups);
+        cut.end();
+        const depth = encoder.beginRenderPass({
+            label: 'gpu-driven shadow glass',
+            colorAttachments: [],
+            depthStencilAttachment: {
+                view: this.glassDepthView,
+                depthClearValue: SHADOW_DEPTH_CLEAR,
+                depthLoadOp: 'clear',
+                depthStoreOp: 'store',
+            },
+        });
+        depth.setPipeline(this.glassDepthPipeline);
+        depth.setBindGroup(0, this.glassDepthGroup);
+        depth.drawIndirect(this.glassArgs, 0);
+        depth.end();
+        const tint = encoder.beginRenderPass({
+            label: 'gpu-driven shadow tint',
+            colorAttachments: [
+                {
+                    view: this.glassTintTarget,
+                    clearValue: { r: 1, g: 1, b: 1, a: 1 },
+                    loadOp: 'clear',
+                    storeOp: 'store',
+                },
+            ],
+        });
+        tint.setPipeline(this.glassTintPipeline);
+        tint.setBindGroup(0, this.glassTintGroup);
+        tint.drawIndirect(this.glassArgs, 0);
+        tint.end();
+        this.glassTintMips?.record(encoder);
     }
     /** One half of the map: the first clears it, the second draws over it and closes the stage's time. */
     drawShadowHalf(encoder, half, writes) {
@@ -2540,6 +2820,18 @@ export class GpuDrivenPass {
         pass.drawIndirect((half === 0 ? this.shadowArgs : this.shadowArgsTwo), 0);
         pass.end();
     }
+    /** The linear sampler glass reads the colour's and the tint's chains through, made once. */
+    glassSamplerFor(device) {
+        this.glassSampler ??= device.createSampler({
+            label: 'gpu-driven glass',
+            magFilter: 'linear',
+            minFilter: 'linear',
+            mipmapFilter: 'linear',
+            addressModeU: 'clamp-to-edge',
+            addressModeV: 'clamp-to-edge',
+        });
+        return this.glassSampler;
+    }
     drawPhase(encoder, phase, clear) {
         const pass = encoder.beginRenderPass({
             label: `gpu-driven phase ${phase + 1}`,
@@ -2597,6 +2889,8 @@ export class GpuDrivenPass {
             return;
         this.disposeTargets();
         this.shadowTexture?.destroy();
+        this.glassTintTexture?.destroy();
+        this.glassTintNone?.destroy();
         this.emptyEnvironment?.destroy();
         this.latents?.destroy();
         this.queries?.destroy();
@@ -2635,6 +2929,10 @@ export class GpuDrivenPass {
             this.shadowListTwo,
             this.shadowSelected,
             this.shadowKeep,
+            this.glassList,
+            this.glassArgs,
+            this.glassLodBuffer,
+            this.shadowCullSettingsGlass,
             this.shadowPlanes,
             this.shadowCullSettings,
             this.shadowCullSettingsTwo,
@@ -2678,3 +2976,5 @@ function multiply(out, a, b) {
         }
     }
 }
+/** Where `hasGlass` reads each material's glass through; only the answer is kept. */
+const glassProbe = { transmission: 0, frost: 0, tint: [1, 1, 1] };

package/dist/render/backend/webgpu/instanced.d.ts

@@ -16,12 +16,23 @@ export declare class GpuInstancedBatch {
     readonly capacity: number;
     private readonly staging;
     constructor(device: GPUDevice, mesh: GpuMesh, capacity: number, label: string);
+    /** Last frame's packed slots, for a reconstruction; made on first use by the renderer. */
+    previousBuffer: GPUBuffer | null;
+    /** How many slots the upload before the last one held, and how many the last one holds. */
+    previousCount: number;
+    liveCount: number;
+    /** The frame of the last upload. See `changeFrames.ts`. */
+    changed: number;
     /**
      * Pack and push `data.count` instances, in one write.
      *
      * Only the live prefix, for the reason `uploadScatter` gives: the rest is not drawn and
      * uploading it would be per-frame waste with nothing reading it.
+     *
+     * **Given `previous`, the placement still in the staging array — the last upload, which is last
+     * frame's — is written there first**, so a reconstruction can pair each slot with where it was.
+     * `writeBuffer` copies at the call, so packing afterwards cannot reach that copy.
      */
-    upload(queue: GPUQueue, data: MeshInstances): void;
+    upload(queue: GPUQueue, data: MeshInstances, previous?: GPUBuffer | null): void;
     dispose(): void;
 }

package/dist/render/backend/webgpu/instanced.js

@@ -30,20 +30,39 @@ export class GpuInstancedBatch {
             usage: USAGE_VERTEX,
         });
     }
+    /** Last frame's packed slots, for a reconstruction; made on first use by the renderer. */
+    previousBuffer = null;
+    /** How many slots the upload before the last one held, and how many the last one holds. */
+    previousCount = 0;
+    liveCount = 0;
+    /** The frame of the last upload. See `changeFrames.ts`. */
+    changed = -1;
     /**
      * Pack and push `data.count` instances, in one write.
      *
      * Only the live prefix, for the reason `uploadScatter` gives: the rest is not drawn and
      * uploading it would be per-frame waste with nothing reading it.
+     *
+     * **Given `previous`, the placement still in the staging array — the last upload, which is last
+     * frame's — is written there first**, so a reconstruction can pair each slot with where it was.
+     * `writeBuffer` copies at the call, so packing afterwards cannot reach that copy.
      */
-    upload(queue, data) {
+    upload(queue, data, previous = null) {
         const count = Math.min(data.count, this.capacity);
+        if (previous !== null) {
+            if (this.liveCount > 0) {
+                queue.writeBuffer(previous, 0, this.staging, 0, this.liveCount * INSTANCE_FLOATS);
+            }
+            this.previousCount = this.liveCount;
+        }
+        this.liveCount = count;
         if (count === 0)
             return;
         packInstances(data, this.staging);
         queue.writeBuffer(this.buffer, 0, this.staging, 0, count * INSTANCE_FLOATS);
     }
     dispose() {
+        this.previousBuffer?.destroy();
         this.buffer.destroy();
     }
 }

package/dist/render/backend/webgpu/latePass.d.ts

@@ -0,0 +1,26 @@
+import type { DrawCommand } from './drawCommand.ts';
+export declare class LatePass {
+    private readonly device;
+    private readonly commands;
+    private depth;
+    private depthTextureView;
+    private readonly layout;
+    private readonly pipeline;
+    private readonly sizes;
+    private readonly sizeStaging;
+    private group;
+    private groupSource;
+    constructor(device: GPUDevice);
+    /** The output-size depth, (re)made when the output changes size. */
+    depthView(width: number, height: number): GPUTextureView;
+    /** Fill the output-size depth from `source`, the render's single-sample depth. */
+    upscale(encoder: GPUCommandEncoder, source: GPUTextureView, renderWidth: number, renderHeight: number, outputWidth: number, outputHeight: number): void;
+    /** A command slot for one late draw. Every field a caller uses it fills; see `takeCommand`. */
+    take(): DrawCommand;
+    /** Late draws recorded this frame. */
+    get pending(): number;
+    /** Every late draw, in the order it was recorded, through the renderer's own issue. */
+    replay(pass: GPURenderPassEncoder, issue: (pass: GPURenderPassEncoder, command: DrawCommand) => void): void;
+    reset(): void;
+    dispose(): void;
+}