@woosh/meep-engine 3.11.2 → 3.12.0

package/src/shade/renderer/rasterize/bucket/prepare_meshlet_draw_commands_by_material.js

@@ -1,346 +1,342 @@
-import { assert } from "../../../../core/assert.js";
-import { ceilPowerOfTwo } from "../../../../core/binary/operations/ceilPowerOfTwo.js";
-import { round_up } from "../../../../core/math/round_up.js";
-import { BufferResourceDescriptor } from "../../../device/graph/BufferResourceDescriptor.js";
-import { u32, vec2u } from "../../shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
-import { STRUCT_UNINDEXED_DRAW_COMMAND } from "../../gpu_primitive/indirect/STRUCT_UNINDEXED_DRAW_COMMAND.js";
-import { cpu_build_hash_table } from "../../gpu_primitive/hash_table/cpu_build_hash_table.js";
-import { graph_prefix_scan_csdldf } from "../../gpu_primitive/prefix_sum/v1/graph_prefix_scan_csdldf.js";
-import { shader_hzb_meshlet_filter_1way_full } from "../cull/hzb/shader_hzb_meshlet_filter_1way_full.js";
-import { COMPUTE_SHADER_DEFAULT_GROUP_SIZE } from "../../shader/COMPUTE_SHADER_DEFAULT_GROUP_SIZE.js";
-import { graph_import_raw_buffer } from "../../shader/graph/graph_import_raw_buffer.js";
-import { graph_record_stat } from "../../util/graph_record_stat.js";
-import {
-    build_indirect_compute_dispatch_command,
-    graph_build_indirect_dispatch_command,
-    INDIRECT_COMPUTE_COMMAND_DESCRIPTOR
-} from "../../gpu_primitive/indirect/IndirectComputeCommandBuildPass.js";
-import { graph_mesh_filter_one_way } from "../expand/graph_mesh_filter_one_way.js";
-import { graph_expand_meshes_to_meshlets } from "../expand/mesh/graph_expand_meshes_to_meshlets.js";
-import { RasterizationCollectionType } from "../expand/RasterizationCollectionType.js";
-import { shader_count_meshlets_by_material } from "./shader_count_meshlets_by_material.js";
-import {
-    shader_make_meshlet_indirect_draw_commands_by_material
-} from "./shader_make_meshlet_indirect_draw_commands_by_material.js";
-import { PUSH_CONSTANTS, shader_read_out_bucket } from "./shader_read_out_bucket.js";
-import { shader_sort_meshlets_by_material } from "./shader_sort_meshlets_by_material.js";
-
-/**
- *
- * @param {FrameGraph} graph
- * @param {ShadeMaterial[]} materials
- * @param {number} bucket_index
- * @param {GPUCollectionLimits} limits
- * @param {number} buckets resource ID
- * @param {number} [camera] camera resource ID, optional
- * @param {number} [hzb] hierarchical z-buffer resource ID, optional
- * @param {number[]} resolution
- * @param {string} [label] used for debug
- * @param {GPUSceneContext} scene
- */
-export function graph_prepare_meshlet_draw_commands_by_material({
-                                                                    graph,
-                                                                    materials,
-                                                                    bucket_id,
-                                                                    limits,
-                                                                    buckets,
-                                                                    hzb = -1,
-                                                                    camera = -1,
-                                                                    scene,
-                                                                    resolution,
-                                                                    label,
-                                                                }) {
-
-    assert.defined(limits, 'limits');
-    assert.defined(materials, 'materials');
-    assert.isNonNegativeInteger(bucket_id, 'bucket_index');
-
-    const copy_bucket_data = {};
-
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function copy_bucket(data, resources, context) {
-        const encoder = context.encoder;
-
-        const buckets_buffer = resources.get(data.buckets);
-        const command = resources.get(data.command);
-        const output = resources.get(data.output);
-
-        build_indirect_compute_dispatch_command(
-            COMPUTE_SHADER_DEFAULT_GROUP_SIZE,
-            encoder,
-            buckets_buffer,
-            // the bucketed buffer header consists of pairs of u32 values (count,offset)
-            bucket_id * (u32.size * 2),
-            command,
-            0
-        );
-
-        const settings = encoder.allocateTransientValueBuffer(PUSH_CONSTANTS, {
-            bucket_id,
-        });
-
-        shader_read_out_bucket.dispatchIndirect({
-            encoder,
-            command,
-            bindings: {
-                settings,
-                input: buckets_buffer,
-                output,
-            }
-        });
-    }
-
-    const copy_bucket_pass = graph.add('copy bucket', copy_bucket_data, copy_bucket);
-
-    copy_bucket_data.buckets = copy_bucket_pass.read(buckets);
-    copy_bucket_data.command = copy_bucket_pass.create("command", INDIRECT_COMPUTE_COMMAND_DESCRIPTOR);
-    const mesh_buffer_size = limits.compute_buffer_size(RasterizationCollectionType.Meshes);
-    copy_bucket_data.output = copy_bucket_pass.create("output", BufferResourceDescriptor.from(
-        mesh_buffer_size,
-        GPUBufferUsage.STORAGE,
-        0, 16 // clear count; an empty bucket dispatches zero workgroups and writes nothing
-    ));
-    let meshes = copy_bucket_data.output;
-
-    if (hzb !== -1 && camera !== -1) {
-        // filter source meshes
-        meshes = graph_mesh_filter_one_way({
-            graph,
-            scene,
-            camera,
-            hzb,
-            input: meshes,
-            output_size: mesh_buffer_size
-        });
-    }
-
-    // 1. expand meshes
-    const meshlet_buffer_size = limits.compute_buffer_size(RasterizationCollectionType.Meshlets);
-    let meshlets = graph_expand_meshes_to_meshlets({
-        graph,
-        input_meshes: meshes,
-        scene,
-        stats: limits.stats,
-        limits,
-        expected_output_size: meshlet_buffer_size,
-    });
-
-    graph_record_stat(graph, limits.stats, RasterizationCollectionType.Meshlets, meshlets);
-
-    if (hzb !== -1 && camera !== -1) {
-        // filter meshlets
-        const command = graph_build_indirect_dispatch_command(graph, meshlets, COMPUTE_SHADER_DEFAULT_GROUP_SIZE)
-
-
-        /**
-         *
-         * @param data
-         * @param {FramePassResources} resources
-         * @param {GraphicsExecutionContext} context
-         */
-        function filter_meshlets(data, resources, context) {
-            const encoder = context.encoder;
-
-            const camera_state = resources.get(data.camera);
-            const input = resources.get(data.input_meshlets);
-            const output = resources.get(data.output_meshlets);
-            const hzb = resources.get(data.texture_hzb);
-            const command = resources.get(data.command);
-
-            const uResolution = encoder.allocateTransientValueBuffer(vec2u, resolution);
-
-            shader_hzb_meshlet_filter_1way_full.dispatchIndirect({
-                encoder,
-                command,
-                bindings: {
-                    camera: camera_state,
-                    resolution: uResolution,
-                    scene_database: scene.scene_database_buffer,
-                    meshlet_metadata: scene.geometries.meshlets.buffer_metadata,
-                    texture_hzb: hzb.obtainView(),
-                    input,
-                    output
-                }
-            })
-        }
-
-        const data = {};
-
-        const pass = graph.add('filter meshlets', data, filter_meshlets);
-
-        data.scene = scene;
-        data.command = pass.read(command);
-        data.texture_hzb = pass.read(hzb);
-        data.input_meshlets = pass.read(meshlets);
-        data.output_meshlets = pass.create("filtered", BufferResourceDescriptor.from(
-            meshlet_buffer_size,
-            GPUBufferUsage.STORAGE,
-            0, 16
-        ));
-        data.camera = pass.read(camera);
-
-
-        meshlets = data.output_meshlets;
-
-    }
-
-    // 2. build material lookup table
-    const material_ids = materials.map(m => m.id);
-    const material_count = material_ids.length;
-    const HASH_TABLE_SLACK = 1.3;
-    const material_table_size = ceilPowerOfTwo(Math.max(1, material_count * HASH_TABLE_SLACK));
-    const material_lookup_data = new ArrayBuffer((material_table_size * 2 + 2) * 4)
-    const material_lookup = new Uint32Array(material_lookup_data);
-    cpu_build_hash_table(
-        material_lookup, 0,
-        material_table_size,
-        material_ids,
-        material_count,
-    );
-
-    // TODO build the table on the GPU
-    const gr_material_lookup = graph_import_raw_buffer({
-        graph,
-        value: material_lookup_data,
-        usage: GPUBufferUsage.STORAGE,
-    });
-
-    // 3. Build meshlet iterator command to be used in later passes
-    const meshlet_iterator_command = graph_build_indirect_dispatch_command(graph, meshlets, COMPUTE_SHADER_DEFAULT_GROUP_SIZE);
-
-    // 4. build meshlet counts by material
-    const count_by_material_data = {};
-
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function count_by_material(data, resources, context) {
-        const input_meshlets = resources.get(data.meshlets);
-        const output_counts = resources.get(data.counts);
-        const command = resources.get(data.command);
-        const material_lookup = resources.get(data.material_lookup);
-
-        //
-        shader_count_meshlets_by_material.dispatchIndirect({
-            encoder: context.encoder,
-            command,
-            bindings: {
-                input: input_meshlets,
-                output: output_counts,
-                scene_database: scene.scene_database_buffer,
-                material_lookup,
-            }
-        })
-    }
-
-    const count_by_material_pass = graph.add('meshlet counts by material', count_by_material_data, count_by_material);
-    count_by_material_data.meshlets = count_by_material_pass.read(meshlets);
-    count_by_material_data.counts = count_by_material_pass.create("counts", BufferResourceDescriptor.empty(
-        round_up((material_count + 4) * u32.size, 1024),
-        GPUBufferUsage.STORAGE
-    ));
-    count_by_material_data.material_lookup = count_by_material_pass.read(gr_material_lookup);
-    count_by_material_data.command = count_by_material_pass.read(meshlet_iterator_command);
-
-    // 5. prefix scan meshlets by material
-    const prefix_sum = graph_prefix_scan_csdldf({
-        graph,
-        data: count_by_material_data.counts,
-        element_max_count: Math.max(1, material_count),
-    });
-    // 6. Sort meshlets by material, using the prefix sum
-    const sort_meshlets_by_material_data = {};
-
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function sort_meshlets_by_material(data, resources, context) {
-        const prefix_sums = resources.get(data.prefix_sums);
-        const input_meshlets = resources.get(data.input);
-        const output_meshlets = resources.get(data.output);
-        const command = resources.get(data.command);
-        const material_lookup = resources.get(data.material_lookup);
-        const counters = resources.get(data.counters);
-
-        const encoder = context.encoder;
-
-        shader_sort_meshlets_by_material.dispatchIndirect({
-            encoder,
-            command,
-            bindings: {
-                prefix_sums,
-                input: input_meshlets,
-                output: output_meshlets,
-                scene_database: scene.scene_database_buffer,
-                material_lookup,
-                counters,
-            }
-        });
-    }
-
-    const sort_meshlets_by_material_pass = graph.add('sort meshlets by material', sort_meshlets_by_material_data, sort_meshlets_by_material);
-    sort_meshlets_by_material_data.prefix_sums = sort_meshlets_by_material_pass.read(prefix_sum);
-    sort_meshlets_by_material_data.input = sort_meshlets_by_material_pass.read(meshlets);
-    sort_meshlets_by_material_data.material_lookup = sort_meshlets_by_material_pass.read(gr_material_lookup);
-    sort_meshlets_by_material_data.counters = sort_meshlets_by_material_pass.create("counters", BufferResourceDescriptor.empty(
-        round_up(Math.max(1, material_count) * u32.size, 1024),
-        GPUBufferUsage.STORAGE
-    ));
-    sort_meshlets_by_material_data.command = sort_meshlets_by_material_pass.read(meshlet_iterator_command);
-    sort_meshlets_by_material_data.output = sort_meshlets_by_material_pass.create("sorted meshlets", BufferResourceDescriptor.from(
-        limits.compute_buffer_size(RasterizationCollectionType.Meshlets),
-        GPUBufferUsage.STORAGE,
-    ));
-
-    // 7. Build draw commands
-    const draw_commands_data = {};
-
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function build_draw_commands(data, resources, context) {
-        if (material_count === 0) {
-            return;
-        }
-
-        const prefix_sums = resources.get(data.prefix_sums);
-        const commands = resources.get(data.commands);
-
-        shader_make_meshlet_indirect_draw_commands_by_material.dispatchLinear({
-            encoder: context.encoder,
-            element_count: material_count,
-            bindings: {
-                commands,
-                prefix_sums,
-            }
-        })
-    }
-
-    const build_draw_commands_pass = graph.add('build draw commands', draw_commands_data, build_draw_commands);
-    draw_commands_data.prefix_sums = build_draw_commands_pass.read(prefix_sum);
-
-    // NOTE: clearing is critical. We might end up with no writes which would produce garbage without clearing
-    draw_commands_data.commands = build_draw_commands_pass.create("commands", BufferResourceDescriptor.empty(
-        STRUCT_UNINDEXED_DRAW_COMMAND.size * material_count,
-        GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT,
-    ));
-
-    return {
-        meshlets: sort_meshlets_by_material_data.output,
-        draw_commands: draw_commands_data.commands
-    }
+import { assert } from "../../../../core/assert.js";
+import { ceilPowerOfTwo } from "../../../../core/binary/operations/ceilPowerOfTwo.js";
+import { round_up } from "../../../../core/math/round_up.js";
+import { BufferResourceDescriptor } from "../../../device/graph/BufferResourceDescriptor.js";
+import { u32, vec2u } from "../../shader/type/WEBGPU_WGSL_PRIMITIVE_TYPES.js";
+import { STRUCT_UNINDEXED_DRAW_COMMAND } from "../../gpu_primitive/indirect/STRUCT_UNINDEXED_DRAW_COMMAND.js";
+import { cpu_build_hash_table } from "../../gpu_primitive/hash_table/cpu_build_hash_table.js";
+import { graph_prefix_scan_csdldf } from "../../gpu_primitive/prefix_sum/v1/graph_prefix_scan_csdldf.js";
+import { shader_hzb_meshlet_filter_1way_full } from "../cull/hzb/shader_hzb_meshlet_filter_1way_full.js";
+import { COMPUTE_SHADER_DEFAULT_GROUP_SIZE } from "../../shader/COMPUTE_SHADER_DEFAULT_GROUP_SIZE.js";
+import { graph_import_raw_buffer } from "../../shader/graph/graph_import_raw_buffer.js";
+import { graph_record_stat } from "../../util/graph_record_stat.js";
+import {
+    build_indirect_compute_dispatch_command,
+    graph_build_indirect_dispatch_command,
+    INDIRECT_COMPUTE_COMMAND_DESCRIPTOR
+} from "../../gpu_primitive/indirect/IndirectComputeCommandBuildPass.js";
+import { graph_mesh_filter_one_way } from "../expand/graph_mesh_filter_one_way.js";
+import { graph_expand_meshes_to_meshlets } from "../expand/mesh/graph_expand_meshes_to_meshlets.js";
+import { RasterizationCollectionType } from "../expand/RasterizationCollectionType.js";
+import { shader_count_meshlets_by_material } from "./shader_count_meshlets_by_material.js";
+import {
+    shader_make_meshlet_indirect_draw_commands_by_material
+} from "./shader_make_meshlet_indirect_draw_commands_by_material.js";
+import { shader_read_out_bucket } from "./shader_read_out_bucket.js";
+import { shader_sort_meshlets_by_material } from "./shader_sort_meshlets_by_material.js";
+
+/**
+ *
+ * @param {FrameGraph} graph
+ * @param {ShadeMaterial[]} materials
+ * @param {number} bucket_index
+ * @param {GPUCollectionLimits} limits
+ * @param {number} buckets resource ID
+ * @param {number} [camera] camera resource ID, optional
+ * @param {number} [hzb] hierarchical z-buffer resource ID, optional
+ * @param {number[]} resolution
+ * @param {string} [label] used for debug
+ * @param {GPUSceneContext} scene
+ */
+export function graph_prepare_meshlet_draw_commands_by_material({
+                                                                    graph,
+                                                                    materials,
+                                                                    bucket_id,
+                                                                    limits,
+                                                                    buckets,
+                                                                    hzb = -1,
+                                                                    camera = -1,
+                                                                    scene,
+                                                                    resolution,
+                                                                    label,
+                                                                }) {
+
+    assert.defined(limits, 'limits');
+    assert.defined(materials, 'materials');
+    assert.isNonNegativeInteger(bucket_id, 'bucket_index');
+
+    const copy_bucket_data = {};
+
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function copy_bucket(data, resources, context) {
+        const encoder = context.encoder;
+
+        const buckets_buffer = resources.get(data.buckets);
+        const command = resources.get(data.command);
+        const output = resources.get(data.output);
+
+        build_indirect_compute_dispatch_command(
+            COMPUTE_SHADER_DEFAULT_GROUP_SIZE,
+            encoder,
+            buckets_buffer,
+            // the bucketed buffer header consists of pairs of u32 values (count,offset)
+            bucket_id * (u32.size * 2),
+            command,
+            0
+        );
+
+        shader_read_out_bucket.dispatchIndirect({
+            encoder,
+            command,
+            bindings: {
+                settings: { bucket_id },
+                input: buckets_buffer,
+                output,
+            }
+        });
+    }
+
+    const copy_bucket_pass = graph.add('copy bucket', copy_bucket_data, copy_bucket);
+
+    copy_bucket_data.buckets = copy_bucket_pass.read(buckets);
+    copy_bucket_data.command = copy_bucket_pass.create("command", INDIRECT_COMPUTE_COMMAND_DESCRIPTOR);
+    const mesh_buffer_size = limits.compute_buffer_size(RasterizationCollectionType.Meshes);
+    copy_bucket_data.output = copy_bucket_pass.create("output", BufferResourceDescriptor.from(
+        mesh_buffer_size,
+        GPUBufferUsage.STORAGE,
+        0, 16 // clear count; an empty bucket dispatches zero workgroups and writes nothing
+    ));
+    let meshes = copy_bucket_data.output;
+
+    if (hzb !== -1 && camera !== -1) {
+        // filter source meshes
+        meshes = graph_mesh_filter_one_way({
+            graph,
+            scene,
+            camera,
+            hzb,
+            input: meshes,
+            output_size: mesh_buffer_size
+        });
+    }
+
+    // 1. expand meshes
+    const meshlet_buffer_size = limits.compute_buffer_size(RasterizationCollectionType.Meshlets);
+    let meshlets = graph_expand_meshes_to_meshlets({
+        graph,
+        input_meshes: meshes,
+        scene,
+        stats: limits.stats,
+        limits,
+        expected_output_size: meshlet_buffer_size,
+    });
+
+    graph_record_stat(graph, limits.stats, RasterizationCollectionType.Meshlets, meshlets);
+
+    if (hzb !== -1 && camera !== -1) {
+        // filter meshlets
+        const command = graph_build_indirect_dispatch_command(graph, meshlets, COMPUTE_SHADER_DEFAULT_GROUP_SIZE)
+
+
+        /**
+         *
+         * @param data
+         * @param {FramePassResources} resources
+         * @param {GraphicsExecutionContext} context
+         */
+        function filter_meshlets(data, resources, context) {
+            const encoder = context.encoder;
+
+            const camera_state = resources.get(data.camera);
+            const input = resources.get(data.input_meshlets);
+            const output = resources.get(data.output_meshlets);
+            const hzb = resources.get(data.texture_hzb);
+            const command = resources.get(data.command);
+
+            const uResolution = encoder.allocateTransientValueBuffer(vec2u, resolution);
+
+            shader_hzb_meshlet_filter_1way_full.dispatchIndirect({
+                encoder,
+                command,
+                bindings: {
+                    camera: camera_state,
+                    resolution: uResolution,
+                    scene_database: scene.scene_database_buffer,
+                    meshlet_metadata: scene.geometries.meshlets.buffer_metadata,
+                    texture_hzb: hzb.obtainView(),
+                    input,
+                    output
+                }
+            })
+        }
+
+        const data = {};
+
+        const pass = graph.add('filter meshlets', data, filter_meshlets);
+
+        data.scene = scene;
+        data.command = pass.read(command);
+        data.texture_hzb = pass.read(hzb);
+        data.input_meshlets = pass.read(meshlets);
+        data.output_meshlets = pass.create("filtered", BufferResourceDescriptor.from(
+            meshlet_buffer_size,
+            GPUBufferUsage.STORAGE,
+            0, 16
+        ));
+        data.camera = pass.read(camera);
+
+
+        meshlets = data.output_meshlets;
+
+    }
+
+    // 2. build material lookup table
+    const material_ids = materials.map(m => m.id);
+    const material_count = material_ids.length;
+    const HASH_TABLE_SLACK = 1.3;
+    const material_table_size = ceilPowerOfTwo(Math.max(1, material_count * HASH_TABLE_SLACK));
+    const material_lookup_data = new ArrayBuffer((material_table_size * 2 + 2) * 4)
+    const material_lookup = new Uint32Array(material_lookup_data);
+    cpu_build_hash_table(
+        material_lookup, 0,
+        material_table_size,
+        material_ids,
+        material_count,
+    );
+
+    // TODO build the table on the GPU
+    const gr_material_lookup = graph_import_raw_buffer({
+        graph,
+        value: material_lookup_data,
+        usage: GPUBufferUsage.STORAGE,
+    });
+
+    // 3. Build meshlet iterator command to be used in later passes
+    const meshlet_iterator_command = graph_build_indirect_dispatch_command(graph, meshlets, COMPUTE_SHADER_DEFAULT_GROUP_SIZE);
+
+    // 4. build meshlet counts by material
+    const count_by_material_data = {};
+
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function count_by_material(data, resources, context) {
+        const input_meshlets = resources.get(data.meshlets);
+        const output_counts = resources.get(data.counts);
+        const command = resources.get(data.command);
+        const material_lookup = resources.get(data.material_lookup);
+
+        //
+        shader_count_meshlets_by_material.dispatchIndirect({
+            encoder: context.encoder,
+            command,
+            bindings: {
+                input: input_meshlets,
+                output: output_counts,
+                scene_database: scene.scene_database_buffer,
+                material_lookup,
+            }
+        })
+    }
+
+    const count_by_material_pass = graph.add('meshlet counts by material', count_by_material_data, count_by_material);
+    count_by_material_data.meshlets = count_by_material_pass.read(meshlets);
+    count_by_material_data.counts = count_by_material_pass.create("counts", BufferResourceDescriptor.empty(
+        round_up((material_count + 4) * u32.size, 1024),
+        GPUBufferUsage.STORAGE
+    ));
+    count_by_material_data.material_lookup = count_by_material_pass.read(gr_material_lookup);
+    count_by_material_data.command = count_by_material_pass.read(meshlet_iterator_command);
+
+    // 5. prefix scan meshlets by material
+    const prefix_sum = graph_prefix_scan_csdldf({
+        graph,
+        data: count_by_material_data.counts,
+        element_max_count: Math.max(1, material_count),
+    });
+    // 6. Sort meshlets by material, using the prefix sum
+    const sort_meshlets_by_material_data = {};
+
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function sort_meshlets_by_material(data, resources, context) {
+        const prefix_sums = resources.get(data.prefix_sums);
+        const input_meshlets = resources.get(data.input);
+        const output_meshlets = resources.get(data.output);
+        const command = resources.get(data.command);
+        const material_lookup = resources.get(data.material_lookup);
+        const counters = resources.get(data.counters);
+
+        const encoder = context.encoder;
+
+        shader_sort_meshlets_by_material.dispatchIndirect({
+            encoder,
+            command,
+            bindings: {
+                prefix_sums,
+                input: input_meshlets,
+                output: output_meshlets,
+                scene_database: scene.scene_database_buffer,
+                material_lookup,
+                counters,
+            }
+        });
+    }
+
+    const sort_meshlets_by_material_pass = graph.add('sort meshlets by material', sort_meshlets_by_material_data, sort_meshlets_by_material);
+    sort_meshlets_by_material_data.prefix_sums = sort_meshlets_by_material_pass.read(prefix_sum);
+    sort_meshlets_by_material_data.input = sort_meshlets_by_material_pass.read(meshlets);
+    sort_meshlets_by_material_data.material_lookup = sort_meshlets_by_material_pass.read(gr_material_lookup);
+    sort_meshlets_by_material_data.counters = sort_meshlets_by_material_pass.create("counters", BufferResourceDescriptor.empty(
+        round_up(Math.max(1, material_count) * u32.size, 1024),
+        GPUBufferUsage.STORAGE
+    ));
+    sort_meshlets_by_material_data.command = sort_meshlets_by_material_pass.read(meshlet_iterator_command);
+    sort_meshlets_by_material_data.output = sort_meshlets_by_material_pass.create("sorted meshlets", BufferResourceDescriptor.from(
+        limits.compute_buffer_size(RasterizationCollectionType.Meshlets),
+        GPUBufferUsage.STORAGE,
+    ));
+
+    // 7. Build draw commands
+    const draw_commands_data = {};
+
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function build_draw_commands(data, resources, context) {
+        if (material_count === 0) {
+            return;
+        }
+
+        const prefix_sums = resources.get(data.prefix_sums);
+        const commands = resources.get(data.commands);
+
+        shader_make_meshlet_indirect_draw_commands_by_material.dispatchThreads({
+            encoder: context.encoder,
+            thread_count_x: material_count,
+            bindings: {
+                commands,
+                prefix_sums,
+            }
+        })
+    }
+
+    const build_draw_commands_pass = graph.add('build draw commands', draw_commands_data, build_draw_commands);
+    draw_commands_data.prefix_sums = build_draw_commands_pass.read(prefix_sum);
+
+    // NOTE: clearing is critical. We might end up with no writes which would produce garbage without clearing
+    draw_commands_data.commands = build_draw_commands_pass.create("commands", BufferResourceDescriptor.empty(
+        STRUCT_UNINDEXED_DRAW_COMMAND.size * material_count,
+        GPUBufferUsage.STORAGE | GPUBufferUsage.INDIRECT,
+    ));
+
+    return {
+        meshlets: sort_meshlets_by_material_data.output,
+        draw_commands: draw_commands_data.commands
+    }
 }