@multiplekex/shallot 0.2.4 → 0.3.0

package/src/standard/render/postprocess.ts

@@ -120,7 +120,6 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
 
 fn sampleBloom(uv: vec2f) -> vec3f {
     let texelSize = vec2f(uniforms.texelSizeX, uniforms.texelSizeY);
-    // Normalize to reference height (1080p) for resolution-independent bloom
     let height = 1.0 / uniforms.texelSizeY;
     let resolutionScale = height / 1080.0;
     let spread = uniforms.bloomRadius * 4.0 * resolutionScale;
@@ -130,7 +129,6 @@ fn sampleBloom(uv: vec2f) -> vec3f {
     var bloom = vec3f(0.0);
     var totalWeight = 0.0;
 
-    // 9x9 kernel with gaussian weights
     for (var y = -4; y <= 4; y++) {
         for (var x = -4; x <= 4; x++) {
             let offset = vec2f(f32(x), f32(y)) * texelSize * spread;
@@ -165,7 +163,6 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
         color = select(fxaaColor, color, maskValue >= 0.5);
     }
 
-    // Bloom applied before tonemapping
     if (uniforms.flags & FLAG_BLOOM) != 0u {
         let bloom = sampleBloom(input.uv);
         color += bloom * uniforms.bloomIntensity;
@@ -244,12 +241,267 @@ export interface PostProcessConfig {
     getRenderSize?: () => { width: number; height: number };
 }
 
+interface PostProcessGPU {
+    pipeline: GPURenderPipeline;
+    blitPipeline: GPURenderPipeline;
+    uniformBuffer: GPUBuffer;
+    uniformData: ArrayBuffer;
+    uniformFloats: Float32Array;
+    uniformUints: Uint32Array;
+    linearSampler: GPUSampler;
+    nearestSampler: GPUSampler;
+}
+
+interface PostProcessCache {
+    mainBindGroup: GPUBindGroup | null;
+    blitBindGroup: GPUBindGroup | null;
+    inputView: GPUTextureView | null;
+    sampler: GPUSampler | null;
+    maskView: GPUTextureView | null;
+}
+
+async function preparePostProcess(device: GPUDevice): Promise<PostProcessGPU> {
+    const format: GPUTextureFormat = "bgra8unorm";
+
+    const [mainModule, blitModule] = await Promise.all([
+        device.createShaderModule({ code: shader }),
+        device.createShaderModule({ code: blitShader }),
+    ]);
+
+    const [pipeline, blitPipeline] = await Promise.all([
+        device.createRenderPipelineAsync({
+            layout: "auto",
+            vertex: { module: mainModule, entryPoint: "vertexMain" },
+            fragment: {
+                module: mainModule,
+                entryPoint: "fragmentMain",
+                targets: [{ format }],
+            },
+            primitive: { topology: "triangle-list" },
+        }),
+        device.createRenderPipelineAsync({
+            layout: "auto",
+            vertex: { module: blitModule, entryPoint: "vertexMain" },
+            fragment: {
+                module: blitModule,
+                entryPoint: "fragmentMain",
+                targets: [{ format }],
+            },
+            primitive: { topology: "triangle-list" },
+        }),
+    ]);
+
+    const uniformData = new ArrayBuffer(48);
+
+    return {
+        pipeline,
+        blitPipeline,
+        uniformBuffer: device.createBuffer({
+            size: 48,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        }),
+        uniformData,
+        uniformFloats: new Float32Array(uniformData),
+        uniformUints: new Uint32Array(uniformData),
+        linearSampler: device.createSampler({ magFilter: "linear", minFilter: "linear" }),
+        nearestSampler: device.createSampler({ magFilter: "nearest", minFilter: "nearest" }),
+    };
+}
+
+function blitToCanvas(
+    encoder: GPUCommandEncoder,
+    pipeline: GPURenderPipeline,
+    bindGroup: GPUBindGroup,
+    canvasView: GPUTextureView
+): void {
+    const pass = encoder.beginRenderPass({
+        colorAttachments: [
+            {
+                view: canvasView,
+                loadOp: "clear" as const,
+                storeOp: "store" as const,
+                clearValue: { r: 0, g: 0, b: 0, a: 1 },
+            },
+        ],
+    });
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.draw(3);
+    pass.end();
+}
+
+function executeContributors(
+    contributors: { execute: (ctx: DrawContext) => void }[],
+    baseCtx: Omit<DrawContext, "inputView" | "outputView">,
+    pingAView: GPUTextureView,
+    pingBView: GPUTextureView,
+    currentInput: GPUTextureView,
+    pingPong: boolean
+): { currentInput: GPUTextureView; pingPong: boolean } {
+    for (const contributor of contributors) {
+        const currentOutput = pingPong ? pingAView : pingBView;
+        contributor.execute({
+            ...baseCtx,
+            inputView: currentInput,
+            outputView: currentOutput,
+        });
+        currentInput = currentOutput;
+        pingPong = !pingPong;
+    }
+    return { currentInput, pingPong };
+}
+
+function ensureBlitBindGroup(
+    device: GPUDevice,
+    gpu: PostProcessGPU,
+    cache: PostProcessCache,
+    inputView: GPUTextureView,
+    sampler: GPUSampler
+): GPUBindGroup {
+    if (inputView !== cache.inputView || sampler !== cache.sampler) {
+        cache.blitBindGroup = device.createBindGroup({
+            layout: gpu.blitPipeline.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: inputView },
+                { binding: 1, resource: sampler },
+            ],
+        });
+        cache.inputView = inputView;
+        cache.sampler = sampler;
+    }
+    return cache.blitBindGroup!;
+}
+
+function executePostProcess(
+    gpu: PostProcessGPU,
+    cache: PostProcessCache,
+    ctx: ExecutionContext,
+    config: PostProcessConfig
+): void {
+    const { device, encoder, canvasView, format, context } = ctx;
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+    const colorView = ctx.getTextureView("color")!;
+    const maskView = ctx.getTextureView("mask")!;
+    const zView = ctx.getTextureView("z")!;
+    const eidView = ctx.getTextureView("eid")!;
+    const pingAView = ctx.getTextureView("pingA")!;
+    const pingBView = ctx.getTextureView("pingB")!;
+
+    const renderSize = config.getRenderSize?.();
+    const isUpscaling = renderSize && (renderSize.width !== width || renderSize.height !== height);
+    const sampler = isUpscaling ? gpu.nearestSampler : gpu.linearSampler;
+
+    let currentInput = colorView;
+    let pingPong = false;
+
+    const baseCtx = {
+        device,
+        encoder,
+        format,
+        width,
+        height,
+        sceneView: colorView,
+        zView,
+        entityIdView: eidView,
+        maskView,
+        canvasView,
+    };
+
+    const beforePostProcess = getDrawsByPass(config.state, Pass.BeforePost);
+    ({ currentInput, pingPong } = executeContributors(
+        beforePostProcess,
+        baseCtx,
+        pingAView,
+        pingBView,
+        currentInput,
+        pingPong
+    ));
+
+    const postProcessContributors = getDrawsByPass(config.state, Pass.Post);
+    const hasBuiltinEffects =
+        config.uniforms.tonemap ||
+        config.uniforms.fxaa ||
+        config.uniforms.vignetteStrength > 0 ||
+        config.uniforms.bloomIntensity > 0 ||
+        config.uniforms.quantize > 0;
+
+    if (hasBuiltinEffects || postProcessContributors.length > 0) {
+        ({ currentInput, pingPong } = executeContributors(
+            postProcessContributors,
+            baseCtx,
+            pingAView,
+            pingBView,
+            currentInput,
+            pingPong
+        ));
+
+        if (hasBuiltinEffects) {
+            let flags = 0;
+            if (config.uniforms.tonemap) flags |= FLAG_TONEMAP;
+            if (config.uniforms.fxaa) flags |= FLAG_FXAA;
+            if (config.uniforms.vignetteStrength > 0) flags |= FLAG_VIGNETTE;
+            if (config.uniforms.bloomIntensity > 0) flags |= FLAG_BLOOM;
+            if (config.uniforms.quantize > 0) flags |= FLAG_QUANTIZE;
+
+            gpu.uniformFloats[0] = config.uniforms.exposure;
+            gpu.uniformFloats[1] = config.uniforms.vignetteStrength;
+            gpu.uniformFloats[2] = config.uniforms.vignetteInner;
+            gpu.uniformFloats[3] = config.uniforms.vignetteOuter;
+            gpu.uniformFloats[4] = 1.0 / width;
+            gpu.uniformFloats[5] = 1.0 / height;
+            gpu.uniformUints[6] = flags;
+            gpu.uniformFloats[7] = config.uniforms.bloomIntensity;
+            gpu.uniformFloats[8] = config.uniforms.bloomThreshold;
+            gpu.uniformFloats[9] = config.uniforms.bloomRadius;
+            gpu.uniformFloats[10] = config.uniforms.quantize;
+
+            device.queue.writeBuffer(gpu.uniformBuffer, 0, gpu.uniformData);
+
+            if (
+                currentInput !== cache.inputView ||
+                sampler !== cache.sampler ||
+                maskView !== cache.maskView
+            ) {
+                cache.mainBindGroup = device.createBindGroup({
+                    layout: gpu.pipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: currentInput },
+                        { binding: 1, resource: sampler },
+                        { binding: 2, resource: { buffer: gpu.uniformBuffer } },
+                        { binding: 3, resource: maskView },
+                    ],
+                });
+                cache.inputView = currentInput;
+                cache.sampler = sampler;
+                cache.maskView = maskView;
+            }
+
+            blitToCanvas(encoder, gpu.pipeline, cache.mainBindGroup!, canvasView);
+        } else {
+            const bindGroup = ensureBlitBindGroup(device, gpu, cache, currentInput, sampler);
+            blitToCanvas(encoder, gpu.blitPipeline, bindGroup, canvasView);
+        }
+    } else {
+        const bindGroup = ensureBlitBindGroup(device, gpu, cache, currentInput, sampler);
+        blitToCanvas(encoder, gpu.blitPipeline, bindGroup, canvasView);
+    }
+
+    const afterPostProcess = getDrawsByPass(config.state, Pass.AfterPost);
+    for (const contributor of afterPostProcess) {
+        contributor.execute(baseCtx);
+    }
+}
+
 export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
-    let pipeline: GPURenderPipeline | null = null;
-    let blitPipeline: GPURenderPipeline | null = null;
-    let uniformBuffer: GPUBuffer | null = null;
-    let linearSampler: GPUSampler | null = null;
-    let nearestSampler: GPUSampler | null = null;
+    let gpu: PostProcessGPU | null = null;
+    const cache: PostProcessCache = {
+        mainBindGroup: null,
+        blitBindGroup: null,
+        inputView: null,
+        sampler: null,
+        maskView: null,
+    };
 
     return {
         id: "postprocess",
@@ -262,243 +514,12 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
         outputs: [{ id: "framebuffer", access: "write" }],
 
         async prepare(device: GPUDevice) {
-            const format: GPUTextureFormat = "bgra8unorm";
-
-            const [mainModule, blitModule] = await Promise.all([
-                device.createShaderModule({ code: shader }),
-                device.createShaderModule({ code: blitShader }),
-            ]);
-
-            [pipeline, blitPipeline] = await Promise.all([
-                device.createRenderPipelineAsync({
-                    layout: "auto",
-                    vertex: { module: mainModule, entryPoint: "vertexMain" },
-                    fragment: {
-                        module: mainModule,
-                        entryPoint: "fragmentMain",
-                        targets: [{ format }],
-                    },
-                    primitive: { topology: "triangle-list" },
-                }),
-                device.createRenderPipelineAsync({
-                    layout: "auto",
-                    vertex: { module: blitModule, entryPoint: "vertexMain" },
-                    fragment: {
-                        module: blitModule,
-                        entryPoint: "fragmentMain",
-                        targets: [{ format }],
-                    },
-                    primitive: { topology: "triangle-list" },
-                }),
-            ]);
-
-            uniformBuffer = device.createBuffer({
-                size: 48,
-                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-            });
-
-            linearSampler = device.createSampler({
-                magFilter: "linear",
-                minFilter: "linear",
-            });
-
-            nearestSampler = device.createSampler({
-                magFilter: "nearest",
-                minFilter: "nearest",
-            });
+            gpu = await preparePostProcess(device);
         },
 
         execute(ctx: ExecutionContext) {
-            const { device, encoder, canvasView, format, context } = ctx;
-            const width = context.canvas.width;
-            const height = context.canvas.height;
-            const colorView = ctx.getTextureView("color")!;
-            const maskView = ctx.getTextureView("mask")!;
-            const depthView = ctx.getTextureView("depth")!;
-            const eidView = ctx.getTextureView("eid")!;
-            const pingAView = ctx.getTextureView("pingA")!;
-            const pingBView = ctx.getTextureView("pingB")!;
-
-            const renderSize = config.getRenderSize?.();
-            const isUpscaling =
-                renderSize && (renderSize.width !== width || renderSize.height !== height);
-            const sampler = isUpscaling ? nearestSampler! : linearSampler!;
-
-            let currentInput = colorView;
-            let currentOutput = pingAView;
-            let pingPong = false;
-
-            const beforePostProcess = getDrawsByPass(config.state, Pass.BeforePost);
-            for (const contributor of beforePostProcess) {
-                const passCtx: DrawContext = {
-                    device,
-                    encoder,
-                    format,
-                    width,
-                    height,
-                    sceneView: colorView,
-                    depthView,
-                    entityIdView: eidView,
-                    maskView,
-                    canvasView,
-                    inputView: currentInput,
-                    outputView: currentOutput,
-                };
-                contributor.execute(passCtx);
-
-                currentInput = currentOutput;
-                currentOutput = pingPong ? pingAView : pingBView;
-                pingPong = !pingPong;
-            }
-
-            const postProcessContributors = getDrawsByPass(config.state, Pass.Post);
-            const hasBuiltinEffects =
-                config.uniforms.tonemap ||
-                config.uniforms.fxaa ||
-                config.uniforms.vignetteStrength > 0 ||
-                config.uniforms.bloomIntensity > 0 ||
-                config.uniforms.quantize > 0;
-
-            if (hasBuiltinEffects || postProcessContributors.length > 0) {
-                for (const contributor of postProcessContributors) {
-                    const passCtx: DrawContext = {
-                        device,
-                        encoder,
-                        format,
-                        width,
-                        height,
-                        sceneView: colorView,
-                        depthView,
-                        entityIdView: eidView,
-                        maskView,
-                        canvasView,
-                        inputView: currentInput,
-                        outputView: currentOutput,
-                    };
-                    contributor.execute(passCtx);
-
-                    currentInput = currentOutput;
-                    currentOutput = pingPong ? pingAView : pingBView;
-                    pingPong = !pingPong;
-                }
-
-                if (hasBuiltinEffects) {
-                    let flags = 0;
-                    if (config.uniforms.tonemap) flags |= FLAG_TONEMAP;
-                    if (config.uniforms.fxaa) flags |= FLAG_FXAA;
-                    if (config.uniforms.vignetteStrength > 0) flags |= FLAG_VIGNETTE;
-                    if (config.uniforms.bloomIntensity > 0) flags |= FLAG_BLOOM;
-                    if (config.uniforms.quantize > 0) flags |= FLAG_QUANTIZE;
-
-                    const data = new ArrayBuffer(48);
-                    const floats = new Float32Array(data);
-                    const uints = new Uint32Array(data);
-                    floats[0] = config.uniforms.exposure;
-                    floats[1] = config.uniforms.vignetteStrength;
-                    floats[2] = config.uniforms.vignetteInner;
-                    floats[3] = config.uniforms.vignetteOuter;
-                    floats[4] = 1.0 / width;
-                    floats[5] = 1.0 / height;
-                    uints[6] = flags;
-                    floats[7] = config.uniforms.bloomIntensity;
-                    floats[8] = config.uniforms.bloomThreshold;
-                    floats[9] = config.uniforms.bloomRadius;
-                    floats[10] = config.uniforms.quantize;
-
-                    device.queue.writeBuffer(uniformBuffer!, 0, data);
-
-                    const bindGroup = device.createBindGroup({
-                        layout: pipeline!.getBindGroupLayout(0),
-                        entries: [
-                            { binding: 0, resource: currentInput },
-                            { binding: 1, resource: sampler },
-                            { binding: 2, resource: { buffer: uniformBuffer! } },
-                            { binding: 3, resource: maskView },
-                        ],
-                    });
-
-                    const pass = encoder.beginRenderPass({
-                        colorAttachments: [
-                            {
-                                view: canvasView,
-                                loadOp: "clear" as const,
-                                storeOp: "store" as const,
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                            },
-                        ],
-                    });
-
-                    pass.setPipeline(pipeline!);
-                    pass.setBindGroup(0, bindGroup);
-                    pass.draw(3);
-                    pass.end();
-                } else {
-                    const bindGroup = device.createBindGroup({
-                        layout: blitPipeline!.getBindGroupLayout(0),
-                        entries: [
-                            { binding: 0, resource: currentInput },
-                            { binding: 1, resource: sampler },
-                        ],
-                    });
-
-                    const pass = encoder.beginRenderPass({
-                        colorAttachments: [
-                            {
-                                view: canvasView,
-                                loadOp: "clear" as const,
-                                storeOp: "store" as const,
-                                clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                            },
-                        ],
-                    });
-
-                    pass.setPipeline(blitPipeline!);
-                    pass.setBindGroup(0, bindGroup);
-                    pass.draw(3);
-                    pass.end();
-                }
-            } else {
-                const bindGroup = device.createBindGroup({
-                    layout: blitPipeline!.getBindGroupLayout(0),
-                    entries: [
-                        { binding: 0, resource: currentInput },
-                        { binding: 1, resource: sampler },
-                    ],
-                });
-
-                const pass = encoder.beginRenderPass({
-                    colorAttachments: [
-                        {
-                            view: canvasView,
-                            loadOp: "clear" as const,
-                            storeOp: "store" as const,
-                            clearValue: { r: 0, g: 0, b: 0, a: 1 },
-                        },
-                    ],
-                });
-
-                pass.setPipeline(blitPipeline!);
-                pass.setBindGroup(0, bindGroup);
-                pass.draw(3);
-                pass.end();
-            }
-
-            const afterPostProcess = getDrawsByPass(config.state, Pass.AfterPost);
-            for (const contributor of afterPostProcess) {
-                const passCtx: DrawContext = {
-                    device,
-                    encoder,
-                    format,
-                    width,
-                    height,
-                    sceneView: colorView,
-                    depthView,
-                    entityIdView: eidView,
-                    maskView,
-                    canvasView,
-                };
-                contributor.execute(passCtx);
-            }
+            if (!gpu) return;
+            executePostProcess(gpu, cache, ctx, config);
         },
     };
 }

package/src/standard/render/scene.ts

@@ -1,6 +1,7 @@
-export const SCENE_UNIFORM_SIZE = 512;
-export const DEPTH_FORMAT: GPUTextureFormat = "depth24plus";
-export const LINEAR_DEPTH_FORMAT: GPUTextureFormat = "r32float";
+export const SCENE_UNIFORM_SIZE = 352;
+export const SKY_UNIFORM_SIZE = 176;
+export const Z_FORMAT: GPUTextureFormat = "depth24plus";
+export const DEPTH_FORMAT: GPUTextureFormat = "r32float";
 export const MASK_FORMAT: GPUTextureFormat = "r8unorm";
 export const EID_FORMAT: GPUTextureFormat = "r32uint";
 export const COLOR_FORMAT: GPUTextureFormat = "rgba8unorm";
@@ -13,6 +14,14 @@ export function createSceneBuffer(device: GPUDevice): GPUBuffer {
     });
 }
 
+export function createSkyBuffer(device: GPUDevice): GPUBuffer {
+    return device.createBuffer({
+        label: "sky",
+        size: SKY_UNIFORM_SIZE,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+}
+
 export function ensureTextures(
     device: GPUDevice,
     format: GPUTextureFormat,
@@ -25,9 +34,9 @@ export function ensureTextures(
     if (existing && existing.width === width && existing.height === height) return;
 
     existing?.destroy();
-    textures.get("linear-depth")?.destroy();
-    textures.get("eid")?.destroy();
     textures.get("depth")?.destroy();
+    textures.get("eid")?.destroy();
+    textures.get("z")?.destroy();
     textures.get("mask")?.destroy();
     textures.get("pingA")?.destroy();
     textures.get("pingB")?.destroy();
@@ -42,11 +51,14 @@ export function ensureTextures(
             GPUTextureUsage.TEXTURE_BINDING,
     });
 
-    const linearDepth = device.createTexture({
-        label: "linear-depth",
+    const depth = device.createTexture({
+        label: "depth",
         size: { width, height },
-        format: LINEAR_DEPTH_FORMAT,
-        usage: GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.TEXTURE_BINDING,
+        format: DEPTH_FORMAT,
+        usage:
+            GPUTextureUsage.STORAGE_BINDING |
+            GPUTextureUsage.RENDER_ATTACHMENT |
+            GPUTextureUsage.TEXTURE_BINDING,
     });
 
     const eid = device.createTexture({
@@ -59,10 +71,10 @@ export function ensureTextures(
             GPUTextureUsage.TEXTURE_BINDING,
     });
 
-    const depth = device.createTexture({
-        label: "depth",
+    const z = device.createTexture({
+        label: "z",
         size: { width, height },
-        format: DEPTH_FORMAT,
+        format: Z_FORMAT,
         usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
     });
 
@@ -89,12 +101,12 @@ export function ensureTextures(
 
     textures.set("color", color);
     textureViews.set("color", color.createView());
-    textures.set("linear-depth", linearDepth);
-    textureViews.set("linear-depth", linearDepth.createView());
-    textures.set("eid", eid);
-    textureViews.set("eid", eid.createView());
     textures.set("depth", depth);
     textureViews.set("depth", depth.createView());
+    textures.set("eid", eid);
+    textureViews.set("eid", eid.createView());
+    textures.set("z", z);
+    textureViews.set("z", z.createView());
     textures.set("mask", mask);
     textureViews.set("mask", mask.createView());
     textures.set("pingA", pingA);