@woosh/meep-engine 3.63.0 → 3.63.1

package/CHANGELOG.md

@@ -12,11 +12,14 @@
   `ShadedGeometryOutlineSystem` pair `Outline` with models and primitives, and `OutlineSerializationAdapter` is
   registered. Each pixel belongs to one spec: the front surface's visible spec, otherwise the hidden spec of the
   nearest row with one behind it. Outlines come from a jump flood that keeps each pixel's two nearest specs, run
-  only on the screen tiles an outline can reach, and the nearer outline is drawn on top. A spec shared by several
+  only on the screen tiles within reach of a silhouette, and the nearer outline is drawn on top; the inside of a
+  large object is drawn as its fill alone, and not at all when the fill is transparent. A spec shared by several
   entities outlines them as one shape. Playground: `src/shade/playground/outline/`.
 - **Changed:** outlines of hidden parts are back, for an entity whose `Outline` has a hidden spec. At 1898x982
-  with a 14 px reach and four outlined entities, one with a hidden spec, the passes cost 0.44 ms of frame time on
-  an RTX 4090 and 4.4 ms on an AMD RDNA2 iGPU (flood 2.5, classify 1.1, composite 0.16, hidden-row raster 0.13).
+  with a 14 px reach and four outlined entities, one with a hidden spec, the passes cost 0.26 ms of frame time on
+  an RTX 4090 and 2.9 ms on an AMD RDNA2 iGPU (flood 1.6, classify 0.7, composite and fill 0.15). With the
+  removed highlight's look, a 3 px line around one object, they cost 0.6–1.3 ms of GPU time on that iGPU from an
+  object 50 px tall to one filling the screen, where the highlight pass cost 10.1–6.9 ms.
 - **Added:** the scene database's `mesh_outlines` table; `GPUViewContext.follow(view)` and
   `GPUViewContext.upscale_ratio`; `GPUSceneContext.graphics`; a `visible_meshlets` argument and result on
   `graph_rasterize_scene_fast_raw`; `ScreenTileShader` and `chunk_screen_tile_corner`

package/package.json

@@ -6,7 +6,7 @@
   "description": "Advanced 3D game engine",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "3.63.0",
+  "version": "3.63.1",
   "exports": {
     "./build/*": "./build/*",
     "./src/*": "./src/*",

package/src/engine/graphics3/outline/GPUOutlineRenderer.js

@@ -39,9 +39,12 @@ import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
 import { shader_outline_classify } from "./shader_outline_classify.js";
 import { shader_outline_classify_hidden } from "./shader_outline_classify_hidden.js";
 import { shader_outline_composite } from "./shader_outline_composite.js";
+import { shader_outline_fill } from "./shader_outline_fill.js";
+import { shader_outline_fill_tiles } from "./shader_outline_fill_tiles.js";
 import { shader_outline_flood_seed } from "./shader_outline_flood_seed.js";
 import { shader_outline_flood_step } from "./shader_outline_flood_step.js";
 import { OUTLINE_ROW_CULL_GROUP_SIZE, shader_outline_row_cull } from "./shader_outline_row_cull.js";
+import { OUTLINE_TILE_GRID_GROUP_SIZE, shader_outline_tile_edges } from "./shader_outline_tile_edges.js";
 
 /**
  * Words a `COLLECTION_U32` keeps ahead of its elements: the count, padded to the elements' 16-byte
@@ -69,11 +72,13 @@ const TILE_DRAW_COMMAND_PATTERN = "6u, input, 0u, 0u";
 /**
  * Records the outline passes into a frame.
  *
- * In order: the outline raster of the rows with a hidden spec (only when there are any), the
- * full-screen classify that labels every pixel with the spec that owns it, the tile dilation that
- * finds the tiles an outline can reach and lists them, the jump-flood rounds over those tiles, and a
- * composite of tile quads blended into the scene colour. Every pass after the classify is sized by the
- * live tile count, read on the device.
+ * In order: the outline raster of the rows with a hidden spec (only when there are any); the
+ * full-screen classify that labels every pixel with the spec that owns it and every tile with the
+ * label its pixels share; the tiles a silhouette passes through, dilated by the outline's reach and
+ * listed — the flood's tiles; the list of the other tiles that show a fill alone; the jump-flood rounds
+ * over the flood's tiles; and tile quads blended into the scene colour, a composite over the flood's
+ * tiles and a fill over the rest. The flood follows the silhouettes' length, not the area they enclose.
+ * Every pass after the tile passes is sized by a live tile count, read on the device.
  */
 export class GPUOutlineRenderer {
     /**
@@ -186,7 +191,7 @@ export class GPUOutlineRenderer {
                     outline_visibility: back.visibility,
                     outline_meshlets: back.visible_meshlets,
                     labels: label_descriptor(resolution),
-                    tile_seeds: label_descriptor(tile_resolution),
+                    tile_labels: label_descriptor(tile_resolution),
                 }
             });
         } else {
@@ -200,18 +205,38 @@ export class GPUOutlineRenderer {
                     visible_meshlets: view_textures.visible_meshlets,
                     scene_database: scene.scene_database_buffer,
                     labels: label_descriptor(resolution),
-                    tile_seeds: label_descriptor(tile_resolution),
+                    tile_labels: label_descriptor(tile_resolution),
                 }
             });
         }
 
-        const { labels, tile_seeds } = classify;
+        const { labels, tile_labels } = classify;
 
-        const { tile_active, tiles } = this.#graph_reach({ graph, tile_seeds, tile_resolution, steps: plan.reach_steps });
+        const tile_grid_group_count = [
+            Math.ceil(tile_resolution[0] / OUTLINE_TILE_GRID_GROUP_SIZE),
+            Math.ceil(tile_resolution[1] / OUTLINE_TILE_GRID_GROUP_SIZE),
+            1
+        ];
+
+        const edges = graph_compute_pass({
+            graph,
+            shader: shader_outline_tile_edges,
+            group_count: tile_grid_group_count,
+            bindings: {
+                settings: { resolution: tile_resolution },
+                tile_labels,
+                edges: label_descriptor(tile_resolution),
+            }
+        }).edges;
+
+        const { tile_active, tiles } = this.#graph_reach({ graph, edges, tile_resolution, steps: plan.reach_steps });
+
+        const fill_tiles = this.#graph_fill_tiles({ graph, specs, tile_labels, tile_active, tile_resolution, group_count: tile_grid_group_count });
 
         const dispatch = graph_build_indirect_dispatch_command(graph, tiles, 1, true);
 
-        const draw = this.#graph_tile_draw_command(graph, tiles);
+        const draw = this.#graph_tile_draw_command(graph, tiles, 'outline / tile draw command');
+        const fill_draw = this.#graph_tile_draw_command(graph, fill_tiles, 'outline / fill draw command');
 
         let state = graph_compute_indirect_pass({
             graph,
@@ -220,7 +245,7 @@ export class GPUOutlineRenderer {
             bindings: {
                 settings: { resolution, step: plan.flood_steps[0] },
                 labels,
-                tile_seeds,
+                tile_labels,
                 tiles,
                 state_out: state_descriptor(resolution),
             }
@@ -242,7 +267,8 @@ export class GPUOutlineRenderer {
             }).state_out;
         }
 
-        this.#graph_composite({ frame, resolution, jitter, upscale, specs, tiles, draw, state, labels, tile_seeds });
+        this.#graph_composite({ frame, resolution, jitter, upscale, specs, tiles, draw, state, labels, tile_labels });
+        this.#graph_fill({ frame, resolution, jitter, upscale, specs, fill_tiles, fill_draw, tile_labels });
     }
 
     /**
@@ -339,18 +365,19 @@ export class GPUOutlineRenderer {
     }
 
     /**
-     * Dilate the seed tiles by the outline's reach, and list the tiles that come out set.
+     * Dilate the edge tiles by the outline's reach, and list the tiles that come out set: the flood's
+     * tiles.
      *
      * @returns {{tile_active: number, tiles: number}}
      */
-    #graph_reach({ graph, tile_seeds, tile_resolution, steps }) {
+    #graph_reach({ graph, edges, tile_resolution, steps }) {
         const group_count = [
             Math.ceil(tile_resolution[0] / JUMP_DILATE_GROUP_SIZE),
             Math.ceil(tile_resolution[1] / JUMP_DILATE_GROUP_SIZE),
             1
         ];
 
-        let mask = tile_seeds;
+        let mask = edges;
 
         for (let i = 0; i < steps.length - 1; i++) {
             mask = graph_compute_pass({
@@ -384,15 +411,53 @@ export class GPUOutlineRenderer {
         return { tile_active: last.mask_out, tiles: last.list };
     }
 
+    /**
+     * List the tiles outside the flood that show a fill alone.
+     *
+     * @returns {number} the list, a `COLLECTION_U32`
+     */
+    #graph_fill_tiles({ graph, specs, tile_labels, tile_active, tile_resolution, group_count }) {
+        const data = {};
+
+        const pass = graph.add(shader_outline_fill_tiles.descriptor.label, data, (data, resources, context) => {
+            shader_outline_fill_tiles.dispatch({
+                encoder: context.encoder,
+                group_count_x: group_count[0],
+                group_count_y: group_count[1],
+                group_count_z: group_count[2],
+                bindings: {
+                    settings: { resolution: tile_resolution },
+                    tile_labels: resources.get(data.tile_labels).obtainView(),
+                    tile_active: resources.get(data.tile_active).obtainView(),
+                    // read when the pass runs: the table replaces its buffer when it grows
+                    specs: specs.buffer,
+                    fill_tiles: resources.get(data.fill_tiles),
+                }
+            });
+        });
+
+        data.tile_labels = pass.read(tile_labels);
+        data.tile_active = pass.read(tile_active);
+
+        data.fill_tiles = pass.create('outline / fill tiles', BufferResourceDescriptor.from(
+            (COLLECTION_HEADER_WORDS + tile_resolution[0] * tile_resolution[1]) * 4,
+            GPUBufferUsage.STORAGE,
+            0, 16 // clear the count
+        ));
+
+        return data.fill_tiles;
+    }
+
     /**
      * @param {FrameGraph} graph
      * @param {number} tiles
+     * @param {string} label
      * @returns {number} the tile quads' draw command
      */
-    #graph_tile_draw_command(graph, tiles) {
+    #graph_tile_draw_command(graph, tiles, label) {
         const data = {};
 
-        const pass = graph.add('outline / tile draw command', data, (data, resources, context) => {
+        const pass = graph.add(label, data, (data, resources, context) => {
             const encoder = context.encoder;
 
             build_indirect_draw_command(encoder.device, TILE_DRAW_COMMAND_PATTERN, encoder, resources.get(data.tiles), resources.get(data.command));
@@ -401,7 +466,7 @@ export class GPUOutlineRenderer {
         data.tiles = pass.read(tiles);
 
         // a buffer of its own: an indirect argument may not be bound writable in the scope that uses it
-        data.command = pass.create('outline / tile draw command', BufferResourceDescriptor.from(
+        data.command = pass.create(label, BufferResourceDescriptor.from(
             STRUCT_UNINDEXED_DRAW_COMMAND.aligned_size,
             GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT,
         ));
@@ -409,7 +474,7 @@ export class GPUOutlineRenderer {
         return data.command;
     }
 
-    #graph_composite({ frame, resolution, jitter, upscale, specs, tiles, draw, state, labels, tile_seeds }) {
+    #graph_composite({ frame, resolution, jitter, upscale, specs, tiles, draw, state, labels, tile_labels }) {
         const graph = frame.graph;
         const scene = frame.get(SceneColor);
 
@@ -425,7 +490,7 @@ export class GPUOutlineRenderer {
                     tiles: resources.get(data.tiles),
                     state: resources.get(data.state).obtainView(),
                     labels: resources.get(data.labels).obtainView(),
-                    tile_seeds: resources.get(data.tile_seeds).obtainView(),
+                    tile_labels: resources.get(data.tile_labels).obtainView(),
                     // read when the pass runs: the table replaces its buffer when it grows
                     specs: specs.buffer,
                     mask_atlas: this.#atlas.obtainView(),
@@ -444,7 +509,7 @@ export class GPUOutlineRenderer {
         data.draw = pass.read(draw);
         data.state = pass.read(state);
         data.labels = pass.read(labels);
-        data.tile_seeds = pass.read(tile_seeds);
+        data.tile_labels = pass.read(tile_labels);
 
         // read and written, because the outline blends over what is already there
         data.color = pass.write(pass.read(scene.color));
@@ -452,6 +517,44 @@ export class GPUOutlineRenderer {
         scene.color = data.color;
     }
 
+    #graph_fill({ frame, resolution, jitter, upscale, specs, fill_tiles, fill_draw, tile_labels }) {
+        const graph = frame.graph;
+        const scene = frame.get(SceneColor);
+
+        const data = {};
+
+        const pass = graph.add('outline / fill', data, (data, resources, context) => {
+            const color = resources.get(data.color);
+
+            shader_outline_fill.draw({
+                encoder: context.encoder,
+                bindings: {
+                    settings: { resolution, jitter, upscale },
+                    tiles: resources.get(data.tiles),
+                    tile_labels: resources.get(data.tile_labels).obtainView(),
+                    // read when the pass runs: the table replaces its buffer when it grows
+                    specs: specs.buffer,
+                    mask_atlas: this.#atlas.obtainView(),
+                },
+                colorAttachments: [{
+                    loadOp: "load",
+                    storeOp: "store",
+                    view: color.obtainView()
+                }],
+                color_formats: [color.descriptor.format],
+                command: resources.get(data.draw),
+            });
+        });
+
+        data.tiles = pass.read(fill_tiles);
+        data.draw = pass.read(fill_draw);
+        data.tile_labels = pass.read(tile_labels);
+
+        data.color = pass.write(pass.read(scene.color));
+
+        scene.color = data.color;
+    }
+
     /**
      * @param {GraphicsContext} graphics
      * @param {GPUViewContext} view

package/src/engine/graphics3/outline/chunk_outline_classify_store.js

@@ -0,0 +1,77 @@
+import { WebGPUExtensionType } from "../../../shade/descriptor/WebGPUExtensionType.js";
+import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
+
+/**
+ * The end of a classify pass: every lane of a tile's workgroup hands in its pixel's label, and the
+ * tile's label word and its labels are stored.
+ *
+ * - The tile's word, in `tile_labels`, is the label all its on-screen pixels hold, `OUTLINE_NONE`
+ *   when that is no label, and `OUTLINE_TILE_MIXED` when they differ. A lane past the screen's edge
+ *   takes no part.
+ * - The pixel's label, in `labels`, is stored only in a tile whose word is not `OUTLINE_NONE`, so
+ *   `labels` is valid in those tiles and nowhere else: a reader checks the tile's word first.
+ *
+ * The word comes from the maximum and the minimum label over the tile, the minimum kept as the
+ * maximum of the complements so that zeroed workgroup memory is the identity of both. Each subgroup
+ * reduces first, so the workgroup's atomics are one per subgroup, not one per lane.
+ *
+ * Declares the workgroup variables it reduces through; reads `tile_labels` and `labels`, which every
+ * pass using it declares. Call from uniform control flow, by every lane.
+ *
+ * @type {CodeChunk}
+ */
+export const chunk_outline_classify_store = CodeChunk.from(
+    //language=WGSL
+    `
+var<workgroup> outline_tile_highest: atomic<u32>;
+var<workgroup> outline_tile_lowest_complement: atomic<u32>;
+var<workgroup> outline_tile_word: u32;
+
+fn outline_classify_store(tile: vec2<u32>, pixel: vec2<u32>, lane: u32, inside: bool, label: u32) {
+    // 0 is the identity of a maximum, so a lane off the screen contributes nothing
+    var highest = 0u;
+    var lowest_complement = 0u;
+
+    if (inside) {
+        highest = label;
+        lowest_complement = ~label;
+    }
+
+    let subgroup_highest = subgroupMax(highest);
+    let subgroup_lowest_complement = subgroupMax(lowest_complement);
+
+    if (subgroupElect()) {
+        atomicMax(&outline_tile_highest, subgroup_highest);
+        atomicMax(&outline_tile_lowest_complement, subgroup_lowest_complement);
+    }
+
+    workgroupBarrier();
+
+    // one lane reads the reduction and hands the word on: an atomic load is a read-modify-write on
+    // some backends, and every lane loading the same word serialises on it
+    if (lane == 0u) {
+        let tile_highest = atomicLoad(&outline_tile_highest);
+        let tile_lowest = ~atomicLoad(&outline_tile_lowest_complement);
+
+        var tile_word = OUTLINE_TILE_MIXED;
+
+        if (tile_highest == tile_lowest) {
+            tile_word = tile_highest;
+        }
+
+        outline_tile_word = tile_word;
+
+        textureStore(tile_labels, vec2<i32>(tile), vec4<u32>(tile_word, 0u, 0u, 0u));
+    }
+
+    let word = workgroupUniformLoad(&outline_tile_word);
+
+    if (word != OUTLINE_NONE && inside) {
+        textureStore(labels, vec2<i32>(pixel), vec4<u32>(label, 0u, 0u, 0u));
+    }
+}
+`, [chunk_outline_label_words]
+);
+
+chunk_outline_classify_store.addExtension(WebGPUExtensionType.Subgroups);

package/src/engine/graphics3/outline/chunk_outline_label.js

@@ -5,19 +5,13 @@ import {
 } from "../../../shade/renderer/scene/MESH_OUTLINE_STRUCT.js";
 import { SCENE_DATABASE_SPEC } from "../../../shade/renderer/scene/SCENE_DATABASE_SPEC.js";
 import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
 
 /**
  * The scene database's `mesh_outlines` table.
  */
 export const MESH_OUTLINES_TABLE = SCENE_DATABASE_SPEC.get('mesh_outlines');
 
-/**
- * The word for "no label" and for "no row".
- *
- * @type {number}
- */
-export const OUTLINE_NONE = 0xFFFFFFFF;
-
 /**
  * Which spec owns a pixel, if any.
  *
@@ -40,7 +34,6 @@ export const OUTLINE_NONE = 0xFFFFFFFF;
 export const chunk_outline_label = CodeChunk.from(
     //language=WGSL
     `
-const OUTLINE_NONE: u32 = ${OUTLINE_NONE}u;
 const MESH_OUTLINE_FLAG_VISIBLE: u32 = ${MESH_OUTLINE_FLAG_VISIBLE}u;
 const MESH_OUTLINE_FLAG_HIDDEN: u32 = ${MESH_OUTLINE_FLAG_HIDDEN}u;
 
@@ -81,5 +74,5 @@ fn outline_record_of_row(database: ptr<storage, array<u32>>, row: u32) -> ${MESH
 
     return ${MESH_OUTLINES_TABLE.marshalling_method_read}(database, row);
 }
-`, [MESH_OUTLINES_TABLE.chunk_read]
+`, [chunk_outline_label_words, MESH_OUTLINES_TABLE.chunk_read]
 );

package/src/engine/graphics3/outline/chunk_outline_label_words.js

@@ -0,0 +1,29 @@
+import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+
+/**
+ * The word for "no label" and for "no row".
+ *
+ * @type {number}
+ */
+export const OUTLINE_NONE = 0xFFFFFFFF;
+
+/**
+ * The label word of a tile whose pixels do not all hold the same label, "no label" counting as one.
+ * Any other tile's word is the label all its pixels hold, or {@link OUTLINE_NONE}. Spec indices stay
+ * below both reserved words.
+ *
+ * @type {number}
+ */
+export const OUTLINE_TILE_MIXED = 0xFFFFFFFE;
+
+/**
+ * The reserved label words, for shaders.
+ *
+ * @type {CodeChunk}
+ */
+export const chunk_outline_label_words = CodeChunk.from(
+    //language=WGSL
+    `
+const OUTLINE_NONE: u32 = ${OUTLINE_NONE}u;
+const OUTLINE_TILE_MIXED: u32 = ${OUTLINE_TILE_MIXED}u;
+`);

package/src/engine/graphics3/outline/shader_outline_classify.js

@@ -9,6 +9,7 @@ import {
     VISIBLE_MESHLETS_RESOURCE
 } from "../../../shade/renderer/rasterize/visibility/chunk_visibility_decode.js";
 import { MESH_OUTLINE_STRUCT } from "../../../shade/renderer/scene/MESH_OUTLINE_STRUCT.js";
+import { chunk_outline_classify_store } from "./chunk_outline_classify_store.js";
 import { chunk_outline_label } from "./chunk_outline_label.js";
 import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
 
@@ -27,15 +28,14 @@ resources.createGroup()
 
 resources.createGroup()
     .addStorageTexture("labels", "r32uint", "2d", "write-only")
-    .addStorageTexture("tile_seeds", "r32uint", "2d", "write-only");
+    .addStorageTexture("tile_labels", "r32uint", "2d", "write-only");
 
 /**
  * Labels every pixel with the spec that owns it, for a frame with no hidden specs: only the front
  * surface's visible spec can own a pixel. See {@link chunk_outline_label}.
  *
- * One workgroup per screen tile, over the whole screen. Every tile writes whether it holds a label;
- * only a tile that does writes its labels, so the label texture is valid inside those tiles and
- * nowhere else — a reader checks the tile first.
+ * One workgroup per screen tile, over the whole screen. Every tile writes its label word, and only a
+ * tile with a label writes its labels; see {@link chunk_outline_classify_store}.
  *
  * {@link shader_outline_classify_hidden} is the same pass for a frame that also drew the outline
  * raster.
@@ -48,8 +48,6 @@ export const shader_outline_classify = ComputeShader.from({
     body: CodeChunk.from(
         //language=WGSL
         `
-var<workgroup> tile_labelled: atomic<u32>;
-
 @compute @workgroup_size(${OUTLINE_TILE_SIZE}, ${OUTLINE_TILE_SIZE}, 1)
 fn main(
     @builtin(workgroup_id) tile: vec3<u32>,
@@ -76,23 +74,8 @@ fn main(
         label = outline_label(front_row, outline_record_of_row(&scene_database, front_row), OUTLINE_NONE, nothing_behind);
     }
 
-    // workgroup memory starts zeroed
-    if (label != OUTLINE_NONE) {
-        atomicOr(&tile_labelled, 1u);
-    }
-
-    workgroupBarrier();
-
-    let labelled = atomicLoad(&tile_labelled);
-
-    if (lane == 0u) {
-        textureStore(tile_seeds, vec2<i32>(tile.xy), vec4<u32>(labelled, 0u, 0u, 0u));
-    }
-
-    if (labelled != 0u && inside) {
-        textureStore(labels, vec2<i32>(pixel), vec4<u32>(label, 0u, 0u, 0u));
-    }
+    outline_classify_store(tile.xy, pixel, lane, inside, label);
 }
-`, [chunk_visibility_decode, chunk_outline_label]
+`, [chunk_visibility_decode, chunk_outline_label, chunk_outline_classify_store]
     )
 });

package/src/engine/graphics3/outline/shader_outline_classify_hidden.js

@@ -8,6 +8,7 @@ import {
 } from "../../../shade/renderer/rasterize/visibility/chunk_visibility_decode.js";
 import { MESHLET_COLLECTION_STRUCT } from "../../../shade/renderer/rasterize/MESHLET_COLLECTION_STRUCT.js";
 import { VISIBILITY_TRIANGLE_BITS } from "../../../shade/renderer/rasterize/visibility/VISIBILITY_BUFFER.js";
+import { chunk_outline_classify_store } from "./chunk_outline_classify_store.js";
 import { chunk_outline_label } from "./chunk_outline_label.js";
 import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
 import { OUTLINE_CLASSIFY_SETTINGS } from "./shader_outline_classify.js";
@@ -27,7 +28,7 @@ resources.createGroup()
 
 resources.createGroup()
     .addStorageTexture("labels", "r32uint", "2d", "write-only")
-    .addStorageTexture("tile_seeds", "r32uint", "2d", "write-only");
+    .addStorageTexture("tile_labels", "r32uint", "2d", "write-only");
 
 /**
  * {@link shader_outline_classify} for a frame that drew the outline raster: a pixel the front surface
@@ -45,8 +46,6 @@ export const shader_outline_classify_hidden = ComputeShader.from({
     body: CodeChunk.from(
         //language=WGSL
         `
-var<workgroup> tile_labelled: atomic<u32>;
-
 @compute @workgroup_size(${OUTLINE_TILE_SIZE}, ${OUTLINE_TILE_SIZE}, 1)
 fn main(
     @builtin(workgroup_id) tile: vec3<u32>,
@@ -86,23 +85,8 @@ fn main(
         );
     }
 
-    // workgroup memory starts zeroed
-    if (label != OUTLINE_NONE) {
-        atomicOr(&tile_labelled, 1u);
-    }
-
-    workgroupBarrier();
-
-    let labelled = atomicLoad(&tile_labelled);
-
-    if (lane == 0u) {
-        textureStore(tile_seeds, vec2<i32>(tile.xy), vec4<u32>(labelled, 0u, 0u, 0u));
-    }
-
-    if (labelled != 0u && inside) {
-        textureStore(labels, vec2<i32>(pixel), vec4<u32>(label, 0u, 0u, 0u));
-    }
+    outline_classify_store(tile.xy, pixel, lane, inside, label);
 }
-`, [chunk_visibility_decode, chunk_outline_label]
+`, [chunk_visibility_decode, chunk_outline_label, chunk_outline_classify_store]
     )
 });

package/src/engine/graphics3/outline/shader_outline_composite.js

@@ -9,6 +9,7 @@ import { ScreenTileShader } from "../../../shade/renderer/shader/tile/ScreenTile
 import { vec2f, vec2u } from "../../../shade/renderer/shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
 import { WebGPUArray } from "../../../shade/renderer/shader/type/WebGPUArray.js";
 import { WebGPUStruct } from "../../../shade/renderer/shader/type/WebGPUStruct.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
 import { chunk_outline_profile } from "./chunk_outline_profile.js";
 import { OUTLINE_SPEC_STRUCT } from "./OUTLINE_SPEC_STRUCT.js";
 import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
@@ -33,13 +34,13 @@ resources.createGroup()
     .addStorageBuffer("tiles", COLLECTION_U32_STRUCT_READ)
     .addTexture("state", "uint")
     .addTexture("labels", "uint")
-    .addTexture("tile_seeds", "uint")
+    .addTexture("tile_labels", "uint")
     .addStorageBuffer("specs", WebGPUArray.from(OUTLINE_SPEC_STRUCT))
     .addTexture("mask_atlas", "unfilterable-float");
 
 /**
- * Places instance `i` on the `i`-th active tile. Outline tiles count rows down from the top, as
- * pixels do, so clip-space y is flipped.
+ * Places instance `i` on the `i`-th listed tile. Outline tiles count rows down from the top, as
+ * pixels do, so clip-space y is flipped. Reads `tiles` and `settings.resolution`.
  *
  * @type {CodeChunk}
  */
@@ -60,7 +61,13 @@ fn main(
 `, [chunk_screen_tile_corner]
 );
 
-const body = CodeChunk.from(
+/**
+ * `outline_mask`: the factor a spec's mask multiplies its part by at an output pixel, read from
+ * `mask_atlas`, which every pass using it declares. See {@link chunk_outline_profile}.
+ *
+ * @type {CodeChunk}
+ */
+export const chunk_outline_mask = CodeChunk.from(
     //language=WGSL
     `
 fn outline_mask(rect: vec2<u32>, scale_offset: vec2<f32>, at: vec2<u32>) -> f32 {
@@ -68,7 +75,12 @@ fn outline_mask(rect: vec2<u32>, scale_offset: vec2<f32>, at: vec2<u32>) -> f32
 
     return outline_mask_factor(m, scale_offset);
 }
+`, [chunk_outline_profile]
+);
 
+const body = CodeChunk.from(
+    //language=WGSL
+    `
 fn outline_label_of(seed: u32) -> u32 {
     return textureLoad(labels, jump_flood_seed_unpack(seed), 0).r;
 }
@@ -95,7 +107,7 @@ fn main(
     let delta = 0.5 * (settings.upscale.x + settings.upscale.y);
 
     // a covered pixel shows its own fill and nothing else
-    if (textureLoad(tile_seeds, pixel / ${OUTLINE_TILE_SIZE}, 0).r != 0u) {
+    if (textureLoad(tile_labels, pixel / ${OUTLINE_TILE_SIZE}, 0).r != OUTLINE_NONE) {
         let label = textureLoad(labels, pixel, 0).r;
 
         if (label != JUMP_FLOOD_NONE) {
@@ -129,15 +141,39 @@ fn main(
 
     return outline_nearer_over(near, far, near_distance, far_distance, delta);
 }
-`, [chunk_jump_flood_seed_pair, chunk_outline_profile]
+`, [chunk_jump_flood_seed_pair, chunk_outline_profile, chunk_outline_mask, chunk_outline_label_words]
 );
 
 /**
- * Paints the outlines and fills over the scene colour, on the active tiles only.
+ * The scene colour, blended premultiplied: `one, one-minus-src-alpha` over what is there.
+ *
+ * @type {GPUColorTargetState[]}
+ */
+export const OUTLINE_COMPOSITE_TARGETS = [
+    {
+        label: "color",
+        format: "rgba16float",
+        blend: BlendState.from({
+            color: {
+                operation: "add",
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha"
+            },
+            alpha: {
+                operation: "add",
+                srcFactor: "one",
+                dstFactor: "one-minus-src-alpha"
+            }
+        })
+    }
+];
+
+/**
+ * Paints the outlines and fills over the scene colour, on the flood's tiles.
  *
  * A pixel some spec covers shows that spec's fill; any other pixel shows the outlines of the two
- * nearest specs, nearer on top (see {@link chunk_outline_profile}). Both are premultiplied and blend
- * `one, one-minus-src-alpha` over what is there.
+ * nearest specs, nearer on top (see {@link chunk_outline_profile}). Both are premultiplied. The tiles
+ * the flood left out show a fill alone, and are drawn by `shader_outline_fill`.
  *
  * @type {ScreenTileShader}
  */
@@ -148,22 +184,5 @@ export const shader_outline_composite = new ScreenTileShader({
         body
     }),
     vertex: chunk_outline_tile_vertex,
-    targets: [
-        {
-            label: "color",
-            format: "rgba16float",
-            blend: BlendState.from({
-                color: {
-                    operation: "add",
-                    srcFactor: "one",
-                    dstFactor: "one-minus-src-alpha"
-                },
-                alpha: {
-                    operation: "add",
-                    srcFactor: "one",
-                    dstFactor: "one-minus-src-alpha"
-                }
-            })
-        }
-    ]
+    targets: OUTLINE_COMPOSITE_TARGETS
 });

package/src/engine/graphics3/outline/shader_outline_fill.js

@@ -0,0 +1,59 @@
+import { COLLECTION_U32_STRUCT_READ } from "../../../shade/renderer/gpu_primitive/COLLECTION_U32_STRUCT_READ.js";
+import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+import { ShaderResourceSetDescriptor } from "../../../shade/renderer/shader/resource/ShaderResourceSetDescriptor.js";
+import { ShaderDescriptor } from "../../../shade/renderer/shader/ShaderDescriptor.js";
+import { ScreenTileShader } from "../../../shade/renderer/shader/tile/ScreenTileShader.js";
+import { WebGPUArray } from "../../../shade/renderer/shader/type/WebGPUArray.js";
+import { chunk_outline_profile } from "./chunk_outline_profile.js";
+import { OUTLINE_SPEC_STRUCT } from "./OUTLINE_SPEC_STRUCT.js";
+import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
+import {
+    chunk_outline_mask,
+    chunk_outline_tile_vertex,
+    OUTLINE_COMPOSITE_SETTINGS,
+    OUTLINE_COMPOSITE_TARGETS
+} from "./shader_outline_composite.js";
+
+const resources = new ShaderResourceSetDescriptor();
+
+resources.setImmediate("settings", OUTLINE_COMPOSITE_SETTINGS);
+
+resources.createGroup()
+    .addStorageBuffer("tiles", COLLECTION_U32_STRUCT_READ)
+    .addTexture("tile_labels", "uint")
+    .addStorageBuffer("specs", WebGPUArray.from(OUTLINE_SPEC_STRUCT))
+    .addTexture("mask_atlas", "unfilterable-float");
+
+/**
+ * Paints the fill over the tiles the flood left out, listed by `shader_outline_fill_tiles`: every
+ * pixel of such a tile holds the tile's one label and no other label is within reach, so it shows
+ * that label's fill and nothing else — what `shader_outline_composite` would draw there, without the
+ * flood's state.
+ *
+ * @type {ScreenTileShader}
+ */
+export const shader_outline_fill = new ScreenTileShader({
+    descriptor: ShaderDescriptor.from({
+        label: "outline / fill",
+        resources,
+        body: CodeChunk.from(
+            //language=WGSL
+            `
+@fragment
+fn main(
+    @builtin(position) coord : vec4<f32>,
+) -> @location(0) vec4<f32> {
+    let pixel = vec2<i32>(coord.xy);
+
+    let spec = specs[textureLoad(tile_labels, pixel / ${OUTLINE_TILE_SIZE}, 0).r];
+
+    let mask_at = outline_mask_coordinate(pixel, settings.jitter, settings.upscale);
+
+    return outline_fill(spec) * outline_mask(spec.fill_mask_rect, spec.fill_mask_fma, mask_at);
+}
+`, [chunk_outline_profile, chunk_outline_mask]
+        )
+    }),
+    vertex: chunk_outline_tile_vertex,
+    targets: OUTLINE_COMPOSITE_TARGETS
+});

package/src/engine/graphics3/outline/shader_outline_fill_tiles.js

@@ -0,0 +1,70 @@
+import { COLLECTION_U32_STRUCT_WRITE } from "../../../shade/renderer/gpu_primitive/COLLECTION_U32_STRUCT_WRITE.js";
+import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+import { ComputeShader } from "../../../shade/renderer/shader/ComputeShader.js";
+import { ShaderResourceSetDescriptor } from "../../../shade/renderer/shader/resource/ShaderResourceSetDescriptor.js";
+import { WebGPUArray } from "../../../shade/renderer/shader/type/WebGPUArray.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
+import { OUTLINE_SPEC_STRUCT } from "./OUTLINE_SPEC_STRUCT.js";
+import { OUTLINE_TILE_GRID_GROUP_SIZE, OUTLINE_TILE_GRID_SETTINGS } from "./shader_outline_tile_edges.js";
+
+const resources = new ShaderResourceSetDescriptor();
+
+resources.setImmediate("settings", OUTLINE_TILE_GRID_SETTINGS);
+
+resources.createGroup()
+    .addTexture("tile_labels", "uint")
+    .addTexture("tile_active", "uint")
+    .addStorageBuffer("specs", WebGPUArray.from(OUTLINE_SPEC_STRUCT));
+
+resources.createGroup()
+    .addStorageBuffer("fill_tiles", COLLECTION_U32_STRUCT_WRITE, true);
+
+/**
+ * Lists the tiles the fill pass draws: those the flood left out whose one label has a fill to draw,
+ * packed `x | y << 16`, in no particular order.
+ *
+ * A tile outside the flood has no other label within reach (else an edge tile of that label would be
+ * within reach of it, and the flood would hold it), so its pixels show their own label's fill and
+ * nothing else. A mixed tile is always an edge, so always in the flood; a tile with no label shows
+ * nothing; and a fill of zero alpha draws nothing, so its tiles are not listed at all.
+ *
+ * The list's count has to start at zero, and the list must hold every tile of the grid.
+ *
+ * @type {ComputeShader}
+ */
+export const shader_outline_fill_tiles = ComputeShader.from({
+    label: "outline / fill tiles",
+    resources,
+    body: CodeChunk.from(
+        //language=WGSL
+        `
+@compute @workgroup_size(${OUTLINE_TILE_GRID_GROUP_SIZE}, ${OUTLINE_TILE_GRID_GROUP_SIZE}, 1)
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+    if (any(id.xy >= settings.resolution)) {
+        return;
+    }
+
+    let cell = vec2<i32>(id.xy);
+
+    if (textureLoad(tile_active, cell, 0).r != 0u) {
+        return;
+    }
+
+    let label = textureLoad(tile_labels, cell, 0).r;
+
+    // one label: the reserved words are the two largest
+    if (label >= OUTLINE_TILE_MIXED) {
+        return;
+    }
+
+    if (specs[label].fill_color.a <= 0.0) {
+        return;
+    }
+
+    let slot = atomicAdd(&fill_tiles.count, 1u);
+
+    fill_tiles.elements[slot] = id.x | (id.y << 16u);
+}
+`, [chunk_outline_label_words]
+    )
+});

package/src/engine/graphics3/outline/shader_outline_flood_seed.js

@@ -6,6 +6,7 @@ import { ComputeShader } from "../../../shade/renderer/shader/ComputeShader.js";
 import { ShaderResourceSetDescriptor } from "../../../shade/renderer/shader/resource/ShaderResourceSetDescriptor.js";
 import { u32, vec2u } from "../../../shade/renderer/shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
 import { WebGPUStruct } from "../../../shade/renderer/shader/type/WebGPUStruct.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
 import { chunk_outline_tile_pixel } from "./chunk_outline_tile_pixel.js";
 import { OUTLINE_TILE_SIZE } from "./OUTLINE_TILE_SIZE.js";
 
@@ -23,7 +24,7 @@ resources.setImmediate("settings", OUTLINE_FLOOD_SETTINGS);
 
 resources.createGroup()
     .addTexture("labels", "uint")
-    .addTexture("tile_seeds", "uint")
+    .addTexture("tile_labels", "uint")
     .addStorageBuffer("tiles", COLLECTION_U32_STRUCT_READ);
 
 resources.createGroup()
@@ -34,7 +35,8 @@ resources.createGroup()
  * is a seed, at its own position. Writes each active pixel's two seeds (see
  * {@link chunk_jump_flood_seed_pair}) for {@link shader_outline_flood_step} to refine.
  *
- * Labels are valid only inside tiles that hold one, so a tap is read only where its tile says so.
+ * Labels are valid only inside tiles that hold one, so a tap is read only where its tile's label word
+ * says so.
  *
  * @type {ComputeShader}
  */
@@ -66,7 +68,7 @@ fn main(
             continue;
         }
 
-        if (textureLoad(tile_seeds, at / ${OUTLINE_TILE_SIZE}, 0).r == 0u) {
+        if (textureLoad(tile_labels, at / ${OUTLINE_TILE_SIZE}, 0).r == OUTLINE_NONE) {
             continue;
         }
 
@@ -83,6 +85,6 @@ fn main(
 
     textureStore(state_out, pixel, vec4<u32>(pair.seed_0, pair.seed_1, 0u, 0u));
 }
-`, [chunk_jump_flood_tap, chunk_jump_flood_seed_pair, chunk_outline_tile_pixel]
+`, [chunk_jump_flood_tap, chunk_jump_flood_seed_pair, chunk_outline_tile_pixel, chunk_outline_label_words]
     )
 });

package/src/engine/graphics3/outline/shader_outline_tile_edges.js

@@ -0,0 +1,92 @@
+import { chunk_jump_flood_tap } from "../../../shade/renderer/gpu_primitive/jump_flood/chunk_jump_flood_tap.js";
+import { CodeChunk } from "../../../shade/renderer/shader/compiler/CodeChunk.js";
+import { ComputeShader } from "../../../shade/renderer/shader/ComputeShader.js";
+import { ShaderResourceSetDescriptor } from "../../../shade/renderer/shader/resource/ShaderResourceSetDescriptor.js";
+import { vec2u } from "../../../shade/renderer/shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
+import { WebGPUStruct } from "../../../shade/renderer/shader/type/WebGPUStruct.js";
+import { chunk_outline_label_words } from "./chunk_outline_label_words.js";
+
+/**
+ * Tiles per workgroup side, for the passes that run over the tile grid one tile a lane.
+ *
+ * @type {number}
+ */
+export const OUTLINE_TILE_GRID_GROUP_SIZE = 8;
+
+export const OUTLINE_TILE_GRID_SETTINGS = WebGPUStruct.from({
+    /**
+     * The tile grid's size, in tiles.
+     */
+    resolution: vec2u,
+});
+
+const resources = new ShaderResourceSetDescriptor();
+
+resources.setImmediate("settings", OUTLINE_TILE_GRID_SETTINGS);
+
+resources.createGroup()
+    .addTexture("tile_labels", "uint");
+
+resources.createGroup()
+    .addStorageTexture("edges", "r32uint", "2d", "write-only");
+
+/**
+ * Marks the tiles a silhouette passes through, from the classify pass's tile label words: the tiles
+ * the jump flood has to start from.
+ *
+ * The flood looks for each pixel's nearest pixel of a label, and that pixel always lies on the
+ * label's boundary. Were all eight neighbours of a pixel `q` of label `L` also `L`, then for any pixel
+ * `p` outside `L` the neighbour one step from `q` towards `p` would be `L` and nearer to `p`; so the
+ * nearest `q` has a neighbour of another label, and that neighbour lies in the box between `q` and `p`,
+ * so on the screen. The tile holding `q` therefore holds another label too, or touches a tile that
+ * does:
+ *
+ * - a tile whose word is `OUTLINE_TILE_MIXED` is an edge;
+ * - a tile of one label is an edge when any of its eight neighbours on the grid has another word —
+ *   including a silhouette that runs along tile borders, where neither side is mixed;
+ * - a tile with no label holds no seed and is never an edge.
+ *
+ * Tiles off the grid do not count: the neighbour above lies on the screen.
+ *
+ * @type {ComputeShader}
+ */
+export const shader_outline_tile_edges = ComputeShader.from({
+    label: "outline / tile edges",
+    resources,
+    body: CodeChunk.from(
+        //language=WGSL
+        `
+@compute @workgroup_size(${OUTLINE_TILE_GRID_GROUP_SIZE}, ${OUTLINE_TILE_GRID_GROUP_SIZE}, 1)
+fn main(@builtin(global_invocation_id) id: vec3<u32>) {
+    if (any(id.xy >= settings.resolution)) {
+        return;
+    }
+
+    let cell = vec2<i32>(id.xy);
+
+    let own = textureLoad(tile_labels, cell, 0).r;
+
+    var edge = select(0u, 1u, own == OUTLINE_TILE_MIXED);
+
+    // one label: the reserved words are the two largest
+    if (own < OUTLINE_TILE_MIXED) {
+        let extent = vec2<i32>(settings.resolution);
+
+        for (var tap = 0u; tap < JUMP_FLOOD_TAP_COUNT; tap++) {
+            let at = cell + jump_flood_tap(tap, 1u);
+
+            if (any(at < vec2<i32>(0)) || any(at >= extent)) {
+                continue;
+            }
+
+            if (textureLoad(tile_labels, at, 0).r != own) {
+                edge = 1u;
+            }
+        }
+    }
+
+    textureStore(edges, cell, vec4<u32>(edge, 0u, 0u, 0u));
+}
+`, [chunk_jump_flood_tap, chunk_outline_label_words]
+    )
+});