@multiplekex/shallot 0.1.12 → 0.2.0

package/src/standard/render/mesh/unified.ts

@@ -0,0 +1,96 @@
+import { getMesh } from ".";
+
+export interface ShapeMeta {
+    vertexOffset: number;
+    indexOffset: number;
+    triCount: number;
+    _pad: number;
+}
+
+export interface ShapeAtlas {
+    vertices: GPUBuffer;
+    indices: GPUBuffer;
+    meta: GPUBuffer;
+    shapeCount: number;
+    maxTriangles: number;
+}
+
+const MAX_SHAPES = 16;
+
+export function createShapeAtlas(device: GPUDevice): ShapeAtlas {
+    const allVertices: number[] = [];
+    const allIndices: number[] = [];
+    const shapeMetas: ShapeMeta[] = [];
+
+    let vertexOffset = 0;
+    let indexOffset = 0;
+    let maxTriangles = 0;
+
+    for (let shapeId = 0; shapeId < MAX_SHAPES; shapeId++) {
+        const mesh = getMesh(shapeId);
+        if (!mesh) {
+            shapeMetas.push({ vertexOffset: 0, indexOffset: 0, triCount: 0, _pad: 0 });
+            continue;
+        }
+
+        const triCount = mesh.indexCount / 3;
+        shapeMetas.push({
+            vertexOffset,
+            indexOffset,
+            triCount,
+            _pad: 0,
+        });
+
+        for (let i = 0; i < mesh.vertices.length; i++) {
+            allVertices.push(mesh.vertices[i]);
+        }
+
+        for (let i = 0; i < mesh.indices.length; i++) {
+            allIndices.push(mesh.indices[i]);
+        }
+
+        vertexOffset += mesh.vertices.length;
+        indexOffset += mesh.indices.length;
+        maxTriangles += triCount;
+    }
+
+    const verticesData = new Float32Array(allVertices);
+    const indicesData = new Uint32Array(allIndices);
+    const metaData = new Uint32Array(MAX_SHAPES * 4);
+
+    for (let i = 0; i < shapeMetas.length; i++) {
+        metaData[i * 4] = shapeMetas[i].vertexOffset;
+        metaData[i * 4 + 1] = shapeMetas[i].indexOffset;
+        metaData[i * 4 + 2] = shapeMetas[i].triCount;
+        metaData[i * 4 + 3] = 0;
+    }
+
+    const vertices = device.createBuffer({
+        label: "unified-vertices",
+        size: Math.max(verticesData.byteLength, 16),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(vertices, 0, verticesData);
+
+    const indices = device.createBuffer({
+        label: "unified-indices",
+        size: Math.max(indicesData.byteLength, 16),
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(indices, 0, indicesData);
+
+    const meta = device.createBuffer({
+        label: "unified-meta",
+        size: metaData.byteLength,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(meta, 0, metaData);
+
+    return {
+        vertices,
+        indices,
+        meta,
+        shapeCount: shapeMetas.filter((m) => m.triCount > 0).length,
+        maxTriangles,
+    };
+}

package/src/standard/render/{transparent.ts → overlay.ts}

@@ -1,30 +1,29 @@
 import type { State } from "../../core";
 import type { ComputeNode, ExecutionContext } from "../compute";
-import { MASK_FORMAT } from "./scene";
+import { COLOR_FORMAT, MASK_FORMAT } from "./scene";
 import { Pass, getDrawsByPass, type DrawContext, type SharedPassContext } from "./pass";
 
 export { MASK_FORMAT };
 
-export interface TransparentNodeConfig {
+export interface OverlayNodeConfig {
     state: State;
 }
 
-export function createTransparentNode(config: TransparentNodeConfig): ComputeNode {
+export function createOverlayNode(config: OverlayNodeConfig): ComputeNode {
     return {
-        id: "transparent",
-        pass: Pass.Transparent,
+        id: "overlay",
         inputs: [{ id: "depth", access: "read" }],
         outputs: [
-            { id: "scene", access: "write" },
+            { id: "color", access: "write" },
             { id: "mask", access: "write" },
         ],
 
         execute(ctx: ExecutionContext) {
             const { device, encoder, format, context } = ctx;
-            const targetView = ctx.getTextureView("scene") ?? ctx.canvasView;
+            const targetView = ctx.getTextureView("color") ?? ctx.canvasView;
             const depthView = ctx.getTextureView("depth")!;
             const maskView = ctx.getTextureView("mask")!;
-            const entityIdView = ctx.getTextureView("entityId")!;
+            const eidView = ctx.getTextureView("eid")!;
 
             const drawCtx: DrawContext = {
                 device,
@@ -34,17 +33,17 @@ export function createTransparentNode(config: TransparentNodeConfig): ComputeNod
                 height: context.canvas.height,
                 sceneView: targetView,
                 depthView,
-                entityIdView,
+                entityIdView: eidView,
                 maskView,
                 canvasView: ctx.canvasView,
             };
 
-            const beforeTransparents = getDrawsByPass(config.state, Pass.BeforeTransparent);
-            for (const draw of beforeTransparents) {
+            const beforeOverlays = getDrawsByPass(config.state, Pass.BeforeOverlay);
+            for (const draw of beforeOverlays) {
                 draw.execute(drawCtx);
             }
 
-            const draws = getDrawsByPass(config.state, Pass.Transparent);
+            const draws = getDrawsByPass(config.state, Pass.Overlay);
             if (draws.length > 0) {
                 const pass = encoder.beginRenderPass({
                     colorAttachments: [
@@ -69,7 +68,7 @@ export function createTransparentNode(config: TransparentNodeConfig): ComputeNod
 
                 const sharedCtx: SharedPassContext = {
                     device,
-                    format,
+                    format: COLOR_FORMAT,
                     maskFormat: MASK_FORMAT,
                 };
 
@@ -82,8 +81,8 @@ export function createTransparentNode(config: TransparentNodeConfig): ComputeNod
                 pass.end();
             }
 
-            const afterTransparents = getDrawsByPass(config.state, Pass.AfterTransparent);
-            for (const draw of afterTransparents) {
+            const afterOverlays = getDrawsByPass(config.state, Pass.AfterOverlay);
+            for (const draw of afterOverlays) {
                 draw.execute(drawCtx);
             }
         },

package/src/standard/render/pass.ts

@@ -1,7 +1,13 @@
 import { resource, type State } from "../../core";
-import { Pass } from "../compute/pass";
 
-export { Pass };
+export enum Pass {
+    BeforeOverlay,
+    Overlay,
+    AfterOverlay,
+    BeforePost,
+    Post,
+    AfterPost,
+}
 
 export interface DrawContext {
     readonly device: GPUDevice;
@@ -34,11 +40,11 @@ export interface Draw {
     draw?(pass: GPURenderPassEncoder, ctx: SharedPassContext): void;
 }
 
-export interface DrawState {
+export interface Draws {
     draws: Map<string, Draw>;
 }
 
-export const Draws = resource<DrawState>("draws");
+export const Draws = resource<Draws>("draws");
 
 export function registerDraw(state: State, draw: Draw): void {
     const draws = Draws.from(state);

package/src/standard/render/postprocess.ts

@@ -16,7 +16,11 @@ struct Uniforms {
     texelSizeX: f32,
     texelSizeY: f32,
     flags: u32,
-    _pad: u32,
+    bloomIntensity: f32,
+    bloomThreshold: f32,
+    bloomRadius: f32,
+    quantizeBands: f32,
+    _pad: f32,
 }
 
 @group(0) @binding(0) var inputTexture: texture_2d<f32>;
@@ -27,6 +31,8 @@ struct Uniforms {
 const FLAG_TONEMAP: u32 = 1u;
 const FLAG_FXAA: u32 = 2u;
 const FLAG_VIGNETTE: u32 = 4u;
+const FLAG_BLOOM: u32 = 8u;
+const FLAG_QUANTIZE: u32 = 16u;
 
 @vertex
 fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
@@ -112,6 +118,43 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
     return color * vignette;
 }
 
+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;
+    let threshold = uniforms.bloomThreshold;
+    let knee = 0.15;
+
+    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;
+            let dist2 = f32(x * x + y * y);
+            let weight = exp(-dist2 * 0.125);
+
+            let sampleColor = textureSample(inputTexture, inputSampler, uv + offset).rgb;
+            let brightness = max(max(sampleColor.r, sampleColor.g), sampleColor.b);
+            let soft = clamp((brightness - threshold + knee) / (2.0 * knee), 0.0, 1.0);
+            let contribution = soft * soft;
+
+            bloom += sampleColor * contribution * weight;
+            totalWeight += weight;
+        }
+    }
+
+    return bloom / totalWeight;
+}
+
+fn applyQuantize(color: vec3f) -> vec3f {
+    let bands = uniforms.quantizeBands;
+    return floor(color * bands + 0.5) / bands;
+}
+
 @fragment
 fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
     var color = textureSample(inputTexture, inputSampler, input.uv).rgb;
@@ -122,6 +165,16 @@ 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;
+    }
+
+    if (uniforms.flags & FLAG_QUANTIZE) != 0u {
+        color = applyQuantize(color);
+    }
+
     if (uniforms.flags & FLAG_TONEMAP) != 0u {
         color = aces(color * uniforms.exposure);
     }
@@ -169,6 +222,8 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
 const FLAG_TONEMAP = 1;
 const FLAG_FXAA = 2;
 const FLAG_VIGNETTE = 4;
+const FLAG_BLOOM = 8;
+const FLAG_QUANTIZE = 16;
 
 export interface PostProcessUniforms {
     tonemap: boolean;
@@ -177,63 +232,99 @@ export interface PostProcessUniforms {
     vignetteStrength: number;
     vignetteInner: number;
     vignetteOuter: number;
+    bloomIntensity: number;
+    bloomThreshold: number;
+    bloomRadius: number;
+    quantize: number;
 }
 
 export interface PostProcessConfig {
     state: State;
     uniforms: PostProcessUniforms;
+    getRenderSize?: () => { width: number; height: number };
 }
 
 export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
     let pipeline: GPURenderPipeline | null = null;
     let blitPipeline: GPURenderPipeline | null = null;
     let uniformBuffer: GPUBuffer | null = null;
-    let sampler: GPUSampler | null = null;
+    let linearSampler: GPUSampler | null = null;
+    let nearestSampler: GPUSampler | null = null;
 
     return {
         id: "postprocess",
-        pass: Pass.Post,
         inputs: [
-            { id: "scene", access: "read" },
+            { id: "color", access: "read" },
             { id: "mask", access: "read" },
             { id: "pingA", access: "read" },
             { id: "pingB", access: "read" },
         ],
         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",
+            });
+        },
+
         execute(ctx: ExecutionContext) {
             const { device, encoder, canvasView, format, context } = ctx;
             const width = context.canvas.width;
             const height = context.canvas.height;
-            const sceneView = ctx.getTextureView("scene")!;
+            const colorView = ctx.getTextureView("color")!;
             const maskView = ctx.getTextureView("mask")!;
             const depthView = ctx.getTextureView("depth")!;
-            const entityIdView = ctx.getTextureView("entityId")!;
+            const eidView = ctx.getTextureView("eid")!;
             const pingAView = ctx.getTextureView("pingA")!;
             const pingBView = ctx.getTextureView("pingB")!;
 
-            if (!sampler) {
-                sampler = device.createSampler({
-                    magFilter: "linear",
-                    minFilter: "linear",
-                });
-            }
-
-            if (!blitPipeline) {
-                const module = device.createShaderModule({ code: blitShader });
-                blitPipeline = device.createRenderPipeline({
-                    layout: "auto",
-                    vertex: { module, entryPoint: "vertexMain" },
-                    fragment: {
-                        module,
-                        entryPoint: "fragmentMain",
-                        targets: [{ format }],
-                    },
-                    primitive: { topology: "triangle-list" },
-                });
-            }
+            const renderSize = config.getRenderSize?.();
+            const isUpscaling =
+                renderSize && (renderSize.width !== width || renderSize.height !== height);
+            const sampler = isUpscaling ? nearestSampler! : linearSampler!;
 
-            let currentInput = sceneView;
+            let currentInput = colorView;
             let currentOutput = pingAView;
             let pingPong = false;
 
@@ -245,9 +336,9 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     format,
                     width,
                     height,
-                    sceneView,
+                    sceneView: colorView,
                     depthView,
-                    entityIdView,
+                    entityIdView: eidView,
                     maskView,
                     canvasView,
                     inputView: currentInput,
@@ -264,7 +355,9 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
             const hasBuiltinEffects =
                 config.uniforms.tonemap ||
                 config.uniforms.fxaa ||
-                config.uniforms.vignetteStrength > 0;
+                config.uniforms.vignetteStrength > 0 ||
+                config.uniforms.bloomIntensity > 0 ||
+                config.uniforms.quantize > 0;
 
             if (hasBuiltinEffects || postProcessContributors.length > 0) {
                 for (const contributor of postProcessContributors) {
@@ -274,9 +367,9 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                         format,
                         width,
                         height,
-                        sceneView,
+                        sceneView: colorView,
                         depthView,
-                        entityIdView,
+                        entityIdView: eidView,
                         maskView,
                         canvasView,
                         inputView: currentInput,
@@ -290,33 +383,14 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                 }
 
                 if (hasBuiltinEffects) {
-                    if (!pipeline) {
-                        const module = device.createShaderModule({ code: shader });
-                        pipeline = device.createRenderPipeline({
-                            layout: "auto",
-                            vertex: { module, entryPoint: "vertexMain" },
-                            fragment: {
-                                module,
-                                entryPoint: "fragmentMain",
-                                targets: [{ format }],
-                            },
-                            primitive: { topology: "triangle-list" },
-                        });
-                    }
-
-                    if (!uniformBuffer) {
-                        uniformBuffer = device.createBuffer({
-                            size: 32,
-                            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-                        });
-                    }
-
                     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(32);
+                    const data = new ArrayBuffer(48);
                     const floats = new Float32Array(data);
                     const uints = new Uint32Array(data);
                     floats[0] = config.uniforms.exposure;
@@ -326,15 +400,19 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     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);
+                    device.queue.writeBuffer(uniformBuffer!, 0, data);
 
                     const bindGroup = device.createBindGroup({
-                        layout: pipeline.getBindGroupLayout(0),
+                        layout: pipeline!.getBindGroupLayout(0),
                         entries: [
                             { binding: 0, resource: currentInput },
                             { binding: 1, resource: sampler },
-                            { binding: 2, resource: { buffer: uniformBuffer } },
+                            { binding: 2, resource: { buffer: uniformBuffer! } },
                             { binding: 3, resource: maskView },
                         ],
                     });
@@ -350,13 +428,13 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                         ],
                     });
 
-                    pass.setPipeline(pipeline);
+                    pass.setPipeline(pipeline!);
                     pass.setBindGroup(0, bindGroup);
                     pass.draw(3);
                     pass.end();
                 } else {
                     const bindGroup = device.createBindGroup({
-                        layout: blitPipeline.getBindGroupLayout(0),
+                        layout: blitPipeline!.getBindGroupLayout(0),
                         entries: [
                             { binding: 0, resource: currentInput },
                             { binding: 1, resource: sampler },
@@ -374,14 +452,14 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                         ],
                     });
 
-                    pass.setPipeline(blitPipeline);
+                    pass.setPipeline(blitPipeline!);
                     pass.setBindGroup(0, bindGroup);
                     pass.draw(3);
                     pass.end();
                 }
             } else {
                 const bindGroup = device.createBindGroup({
-                    layout: blitPipeline.getBindGroupLayout(0),
+                    layout: blitPipeline!.getBindGroupLayout(0),
                     entries: [
                         { binding: 0, resource: currentInput },
                         { binding: 1, resource: sampler },
@@ -399,7 +477,7 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     ],
                 });
 
-                pass.setPipeline(blitPipeline);
+                pass.setPipeline(blitPipeline!);
                 pass.setBindGroup(0, bindGroup);
                 pass.draw(3);
                 pass.end();
@@ -413,9 +491,9 @@ export function createPostProcessNode(config: PostProcessConfig): ComputeNode {
                     format,
                     width,
                     height,
-                    sceneView,
+                    sceneView: colorView,
                     depthView,
-                    entityIdView,
+                    entityIdView: eidView,
                     maskView,
                     canvasView,
                 };

package/src/standard/render/ray.ts

@@ -0,0 +1,61 @@
+import type { Vec3, Ray } from "./bvh/structs";
+
+export type { Ray };
+
+const DEG_TO_RAD = Math.PI / 180;
+
+export function generateRay(
+    screenX: number,
+    screenY: number,
+    width: number,
+    height: number,
+    fov: number,
+    near: number,
+    cameraWorld: Float32Array
+): Ray {
+    const ndcX = screenX * 2 - 1;
+    const ndcY = 1 - screenY * 2;
+
+    const aspect = width / height;
+    const tanHalfFov = Math.tan((fov * DEG_TO_RAD) / 2);
+
+    const camDirX = ndcX * aspect * tanHalfFov;
+    const camDirY = ndcY * tanHalfFov;
+    const camDirZ = -1;
+
+    const r00 = cameraWorld[0];
+    const r10 = cameraWorld[1];
+    const r20 = cameraWorld[2];
+    const r01 = cameraWorld[4];
+    const r11 = cameraWorld[5];
+    const r21 = cameraWorld[6];
+    const r02 = cameraWorld[8];
+    const r12 = cameraWorld[9];
+    const r22 = cameraWorld[10];
+
+    let dirX = r00 * camDirX + r01 * camDirY + r02 * camDirZ;
+    let dirY = r10 * camDirX + r11 * camDirY + r12 * camDirZ;
+    let dirZ = r20 * camDirX + r21 * camDirY + r22 * camDirZ;
+
+    const len = Math.sqrt(dirX * dirX + dirY * dirY + dirZ * dirZ);
+    dirX /= len;
+    dirY /= len;
+    dirZ /= len;
+
+    const originX = cameraWorld[12];
+    const originY = cameraWorld[13];
+    const originZ = cameraWorld[14];
+
+    return {
+        origin: {
+            x: originX + dirX * near,
+            y: originY + dirY * near,
+            z: originZ + dirZ * near,
+        },
+        direction: {
+            x: dirX,
+            y: dirY,
+            z: dirZ,
+        },
+    };
+}