@woosh/meep-engine 3.12.0 → 3.13.0

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

@@ -1,723 +1,723 @@
-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 {GPURenderPassEncoder} 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 { 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;
 }