@multiplekex/shallot 0.1.0

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

@@ -0,0 +1,227 @@
+import { MAX_ENTITIES } from "../../../core";
+import { setTraits, type FieldAccessor } from "../../../core/component";
+import { createEntityIdBuffer } from "../../compute";
+import { writeIndirect } from "../forward";
+import { createBox } from "./box";
+import { createSphere } from "./sphere";
+import { createPlane } from "./plane";
+
+export interface MeshData {
+    vertices: Float32Array<ArrayBuffer>;
+    indices: Uint16Array<ArrayBuffer>;
+    vertexCount: number;
+    indexCount: number;
+}
+
+export const MeshShape = {
+    Box: 0,
+    Sphere: 1,
+    Plane: 2,
+} as const;
+
+export function createGeometry(shape: number): MeshData {
+    switch (shape) {
+        case MeshShape.Sphere:
+            return createSphere();
+        case MeshShape.Plane:
+            return createPlane();
+        default:
+            return createBox();
+    }
+}
+
+export const MeshColors = {
+    data: new Float32Array(MAX_ENTITIES * 4),
+};
+
+export const MeshSizes = {
+    data: new Float32Array(MAX_ENTITIES * 4),
+};
+
+interface ColorProxy extends Array<number>, FieldAccessor {}
+
+function colorProxy(): ColorProxy {
+    const data = MeshColors.data;
+
+    function getValue(eid: number): number {
+        const offset = eid * 4;
+        const r = Math.round(data[offset] * 255);
+        const g = Math.round(data[offset + 1] * 255);
+        const b = Math.round(data[offset + 2] * 255);
+        return (r << 16) | (g << 8) | b;
+    }
+
+    function setValue(eid: number, value: number): void {
+        const offset = eid * 4;
+        data[offset] = ((value >> 16) & 0xff) / 255;
+        data[offset + 1] = ((value >> 8) & 0xff) / 255;
+        data[offset + 2] = (value & 0xff) / 255;
+        data[offset + 3] = 1;
+    }
+
+    return new Proxy([] as unknown as ColorProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+interface SizeProxy extends Array<number>, FieldAccessor {}
+
+function sizeProxy(component: number): SizeProxy {
+    const data = MeshSizes.data;
+
+    function getValue(eid: number): number {
+        return data[eid * 4 + component];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 4 + component] = value;
+    }
+
+    return new Proxy([] as unknown as SizeProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+export const Mesh: {
+    shape: number[];
+    color: ColorProxy;
+    sizeX: SizeProxy;
+    sizeY: SizeProxy;
+    sizeZ: SizeProxy;
+} = {
+    shape: [],
+    color: colorProxy(),
+    sizeX: sizeProxy(0),
+    sizeY: sizeProxy(1),
+    sizeZ: sizeProxy(2),
+};
+
+setTraits(Mesh, {
+    defaults: () => ({
+        shape: MeshShape.Box,
+        color: 0xffffff,
+        sizeX: 1,
+        sizeY: 1,
+        sizeZ: 1,
+    }),
+    accessors: {
+        color: Mesh.color,
+        sizeX: Mesh.sizeX,
+        sizeY: Mesh.sizeY,
+        sizeZ: Mesh.sizeZ,
+    },
+});
+
+export interface MeshBuffers {
+    vertex: GPUBuffer;
+    index: GPUBuffer;
+    indexCount: number;
+}
+
+export function createMeshBuffers(device: GPUDevice, mesh: MeshData): MeshBuffers {
+    const vertex = device.createBuffer({
+        label: "vertex",
+        size: mesh.vertices.byteLength,
+        usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(vertex, 0, mesh.vertices);
+
+    const index = device.createBuffer({
+        label: "index",
+        size: mesh.indices.byteLength,
+        usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+    });
+    device.queue.writeBuffer(index, 0, mesh.indices);
+
+    return { vertex, index, indexCount: mesh.indexCount };
+}
+
+export function collectByShape(entities: Iterable<number>): Map<number, number[]> {
+    const byShape = new Map<number, number[]>();
+    for (const eid of entities) {
+        const shape = Mesh.shape[eid];
+        let list = byShape.get(shape);
+        if (!list) {
+            list = [];
+            byShape.set(shape, list);
+        }
+        list.push(eid);
+    }
+    return byShape;
+}
+
+export interface ShapeBatch {
+    index: number;
+    buffers: MeshBuffers;
+    entityIds: GPUBuffer;
+    count: number;
+}
+
+export interface BatchState {
+    batches: Map<number, ShapeBatch>;
+    buffers: Map<number, MeshBuffers>;
+}
+
+export function updateBatches(
+    device: GPUDevice,
+    byShape: Map<number, number[]>,
+    state: BatchState,
+    indirect: GPUBuffer
+): void {
+    for (const [shape, entities] of byShape) {
+        let batch = state.batches.get(shape);
+        if (!batch) {
+            let buffers = state.buffers.get(shape);
+            if (!buffers) {
+                buffers = createMeshBuffers(device, createGeometry(shape));
+                state.buffers.set(shape, buffers);
+            }
+            batch = {
+                index: state.batches.size,
+                buffers,
+                entityIds: createEntityIdBuffer(device, MAX_ENTITIES),
+                count: 0,
+            };
+            state.batches.set(shape, batch);
+        }
+
+        device.queue.writeBuffer(batch.entityIds, 0, new Uint32Array(entities));
+        batch.count = entities.length;
+
+        writeIndirect(device, indirect, batch.index, {
+            indexCount: batch.buffers.indexCount,
+            instanceCount: entities.length,
+            firstIndex: 0,
+            baseVertex: 0,
+            firstInstance: 0,
+        });
+    }
+}
+
+export { createBox } from "./box";
+export { createSphere } from "./sphere";
+export { createPlane } from "./plane";

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

@@ -0,0 +1,11 @@
+import type { MeshData } from "./index";
+
+export function createPlane(): MeshData {
+    const vertices = new Float32Array([
+        -0.5, 0, 0.5, 0, 1, 0, 0.5, 0, 0.5, 0, 1, 0, 0.5, 0, -0.5, 0, 1, 0, -0.5, 0, -0.5, 0, 1, 0,
+    ]);
+
+    const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+
+    return { vertices, indices, vertexCount: 4, indexCount: 6 };
+}

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

@@ -0,0 +1,40 @@
+import type { MeshData } from "./index";
+
+export function createSphere(segments = 32, rings = 16): MeshData {
+    const vertices: number[] = [];
+    const indices: number[] = [];
+    const radius = 0.5;
+
+    for (let y = 0; y <= rings; y++) {
+        const v = y / rings;
+        const theta = v * Math.PI;
+
+        for (let x = 0; x <= segments; x++) {
+            const u = x / segments;
+            const phi = u * Math.PI * 2;
+
+            const nx = Math.sin(theta) * Math.cos(phi);
+            const ny = Math.cos(theta);
+            const nz = Math.sin(theta) * Math.sin(phi);
+
+            vertices.push(nx * radius, ny * radius, nz * radius, nx, ny, nz);
+        }
+    }
+
+    for (let y = 0; y < rings; y++) {
+        for (let x = 0; x < segments; x++) {
+            const a = y * (segments + 1) + x;
+            const b = a + segments + 1;
+
+            indices.push(a, a + 1, b);
+            indices.push(a + 1, b + 1, b);
+        }
+    }
+
+    return {
+        vertices: new Float32Array(vertices),
+        indices: new Uint16Array(indices),
+        vertexCount: (rings + 1) * (segments + 1),
+        indexCount: rings * segments * 6,
+    };
+}

package/src/standard/render/postprocess.ts

@@ -0,0 +1,235 @@
+import type { ComputeNode, ExecutionContext } from "../compute";
+
+const shader = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4f,
+    @location(0) uv: vec2f,
+}
+
+@vertex
+fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+    var positions = array<vec2f, 3>(
+        vec2f(-1.0, -1.0),
+        vec2f(3.0, -1.0),
+        vec2f(-1.0, 3.0)
+    );
+
+    let pos = positions[vertexIndex];
+
+    var output: VertexOutput;
+    output.position = vec4f(pos, 0.0, 1.0);
+    output.uv = (pos + 1.0) * 0.5;
+    output.uv.y = 1.0 - output.uv.y;
+    return output;
+}
+
+@group(0) @binding(0) var inputTexture: texture_2d<f32>;
+@group(0) @binding(1) var inputSampler: sampler;
+
+struct Uniforms {
+    exposure: f32,
+    vignetteStrength: f32,
+    vignetteInner: f32,
+    vignetteOuter: f32,
+    texelSizeX: f32,
+    texelSizeY: f32,
+    flags: u32,
+    _pad: u32,
+}
+
+@group(0) @binding(2) var<uniform> uniforms: Uniforms;
+
+const FLAG_TONEMAP: u32 = 1u;
+const FLAG_FXAA: u32 = 2u;
+const FLAG_VIGNETTE: u32 = 4u;
+
+fn aces(x: vec3f) -> vec3f {
+    let a = 2.51;
+    let b = 0.03;
+    let c = 2.43;
+    let d = 0.59;
+    let e = 0.14;
+    return saturate((x * (a * x + b)) / (x * (c * x + d) + e));
+}
+
+fn luma(color: vec3f) -> f32 {
+    return dot(color, vec3f(0.299, 0.587, 0.114));
+}
+
+const FXAA_REDUCE_MIN: f32 = 1.0 / 128.0;
+const FXAA_REDUCE_MUL: f32 = 1.0 / 8.0;
+const FXAA_SPAN_MAX: f32 = 8.0;
+
+fn applyFXAA(uv: vec2f, colorM: vec3f) -> vec3f {
+    let texelSize = vec2f(uniforms.texelSizeX, uniforms.texelSizeY);
+
+    let colorNW = textureSample(inputTexture, inputSampler, uv + vec2f(-1.0, -1.0) * texelSize).rgb;
+    let colorNE = textureSample(inputTexture, inputSampler, uv + vec2f(1.0, -1.0) * texelSize).rgb;
+    let colorSW = textureSample(inputTexture, inputSampler, uv + vec2f(-1.0, 1.0) * texelSize).rgb;
+    let colorSE = textureSample(inputTexture, inputSampler, uv + vec2f(1.0, 1.0) * texelSize).rgb;
+
+    let lumaM = luma(colorM);
+    let lumaNW = luma(colorNW);
+    let lumaNE = luma(colorNE);
+    let lumaSW = luma(colorSW);
+    let lumaSE = luma(colorSE);
+
+    let lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));
+    let lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));
+
+    var dir: vec2f;
+    dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));
+    dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));
+
+    let dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) * 0.25 * FXAA_REDUCE_MUL, FXAA_REDUCE_MIN);
+    let rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);
+    dir = clamp(dir * rcpDirMin, vec2f(-FXAA_SPAN_MAX), vec2f(FXAA_SPAN_MAX)) * texelSize;
+
+    let colorA = 0.5 * (
+        textureSample(inputTexture, inputSampler, uv + dir * (1.0 / 3.0 - 0.5)).rgb +
+        textureSample(inputTexture, inputSampler, uv + dir * (2.0 / 3.0 - 0.5)).rgb
+    );
+
+    let colorB = colorA * 0.5 + 0.25 * (
+        textureSample(inputTexture, inputSampler, uv + dir * -0.5).rgb +
+        textureSample(inputTexture, inputSampler, uv + dir * 0.5).rgb
+    );
+
+    let lumaB = luma(colorB);
+
+    if lumaB < lumaMin || lumaB > lumaMax {
+        return colorA;
+    }
+    return colorB;
+}
+
+fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
+    let center = vec2f(0.5, 0.5);
+    let dist = distance(uv, center);
+    let vignette = 1.0 - smoothstep(uniforms.vignetteInner, uniforms.vignetteOuter, dist) * uniforms.vignetteStrength;
+    return color * vignette;
+}
+
+@fragment
+fn fragmentMain(@location(0) uv: vec2f) -> @location(0) vec4f {
+    var color = textureSample(inputTexture, inputSampler, uv).rgb;
+
+    if (uniforms.flags & FLAG_FXAA) != 0u {
+        color = applyFXAA(uv, color);
+    }
+
+    if (uniforms.flags & FLAG_TONEMAP) != 0u {
+        color = aces(color * uniforms.exposure);
+    }
+
+    if (uniforms.flags & FLAG_VIGNETTE) != 0u {
+        color = applyVignette(color, uv);
+    }
+
+    return vec4f(color, 1.0);
+}
+`;
+
+const FLAG_TONEMAP = 1;
+const FLAG_FXAA = 2;
+const FLAG_VIGNETTE = 4;
+
+export interface PostProcessUniforms {
+    tonemap: boolean;
+    exposure: number;
+    fxaa: boolean;
+    vignetteStrength: number;
+    vignetteInner: number;
+    vignetteOuter: number;
+}
+
+export function createPostProcessNode(uniforms: PostProcessUniforms): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+    let uniformBuffer: GPUBuffer | null = null;
+    let sampler: GPUSampler | null = null;
+
+    return {
+        id: "postprocess",
+        phase: "postprocess",
+        inputs: [{ id: "scene", access: "read" }],
+        outputs: [{ id: "framebuffer", access: "write" }],
+
+        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")!;
+
+            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,
+                });
+            }
+
+            if (!sampler) {
+                sampler = device.createSampler({
+                    magFilter: "linear",
+                    minFilter: "linear",
+                });
+            }
+
+            let flags = 0;
+            if (uniforms.tonemap) flags |= FLAG_TONEMAP;
+            if (uniforms.fxaa) flags |= FLAG_FXAA;
+            if (uniforms.vignetteStrength > 0) flags |= FLAG_VIGNETTE;
+
+            const data = new ArrayBuffer(32);
+            const floats = new Float32Array(data);
+            const uints = new Uint32Array(data);
+            floats[0] = uniforms.exposure;
+            floats[1] = uniforms.vignetteStrength;
+            floats[2] = uniforms.vignetteInner;
+            floats[3] = uniforms.vignetteOuter;
+            floats[4] = 1.0 / width;
+            floats[5] = 1.0 / height;
+            uints[6] = flags;
+
+            device.queue.writeBuffer(uniformBuffer, 0, data);
+
+            const bindGroup = device.createBindGroup({
+                layout: pipeline.getBindGroupLayout(0),
+                entries: [
+                    { binding: 0, resource: sceneView },
+                    { binding: 1, resource: sampler },
+                    { binding: 2, resource: { buffer: uniformBuffer } },
+                ],
+            });
+
+            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();
+        },
+    };
+}

package/src/standard/render/scene.ts

@@ -0,0 +1,116 @@
+export const SCENE_UNIFORM_SIZE = 176; // viewProj (64) + cameraWorld (64) + ambient (16) + sunDir (16) + sunColor (16)
+export const DEPTH_FORMAT: GPUTextureFormat = "depth24plus";
+
+export function createSceneBuffer(device: GPUDevice): GPUBuffer {
+    return device.createBuffer({
+        label: "scene",
+        size: SCENE_UNIFORM_SIZE,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+}
+
+export function ensureRenderTextures(
+    device: GPUDevice,
+    format: GPUTextureFormat,
+    width: number,
+    height: number,
+    textures: Map<string, GPUTexture>,
+    textureViews: Map<string, GPUTextureView>
+): void {
+    const existing = textures.get("scene");
+    if (existing && existing.width === width && existing.height === height) return;
+
+    existing?.destroy();
+    textures.get("depth")?.destroy();
+
+    const scene = device.createTexture({
+        label: "scene",
+        size: { width, height },
+        format,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+    });
+
+    const depth = device.createTexture({
+        label: "depth",
+        size: { width, height },
+        format: DEPTH_FORMAT,
+        usage: GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    textures.set("scene", scene);
+    textureViews.set("scene", scene.createView());
+    textures.set("depth", depth);
+    textureViews.set("depth", depth.createView());
+}
+
+export function perspective(fov: number, aspect: number, near: number, far: number): Float32Array {
+    const f = 1 / Math.tan((fov * Math.PI) / 360);
+    const nf = 1 / (near - far);
+    return new Float32Array([
+        f / aspect,
+        0,
+        0,
+        0,
+        0,
+        f,
+        0,
+        0,
+        0,
+        0,
+        (far + near) * nf,
+        -1,
+        0,
+        0,
+        2 * far * near * nf,
+        0,
+    ]);
+}
+
+export function multiply(a: Float32Array, b: Float32Array): Float32Array {
+    const out = new Float32Array(16);
+    for (let i = 0; i < 4; i++) {
+        for (let j = 0; j < 4; j++) {
+            out[j * 4 + i] =
+                a[i] * b[j * 4] +
+                a[i + 4] * b[j * 4 + 1] +
+                a[i + 8] * b[j * 4 + 2] +
+                a[i + 12] * b[j * 4 + 3];
+        }
+    }
+    return out;
+}
+
+export function invert(m: Float32Array): Float32Array {
+    const out = new Float32Array(16);
+    const r00 = m[0],
+        r01 = m[1],
+        r02 = m[2];
+    const r10 = m[4],
+        r11 = m[5],
+        r12 = m[6];
+    const r20 = m[8],
+        r21 = m[9],
+        r22 = m[10];
+    const tx = m[12],
+        ty = m[13],
+        tz = m[14];
+
+    out[0] = r00;
+    out[1] = r10;
+    out[2] = r20;
+    out[3] = 0;
+    out[4] = r01;
+    out[5] = r11;
+    out[6] = r21;
+    out[7] = 0;
+    out[8] = r02;
+    out[9] = r12;
+    out[10] = r22;
+    out[11] = 0;
+    out[12] = -(r00 * tx + r01 * ty + r02 * tz);
+    out[13] = -(r10 * tx + r11 * ty + r12 * tz);
+    out[14] = -(r20 * tx + r21 * ty + r22 * tz);
+    out[15] = 1;
+
+    return out;
+}