@multiplekex/shallot 0.2.4 → 0.3.0

package/src/standard/raster/forward.ts

@@ -0,0 +1,832 @@
+import type { ComputeNode, ExecutionContext } from "../compute";
+import { getMesh, createMeshBuffers, type MeshBuffers } from "../render/mesh";
+import type { SurfaceData } from "../render/surface";
+import { COLOR_FORMAT } from "../render/scene";
+import {
+    SCENE_STRUCT_WGSL,
+    SKY_STRUCT_WGSL,
+    SHADOW_STRUCT_WGSL,
+    WGSL_STRUCTS,
+} from "../render/surface/structs";
+import {
+    compileVertexBody,
+    WGSL_LIGHTING_CALC,
+    SPECULAR_WGSL,
+    SHADOW_SAMPLE_WGSL,
+    SKY_WGSL,
+    SKY_DIR_WGSL,
+    NOISE_WGSL,
+    HAZE_WGSL,
+} from "../render/surface/shaders";
+import { MAX_BATCH_SLOTS } from "../render/mesh";
+import type { Batch } from "./batch";
+import { slotInstanceCount, slotIndexCount, slotFirstInstance, slotShapeId } from "./batch";
+
+const ACCUM_FORMAT: GPUTextureFormat = "rgba16float";
+const REVEAL_FORMAT: GPUTextureFormat = "r8unorm";
+
+function compileSurfaceVariant(id: number, data: SurfaceData): string {
+    const vertexBody = compileVertexBody(data.vertex);
+    const fragmentBody = data.fragment ?? "";
+
+    return `
+fn userVertexTransform_${id}(worldPos: vec3<f32>, normal: vec3<f32>, eid: u32) -> vec3<f32> {
+    ${vertexBody}
+}
+
+fn userFragment_${id}(surface: ptr<function, SurfaceData>, position: vec4<f32>) {
+    ${fragmentBody}
+}
+
+fn applyLighting_${id}(surface: SurfaceData, shadowFactor: f32) -> vec3<f32> {
+    ${WGSL_LIGHTING_CALC}
+    return litColor;
+}
+`;
+}
+
+function compileDispatchFunctions(surfaceCount: number): string {
+    const vertexCases = Array.from(
+        { length: surfaceCount },
+        (_, i) => `        case ${i}u: { return userVertexTransform_${i}(worldPos, normal, eid); }`
+    ).join("\n");
+
+    const fragmentCases = Array.from(
+        { length: surfaceCount },
+        (_, i) => `        case ${i}u: { userFragment_${i}(surface, position); }`
+    ).join("\n");
+
+    const lightingCases = Array.from(
+        { length: surfaceCount },
+        (_, i) => `        case ${i}u: { return applyLighting_${i}(surface, shadowFactor); }`
+    ).join("\n");
+
+    return `
+fn dispatchVertexTransform(surfaceId: u32, worldPos: vec3<f32>, normal: vec3<f32>, eid: u32) -> vec3<f32> {
+    switch surfaceId {
+${vertexCases}
+        default: { return userVertexTransform_0(worldPos, normal, eid); }
+    }
+}
+
+fn dispatchFragment(surfaceId: u32, surface: ptr<function, SurfaceData>, position: vec4<f32>) {
+    switch surfaceId {
+${fragmentCases}
+        default: { userFragment_0(surface, position); }
+    }
+}
+
+fn dispatchLighting(surfaceId: u32, surface: SurfaceData, shadowFactor: f32) -> vec3<f32> {
+    switch surfaceId {
+${lightingCases}
+        default: { return applyLighting_0(surface, shadowFactor); }
+    }
+}
+`;
+}
+
+export function compileRasterShader(surfaces: SurfaceData[], useShadows: boolean): string {
+    const surfaceVariants = surfaces.map((s, i) => compileSurfaceVariant(i, s)).join("\n");
+    const dispatchFunctions = compileDispatchFunctions(surfaces.length);
+
+    const shadowBindings = useShadows
+        ? /* wgsl */ `
+${SHADOW_STRUCT_WGSL}
+
+@group(1) @binding(0) var<uniform> shadow: Shadow;
+@group(1) @binding(1) var shadowMap: texture_depth_2d;
+@group(1) @binding(2) var shadowSampler: sampler_comparison;
+
+${SHADOW_SAMPLE_WGSL}
+`
+        : "";
+
+    const shadowCompute = useShadows
+        ? /* wgsl */ `
+    let viewZ = -dot(scene.cameraWorld[2].xyz, surface.worldPos - scene.cameraWorld[3].xyz);
+    let shadowFactor = sampleShadowPCF(surface.worldPos, surface.normal, viewZ, scene.shadowSoftness, scene.shadowSamples);
+`
+        : /* wgsl */ `
+    let shadowFactor = 1.0;
+`;
+
+    return /* wgsl */ `
+${WGSL_STRUCTS}
+${SKY_STRUCT_WGSL}
+
+@group(0) @binding(5) var<uniform> sky: Sky;
+
+${HAZE_WGSL}
+${NOISE_WGSL}
+${SPECULAR_WGSL}
+${shadowBindings}
+
+${surfaceVariants}
+${dispatchFunctions}
+
+@vertex
+fn vs(input: VertexInput) -> VertexOutput {
+    let eid = entityIds[input.instance];
+    let world = matrices[eid];
+    let scaledPos = input.position * sizes[eid].xyz;
+    let baseWorldPos = (world * vec4<f32>(scaledPos, 1.0)).xyz;
+    let worldNormal = normalize((world * vec4<f32>(input.normal, 0.0)).xyz);
+    let d = data[eid];
+    let surfaceId = d.flags & 0xFFu;
+    let finalWorldPos = dispatchVertexTransform(surfaceId, baseWorldPos, worldNormal, eid);
+
+    var output: VertexOutput;
+    output.position = scene.viewProj * vec4<f32>(finalWorldPos, 1.0);
+    output.color = d.baseColor;
+    output.worldNormal = worldNormal;
+    output.entityId = eid;
+    output.worldPos = finalWorldPos;
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> FragmentOutput {
+    let eid = input.entityId;
+    let d = data[eid];
+    let surfaceId = d.flags & 0xFFu;
+
+    var surface: SurfaceData;
+    surface.baseColor = input.color.rgb;
+    surface.roughness = d.pbr.x;
+    surface.metallic = d.pbr.y;
+    surface.emission = d.emission.rgb * d.emission.a;
+    surface.normal = normalize(input.worldNormal);
+    surface.worldPos = input.worldPos;
+
+    dispatchFragment(surfaceId, &surface, input.position);
+
+${shadowCompute}
+    let litColor = dispatchLighting(surfaceId, surface, shadowFactor);
+    let dist = length(input.worldPos - scene.cameraWorld[3].xyz);
+
+    var output: FragmentOutput;
+    output.color = vec4<f32>(applyHaze(litColor, dist), input.color.a);
+    output.entityId = input.entityId;
+    return output;
+}
+
+struct TransparentOutput {
+    @location(0) accum: vec4<f32>,
+    @location(1) reveal: f32,
+}
+
+@fragment
+fn fs_transparent(input: VertexOutput) -> TransparentOutput {
+    let eid = input.entityId;
+    let d = data[eid];
+    let surfaceId = d.flags & 0xFFu;
+
+    var surface: SurfaceData;
+    surface.baseColor = input.color.rgb;
+    surface.roughness = d.pbr.x;
+    surface.metallic = d.pbr.y;
+    surface.opacity = input.color.a;
+    surface.emission = d.emission.rgb * d.emission.a;
+    surface.normal = normalize(input.worldNormal);
+    surface.worldPos = input.worldPos;
+
+    dispatchFragment(surfaceId, &surface, input.position);
+
+    let alpha = clamp(surface.opacity, 0.0, 1.0);
+
+${shadowCompute}
+    let litColor = dispatchLighting(surfaceId, surface, shadowFactor);
+    let dist = length(input.worldPos - scene.cameraWorld[3].xyz);
+    let color = applyHaze(litColor, dist);
+
+    let z = input.position.z;
+    let w = clamp(alpha * max(1e-2, 3e3 * pow(1.0 - z, 3.0)), 1e-2, 3e3);
+
+    var output: TransparentOutput;
+    output.accum = vec4<f32>(color * alpha * w, alpha * w);
+    output.reveal = alpha;
+    return output;
+}
+`;
+}
+
+export function compileCompositeShader(): string {
+    return /* wgsl */ `
+@group(0) @binding(0) var accumTexture: texture_2d<f32>;
+@group(0) @binding(1) var revealTexture: texture_2d<f32>;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 3>(
+        vec2(-1.0, -1.0),
+        vec2(3.0, -1.0),
+        vec2(-1.0, 3.0)
+    );
+    var output: VertexOutput;
+    output.position = vec4(positions[vertexIndex], 0.0, 1.0);
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    let coords = vec2<i32>(input.position.xy);
+    let accum = textureLoad(accumTexture, coords, 0);
+    let reveal = textureLoad(revealTexture, coords, 0).r;
+
+    if (accum.a <= 1e-5) {
+        discard;
+    }
+
+    let avgColor = accum.rgb / max(accum.a, 1e-5);
+    return vec4<f32>(avgColor, 1.0 - reveal);
+}
+`;
+}
+
+function compileSkyShader(): string {
+    return /* wgsl */ `
+${SCENE_STRUCT_WGSL}
+${SKY_STRUCT_WGSL}
+
+@group(0) @binding(0) var<uniform> scene: Scene;
+@group(0) @binding(1) var<uniform> sky: Sky;
+
+${SKY_DIR_WGSL}
+${NOISE_WGSL}
+${SKY_WGSL}
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+}
+
+@vertex
+fn vs(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2<f32>, 3>(
+        vec2(-1.0, -1.0),
+        vec2(3.0, -1.0),
+        vec2(-1.0, 3.0)
+    );
+    var output: VertexOutput;
+    output.position = vec4(positions[vertexIndex], 0.0, 1.0);
+    output.uv = (positions[vertexIndex] + 1.0) * 0.5;
+    output.uv.y = 1.0 - output.uv.y;
+    return output;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    let dir = computeSkyDir(input.uv.x, input.uv.y);
+    let color = sampleSky(dir);
+    return vec4(color, 1.0);
+}
+`;
+}
+
+export const VERTEX_BUFFERS: GPUVertexBufferLayout[] = [
+    {
+        arrayStride: 24,
+        attributes: [
+            { shaderLocation: 0, offset: 0, format: "float32x3" },
+            { shaderLocation: 1, offset: 12, format: "float32x3" },
+        ],
+    },
+];
+
+interface ForwardGPU {
+    opaque: { pipeline: GPURenderPipeline; module: GPUShaderModule };
+    opaqueShadowed: { pipeline: GPURenderPipeline; module: GPUShaderModule };
+    transparent: GPURenderPipeline;
+    transparentShadowed: GPURenderPipeline;
+    composite: GPURenderPipeline;
+    sky: GPURenderPipeline;
+}
+
+interface ForwardBindGroups {
+    main: GPUBindGroup;
+    mainShadowed: GPUBindGroup;
+    transparent: GPUBindGroup;
+    transparentShadowed: GPUBindGroup;
+    shadow: GPUBindGroup;
+    transparentShadow: GPUBindGroup;
+    sky: GPUBindGroup;
+    composite: GPUBindGroup | null;
+}
+
+interface TransparentState {
+    accumTexture: GPUTexture;
+    accumView: GPUTextureView;
+    revealTexture: GPUTexture;
+    revealView: GPUTextureView;
+    width: number;
+    height: number;
+}
+
+async function createRasterPipeline(
+    device: GPUDevice,
+    surfaces: SurfaceData[],
+    colorFormat: GPUTextureFormat,
+    useShadows: boolean
+): Promise<{ pipeline: GPURenderPipeline; module: GPUShaderModule }> {
+    const code = compileRasterShader(surfaces, useShadows);
+    const module = device.createShaderModule({ code });
+
+    const pipeline = await device.createRenderPipelineAsync({
+        layout: "auto",
+        vertex: { module, entryPoint: "vs", buffers: VERTEX_BUFFERS },
+        fragment: {
+            module,
+            entryPoint: "fs",
+            targets: [{ format: colorFormat }, { format: "r32uint" }],
+        },
+        depthStencil: {
+            format: "depth24plus",
+            depthWriteEnabled: true,
+            depthCompare: "less",
+        },
+        primitive: { topology: "triangle-list", cullMode: "back" },
+    });
+
+    return { pipeline, module };
+}
+
+async function createTransparentPipeline(
+    device: GPUDevice,
+    module: GPUShaderModule
+): Promise<GPURenderPipeline> {
+    return device.createRenderPipelineAsync({
+        layout: "auto",
+        vertex: { module, entryPoint: "vs", buffers: VERTEX_BUFFERS },
+        fragment: {
+            module,
+            entryPoint: "fs_transparent",
+            targets: [
+                {
+                    format: ACCUM_FORMAT,
+                    blend: {
+                        color: { srcFactor: "one", dstFactor: "one" },
+                        alpha: { srcFactor: "one", dstFactor: "one" },
+                    },
+                },
+                {
+                    format: REVEAL_FORMAT,
+                    blend: {
+                        color: { srcFactor: "zero", dstFactor: "one-minus-src" },
+                        alpha: { srcFactor: "zero", dstFactor: "one-minus-src" },
+                    },
+                },
+            ],
+        },
+        depthStencil: {
+            format: "depth24plus",
+            depthWriteEnabled: false,
+            depthCompare: "less-equal",
+        },
+        primitive: { topology: "triangle-list", cullMode: "none" },
+    });
+}
+
+async function createSkyPipeline(
+    device: GPUDevice,
+    colorFormat: GPUTextureFormat
+): Promise<GPURenderPipeline> {
+    const code = compileSkyShader();
+    const module = device.createShaderModule({ code });
+
+    return device.createRenderPipelineAsync({
+        layout: "auto",
+        vertex: { module, entryPoint: "vs" },
+        fragment: {
+            module,
+            entryPoint: "fs",
+            targets: [{ format: colorFormat }],
+        },
+        depthStencil: {
+            format: "depth24plus",
+            depthWriteEnabled: false,
+            depthCompare: "always",
+        },
+        primitive: { topology: "triangle-list" },
+    });
+}
+
+async function prepareForwardGPU(device: GPUDevice, surfaces: SurfaceData[]): Promise<ForwardGPU> {
+    const [opaque, opaqueShadowed, sky] = await Promise.all([
+        createRasterPipeline(device, surfaces, COLOR_FORMAT, false),
+        createRasterPipeline(device, surfaces, COLOR_FORMAT, true),
+        createSkyPipeline(device, COLOR_FORMAT),
+    ]);
+
+    const [transparent, transparentShadowed, composite] = await Promise.all([
+        createTransparentPipeline(device, opaque.module),
+        createTransparentPipeline(device, opaqueShadowed.module),
+        createCompositePipeline(device),
+    ]);
+
+    return { opaque, opaqueShadowed, transparent, transparentShadowed, composite, sky };
+}
+
+async function createCompositePipeline(device: GPUDevice): Promise<GPURenderPipeline> {
+    const compositeModule = device.createShaderModule({ code: compileCompositeShader() });
+    return device.createRenderPipelineAsync({
+        layout: "auto",
+        vertex: { module: compositeModule, entryPoint: "vs" },
+        fragment: {
+            module: compositeModule,
+            entryPoint: "fs",
+            targets: [
+                {
+                    format: COLOR_FORMAT,
+                    blend: {
+                        color: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                        alpha: { srcFactor: "src-alpha", dstFactor: "one-minus-src-alpha" },
+                    },
+                },
+            ],
+        },
+        primitive: { topology: "triangle-list" },
+    });
+}
+
+function createForwardBindGroups(
+    device: GPUDevice,
+    gpu: ForwardGPU,
+    config: ForwardConfig
+): ForwardBindGroups {
+    const sceneEntries: GPUBindGroupEntry[] = [
+        { binding: 0, resource: { buffer: config.scene } },
+        { binding: 1, resource: { buffer: config.batching.entityIds } },
+        { binding: 2, resource: { buffer: config.matrices } },
+        { binding: 3, resource: { buffer: config.sizes } },
+        { binding: 4, resource: { buffer: config.data } },
+        { binding: 5, resource: { buffer: config.sky } },
+    ];
+
+    const bindScene = (pipeline: GPURenderPipeline) =>
+        device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: sceneEntries });
+
+    const shadowSampler = device.createSampler({
+        compare: "less",
+        magFilter: "linear",
+        minFilter: "linear",
+    });
+    const shadowEntries: GPUBindGroupEntry[] = [
+        { binding: 0, resource: { buffer: config.shadowBuffer } },
+        { binding: 1, resource: config.shadowAtlas.createView() },
+        { binding: 2, resource: shadowSampler },
+    ];
+
+    const bindShadow = (pipeline: GPURenderPipeline) =>
+        device.createBindGroup({ layout: pipeline.getBindGroupLayout(1), entries: shadowEntries });
+
+    return {
+        main: bindScene(gpu.opaque.pipeline),
+        mainShadowed: bindScene(gpu.opaqueShadowed.pipeline),
+        transparent: bindScene(gpu.transparent),
+        transparentShadowed: bindScene(gpu.transparentShadowed),
+        shadow: bindShadow(gpu.opaqueShadowed.pipeline),
+        transparentShadow: bindShadow(gpu.transparentShadowed),
+        sky: device.createBindGroup({
+            layout: gpu.sky.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: config.scene } },
+                { binding: 1, resource: { buffer: config.sky } },
+            ],
+        }),
+        composite: null,
+    };
+}
+
+export function drawSlots(
+    pass: GPURenderPassEncoder,
+    slots: Uint32Array,
+    buffers: Map<number, MeshBuffers>,
+    device: GPUDevice
+): void {
+    for (let i = 0; i < MAX_BATCH_SLOTS; i++) {
+        const instances = slotInstanceCount(slots, i);
+        if (instances === 0) continue;
+
+        const shapeId = slotShapeId(slots, i);
+        let shapeBuffers = buffers.get(shapeId);
+        if (!shapeBuffers) {
+            const meshData = getMesh(shapeId);
+            if (!meshData) continue;
+            shapeBuffers = createMeshBuffers(device, meshData);
+            buffers.set(shapeId, shapeBuffers);
+        }
+
+        pass.setVertexBuffer(0, shapeBuffers.vertex);
+        pass.setIndexBuffer(shapeBuffers.index, "uint16");
+        pass.drawIndexed(slotIndexCount(slots, i), instances, 0, 0, slotFirstInstance(slots, i));
+    }
+}
+
+function hasAnyTransparent(slots: Uint32Array): boolean {
+    for (let i = 0; i < MAX_BATCH_SLOTS; i++) {
+        if (slotInstanceCount(slots, i) > 0) return true;
+    }
+    return false;
+}
+
+function ensureTransparentTextures(
+    device: GPUDevice,
+    width: number,
+    height: number,
+    state: TransparentState | null
+): TransparentState {
+    if (state && state.width === width && state.height === height) return state;
+
+    state?.accumTexture.destroy();
+    state?.revealTexture.destroy();
+
+    const accumTexture = device.createTexture({
+        label: "wboit-accum",
+        size: { width, height },
+        format: ACCUM_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    });
+    const revealTexture = device.createTexture({
+        label: "wboit-reveal",
+        size: { width, height },
+        format: REVEAL_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    });
+
+    return {
+        accumTexture,
+        accumView: accumTexture.createView(),
+        revealTexture,
+        revealView: revealTexture.createView(),
+        width,
+        height,
+    };
+}
+
+function renderSky(
+    encoder: GPUCommandEncoder,
+    gpu: ForwardGPU,
+    bindGroups: ForwardBindGroups,
+    colorView: GPUTextureView,
+    zView: GPUTextureView,
+    clearColor: { r: number; g: number; b: number }
+): void {
+    const skyPass = encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: colorView,
+                clearValue: { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: 1 },
+                loadOp: "clear",
+                storeOp: "store",
+            },
+        ],
+        depthStencilAttachment: {
+            view: zView,
+            depthClearValue: 1.0,
+            depthLoadOp: "clear",
+            depthStoreOp: "store",
+        },
+    });
+    skyPass.setPipeline(gpu.sky);
+    skyPass.setBindGroup(0, bindGroups.sky);
+    skyPass.draw(3);
+    skyPass.end();
+}
+
+function renderOpaque(
+    ctx: ExecutionContext,
+    gpu: ForwardGPU,
+    bindGroups: ForwardBindGroups,
+    config: ForwardConfig,
+    colorView: GPUTextureView,
+    eidView: GPUTextureView,
+    zView: GPUTextureView,
+    clearColor: { r: number; g: number; b: number },
+    hasSky: boolean,
+    useShadows: boolean
+): void {
+    const pass = ctx.encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: colorView,
+                clearValue: { r: clearColor.r, g: clearColor.g, b: clearColor.b, a: 1 },
+                loadOp: hasSky ? "load" : "clear",
+                storeOp: "store",
+            },
+            {
+                view: eidView,
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                loadOp: "clear",
+                storeOp: "store",
+            },
+        ],
+        depthStencilAttachment: {
+            view: zView,
+            depthClearValue: 1.0,
+            depthLoadOp: hasSky ? "load" : "clear",
+            depthStoreOp: "store",
+        },
+    });
+
+    const activePipeline = useShadows ? gpu.opaqueShadowed.pipeline : gpu.opaque.pipeline;
+    const activeBindGroup = useShadows ? bindGroups.mainShadowed : bindGroups.main;
+
+    pass.setPipeline(activePipeline);
+    pass.setBindGroup(0, activeBindGroup);
+
+    if (useShadows) {
+        pass.setBindGroup(1, bindGroups.shadow);
+    }
+
+    drawSlots(pass, config.batching.opaque, config.batching.buffers, ctx.device);
+    pass.end();
+}
+
+function renderTransparent(
+    ctx: ExecutionContext,
+    gpu: ForwardGPU,
+    bindGroups: ForwardBindGroups,
+    config: ForwardConfig,
+    transparent: TransparentState,
+    zView: GPUTextureView,
+    useShadows: boolean
+): void {
+    const activePipeline = useShadows ? gpu.transparentShadowed : gpu.transparent;
+    const activeBindGroup = useShadows ? bindGroups.transparentShadowed : bindGroups.transparent;
+
+    const transparentPass = ctx.encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: transparent.accumView,
+                clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                loadOp: "clear",
+                storeOp: "store",
+            },
+            {
+                view: transparent.revealView,
+                clearValue: { r: 1, g: 1, b: 1, a: 1 },
+                loadOp: "clear",
+                storeOp: "store",
+            },
+        ],
+        depthStencilAttachment: {
+            view: zView,
+            depthReadOnly: true,
+        },
+    });
+
+    transparentPass.setPipeline(activePipeline);
+    transparentPass.setBindGroup(0, activeBindGroup);
+
+    if (useShadows) {
+        transparentPass.setBindGroup(1, bindGroups.transparentShadow);
+    }
+
+    drawSlots(transparentPass, config.batching.transparent, config.batching.buffers, ctx.device);
+    transparentPass.end();
+}
+
+function compositeTransparency(
+    encoder: GPUCommandEncoder,
+    gpu: ForwardGPU,
+    compositeBindGroup: GPUBindGroup,
+    colorView: GPUTextureView
+): void {
+    const compositePass = encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: colorView,
+                loadOp: "load",
+                storeOp: "store",
+            },
+        ],
+    });
+
+    compositePass.setPipeline(gpu.composite);
+    compositePass.setBindGroup(0, compositeBindGroup);
+    compositePass.draw(3);
+    compositePass.end();
+}
+
+export interface ForwardConfig {
+    scene: GPUBuffer;
+    sky: GPUBuffer;
+    data: GPUBuffer;
+    matrices: GPUBuffer;
+    sizes: GPUBuffer;
+    batching: Batch;
+    shadowBuffer: GPUBuffer;
+    shadowAtlas: GPUTexture;
+    getSurfaces: () => SurfaceData[];
+    getClearColor: () => { r: number; g: number; b: number };
+    getSky: () => boolean;
+    getShadowsEnabled: () => boolean;
+    getRTRendered?: () => boolean;
+}
+
+export function createRasterForwardNode(config: ForwardConfig): ComputeNode {
+    let gpu: ForwardGPU | null = null;
+    let bindGroups: ForwardBindGroups | null = null;
+    let transparent: TransparentState | null = null;
+    let cachedWidth = 0;
+    let cachedHeight = 0;
+
+    return {
+        id: "forward",
+        inputs: [
+            { id: "batched", access: "read" },
+            { id: "shadow-atlas", access: "read" },
+        ],
+        outputs: [
+            { id: "color", access: "write" },
+            { id: "eid", access: "write" },
+            { id: "z", access: "write" },
+        ],
+
+        async prepare(device: GPUDevice) {
+            const surfaces = config.getSurfaces();
+            gpu = await prepareForwardGPU(device, surfaces);
+            bindGroups = createForwardBindGroups(device, gpu, config);
+        },
+
+        execute(ctx: ExecutionContext) {
+            if (config.getRTRendered?.()) return;
+            if (!gpu || !bindGroups) return;
+
+            const colorView = ctx.getTextureView("color");
+            const eidView = ctx.getTextureView("eid");
+            const zView = ctx.getTextureView("z");
+            if (!colorView || !eidView || !zView) return;
+
+            const colorTexture = ctx.getTexture("color");
+            if (!colorTexture) return;
+            const width = colorTexture.width;
+            const height = colorTexture.height;
+
+            const useShadows = config.getShadowsEnabled();
+            const clearColor = config.getClearColor();
+            const hasSky = config.getSky();
+
+            if (hasSky) {
+                renderSky(
+                    ctx.encoder,
+                    gpu,
+                    bindGroups,
+                    colorView as GPUTextureView,
+                    zView as GPUTextureView,
+                    clearColor
+                );
+            }
+
+            renderOpaque(
+                ctx,
+                gpu,
+                bindGroups,
+                config,
+                colorView as GPUTextureView,
+                eidView as GPUTextureView,
+                zView as GPUTextureView,
+                clearColor,
+                hasSky,
+                useShadows
+            );
+
+            const transparentSlots = config.batching.transparent;
+            if (!hasAnyTransparent(transparentSlots)) return;
+
+            if (width !== cachedWidth || height !== cachedHeight) {
+                transparent = ensureTransparentTextures(ctx.device, width, height, transparent);
+                bindGroups.composite = ctx.device.createBindGroup({
+                    layout: gpu.composite.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: transparent.accumView },
+                        { binding: 1, resource: transparent.revealView },
+                    ],
+                });
+                cachedWidth = width;
+                cachedHeight = height;
+            }
+
+            renderTransparent(
+                ctx,
+                gpu,
+                bindGroups,
+                config,
+                transparent!,
+                zView as GPUTextureView,
+                useShadows
+            );
+
+            compositeTransparency(
+                ctx.encoder,
+                gpu,
+                bindGroups.composite!,
+                colorView as GPUTextureView
+            );
+        },
+    };
+}