npm - @woosh/meep-engine - Versions diffs - 3.14.6 → 3.16.0 - Mend

@woosh/meep-engine 3.14.6 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1089) hide show

package/src/shade/renderer/rasterize/native/oit/graph_rasterize_meshes_transparent_oit.js CHANGED Viewed

@@ -1,723 +1,666 @@
-import { assert } from "../../../../../core/assert.js";
-import { SamplerDescriptor } from "../../../../descriptor/texture/SamplerDescriptor.js";
-import { TextureResourceDescriptor } from "../../../../device/graph/TextureResourceDescriptor.js";
-import { rp_rewrite_for_primitive_state } from "../../../../device/pipeline/rp_rewrite_for_primitive_state.js";
-import { STRUCT_UNINDEXED_DRAW_COMMAND } from "../../../gpu_primitive/indirect/STRUCT_UNINDEXED_DRAW_COMMAND.js";
-import { BindGroupDescriptor } from "../../../binding/BindGroupDescriptor.js";
-import { SHADING_LIGHT_RESOURCE_GROUP } from "../../../deferred/SHADING_LIGHT_RESOURCE_GROUP.js";
-import { ShadeDrawMode } from "../../../material/ShadeDrawMode.js";
-import { ShadeDrawSide } from "../../../material/ShadeDrawSide.js";
-import { SHADING_MATERIAL_RESOURCE_GROUP } from "../../../material/standard/SHADING_MATERIAL_RESOURCE_GROUP.js";
-import { TransparencyMode } from "../../../material/TransparencyMode.js";
-import { ShadeIndirectLightingMode } from "../../../ShadeIndirectLightingMode.js";
-import { graph_image_pass } from "../../../shader/graph/graph_image_pass.js";
-import { graph_import_buffer } from "../../../shader/graph/graph_import_buffer.js";
-import { graph_import_texture } from "../../../shader/graph/graph_import_texture.js";
-import {
-    SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR
-} from "../../../shadow/map/SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR.js";
-import { STATIC_GRAPHICS_ENGINE_ASSETS } from "../../../STATIC_GRAPHICS_ENGINE_ASSETS.js";
-import { rasterization_material_bucket } from "../../expand/bucket/chunk_rasterization_material_bucket.js";
-import { construct_primitive_state } from "../../bucket/construct_primitive_state.js";
-import { filter_materials_by_bucket } from "../../bucket/filter_materials_by_bucket.js";
-import {
-    graph_prepare_meshlet_draw_commands_by_material
-} from "../../bucket/prepare_meshlet_draw_commands_by_material.js";
-import {
-    RASTERIZATION_SHADER_BIND_GROUP_SCENE,
-    RASTERIZATION_SHADER_BIND_GROUP_VIEW
-} from "../alpha_tested_pass_resources.js";
-import { shader_oit_blend } from "./shader_oit_blend.js";
-import { shader_oit_generate_moments } from "./shader_oit_generate_moments.js";
-import { shader_oit_resolve_moments } from "./shader_oit_resolve_moments.js";
-import { shader_oit_resolve_moments_ibl } from "./shader_oit_resolve_moments_ibl.js";
-import { SHADING_SCENE_RESOURCE_GROUP } from "./SHADING_SCENE_RESOURCE_GROUP.js";
-const DRAW_COMMAND_BYTE_SIZE = STRUCT_UNINDEXED_DRAW_COMMAND.aligned_size;
-const BIND_GROUP_LAYOUT_SCENE = SHADING_SCENE_RESOURCE_GROUP.generateBindGroupLayoutDescriptor(GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX);
-const BIND_GROUP_LAYOUT_MATERIAL = SHADING_MATERIAL_RESOURCE_GROUP.generateBindGroupLayoutDescriptor(GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX);
-const BIND_GROUP_LAYOUT_LIGHT = SHADING_LIGHT_RESOURCE_GROUP.generateBindGroupLayoutDescriptor(GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX);
-/**
- *
- * @param {GPUMaterialManager} material_manager
- * @param {number} material_count
- * @param {ShadeMaterial[]} materials
- * @param {RenderPassDescriptor} render_pass_descriptor
- * @param {BindGroupManager} bind_manager
- * @param {ShadeGPURenderPassEncoder} pass_encoder
- * @param {GPUBuffer} command_buffer_draw
- */
-function material_draw(
-    material_manager,
-    material_count,
-    materials,
-    render_pass_descriptor,
-    bind_manager,
-    pass_encoder,
-    command_buffer_draw
-) {
-    assert.defined(material_manager, 'material_manager');
-    assert.isNonNegativeInteger(material_count, 'material_count');
-    assert.isArray(materials, 'materials');
-    for (let i = 0; i < material_count; i++) {
-        const material = materials[i];
-        const gpu_material = material_manager.obtain(material);
-        if (!gpu_material.is_built) {
-            // skip, not ready for rendering
-            continue;
-        }
-        const material_resource_group = render_pass_descriptor.resources.groups[0];
-        const binding_entries = material_resource_group.generateBindings(gpu_material.binding_data);
-        const material_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            BIND_GROUP_LAYOUT_MATERIAL,
-            binding_entries
-        ));
-        // set material-specific bind group at 0
-        pass_encoder.setBindGroup(0, material_bindings)
-        pass_encoder.drawIndirect(
-            command_buffer_draw,
-            i * DRAW_COMMAND_BYTE_SIZE,
-        );
-    }
-}
-/**
- *
- * @param {FrameGraph} graph
- * @param {GPUViewContext} view_ctx
- * @param {number} material_count
- * @param {ShadeMaterial[]} materials
- * @param {boolean} [clear_targets]
- * @param {number} texture_moments
- * @param {number} texture_optical_depth
- * @param {number} draw_commands
- * @param {number} meshlets
- * @param {number} depth_texture
- * @param {number} light_cluster_parameters
- * @param {number} light_cluster_lookup
- * @param {number} light_cluster_data
- * @param {number} shadowmap_atlas
- * @param {number} output
- * @param {PrimitiveState} primitive
- * @param {ShadeIndirectLightingMode} indirect_lighting_mode
- * @return {number}
- */
-function graph_oit_resolve_moments({
-                                       graph,
-                                       view_ctx,
-                                       material_count,
-                                       materials,
-                                       clear_targets = true,
-                                       texture_moments,
-                                       texture_optical_depth,
-                                       draw_commands,
-                                       meshlets,
-                                       depth_texture ,
-                                       primitive,
-                                       light_cluster_parameters ,
-                                       light_cluster_lookup ,
-                                       light_cluster_data ,
-                                       shadowmap_atlas ,
-                                       volumetrics_lut,
-                                       volumetrics_metadata,
-                                       output = -1,
-                                       indirect_lighting_mode = ShadeIndirectLightingMode.IBL,
-                                   }) {
-    assert.isNonNegativeInteger(material_count, 'material_count');
-    assert.isNonNegativeInteger(draw_commands, 'draw_commands');
-    assert.isNonNegativeInteger(meshlets, 'meshlets');
-    const scene_ctx = view_ctx.scene;
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function execute(data, resources, context) {
-        assert.ok(context.graphics.device.features.has("indirect-first-instance"), '"indirect-first-instance" feature needs to be enabled for non-zero firstInstance values to be used.')
-        const command_buffer_draw = resources.get(data.draw_commands);
-        const meshlet_buffer = resources.get(data.meshlets);
-        const t_moments = resources.get(data.moments);
-        const t_optical_depth = resources.get(data.optical_depth);
-        const t_resolved = resources.get(data.resolved);
-        const t_depth = resources.get(data.depth);
-        const light_cluster_parameters = resources.get(data.light_cluster_parameters);
-        const light_cluster_lookup = resources.get(data.light_cluster_lookup);
-        const light_cluster_data = resources.get(data.light_cluster_data);
-        const shadowmap_atlas = resources.get(data.shadowmap_atlas);
-        const t_volumetrics_lut = resources.get(data.volumetrics_lut);
-        const volumetrics_metadata = resources.get(data.volumetrics_metadata);
-        const encoder = context.encoder;
-        const graphics = context.graphics;
-        const bind_manager = graphics.bind_groups;
-        const scene_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            BIND_GROUP_LAYOUT_SCENE,
-            [
-                { buffer: meshlet_buffer },
-                { buffer: scene_ctx.geometries.meshlets.buffer_metadata },
-                { buffer: scene_ctx.geometries.meshlets.buffer_data },
-                { buffer: scene_ctx.scene_database_buffer },
-                { buffer: scene_ctx.geometries.buffer_metadata },
-            ]
-        ));
-        const sampler_shadowmap = context.graphics.samplers.obtain(SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR);
-        const light_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            BIND_GROUP_LAYOUT_LIGHT,
-            [
-                { buffer: view_ctx.scene.lights.buffer_data },
-                view_ctx.scene.lights.environment.obtainView(),
-                //
-                { buffer: light_cluster_parameters },
-                { buffer: light_cluster_lookup },
-                { buffer: light_cluster_data },
-                //
-                shadowmap_atlas.obtainView(),
-                sampler_shadowmap,
-            ]
-        ));
-        // Select render pass descriptor based on indirect lighting mode
-        const use_brick4 = data.indirect_lighting_mode === ShadeIndirectLightingMode.Brick4;
-        const render_pass_descriptor = use_brick4
-            ? shader_oit_resolve_moments
-            : shader_oit_resolve_moments_ibl;
-        const pass_encoder = encoder.beginRenderPass(render_pass_descriptor.toGPU({
-            colorTargets: [t_resolved],
-            depthTarget: t_depth,
-            colorLoadOp: clear_targets ? "clear" : "load",
-            depthLoadOp: "load",
-            storeOp: "store",
-        }));
-        const pipeline_descriptor = rp_rewrite_for_primitive_state(render_pass_descriptor.pipeline, primitive);
-        const pipeline = graphics.render_pipelines.obtain(pipeline_descriptor)
-        pass_encoder.setPipeline(pipeline);
-        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_SCENE, scene_bindings);
-        pass_encoder.setBindGroup(3, light_bindings);
-        const sampler_linear = graphics.samplers.obtain(SamplerDescriptor.from({
-            magFilter: "linear",
-        }));
-        const t_split_sum_lut = graphics.textures.obtain(STATIC_GRAPHICS_ENGINE_ASSETS.split_sum);
-        const stbn_vec3 = graphics.textures.obtain(STATIC_GRAPHICS_ENGINE_ASSETS.stbn_vec3);
-        // Brick4 variant requires brick4 buffer in the view bind group;
-        // IBL variant does not. Volumetrics bindings are appended last (after sLinear), matching
-        // the order declared in shader_oit_resolve_moments[_ibl].
-        const view_bind_entries = use_brick4
-            ? [
-                { buffer: view_ctx.camera.buffer.buffer },
-                { buffer: view_ctx.uniform_buffer.buffer },
-                t_moments.obtainView(),
-                t_optical_depth.obtainView(),
-                { buffer: view_ctx.scene.volumetric_light_map.buffer },
-                t_split_sum_lut.obtainView(),
-                sampler_linear,
-                // volumetrics
-                { buffer: volumetrics_metadata },
-                t_volumetrics_lut.obtainView(),
-                stbn_vec3.obtainView(),
-            ]
-            : [
-                { buffer: view_ctx.camera.buffer.buffer },
-                { buffer: view_ctx.uniform_buffer.buffer },
-                t_moments.obtainView(),
-                t_optical_depth.obtainView(),
-                t_split_sum_lut.obtainView(),
-                sampler_linear,
-                // volumetrics
-                { buffer: volumetrics_metadata },
-                t_volumetrics_lut.obtainView(),
-                stbn_vec3.obtainView(),
-            ];
-        const view_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            render_pass_descriptor.pipeline.layout.bindGroupLayouts[RASTERIZATION_SHADER_BIND_GROUP_VIEW],
-            view_bind_entries
-        ));
-        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_VIEW, view_bindings);
-        material_draw(
-            scene_ctx.materials,
-            material_count,
-            materials,
-            render_pass_descriptor,
-            bind_manager,
-            pass_encoder,
-            command_buffer_draw
-        );
-        pass_encoder.end();
-    }
-    const pass_data = {
-        indirect_lighting_mode,
-    };
-    const pass = graph.add("MBOIT/resolve moments", pass_data, execute);
-    pass_data.draw_commands = pass.read(draw_commands);
-    pass_data.meshlets = pass.read(meshlets)
-        pass_data.depth = pass.read(depth_texture);
-    pass_data.optical_depth = pass.read(texture_optical_depth);
-    pass_data.moments = pass.read(texture_moments);
-    if (output !== -1) {
-        pass.read(output);
-        pass_data.resolved = pass.write(output);
-    } else {
-        pass_data.resolved = pass.create("OIT resolved", TextureResourceDescriptor.from({
-            resolution: view_ctx.resolution,
-            format: 'rgba16float',
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-        }));
-    }
-    pass_data.light_cluster_parameters = pass.read(light_cluster_parameters);
-    pass_data.light_cluster_lookup = pass.read(light_cluster_lookup);
-    pass_data.light_cluster_data = pass.read(light_cluster_data);
-    pass_data.shadowmap_atlas = pass.read(shadowmap_atlas);
-    pass_data.volumetrics_lut = pass.read(volumetrics_lut);
-    pass_data.volumetrics_metadata = pass.read(volumetrics_metadata);
-    return pass_data.resolved;
-}
-/**
- *
- * @param {FrameGraph} graph
- * @param {GPUViewContext} view_ctx
- * @param {number} material_count
- * @param {ShadeMaterial[]} materials
- * @param {number} draw_commands resource ID
- * @param {number} meshlets resource ID
- * @param {number} depth_texture resource ID
- * @param {number} [output_optical_depth]
- * @param {number} [output_moments]
- * @param {PrimitiveState} primitive
- * @param {boolean} [clear_targets]
- * @return {{optical_depth:number, moments:number}}
- */
-function graph_oit_generate_moments({
-                                        graph,
-                                        view_ctx,
-                                        material_count,
-                                        materials,
-                                        draw_commands,
-                                        meshlets,
-                                        depth_texture ,
-                                        output_optical_depth = -1,
-                                        output_moments = -1,
-                                        primitive,
-                                        clear_targets = true,
-                                    }) {
-    assert.isNonNegativeInteger(material_count, 'material_count');
-    assert.isNonNegativeInteger(draw_commands, 'draw_commands');
-    assert.isNonNegativeInteger(meshlets, 'meshlets');
-    assert.equal(view_ctx.isGPUViewContext, true, 'view_ctx.isGPUViewContext !== true');
-    const scene_ctx = view_ctx.scene;
-    /**
-     *
-     * @param data
-     * @param {FramePassResources} resources
-     * @param {GraphicsExecutionContext} context
-     */
-    function execute(data, resources, context) {
-        assert.ok(context.graphics.device.features.has("indirect-first-instance"), '"indirect-first-instance" feature needs to be enabled for non-zero firstInstance values to be used.')
-        const command_buffer_draw = resources.get(data.draw_commands);
-        const meshlet_buffer = resources.get(data.meshlets);
-        const t_moments = resources.get(data.moments);
-        const t_optical_depth = resources.get(data.optical_depth);
-        const t_depth = resources.get(data.depth);
-        const encoder = context.encoder;
-        const graphics = context.graphics;
-        const bind_manager = graphics.bind_groups;
-        const scene_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            BIND_GROUP_LAYOUT_SCENE,
-            [
-                { buffer: meshlet_buffer },
-                { buffer: scene_ctx.geometries.meshlets.buffer_metadata },
-                { buffer: scene_ctx.geometries.meshlets.buffer_data },
-                { buffer: scene_ctx.scene_database_buffer },
-                { buffer: scene_ctx.geometries.buffer_metadata },
-            ]
-        ));
-        const render_pass_descriptor = shader_oit_generate_moments;
-        const pass_encoder = encoder.beginRenderPass(render_pass_descriptor.toGPU({
-            colorTargets: [
-                t_optical_depth,
-                t_moments,
-            ],
-            depthTarget: t_depth,
-            colorLoadOp: clear_targets ? "clear" : "load",
-            // we don't modify depth, only use it for depth test
-            depthLoadOp: "load",
-            storeOp: "store",
-        }));
-        const pipeline_descriptor = rp_rewrite_for_primitive_state(render_pass_descriptor.pipeline, primitive);
-        const pipeline = graphics.render_pipelines.obtain(pipeline_descriptor)
-        pass_encoder.setPipeline(pipeline);
-        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_SCENE, scene_bindings);
-        const view_bindings = bind_manager.obtain(BindGroupDescriptor.from(
-            render_pass_descriptor.pipeline.layout.bindGroupLayouts[RASTERIZATION_SHADER_BIND_GROUP_VIEW],
-            [
-                { buffer: view_ctx.camera.buffer.buffer },
-                { buffer: view_ctx.uniform_buffer.buffer },
-            ]
-        ));
-        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_VIEW, view_bindings);
-        material_draw(
-            scene_ctx.materials,
-            material_count,
-            materials,
-            render_pass_descriptor,
-            bind_manager,
-            pass_encoder,
-            command_buffer_draw
-        );
-        pass_encoder.end();
-    }
-    const pass_data = {};
-    const pass = graph.add("MBOIT/generate moments", pass_data, execute);
-    pass_data.draw_commands = pass.read(draw_commands);
-    pass_data.meshlets = pass.read(meshlets)
-        pass_data.depth = pass.read(depth_texture);
-    if (output_optical_depth !== -1) {
-        pass.read(output_optical_depth);
-        pass_data.optical_depth = pass.write(output_optical_depth);
-    } else {
-        pass_data.optical_depth = pass.create("OIT depth", TextureResourceDescriptor.from({
-            resolution: view_ctx.resolution,
-            format: 'r32float',
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-        }));
-    }
-    if (output_moments !== -1) {
-        pass.read(output_moments);
-        pass_data.moments = pass.write(output_moments);
-    } else {
-        pass_data.moments = pass.create('OIT moments', TextureResourceDescriptor.from({
-            resolution: view_ctx.resolution,
-            format: 'rgba32float',
-            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
-        }));
-    }
-    return {
-        optical_depth: pass_data.optical_depth,
-        moments: pass_data.moments
-    }
-}
-/**
- * Order-independent transparency. Does not write depth.
- *
- * @param {FrameGraph} graph
- * @param {number} buckets
- * @param {GPUViewContext} view_ctx
- * @param {number[]} viewport
- * @param {number} color_texture resource ID
- * @param {number} [depth_texture] resource ID
- * @param {GPUCollectionLimits} limits
- * @param {number} light_cluster_parameters
- * @param {number} light_cluster_lookup
- * @param {number} light_cluster_data
- * @param {number} shadowmap_atlas
- * @param {ShadeIndirectLightingMode} indirect_lighting_mode
- * @returns {number} resource ID of modified color texture
- */
-export function graph_rasterize_meshes_transparent_oit({
-                                                           graph,
-                                                           buckets,
-                                                           view_ctx,
-                                                           viewport,
-                                                           depth_texture ,
-                                                           color_texture,
-                                                           limits,
-                                                           light_cluster_parameters ,
-                                                           light_cluster_lookup ,
-                                                           light_cluster_data ,
-                                                           shadowmap_atlas ,
-                                                           volumetrics_lut,
-                                                           volumetrics_metadata,
-                                                           indirect_lighting_mode = ShadeIndirectLightingMode.IBL,
-                                                       }) {
-    assert.isNonNegativeInteger(buckets, 'buckets');
-    assert.isNonNegativeInteger(light_cluster_parameters, 'light_cluster_parameters');
-    assert.isNonNegativeInteger(light_cluster_lookup, 'light_cluster_lookup');
-    assert.isNonNegativeInteger(light_cluster_data, 'light_cluster_data');
-    assert.isNonNegativeInteger(shadowmap_atlas, 'shadowmap_atlas');
-    assert.equal(view_ctx.isGPUViewContext, true, 'view_ctx.isGPUViewContext !== true');
-    const scene_ctx = view_ctx.scene;
-    /**
-     *
-     * @type {ShadeMaterial[]}
-     */
-    const materials_front = [];
-    /**
-     *
-     * @type {ShadeMaterial[]}
-     */
-    const materials_double = [];
-    const scene_materials = scene_ctx.scene.instances.materials;
-    // we need to draw with different pipeline states, so the code is a little convoluted
-    // Essentially, we draw Double-side and Front-sided materials
-    const material_count_front = filter_materials_by_bucket(
-        materials_front, 0,
-        TransparencyMode.Transparent,
-        ShadeDrawMode.Triangles,
-        ShadeDrawSide.Front,
-        scene_materials,
-        scene_materials.length
-    );
-    const material_count_double = filter_materials_by_bucket(
-        materials_double, 0,
-        TransparencyMode.Transparent,
-        ShadeDrawMode.Triangles,
-        ShadeDrawSide.Double,
-        scene_materials,
-        scene_materials.length
-    );
-    if ((material_count_front + material_count_double) === 0) {
-        // nothing to do
-        return color_texture;
-    }
-    // TODO prepare depth bounds (min-max) for better moments, using meshlet metadata that has survived the cull
-    //      tight bounds will help improve reconstruction accuracy according to the original paper
-    const bucket_index_front = rasterization_material_bucket(
-        TransparencyMode.Transparent, ShadeDrawMode.Triangles, ShadeDrawSide.Front
-    );
-    const bucket_index_double = rasterization_material_bucket(
-        TransparencyMode.Transparent, ShadeDrawMode.Triangles, ShadeDrawSide.Double
-    );
-    const primitive_front = construct_primitive_state(
-        ShadeDrawMode.Triangles, ShadeDrawSide.Front,
-    );
-    const primitive_double = construct_primitive_state(
-        ShadeDrawMode.Triangles, ShadeDrawSide.Double,
-    );
-    const gr_hzb = graph_import_texture(graph, view_ctx.hierarchical_z_buffer.texture);
-    const gr_camera = graph_import_buffer(graph, view_ctx.camera.buffer.buffer);
-    // Prepare draw artifacts
-    // ======
-    const {
-        meshlets: meshlets_front,
-        draw_commands: draw_commands_front
-    } = graph_prepare_meshlet_draw_commands_by_material({
-        graph,
-        materials: materials_front,
-        bucket_id: bucket_index_front,
-        limits,
-        buckets,
-        scene: scene_ctx,
-        camera: gr_camera,
-        hzb: gr_hzb,
-        resolution: [viewport[2], viewport[3]],
-        label: `${view_ctx.label}/OIT-front`,
-    });
-    const {
-        meshlets: meshlets_double,
-        draw_commands: draw_commands_double
-    } = graph_prepare_meshlet_draw_commands_by_material({
-        graph,
-        materials: materials_double,
-        bucket_id: bucket_index_double,
-        limits,
-        buckets,
-        scene: scene_ctx,
-        camera: gr_camera,
-        hzb: gr_hzb,
-        resolution: [viewport[2], viewport[3]],
-        label: `${view_ctx.label}/OIT-double`,
-    });
-    // Generate moments
-    // ==========
-    const { moments: moments_front, optical_depth: optical_depth_front } = graph_oit_generate_moments({
-        graph,
-        view_ctx,
-        material_count: material_count_front,
-        meshlets: meshlets_front,
-        clear_targets: true,
-        materials: materials_front,
-        draw_commands: draw_commands_front,
-        depth_texture,
-        primitive: primitive_front,
-    });
-    const { moments, optical_depth } = graph_oit_generate_moments({
-        graph,
-        view_ctx,
-        material_count: material_count_double,
-        meshlets: meshlets_double,
-        clear_targets: false,
-        materials: materials_double,
-        draw_commands: draw_commands_double,
-        output_optical_depth: optical_depth_front,
-        output_moments: moments_front,
-        depth_texture,
-        primitive: primitive_double,
-    });
-    // Resolve moments
-    // ===========
-    let resolved = graph_oit_resolve_moments({
-        graph,
-        view_ctx,
-        primitive: primitive_front,
-        material_count: material_count_front,
-        materials: materials_front,
-        clear_targets: true,
-        draw_commands: draw_commands_front,
-        meshlets: meshlets_front,
-        depth_texture,
-        texture_moments: moments,
-        texture_optical_depth: optical_depth,
-        //
-        light_cluster_parameters,
-        light_cluster_lookup,
-        light_cluster_data,
-        shadowmap_atlas,
-        volumetrics_lut,
-        volumetrics_metadata,
-        indirect_lighting_mode,
-    });
-    resolved = graph_oit_resolve_moments({
-        graph,
-        view_ctx,
-        primitive: primitive_double,
-        output: resolved,
-        material_count: material_count_double,
-        materials: materials_double,
-        clear_targets: false,
-        draw_commands: draw_commands_double,
-        meshlets: meshlets_double,
-        depth_texture,
-        texture_moments: moments,
-        texture_optical_depth: optical_depth,
-        //
-        light_cluster_parameters,
-        light_cluster_lookup,
-        light_cluster_data,
-        shadowmap_atlas,
-        volumetrics_lut,
-        volumetrics_metadata,
-        indirect_lighting_mode,
-    });
-    const [blended] = graph_image_pass({
-        graph,
-        shader: shader_oit_blend,
-        output: [color_texture],
-        load_op: "load",
-        store_op: "store",
-        inputs: {
-            transparent: resolved,
-            moment_zero: optical_depth,
-        }
-    });
-    return blended;
+import { assert } from "../../../../../core/assert.js";
+import { SamplerDescriptor } from "../../../../descriptor/texture/SamplerDescriptor.js";
+import { TextureResourceDescriptor } from "../../../../device/graph/TextureResourceDescriptor.js";
+import { rp_rewrite_for_primitive_state } from "../../../../device/pipeline/rp_rewrite_for_primitive_state.js";
+import { BindGroupDescriptor } from "../../../binding/BindGroupDescriptor.js";
+import { SHADING_LIGHT_RESOURCE_GROUP } from "../../../deferred/SHADING_LIGHT_RESOURCE_GROUP.js";
+import { ShadeDrawMode } from "../../../material/ShadeDrawMode.js";
+import { ShadeDrawSide } from "../../../material/ShadeDrawSide.js";
+import { TransparencyMode } from "../../../material/TransparencyMode.js";
+import { ShadeIndirectLightingMode } from "../../../ShadeIndirectLightingMode.js";
+import { graph_image_pass } from "../../../shader/graph/graph_image_pass.js";
+import { graph_import_buffer } from "../../../shader/graph/graph_import_buffer.js";
+import { graph_import_texture } from "../../../shader/graph/graph_import_texture.js";
+import {
+    SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR
+} from "../../../shadow/map/SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR.js";
+import { STATIC_GRAPHICS_ENGINE_ASSETS } from "../../../STATIC_GRAPHICS_ENGINE_ASSETS.js";
+import { rasterization_material_bucket } from "../../expand/bucket/chunk_rasterization_material_bucket.js";
+import { construct_primitive_state } from "../../bucket/construct_primitive_state.js";
+import { filter_materials_by_bucket } from "../../bucket/filter_materials_by_bucket.js";
+import {
+    graph_prepare_meshlet_draw_commands_by_material
+} from "../../bucket/prepare_meshlet_draw_commands_by_material.js";
+import {
+    RASTERIZATION_SHADER_BIND_GROUP_SCENE,
+    RASTERIZATION_SHADER_BIND_GROUP_VIEW
+} from "../alpha_tested_pass_resources.js";
+import { material_draw_indirect } from "../material_draw_indirect.js";
+import { shader_oit_blend } from "./shader_oit_blend.js";
+import { shader_oit_generate_moments } from "./shader_oit_generate_moments.js";
+import { shader_oit_resolve_moments } from "./shader_oit_resolve_moments.js";
+import { shader_oit_resolve_moments_ibl } from "./shader_oit_resolve_moments_ibl.js";
+import { SHADING_SCENE_RESOURCE_GROUP } from "../../forward/SHADING_SCENE_RESOURCE_GROUP.js";
+const BIND_GROUP_LAYOUT_SCENE = SHADING_SCENE_RESOURCE_GROUP.generateBindGroupLayoutDescriptor(GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX);
+const BIND_GROUP_LAYOUT_LIGHT = SHADING_LIGHT_RESOURCE_GROUP.generateBindGroupLayoutDescriptor(GPUShaderStage.FRAGMENT | GPUShaderStage.VERTEX);
+/**
+ *
+ * @param {FrameGraph} graph
+ * @param {GPUViewContext} view_ctx
+ * @param {number} material_count
+ * @param {ShadeMaterial[]} materials
+ * @param {boolean} [clear_targets]
+ * @param {number} texture_moments
+ * @param {number} texture_optical_depth
+ * @param {number} draw_commands
+ * @param {number} meshlets
+ * @param {number} depth_texture
+ * @param {number} light_cluster_parameters
+ * @param {number} light_cluster_lookup
+ * @param {number} light_cluster_data
+ * @param {number} shadowmap_atlas
+ * @param {number} output
+ * @param {PrimitiveState} primitive
+ * @param {ShadeIndirectLightingMode} indirect_lighting_mode
+ * @return {number}
+ */
+function graph_oit_resolve_moments({
+                                       graph,
+                                       view_ctx,
+                                       material_count,
+                                       materials,
+                                       clear_targets = true,
+                                       texture_moments,
+                                       texture_optical_depth,
+                                       draw_commands,
+                                       meshlets,
+                                       depth_texture ,
+                                       primitive,
+                                       light_cluster_parameters ,
+                                       light_cluster_lookup ,
+                                       light_cluster_data ,
+                                       shadowmap_atlas ,
+                                       volumetrics_lut,
+                                       volumetrics_metadata,
+                                       output = -1,
+                                       indirect_lighting_mode = ShadeIndirectLightingMode.IBL,
+                                   }) {
+    assert.isNonNegativeInteger(material_count, 'material_count');
+    assert.isNonNegativeInteger(draw_commands, 'draw_commands');
+    assert.isNonNegativeInteger(meshlets, 'meshlets');
+    const scene_ctx = view_ctx.scene;
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function execute(data, resources, context) {
+        assert.ok(context.graphics.device.features.has("indirect-first-instance"), '"indirect-first-instance" feature needs to be enabled for non-zero firstInstance values to be used.')
+        const command_buffer_draw = resources.get(data.draw_commands);
+        const meshlet_buffer = resources.get(data.meshlets);
+        const t_moments = resources.get(data.moments);
+        const t_optical_depth = resources.get(data.optical_depth);
+        const t_resolved = resources.get(data.resolved);
+        const t_depth = resources.get(data.depth);
+        const light_cluster_parameters = resources.get(data.light_cluster_parameters);
+        const light_cluster_lookup = resources.get(data.light_cluster_lookup);
+        const light_cluster_data = resources.get(data.light_cluster_data);
+        const shadowmap_atlas = resources.get(data.shadowmap_atlas);
+        const t_volumetrics_lut = resources.get(data.volumetrics_lut);
+        const volumetrics_metadata = resources.get(data.volumetrics_metadata);
+        const encoder = context.encoder;
+        const graphics = context.graphics;
+        const bind_manager = graphics.bind_groups;
+        const scene_bindings = bind_manager.obtain(BindGroupDescriptor.from(
+            BIND_GROUP_LAYOUT_SCENE,
+            [
+                { buffer: meshlet_buffer },
+                { buffer: scene_ctx.geometries.meshlets.buffer_metadata },
+                { buffer: scene_ctx.geometries.meshlets.buffer_data },
+                { buffer: scene_ctx.scene_database_buffer },
+                { buffer: scene_ctx.geometries.buffer_metadata },
+            ]
+        ));
+        const sampler_shadowmap = context.graphics.samplers.obtain(SHADOWMAP_COMPARE_SAMPLER_DESCRIPTOR);
+        const light_bindings = bind_manager.obtain(BindGroupDescriptor.from(
+            BIND_GROUP_LAYOUT_LIGHT,
+            [
+                { buffer: view_ctx.scene.lights.buffer_data },
+                view_ctx.scene.lights.environment.obtainView(),
+                //
+                { buffer: light_cluster_parameters },
+                { buffer: light_cluster_lookup },
+                { buffer: light_cluster_data },
+                //
+                shadowmap_atlas.obtainView(),
+                sampler_shadowmap,
+            ]
+        ));
+        // Select render pass descriptor based on indirect lighting mode
+        const use_brick4 = data.indirect_lighting_mode === ShadeIndirectLightingMode.Brick4;
+        const render_pass_descriptor = use_brick4
+            ? shader_oit_resolve_moments
+            : shader_oit_resolve_moments_ibl;
+        const pass_encoder = encoder.beginRenderPass(render_pass_descriptor.toGPU({
+            colorTargets: [t_resolved],
+            depthTarget: t_depth,
+            colorLoadOp: clear_targets ? "clear" : "load",
+            depthLoadOp: "load",
+            storeOp: "store",
+        }));
+        const pipeline_descriptor = rp_rewrite_for_primitive_state(render_pass_descriptor.pipeline, primitive);
+        const pipeline = graphics.render_pipelines.obtain(pipeline_descriptor)
+        pass_encoder.setPipeline(pipeline);
+        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_SCENE, scene_bindings);
+        pass_encoder.setBindGroup(3, light_bindings);
+        const sampler_linear = graphics.samplers.obtain(SamplerDescriptor.from({
+            magFilter: "linear",
+        }));
+        const t_split_sum_lut = graphics.textures.obtain(STATIC_GRAPHICS_ENGINE_ASSETS.split_sum);
+        const stbn_vec3 = graphics.textures.obtain(STATIC_GRAPHICS_ENGINE_ASSETS.stbn_vec3);
+        // Brick4 variant requires brick4 buffer in the view bind group;
+        // IBL variant does not. Volumetrics bindings are appended last (after sLinear), matching
+        // the order declared in shader_oit_resolve_moments[_ibl].
+        const view_bind_entries = use_brick4
+            ? [
+                { buffer: view_ctx.camera.buffer.buffer },
+                { buffer: view_ctx.uniform_buffer.buffer },
+                t_moments.obtainView(),
+                t_optical_depth.obtainView(),
+                { buffer: view_ctx.scene.volumetric_light_map.buffer },
+                t_split_sum_lut.obtainView(),
+                sampler_linear,
+                // volumetrics
+                { buffer: volumetrics_metadata },
+                t_volumetrics_lut.obtainView(),
+                stbn_vec3.obtainView(),
+            ]
+            : [
+                { buffer: view_ctx.camera.buffer.buffer },
+                { buffer: view_ctx.uniform_buffer.buffer },
+                t_moments.obtainView(),
+                t_optical_depth.obtainView(),
+                t_split_sum_lut.obtainView(),
+                sampler_linear,
+                // volumetrics
+                { buffer: volumetrics_metadata },
+                t_volumetrics_lut.obtainView(),
+                stbn_vec3.obtainView(),
+            ];
+        const view_bindings = bind_manager.obtain(BindGroupDescriptor.from(
+            render_pass_descriptor.pipeline.layout.bindGroupLayouts[RASTERIZATION_SHADER_BIND_GROUP_VIEW],
+            view_bind_entries
+        ));
+        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_VIEW, view_bindings);
+        material_draw_indirect(
+            scene_ctx.materials,
+            material_count,
+            materials,
+            render_pass_descriptor,
+            bind_manager,
+            pass_encoder,
+            command_buffer_draw
+        );
+        pass_encoder.end();
+    }
+    const pass_data = {
+        indirect_lighting_mode,
+    };
+    const pass = graph.add("MBOIT/resolve moments", pass_data, execute);
+    pass_data.draw_commands = pass.read(draw_commands);
+    pass_data.meshlets = pass.read(meshlets)
+        pass_data.depth = pass.read(depth_texture);
+    pass_data.optical_depth = pass.read(texture_optical_depth);
+    pass_data.moments = pass.read(texture_moments);
+    if (output !== -1) {
+        pass.read(output);
+        pass_data.resolved = pass.write(output);
+    } else {
+        pass_data.resolved = pass.create("OIT resolved", TextureResourceDescriptor.from({
+            resolution: view_ctx.resolution,
+            format: 'rgba16float',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+        }));
+    }
+    pass_data.light_cluster_parameters = pass.read(light_cluster_parameters);
+    pass_data.light_cluster_lookup = pass.read(light_cluster_lookup);
+    pass_data.light_cluster_data = pass.read(light_cluster_data);
+    pass_data.shadowmap_atlas = pass.read(shadowmap_atlas);
+    pass_data.volumetrics_lut = pass.read(volumetrics_lut);
+    pass_data.volumetrics_metadata = pass.read(volumetrics_metadata);
+    return pass_data.resolved;
+}
+/**
+ *
+ * @param {FrameGraph} graph
+ * @param {GPUViewContext} view_ctx
+ * @param {number} material_count
+ * @param {ShadeMaterial[]} materials
+ * @param {number} draw_commands resource ID
+ * @param {number} meshlets resource ID
+ * @param {number} depth_texture resource ID
+ * @param {number} [output_optical_depth]
+ * @param {number} [output_moments]
+ * @param {PrimitiveState} primitive
+ * @param {boolean} [clear_targets]
+ * @return {{optical_depth:number, moments:number}}
+ */
+function graph_oit_generate_moments({
+                                        graph,
+                                        view_ctx,
+                                        material_count,
+                                        materials,
+                                        draw_commands,
+                                        meshlets,
+                                        depth_texture ,
+                                        output_optical_depth = -1,
+                                        output_moments = -1,
+                                        primitive,
+                                        clear_targets = true,
+                                    }) {
+    assert.isNonNegativeInteger(material_count, 'material_count');
+    assert.isNonNegativeInteger(draw_commands, 'draw_commands');
+    assert.isNonNegativeInteger(meshlets, 'meshlets');
+    assert.equal(view_ctx.isGPUViewContext, true, 'view_ctx.isGPUViewContext !== true');
+    const scene_ctx = view_ctx.scene;
+    /**
+     *
+     * @param data
+     * @param {FramePassResources} resources
+     * @param {GraphicsExecutionContext} context
+     */
+    function execute(data, resources, context) {
+        assert.ok(context.graphics.device.features.has("indirect-first-instance"), '"indirect-first-instance" feature needs to be enabled for non-zero firstInstance values to be used.')
+        const command_buffer_draw = resources.get(data.draw_commands);
+        const meshlet_buffer = resources.get(data.meshlets);
+        const t_moments = resources.get(data.moments);
+        const t_optical_depth = resources.get(data.optical_depth);
+        const t_depth = resources.get(data.depth);
+        const encoder = context.encoder;
+        const graphics = context.graphics;
+        const bind_manager = graphics.bind_groups;
+        const scene_bindings = bind_manager.obtain(BindGroupDescriptor.from(
+            BIND_GROUP_LAYOUT_SCENE,
+            [
+                { buffer: meshlet_buffer },
+                { buffer: scene_ctx.geometries.meshlets.buffer_metadata },
+                { buffer: scene_ctx.geometries.meshlets.buffer_data },
+                { buffer: scene_ctx.scene_database_buffer },
+                { buffer: scene_ctx.geometries.buffer_metadata },
+            ]
+        ));
+        const render_pass_descriptor = shader_oit_generate_moments;
+        const pass_encoder = encoder.beginRenderPass(render_pass_descriptor.toGPU({
+            colorTargets: [
+                t_optical_depth,
+                t_moments,
+            ],
+            depthTarget: t_depth,
+            colorLoadOp: clear_targets ? "clear" : "load",
+            // we don't modify depth, only use it for depth test
+            depthLoadOp: "load",
+            storeOp: "store",
+        }));
+        const pipeline_descriptor = rp_rewrite_for_primitive_state(render_pass_descriptor.pipeline, primitive);
+        const pipeline = graphics.render_pipelines.obtain(pipeline_descriptor)
+        pass_encoder.setPipeline(pipeline);
+        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_SCENE, scene_bindings);
+        const view_bindings = bind_manager.obtain(BindGroupDescriptor.from(
+            render_pass_descriptor.pipeline.layout.bindGroupLayouts[RASTERIZATION_SHADER_BIND_GROUP_VIEW],
+            [
+                { buffer: view_ctx.camera.buffer.buffer },
+                { buffer: view_ctx.uniform_buffer.buffer },
+            ]
+        ));
+        pass_encoder.setBindGroup(RASTERIZATION_SHADER_BIND_GROUP_VIEW, view_bindings);
+        material_draw_indirect(
+            scene_ctx.materials,
+            material_count,
+            materials,
+            render_pass_descriptor,
+            bind_manager,
+            pass_encoder,
+            command_buffer_draw
+        );
+        pass_encoder.end();
+    }
+    const pass_data = {};
+    const pass = graph.add("MBOIT/generate moments", pass_data, execute);
+    pass_data.draw_commands = pass.read(draw_commands);
+    pass_data.meshlets = pass.read(meshlets)
+        pass_data.depth = pass.read(depth_texture);
+    if (output_optical_depth !== -1) {
+        pass.read(output_optical_depth);
+        pass_data.optical_depth = pass.write(output_optical_depth);
+    } else {
+        pass_data.optical_depth = pass.create("OIT depth", TextureResourceDescriptor.from({
+            resolution: view_ctx.resolution,
+            format: 'r32float',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+        }));
+    }
+    if (output_moments !== -1) {
+        pass.read(output_moments);
+        pass_data.moments = pass.write(output_moments);
+    } else {
+        pass_data.moments = pass.create('OIT moments', TextureResourceDescriptor.from({
+            resolution: view_ctx.resolution,
+            format: 'rgba32float',
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+        }));
+    }
+    return {
+        optical_depth: pass_data.optical_depth,
+        moments: pass_data.moments
+    }
+}
+/**
+ * Order-independent transparency. Does not write depth.
+ *
+ * @param {FrameGraph} graph
+ * @param {number} buckets
+ * @param {GPUViewContext} view_ctx
+ * @param {number[]} viewport
+ * @param {number} color_texture resource ID
+ * @param {number} [depth_texture] resource ID
+ * @param {GPUCollectionLimits} limits
+ * @param {number} light_cluster_parameters
+ * @param {number} light_cluster_lookup
+ * @param {number} light_cluster_data
+ * @param {number} shadowmap_atlas
+ * @param {ShadeIndirectLightingMode} indirect_lighting_mode
+ * @returns {number} resource ID of modified color texture
+ */
+export function graph_rasterize_meshes_transparent_oit({
+                                                           graph,
+                                                           buckets,
+                                                           view_ctx,
+                                                           viewport,
+                                                           depth_texture ,
+                                                           color_texture,
+                                                           limits,
+                                                           light_cluster_parameters ,
+                                                           light_cluster_lookup ,
+                                                           light_cluster_data ,
+                                                           shadowmap_atlas ,
+                                                           volumetrics_lut,
+                                                           volumetrics_metadata,
+                                                           indirect_lighting_mode = ShadeIndirectLightingMode.IBL,
+                                                       }) {
+    assert.isNonNegativeInteger(buckets, 'buckets');
+    assert.isNonNegativeInteger(light_cluster_parameters, 'light_cluster_parameters');
+    assert.isNonNegativeInteger(light_cluster_lookup, 'light_cluster_lookup');
+    assert.isNonNegativeInteger(light_cluster_data, 'light_cluster_data');
+    assert.isNonNegativeInteger(shadowmap_atlas, 'shadowmap_atlas');
+    assert.equal(view_ctx.isGPUViewContext, true, 'view_ctx.isGPUViewContext !== true');
+    const scene_ctx = view_ctx.scene;
+    /**
+     *
+     * @type {ShadeMaterial[]}
+     */
+    const materials_front = [];
+    /**
+     *
+     * @type {ShadeMaterial[]}
+     */
+    const materials_double = [];
+    const scene_materials = scene_ctx.scene.instances.materials;
+    // we need to draw with different pipeline states, so the code is a little convoluted
+    // Essentially, we draw Double-side and Front-sided materials
+    const material_count_front = filter_materials_by_bucket(
+        materials_front, 0,
+        TransparencyMode.Transparent,
+        ShadeDrawMode.Triangles,
+        ShadeDrawSide.Front,
+        scene_materials,
+        scene_materials.length
+    );
+    const material_count_double = filter_materials_by_bucket(
+        materials_double, 0,
+        TransparencyMode.Transparent,
+        ShadeDrawMode.Triangles,
+        ShadeDrawSide.Double,
+        scene_materials,
+        scene_materials.length
+    );
+    if ((material_count_front + material_count_double) === 0) {
+        // nothing to do
+        return color_texture;
+    }
+    // TODO prepare depth bounds (min-max) for better moments, using meshlet metadata that has survived the cull
+    //      tight bounds will help improve reconstruction accuracy according to the original paper
+    const bucket_index_front = rasterization_material_bucket(
+        TransparencyMode.Transparent, ShadeDrawMode.Triangles, ShadeDrawSide.Front
+    );
+    const bucket_index_double = rasterization_material_bucket(
+        TransparencyMode.Transparent, ShadeDrawMode.Triangles, ShadeDrawSide.Double
+    );
+    const primitive_front = construct_primitive_state(
+        ShadeDrawMode.Triangles, ShadeDrawSide.Front,
+    );
+    const primitive_double = construct_primitive_state(
+        ShadeDrawMode.Triangles, ShadeDrawSide.Double,
+    );
+    const gr_hzb = graph_import_texture(graph, view_ctx.hierarchical_z_buffer.texture);
+    const gr_camera = graph_import_buffer(graph, view_ctx.camera.buffer.buffer);
+    // Prepare draw artifacts
+    // ======
+    const {
+        meshlets: meshlets_front,
+        draw_commands: draw_commands_front
+    } = graph_prepare_meshlet_draw_commands_by_material({
+        graph,
+        materials: materials_front,
+        bucket_id: bucket_index_front,
+        limits,
+        buckets,
+        scene: scene_ctx,
+        camera: gr_camera,
+        hzb: gr_hzb,
+        resolution: [viewport[2], viewport[3]],
+        label: `${view_ctx.label}/OIT-front`,
+    });
+    const {
+        meshlets: meshlets_double,
+        draw_commands: draw_commands_double
+    } = graph_prepare_meshlet_draw_commands_by_material({
+        graph,
+        materials: materials_double,
+        bucket_id: bucket_index_double,
+        limits,
+        buckets,
+        scene: scene_ctx,
+        camera: gr_camera,
+        hzb: gr_hzb,
+        resolution: [viewport[2], viewport[3]],
+        label: `${view_ctx.label}/OIT-double`,
+    });
+    // Generate moments
+    // ==========
+    const { moments: moments_front, optical_depth: optical_depth_front } = graph_oit_generate_moments({
+        graph,
+        view_ctx,
+        material_count: material_count_front,
+        meshlets: meshlets_front,
+        clear_targets: true,
+        materials: materials_front,
+        draw_commands: draw_commands_front,
+        depth_texture,
+        primitive: primitive_front,
+    });
+    const { moments, optical_depth } = graph_oit_generate_moments({
+        graph,
+        view_ctx,
+        material_count: material_count_double,
+        meshlets: meshlets_double,
+        clear_targets: false,
+        materials: materials_double,
+        draw_commands: draw_commands_double,
+        output_optical_depth: optical_depth_front,
+        output_moments: moments_front,
+        depth_texture,
+        primitive: primitive_double,
+    });
+    // Resolve moments
+    // ===========
+    let resolved = graph_oit_resolve_moments({
+        graph,
+        view_ctx,
+        primitive: primitive_front,
+        material_count: material_count_front,
+        materials: materials_front,
+        clear_targets: true,
+        draw_commands: draw_commands_front,
+        meshlets: meshlets_front,
+        depth_texture,
+        texture_moments: moments,
+        texture_optical_depth: optical_depth,
+        //
+        light_cluster_parameters,
+        light_cluster_lookup,
+        light_cluster_data,
+        shadowmap_atlas,
+        volumetrics_lut,
+        volumetrics_metadata,
+        indirect_lighting_mode,
+    });
+    resolved = graph_oit_resolve_moments({
+        graph,
+        view_ctx,
+        primitive: primitive_double,
+        output: resolved,
+        material_count: material_count_double,
+        materials: materials_double,
+        clear_targets: false,
+        draw_commands: draw_commands_double,
+        meshlets: meshlets_double,
+        depth_texture,
+        texture_moments: moments,
+        texture_optical_depth: optical_depth,
+        //
+        light_cluster_parameters,
+        light_cluster_lookup,
+        light_cluster_data,
+        shadowmap_atlas,
+        volumetrics_lut,
+        volumetrics_metadata,
+        indirect_lighting_mode,
+    });
+    const [blended] = graph_image_pass({
+        graph,
+        shader: shader_oit_blend,
+        output: [color_texture],
+        load_op: "load",
+        store_op: "store",
+        inputs: {
+            transparent: resolved,
+            moment_zero: optical_depth,
+        }
+    });
+    return blended;
 }