@woosh/meep-engine 3.58.0 → 3.60.0

package/src/shade/renderer/geometry/sdf/cards/GPUMeshCardSets.js

@@ -4,18 +4,34 @@ import Signal from "../../../../../core/events/signal/Signal.js";
 import IdPool from "../../../../../core/IdPool.js";
 import { warn_limited } from "../../../../util/warn_limited.js";
 import { BufferDescriptor } from "../../../../descriptor/buffer/BufferDescriptor.js";
+import { BindGroupDescriptor } from "../../../binding/BindGroupDescriptor.js";
+import { STRUCT_UNINDEXED_DRAW_COMMAND } from "../../../gpu_primitive/indirect/STRUCT_UNINDEXED_DRAW_COMMAND.js";
 import { WEBGPU_GUARANTEED_MAX_COMPUTE_WORKGROUPS_PER_DIMENSION } from "../../../gpu_primitive/indirect/WEBGPU_GUARANTEED_MAX_COMPUTE_WORKGROUPS_PER_DIMENSION.js";
 import { graph_import_texture } from "../../../shader/graph/graph_import_texture.js";
 import { GPUTileAtlas2D } from "../../../texture/atlas/GPUTileAtlas2D.js";
 import { MESH_SDF_BAKE_WORKGROUP_SIZE } from "../bake/MESH_SDF_BAKE.js";
 import { MESH_CARD_PAGE_TEXELS } from "./MESH_CARDS.js";
 import { MESH_CARD_SET_STRUCT } from "./MESH_CARD_SET_STRUCT.js";
+import { MeshCardCaptureMode } from "./MeshCardCaptureMode.js";
+import {
+    MESH_CARD_RASTER_CELLS_X,
+    MESH_CARD_RASTER_CELLS_Y,
+    MESH_CARD_RASTER_DEPTH_FORMAT,
+    MESH_CARD_RASTER_TARGET_FORMATS,
+    MESH_CARDS_RASTER_IMMEDIATE_SIZE,
+    MESH_CARDS_RASTER_LAYOUT,
+    mesh_cards_raster_pass_descriptor
+} from "./mesh_cards_raster_pass_descriptor.js";
 import { shader_mesh_cards_capture } from "./shader_mesh_cards_capture.js";
+import { MESH_CARDS_RASTER_ARGS_WORKGROUP_SIZE, shader_mesh_cards_raster_args } from "./shader_mesh_cards_raster_args.js";
+import { shader_mesh_cards_raster_scatter } from "./shader_mesh_cards_raster_scatter.js";
 
 /**
  * @typedef {import("../../../../../engine/graphics/render/frame_graph/FrameGraph.js").FrameGraph} FrameGraph
  * @typedef {import("../../../material/ShadeMaterial.js").ShadeMaterial} ShadeMaterial
  * @typedef {import("../../../material/resident/GPUResidentMaterialContext.js").GPUResidentMaterialContext} GPUResidentMaterialContext
+ * @typedef {import("../../../material/GPUMaterialManager.js").GPUMaterialManager} GPUMaterialManager
+ * @typedef {import("../../../material/GPUMaterialContext.js").GPUMaterialContext} GPUMaterialContext
  * @typedef {import("../../../../../core/binary/allocator/OffsetAllocator.js").Allocation} Allocation
  */
 
@@ -40,6 +56,21 @@ const PAGE_THREADS = MESH_CARD_PAGE_TEXELS * MESH_CARD_PAGE_TEXELS;
  */
 export const MESH_CARD_CAPTURE_BUDGET_MAX = WEBGPU_GUARANTEED_MAX_COMPUTE_WORKGROUPS_PER_DIMENSION;
 
+/**
+ * Texels across the raster scratch, and down it at most: a frame's raster runs are packed into it in
+ * shelves, and one that does not fit waits for the next frame. A frame's first run always fits, at
+ * whatever size its region is.
+ * @type {number}
+ */
+const RASTER_SCRATCH_SIDE = 2048;
+
+/**
+ * The raster scratch grows in steps of this many texels a side, so a frame a little larger than the
+ * last does not make it again.
+ * @type {number}
+ */
+const RASTER_SCRATCH_STEP = 256;
+
 /**
  * s_e: the largest component of a material's emissive factor, which the capture stores emissive
  * over. 0 for a material that emits nothing, or that has no emissive factor.
@@ -103,6 +134,10 @@ function grow_typed(array, length) {
  * the order they were asked for, then recaptures in the order queued. A card set's pages may span
  * frames. {@link recapture} queues a resident card set again, which reads its last capture until the
  * new one is done; a card set whose capture is under way starts it again.
+ *
+ * **Modes** ({@link capture_mode}). A traced card set is a run of pages, a thread a texel. A
+ * rastered one is taken whole: its cards are drawn into a region of a scratch, a cell a card, and its
+ * pages scattered from there into the atlas; the frame's last one may take the budget past its end.
  */
 export class GPUMeshCardSets {
 
@@ -156,12 +191,23 @@ export class GPUMeshCardSets {
      */
     #layout_pages = new Map();
 
+    /**
+     * Texels a side of each placed layout's largest card, by geometry id: the side of a raster cell.
+     * @type {Map<number, number>}
+     */
+    #layout_side = new Map();
+
     /**
      * The card sets of each geometry, by geometry id.
      * @type {Map<number, number[]>}
      */
     #sets_of_geometry = new Map();
 
+    /**
+     * @type {MeshCardCaptureMode}
+     */
+    #capture_mode = MeshCardCaptureMode.Raster;
+
     // ---- the queues: (id, ticket) pairs, from a head ----
 
     #queue_new = [];
@@ -195,6 +241,74 @@ export class GPUMeshCardSets {
     #bindings = {};
     #pass_data = { albedo: -1, emissive: -1 };
 
+    // ---- raster capture: a run a whole card set, (first scatter thread, id, region corner, cell side) ----
+
+    /** @type {GPUBuffer|null} */
+    #raster_runs = null;
+    /** @type {GPUBuffer|null} */
+    #raster_draws = null;
+    #raster_run_capacity = 0;
+    #raster_run_scratch = new Uint32Array(4 * 64);
+
+    /**
+     * The material context each of the frame's raster runs draws with.
+     * @type {GPUMaterialContext[]}
+     */
+    #frame_raster_materials = [];
+
+    #frame_raster_runs = 0;
+    #frame_raster_threads = 0;
+
+    /**
+     * What a frame's capture draws with, for the raster: set by {@link graph_capture}.
+     * @type {GPUMaterialManager|null}
+     */
+    #frame_material_contexts = null;
+
+    // the frame's shelves in the scratch
+    #shelf_x = 0;
+    #shelf_y = 0;
+    #shelf_height = 0;
+    #frame_scratch_width = 0;
+    #frame_scratch_height = 0;
+
+    /**
+     * √(diffuse albedo) and depth, emissive / s_e, then depth through the slab.
+     * @type {GPUTexture[]}
+     */
+    #raster_targets = [];
+    /** @type {GPUTextureView[]} */
+    #raster_views = [];
+    #raster_width = 0;
+    #raster_height = 0;
+
+    #raster_pass_descriptor = {
+        label: "Mesh Card Capture / Raster",
+        colorAttachments: MESH_CARD_RASTER_TARGET_FORMATS.map(() => ({
+            view: null,
+            loadOp: "clear",
+            storeOp: "store",
+            clearValue: [0, 0, 0, 0],
+        })),
+        depthStencilAttachment: {
+            view: null,
+            depthLoadOp: "clear",
+            depthStoreOp: "discard",
+            depthClearValue: 1,
+        },
+    };
+
+    #raster_immediate = new Uint32Array(MESH_CARDS_RASTER_IMMEDIATE_SIZE / 4);
+    #raster_immediate_f32 = new Float32Array(this.#raster_immediate.buffer);
+
+    #raster_args_settings = { run_count: 0 };
+    #raster_args_bindings = {};
+    #raster_scatter_settings = { run_count: 0, thread_count: 0, groups_x: 0 };
+    #raster_scatter_bindings = {};
+    #raster_pass_data = { arena: -1, albedo: -1, emissive: -1 };
+    /** The buffers group 1 of the draws binds beside the arena, as the frame's capture was recorded. */
+    #raster_group_buffers = { mesh_sdf_headers: null, geometries: null, meshlet_metadata: null, meshlet_data: null };
+
     /** Card sets turned resident by the frame's capture, sent once it is recorded. */
     #completed = [];
 
@@ -283,6 +397,37 @@ export class GPUMeshCardSets {
         return pages;
     }
 
+    /**
+     * @returns {MeshCardCaptureMode}
+     */
+    get capture_mode() {
+        return this.#capture_mode;
+    }
+
+    /**
+     * A change captures every card set again in the new mode: resident ones read their last capture
+     * until it is done, and captures under way start again.
+     *
+     * @param {MeshCardCaptureMode} mode
+     */
+    set capture_mode(mode) {
+        assert.enum(mode, MeshCardCaptureMode, 'mode');
+
+        if (mode === this.#capture_mode) {
+            return;
+        }
+
+        this.#capture_mode = mode;
+
+        for (let id = 0; id < this.#state.length; id++) {
+            const state = this.#state[id];
+
+            if (state === SET_CAPTURING || state === SET_RESIDENT) {
+                this.recapture(id);
+            }
+        }
+    }
+
     /**
      * Whether readers may use the card set: captured at least once, and its layout still there.
      *
@@ -423,11 +568,15 @@ export class GPUMeshCardSets {
      *
      * @param {number} geometry
      * @param {number} pages
+     * @param {number} side texels a side of the layout's largest card: its grid's longest axis in
+     *        voxels, plus one, the lattice having a point at either end
      */
-    set_layout(geometry, pages) {
+    set_layout(geometry, pages, side) {
         assert.isNonNegativeInteger(pages, 'pages');
+        assert.isPositiveInteger(side, 'side');
 
         this.#layout_pages.set(geometry, pages);
+        this.#layout_side.set(geometry, side);
 
         const sets = this.#sets_of_geometry.get(geometry);
 
@@ -452,6 +601,8 @@ export class GPUMeshCardSets {
             return;
         }
 
+        this.#layout_side.delete(geometry);
+
         const sets = this.#sets_of_geometry.get(geometry);
 
         if (sets === undefined) {
@@ -586,6 +737,14 @@ export class GPUMeshCardSets {
         this.#frame_threads = 0;
         this.#frame_left = budget;
 
+        this.#frame_raster_runs = 0;
+        this.#frame_raster_threads = 0;
+        this.#shelf_x = 0;
+        this.#shelf_y = 0;
+        this.#shelf_height = 0;
+        this.#frame_scratch_width = 0;
+        this.#frame_scratch_height = 0;
+
         this.#head_new = this.#compact(this.#queue_new, this.#take_from(this.#queue_new, this.#head_new));
         this.#head_re = this.#compact(this.#queue_re, this.#take_from(this.#queue_re, this.#head_re));
 
@@ -610,6 +769,24 @@ export class GPUMeshCardSets {
             }
 
             const pages = this.#layout_pages.get(this.#geometry[id]);
+
+            if (this.#capture_mode === MeshCardCaptureMode.Raster) {
+                // a context is made with its bind group
+                const material = this.#frame_material_contexts.obtain(this.#material[id]);
+
+                if (material.template.surface !== null) {
+                    if (!this.#take_raster(id, pages, material)) {
+                        // the frame's scratch is full: next frame
+                        return head;
+                    }
+
+                    head += 2;
+                    continue;
+                }
+
+                // a template that cannot be drawn this way is traced
+            }
+
             const first = this.#next_page[id];
             const count = Math.min(pages - first, this.#frame_left);
 
@@ -648,6 +825,79 @@ export class GPUMeshCardSets {
         return head;
     }
 
+    /**
+     * Take a whole card set into the frame's raster runs, if its region fits the frame's scratch.
+     *
+     * @param {number} id
+     * @param {number} pages its layout's
+     * @param {GPUMaterialContext} material what its draw binds
+     * @returns {boolean} whether it was taken
+     */
+    #take_raster(id, pages, material) {
+        const side = this.#layout_side.get(this.#geometry[id]);
+        const corner = this.#place_region(MESH_CARD_RASTER_CELLS_X * side, MESH_CARD_RASTER_CELLS_Y * side);
+
+        if (corner === -1) {
+            return false;
+        }
+
+        this.#write_record(id);
+
+        const runs = this.#frame_raster_runs;
+
+        this.#raster_run_scratch = grow_typed(this.#raster_run_scratch, 4 * (runs + 1));
+        this.#raster_run_scratch[4 * runs] = this.#frame_raster_threads;
+        this.#raster_run_scratch[4 * runs + 1] = id;
+        this.#raster_run_scratch[4 * runs + 2] = corner;
+        this.#raster_run_scratch[4 * runs + 3] = side;
+
+        this.#frame_raster_materials[runs] = material;
+
+        this.#frame_raster_runs = runs + 1;
+        this.#frame_raster_threads += pages * PAGE_THREADS;
+        this.#frame_left -= pages;
+
+        this.#next_page[id] = 0;
+        this.#queued[id] = 0;
+
+        if (this.#state[id] === SET_CAPTURING) {
+            this.#turn_resident(id);
+        }
+
+        return true;
+    }
+
+    /**
+     * A corner for a region in the frame's scratch, shelf by shelf.
+     *
+     * @param {number} width
+     * @param {number} height
+     * @returns {number} the corner as x | y << 16, or -1 when the region must wait for the next frame
+     */
+    #place_region(width, height) {
+        if (this.#shelf_x > 0 && this.#shelf_x + width > RASTER_SCRATCH_SIDE) {
+            this.#shelf_y += this.#shelf_height;
+            this.#shelf_x = 0;
+            this.#shelf_height = 0;
+        }
+
+        const fits = this.#shelf_x + width <= RASTER_SCRATCH_SIDE && this.#shelf_y + height <= RASTER_SCRATCH_SIDE;
+
+        if (!fits && this.#frame_raster_runs > 0) {
+            return -1;
+        }
+
+        const corner = this.#shelf_x | (this.#shelf_y << 16);
+
+        this.#shelf_x += width;
+        this.#shelf_height = Math.max(this.#shelf_height, height);
+
+        this.#frame_scratch_width = Math.max(this.#frame_scratch_width, this.#shelf_x);
+        this.#frame_scratch_height = Math.max(this.#frame_scratch_height, this.#shelf_y + height);
+
+        return corner;
+    }
+
     /**
      * Drop a queue's taken entries once they are most of it.
      *
@@ -680,45 +930,99 @@ export class GPUMeshCardSets {
      * @param {number} options.budget pages captured at most, `card_capture_budget`
      * @param {number} options.arena graph handle of the arena, as the frame's bake left it
      * @param {GPUBuffer} options.headers
-     * @param {GPUResidentMaterialContext} options.materials
-     * @param {Object} options.blas the geometry bindings `ray_query_blas_nearest` reads
+     * @param {GPUResidentMaterialContext} options.materials what the trace shades with
+     * @param {GPUMaterialManager} options.material_contexts what the raster draws with: each
+     *        material's template and bind group
+     * @param {Object} options.blas the geometry bindings `ray_query_blas_nearest` reads, whose
+     *        geometry and meshlet buffers the raster pulls vertices from
      */
-    graph_capture({ graph, budget, arena, headers, materials, blas }) {
+    graph_capture({ graph, budget, arena, headers, materials, material_contexts, blas }) {
         assert.defined(graph, 'graph');
         assert.isPositiveInteger(budget, 'budget');
         assert.lessThanOrEqual(budget, MESH_CARD_CAPTURE_BUDGET_MAX, 'budget');
 
+        if (this.#capture_mode === MeshCardCaptureMode.Raster) {
+            assert.notNull(material_contexts, 'material_contexts');
+            assert.defined(material_contexts, 'material_contexts');
+        }
+
+        this.#frame_material_contexts = material_contexts;
+
         this.#take(budget);
 
+        this.#frame_material_contexts = null;
+
         const completed = this.#completed;
 
-        if (this.#frame_runs > 0) {
+        if (this.#frame_runs > 0 || this.#frame_raster_runs > 0) {
             this.#ensure_device();
-            this.#ensure_runs(this.#frame_runs);
 
-            this.#device.queue.writeBuffer(this.#runs, 0, this.#run_scratch, 0, 4 * this.#frame_runs);
+            let albedo = graph_import_texture(graph, this.#atlas.texture_at(0), "mesh_card_albedo");
+            let emissive = graph_import_texture(graph, this.#atlas.texture_at(1), "mesh_card_emissive");
+
+            if (this.#frame_runs > 0) {
+                this.#ensure_runs(this.#frame_runs);
+
+                this.#device.queue.writeBuffer(this.#runs, 0, this.#run_scratch, 0, 4 * this.#frame_runs);
+
+                const data = this.#pass_data;
+                const pass = graph.add("Mesh Card Capture", data, this.#execute);
+
+                pass.read(arena);
+
+                data.arena = arena;
+                albedo = data.albedo = pass.write(albedo);
+                emissive = data.emissive = pass.write(emissive);
+
+                pass.make_side_effect();
+
+                const b = this.#bindings;
+
+                b.mesh_sdf_headers = headers;
+                b.materials = materials.buffer_materials;
+                b.textures = materials.textureView;
+                b.blas_lookup = blas.blas_lookup;
+                b.blas_data = blas.blas_data;
+                b.geometries = blas.geometries;
+                b.meshlet_metadata = blas.meshlet_metadata;
+                b.meshlet_data = blas.meshlet_data;
+            }
+
+            if (this.#frame_raster_runs > 0) {
+                const runs = this.#frame_raster_runs;
+
+                this.#ensure_raster_runs(runs);
+                this.#ensure_raster_scratch(this.#frame_scratch_width, this.#frame_scratch_height);
 
-            const data = this.#pass_data;
-            const pass = graph.add("Mesh Card Capture", data, this.#execute);
+                this.#device.queue.writeBuffer(this.#raster_runs, 0, this.#raster_run_scratch, 0, 4 * runs);
 
-            pass.read(arena);
+                const data = this.#raster_pass_data;
+                const pass = graph.add("Mesh Card Capture / Raster", data, this.#execute_raster);
 
-            data.arena = arena;
-            data.albedo = pass.write(graph_import_texture(graph, this.#atlas.texture_at(0), "mesh_card_albedo"));
-            data.emissive = pass.write(graph_import_texture(graph, this.#atlas.texture_at(1), "mesh_card_emissive"));
+                pass.read(arena);
 
-            pass.make_side_effect();
+                data.arena = arena;
+                data.albedo = pass.write(albedo);
+                data.emissive = pass.write(emissive);
 
-            const b = this.#bindings;
+                pass.make_side_effect();
 
-            b.mesh_sdf_headers = headers;
-            b.materials = materials.buffer_materials;
-            b.textures = materials.textureView;
-            b.blas_lookup = blas.blas_lookup;
-            b.blas_data = blas.blas_data;
-            b.geometries = blas.geometries;
-            b.meshlet_metadata = blas.meshlet_metadata;
-            b.meshlet_data = blas.meshlet_data;
+                const args = this.#raster_args_bindings;
+
+                args.mesh_sdf_headers = headers;
+                args.geometries = blas.geometries;
+
+                const scatter = this.#raster_scatter_bindings;
+
+                scatter.mesh_sdf_headers = headers;
+                scatter.mesh_card_raster_albedo = this.#raster_views[0];
+                scatter.mesh_card_raster_emissive = this.#raster_views[1];
+
+                this.#raster_group_buffers.mesh_sdf_headers = headers;
+                this.#raster_group_buffers.geometries = blas.geometries;
+                this.#raster_group_buffers.meshlet_metadata = blas.meshlet_metadata;
+                this.#raster_group_buffers.meshlet_data = blas.meshlet_data;
+            }
         }
 
         for (let i = 0; i < completed.length; i++) {
@@ -759,6 +1063,116 @@ export class GPUMeshCardSets {
         });
     }
 
+    /**
+     * {@link #execute_raster_capture}, bound once.
+     * @type {function(Object, Object, Object): void}
+     */
+    #execute_raster = (data, resources, context) => this.#execute_raster_capture(data, resources, context);
+
+    /**
+     * A draw a run, every run's cards into the scratch, then every run's pages into the atlas.
+     */
+    #execute_raster_capture(data, resources, context) {
+        const encoder = context.encoder;
+        const graphics = context.graphics;
+        const runs = this.#frame_raster_runs;
+        const arena = resources.get(data.arena);
+
+        const args_settings = this.#raster_args_settings;
+        const args = this.#raster_args_bindings;
+
+        args_settings.run_count = runs;
+
+        args.settings = args_settings;
+        args.mesh_sdf_indirection = arena;
+        args.mesh_card_sets = this.#records;
+        args.mesh_card_raster_runs = this.#raster_runs;
+        args.mesh_card_raster_draws = this.#raster_draws;
+
+        shader_mesh_cards_raster_args.dispatch({
+            encoder,
+            group_count_x: Math.ceil(runs / MESH_CARDS_RASTER_ARGS_WORKGROUP_SIZE),
+            bindings: args,
+        });
+
+        const buffers = this.#raster_group_buffers;
+
+        const group = graphics.bind_groups.obtain(BindGroupDescriptor.from(
+            MESH_CARDS_RASTER_LAYOUT,
+            [
+                { buffer: buffers.mesh_sdf_headers },
+                { buffer: arena },
+                { buffer: this.#records },
+                { buffer: this.#raster_runs },
+                { buffer: buffers.geometries },
+                { buffer: buffers.meshlet_metadata },
+                { buffer: buffers.meshlet_data },
+            ]
+        ));
+
+        const immediate = this.#raster_immediate;
+
+        this.#raster_immediate_f32[1] = this.#raster_width;
+        this.#raster_immediate_f32[2] = this.#raster_height;
+
+        const pass = encoder.beginRenderPass(this.#raster_pass_descriptor);
+
+        pass.setBindGroup(1, group);
+
+        let bound_template = null;
+
+        for (let run = 0; run < runs; run++) {
+            const material = this.#frame_raster_materials[run];
+
+            if (!material.is_built) {
+                // let go since it was taken: its texels stay empty, every lookup missing
+                continue;
+            }
+
+            const template = material.template;
+
+            if (template !== bound_template) {
+                pass.setPipeline(mesh_cards_raster_pass_descriptor.obtain_pipeline(graphics.render_pipelines, template, "none"));
+
+                bound_template = template;
+            }
+
+            // the same group 0 the G-buffer pass binds
+            pass.setBindGroup(0, material.material_binding);
+
+            immediate[0] = run;
+
+            pass.setImmediates(0, immediate, 0, immediate.length);
+            pass.drawIndirect(this.#raster_draws, run * STRUCT_UNINDEXED_DRAW_COMMAND.size);
+        }
+
+        pass.end();
+
+        const groups = Math.ceil(this.#frame_raster_threads / MESH_SDF_BAKE_WORKGROUP_SIZE);
+        const groups_x = Math.min(groups, WEBGPU_GUARANTEED_MAX_COMPUTE_WORKGROUPS_PER_DIMENSION);
+
+        const scatter_settings = this.#raster_scatter_settings;
+        const scatter = this.#raster_scatter_bindings;
+
+        scatter_settings.run_count = runs;
+        scatter_settings.thread_count = this.#frame_raster_threads;
+        scatter_settings.groups_x = groups_x;
+
+        scatter.settings = scatter_settings;
+        scatter.mesh_sdf_indirection = arena;
+        scatter.mesh_card_sets = this.#records;
+        scatter.mesh_card_raster_runs = this.#raster_runs;
+        scatter.mesh_card_albedo = resources.get(data.albedo).obtainView();
+        scatter.mesh_card_emissive = resources.get(data.emissive).obtainView();
+
+        shader_mesh_cards_raster_scatter.dispatch({
+            encoder,
+            group_count_x: groups_x,
+            group_count_y: Math.ceil(groups / groups_x),
+            bindings: scatter,
+        });
+    }
+
     #ensure_id(id) {
         const length = id + 1;
 
@@ -837,6 +1251,76 @@ export class GPUMeshCardSets {
         this.#run_capacity = capacity;
     }
 
+    /**
+     * @param {number} runs
+     */
+    #ensure_raster_runs(runs) {
+        if (runs <= this.#raster_run_capacity) {
+            return;
+        }
+
+        let capacity = Math.max(64, this.#raster_run_capacity);
+
+        while (capacity < runs) {
+            capacity *= 2;
+        }
+
+        this.#raster_runs?.destroy();
+        this.#raster_draws?.destroy();
+
+        this.#raster_runs = this.#create_buffer("raster runs", 16 * capacity, GPUBufferUsage.COPY_DST);
+        this.#raster_draws = this.#create_buffer("raster draws", STRUCT_UNINDEXED_DRAW_COMMAND.size * capacity, GPUBufferUsage.INDIRECT);
+        this.#raster_run_capacity = capacity;
+    }
+
+    /**
+     * The scratch the cards are drawn into, at least `width` × `height`. It only grows.
+     *
+     * @param {number} width
+     * @param {number} height
+     */
+    #ensure_raster_scratch(width, height) {
+        if (width <= this.#raster_width && height <= this.#raster_height) {
+            return;
+        }
+
+        const step = RASTER_SCRATCH_STEP;
+
+        width = Math.max(this.#raster_width, Math.ceil(width / step) * step);
+        height = Math.max(this.#raster_height, Math.ceil(height / step) * step);
+
+        const formats = [...MESH_CARD_RASTER_TARGET_FORMATS, MESH_CARD_RASTER_DEPTH_FORMAT];
+
+        for (let i = 0; i < formats.length; i++) {
+            // a frame already submitted may still be reading it; destroy waits for that
+            this.#raster_targets[i]?.destroy();
+
+            const color = i < MESH_CARD_RASTER_TARGET_FORMATS.length;
+
+            this.#raster_targets[i] = this.#device.createTexture({
+                label: `GPUMeshCardSets/raster scratch ${i}`,
+                size: [width, height],
+                format: formats[i],
+                usage: color
+                    ? GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+                    : GPUTextureUsage.RENDER_ATTACHMENT,
+            });
+
+            this.#raster_views[i] = this.#raster_targets[i].createView();
+        }
+
+        const descriptor = this.#raster_pass_descriptor;
+
+        for (let i = 0; i < descriptor.colorAttachments.length; i++) {
+            descriptor.colorAttachments[i].view = this.#raster_views[i];
+        }
+
+        descriptor.depthStencilAttachment.view = this.#raster_views[formats.length - 1];
+
+        this.#raster_width = width;
+        this.#raster_height = height;
+    }
+
     /**
      * @param {string} name
      * @param {number} size
@@ -869,6 +1353,13 @@ export class GPUMeshCardSets {
             bytes += this.#atlas.gpu_memory_usage;
         }
 
+        if (this.#raster_runs !== null) {
+            bytes += this.#raster_runs.size + this.#raster_draws.size;
+        }
+
+        // two rgba8 targets and a depth32float, 4 bytes a texel each
+        bytes += this.#raster_width * this.#raster_height * 4 * (MESH_CARD_RASTER_TARGET_FORMATS.length + 1);
+
         return bytes;
     }
 
@@ -876,9 +1367,21 @@ export class GPUMeshCardSets {
         this.#records?.destroy();
         this.#runs?.destroy();
         this.#atlas?.destroy();
+        this.#raster_runs?.destroy();
+        this.#raster_draws?.destroy();
+
+        for (let i = 0; i < this.#raster_targets.length; i++) {
+            this.#raster_targets[i].destroy();
+        }
 
         this.#records = null;
         this.#runs = null;
         this.#atlas = null;
+        this.#raster_runs = null;
+        this.#raster_draws = null;
+        this.#raster_targets.length = 0;
+        this.#raster_views.length = 0;
+        this.#raster_width = 0;
+        this.#raster_height = 0;
     }
 }