@multiplekex/shallot 0.1.0

package/src/standard/compute/graph.ts

@@ -0,0 +1,165 @@
+import { CycleError } from "../../core";
+
+export type ResourceId = string;
+export type NodeId = string;
+export type Phase = "render" | "overlay" | "postprocess";
+
+const PHASE_ORDER: Phase[] = ["render", "overlay", "postprocess"];
+
+export interface ResourceRef {
+    id: ResourceId;
+    access: "read" | "write";
+}
+
+export interface ExecutionContext {
+    readonly device: GPUDevice;
+    readonly queue: GPUQueue;
+    readonly encoder: GPUCommandEncoder;
+    readonly context: GPUCanvasContext;
+    readonly format: GPUTextureFormat;
+    readonly canvasView: GPUTextureView;
+    getTexture(id: ResourceId): GPUTexture | null;
+    getTextureView(id: ResourceId): GPUTextureView | null;
+    getBuffer(id: ResourceId): GPUBuffer | null;
+}
+
+export interface ComputeNode {
+    readonly id: NodeId;
+    readonly phase?: Phase;
+    readonly inputs: readonly ResourceRef[];
+    readonly outputs: readonly ResourceRef[];
+    readonly execute: (ctx: ExecutionContext) => void;
+}
+
+export interface ExecutionPlan {
+    readonly sorted: readonly ComputeNode[];
+}
+
+function buildEdges(nodes: ComputeNode[]): [ComputeNode, ComputeNode][] {
+    const edges: [ComputeNode, ComputeNode][] = [];
+    const producers = new Map<ResourceId, ComputeNode>();
+
+    for (const node of nodes) {
+        for (const output of node.outputs) {
+            producers.set(output.id, node);
+        }
+    }
+
+    for (const node of nodes) {
+        for (const input of node.inputs) {
+            const producer = producers.get(input.id);
+            if (producer) {
+                edges.push([producer, node]);
+            }
+        }
+    }
+
+    return edges;
+}
+
+function topoSort(nodes: ComputeNode[]): ComputeNode[] {
+    if (nodes.length === 0) return [];
+
+    const edges = buildEdges(nodes);
+    const adjacency = new Map<ComputeNode, ComputeNode[]>();
+    const inDegree = new Map<ComputeNode, number>();
+
+    for (const node of nodes) {
+        adjacency.set(node, []);
+        inDegree.set(node, 0);
+    }
+
+    for (const [from, to] of edges) {
+        adjacency.get(from)!.push(to);
+        inDegree.set(to, inDegree.get(to)! + 1);
+    }
+
+    const queue: ComputeNode[] = [];
+    for (const node of nodes) {
+        if (inDegree.get(node) === 0) {
+            queue.push(node);
+        }
+    }
+
+    const sorted: ComputeNode[] = [];
+    let i = 0;
+
+    while (i < queue.length) {
+        const node = queue[i++];
+        sorted.push(node);
+
+        for (const dep of adjacency.get(node)!) {
+            const newDegree = inDegree.get(dep)! - 1;
+            inDegree.set(dep, newDegree);
+            if (newDegree === 0) {
+                queue.push(dep);
+            }
+        }
+    }
+
+    if (sorted.length !== nodes.length) {
+        throw new CycleError();
+    }
+
+    return sorted;
+}
+
+function compile(nodes: ComputeNode[]): ExecutionPlan {
+    if (nodes.length === 0) {
+        return { sorted: [] };
+    }
+
+    const byPhase = new Map<Phase, ComputeNode[]>();
+    for (const phase of PHASE_ORDER) {
+        byPhase.set(phase, []);
+    }
+
+    for (const node of nodes) {
+        const phase = node.phase ?? "render";
+        byPhase.get(phase)!.push(node);
+    }
+
+    const sorted: ComputeNode[] = [];
+    for (const phase of PHASE_ORDER) {
+        const phaseNodes = byPhase.get(phase)!;
+        sorted.push(...topoSort(phaseNodes));
+    }
+
+    return { sorted };
+}
+
+export class ComputeGraph {
+    readonly nodes = new Map<NodeId, ComputeNode>();
+    private _plan: ExecutionPlan | null = null;
+
+    add(node: ComputeNode): void {
+        if (this.nodes.has(node.id)) {
+            throw new Error(`Node '${node.id}' already exists`);
+        }
+        this.nodes.set(node.id, node);
+        this._plan = null;
+    }
+
+    set(id: NodeId, node: ComputeNode): void {
+        if (node.id !== id) {
+            throw new Error(`Node id '${node.id}' must match slot id '${id}'`);
+        }
+        this.nodes.set(id, node);
+        this._plan = null;
+    }
+
+    remove(id: NodeId): boolean {
+        const removed = this.nodes.delete(id);
+        if (removed) {
+            this._plan = null;
+        }
+        return removed;
+    }
+
+    compile(): ExecutionPlan {
+        if (!this._plan) {
+            this._plan = compile(Array.from(this.nodes.values()));
+        }
+        return this._plan;
+    }
+}

package/src/standard/compute/index.ts

@@ -0,0 +1,116 @@
+import { resource, type Plugin, type State, type System } from "../../core";
+import { ComputeGraph, type ExecutionContext, type ResourceId } from "./graph";
+
+export * from "./graph";
+
+export function createEntityIdBuffer(device: GPUDevice, maxInstances: number): GPUBuffer {
+    return device.createBuffer({
+        label: "entityIds",
+        size: maxInstances * 4,
+        usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC,
+    });
+}
+
+export async function requestGPU(): Promise<GPUDevice> {
+    if (!navigator.gpu) {
+        throw new Error("WebGPU not supported");
+    }
+
+    const adapter = await navigator.gpu.requestAdapter();
+    if (!adapter) {
+        throw new Error("No GPU adapter found");
+    }
+
+    return adapter.requestDevice();
+}
+
+export interface ComputeResources {
+    textures: Map<ResourceId, GPUTexture>;
+    textureViews: Map<ResourceId, GPUTextureView>;
+    buffers: Map<ResourceId, GPUBuffer>;
+}
+
+export interface ComputeState {
+    readonly device: GPUDevice;
+    readonly context: GPUCanvasContext;
+    readonly format: GPUTextureFormat;
+    readonly graph: ComputeGraph;
+    readonly resources: ComputeResources;
+}
+
+export const Compute = resource<ComputeState>("compute");
+
+export const ComputeSystem: System = {
+    group: "draw",
+
+    update(state: State) {
+        const compute = Compute.from(state);
+        if (!compute) return;
+
+        const { device, context, format, graph, resources } = compute;
+        const plan = graph.compile();
+
+        if (plan.sorted.length === 0) return;
+
+        const canvasTexture = context.getCurrentTexture();
+        const canvasView = canvasTexture.createView();
+        const encoder = device.createCommandEncoder();
+
+        const ctx: ExecutionContext = {
+            device,
+            queue: device.queue,
+            encoder,
+            context,
+            format,
+            canvasView,
+            getTexture(id: ResourceId) {
+                return resources.textures.get(id) ?? null;
+            },
+            getTextureView(id: ResourceId) {
+                return resources.textureViews.get(id) ?? null;
+            },
+            getBuffer(id: ResourceId) {
+                return resources.buffers.get(id) ?? null;
+            },
+        };
+
+        for (const node of plan.sorted) {
+            node.execute(ctx);
+        }
+
+        device.queue.submit([encoder.finish()]);
+    },
+};
+
+export const ComputePlugin: Plugin = {
+    systems: [ComputeSystem],
+
+    async initialize(state: State) {
+        if (!state.canvas) {
+            throw new Error("ComputePlugin requires a canvas");
+        }
+
+        const device = await requestGPU();
+
+        const context = state.canvas.getContext("webgpu");
+        if (!context) {
+            throw new Error("Failed to get WebGPU context");
+        }
+
+        const format = navigator.gpu.getPreferredCanvasFormat();
+        context.configure({
+            device,
+            format,
+            alphaMode: "premultiplied",
+        });
+
+        const graph = new ComputeGraph();
+        const resources: ComputeResources = {
+            textures: new Map(),
+            textureViews: new Map(),
+            buffers: new Map(),
+        };
+
+        state.setResource(Compute, { device, context, format, graph, resources });
+    },
+};

package/src/standard/defaults.ts

@@ -0,0 +1,17 @@
+import type { Plugin } from "../core/types";
+import { StateBuilder } from "../core/builder";
+import { TransformsPlugin } from "./transforms";
+import { InputPlugin } from "./input";
+import { canvasLoading } from "./loading";
+import { ComputePlugin } from "./compute";
+import { RenderPlugin } from "./render";
+
+export const DEFAULT_PLUGINS: readonly Plugin[] = [
+    TransformsPlugin,
+    InputPlugin,
+    ComputePlugin,
+    RenderPlugin,
+];
+
+StateBuilder.defaultPlugins = DEFAULT_PLUGINS;
+StateBuilder.loading = canvasLoading;

package/src/standard/index.ts

@@ -0,0 +1,7 @@
+export * from "./compute";
+export * from "./input";
+export * from "./tween";
+export * from "./transforms";
+export * from "./render";
+export * from "./loading";
+export * from "./defaults";

package/src/standard/input/index.ts

@@ -0,0 +1,142 @@
+import {
+    resource,
+    type State,
+    type System,
+    type Plugin,
+    type InputState,
+    type MouseState,
+} from "../../core";
+
+export const Input = resource<InputState>("input");
+
+const keys = new Set<string>();
+const keysPressed = new Set<string>();
+const keysReleased = new Set<string>();
+
+const mouse: MouseState = {
+    deltaX: 0,
+    deltaY: 0,
+    scrollDelta: 0,
+    left: false,
+    right: false,
+    middle: false,
+};
+
+const inputState: InputState = {
+    mouse,
+    isKeyDown: (code: string) => keys.has(code),
+    isKeyPressed: (code: string) => keysPressed.has(code),
+    isKeyReleased: (code: string) => keysReleased.has(code),
+};
+
+let canvas: HTMLCanvasElement | null = null;
+
+function handleKeyDown(e: KeyboardEvent): void {
+    if (!keys.has(e.code)) {
+        keysPressed.add(e.code);
+    }
+    keys.add(e.code);
+}
+
+function handleKeyUp(e: KeyboardEvent): void {
+    keys.delete(e.code);
+    keysReleased.add(e.code);
+}
+
+function handleMouseDown(e: MouseEvent): void {
+    if (e.target !== canvas) return;
+    if (e.button === 0) mouse.left = true;
+    if (e.button === 1) mouse.middle = true;
+    if (e.button === 2) mouse.right = true;
+}
+
+function handleMouseUp(e: MouseEvent): void {
+    if (e.button === 0) mouse.left = false;
+    if (e.button === 1) mouse.middle = false;
+    if (e.button === 2) mouse.right = false;
+}
+
+function handleMouseMove(e: MouseEvent): void {
+    mouse.deltaX += e.movementX;
+    mouse.deltaY += e.movementY;
+}
+
+function handleWheel(e: WheelEvent): void {
+    if (e.target !== canvas) return;
+    mouse.scrollDelta += e.deltaY;
+    e.preventDefault();
+}
+
+function handleContextMenu(e: Event): void {
+    if (e.target === canvas) {
+        e.preventDefault();
+    }
+}
+
+function resetFrameState(): void {
+    keysPressed.clear();
+    keysReleased.clear();
+    mouse.deltaX = 0;
+    mouse.deltaY = 0;
+    mouse.scrollDelta = 0;
+}
+
+function clearAllState(): void {
+    keys.clear();
+    keysPressed.clear();
+    keysReleased.clear();
+    mouse.deltaX = 0;
+    mouse.deltaY = 0;
+    mouse.scrollDelta = 0;
+    mouse.left = false;
+    mouse.right = false;
+    mouse.middle = false;
+}
+
+export const InputSystem: System = {
+    group: "simulation",
+
+    setup(state: State) {
+        if (!state.canvas) return;
+        canvas = state.canvas;
+
+        window.addEventListener("keydown", handleKeyDown);
+        window.addEventListener("keyup", handleKeyUp);
+        canvas.addEventListener("mousedown", handleMouseDown);
+        window.addEventListener("mouseup", handleMouseUp);
+        canvas.addEventListener("mousemove", handleMouseMove);
+        canvas.addEventListener("wheel", handleWheel, { passive: false });
+        canvas.addEventListener("contextmenu", handleContextMenu);
+
+        state.setResource(Input, inputState);
+    },
+
+    dispose(state: State) {
+        if (canvas) {
+            window.removeEventListener("keydown", handleKeyDown);
+            window.removeEventListener("keyup", handleKeyUp);
+            canvas.removeEventListener("mousedown", handleMouseDown);
+            window.removeEventListener("mouseup", handleMouseUp);
+            canvas.removeEventListener("mousemove", handleMouseMove);
+            canvas.removeEventListener("wheel", handleWheel);
+            canvas.removeEventListener("contextmenu", handleContextMenu);
+            canvas = null;
+        }
+
+        clearAllState();
+        state.deleteResource(Input);
+    },
+};
+
+const InputResetSystem: System = {
+    group: "draw",
+    last: true,
+
+    update() {
+        resetFrameState();
+    },
+};
+
+export const InputPlugin: Plugin = {
+    systems: [InputSystem, InputResetSystem],
+};

package/src/standard/loading/index.ts

@@ -0,0 +1,136 @@
+import type { Loading } from "../../core";
+
+interface Theme {
+    bg: string;
+    track: string;
+    bar: string;
+}
+
+const dark: Theme = { bg: "#1a1a1a", track: "#333", bar: "#E8A86B" };
+const light: Theme = { bg: "#f5f5f5", track: "#ddd", bar: "#B87654" };
+
+const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
+  <defs>
+    <radialGradient id="baseGradient" cx="35%" cy="30%" r="70%" fx="25%" fy="20%">
+      <stop offset="0%" stop-color="#F5D4B8"/>
+      <stop offset="45%" stop-color="#E8A86B"/>
+      <stop offset="100%" stop-color="#B87654"/>
+    </radialGradient>
+  </defs>
+  <g transform="rotate(35 40.0 40.0)">
+    <path d="M40.0,2 C44.0,10 66.0,28 66.0,46 C66.0,60 48.0,70 40.0,78 C32.0,70 14.0,60 14.0,46 C14.0,28 36.0,10 40.0,2 Z" fill="url(#baseGradient)"/>
+    <path d="M40.0,6 C37.0,14 22.0,28 20.0,44 C20.0,52 28.0,62 36.0,70 C34.0,58 26.0,46 26.0,38 C26.0,26 38.0,12 40.0,6 Z" fill="#B87654" opacity="0.45"/>
+    <path d="M40.0,6 C43.0,14 58.0,28 60.0,44 C60.0,52 52.0,62 44.0,70 C46.0,58 54.0,46 54.0,38 C54.0,26 42.0,12 40.0,6 Z" fill="#B87654" opacity="0.35"/>
+    <path d="M40.0,8 C40.0,20 40.0,50 40.0,72" stroke="#B87654" stroke-width="1" stroke-opacity="0.4" fill="none" stroke-linecap="round"/>
+    <path d="M40.0,78 C48.0,70 66.0,60 66.0,46 C61.0,58 44.0,70 40.0,73 Z" fill="#B87654"/>
+    <path d="M40.0,2 C36.0,10 14.0,28 14.0,46 C19.0,30 41.0,8 40.0,7 Z" fill="#F5D4B8" opacity="0.7"/>
+    <path d="M40.0,2 C44.0,10 66.0,28 66.0,46 C66.0,60 48.0,70 40.0,78 C32.0,70 14.0,60 14.0,46 C14.0,28 36.0,10 40.0,2 Z" fill="none" stroke="#6B4230" stroke-width="2"/>
+  </g>
+</svg>`;
+
+function createOverlay(canvas: HTMLCanvasElement, bg: string): HTMLDivElement {
+    const overlay = document.createElement("div");
+    overlay.style.cssText = `
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: ${bg};
+        z-index: 1000;
+    `;
+
+    const parent = canvas.parentElement;
+    if (parent) {
+        if (getComputedStyle(parent).position === "static") {
+            parent.style.position = "relative";
+        }
+        parent.appendChild(overlay);
+    }
+
+    return overlay;
+}
+
+function createProgressBar(theme: Theme): { track: HTMLDivElement; bar: HTMLDivElement } {
+    const track = document.createElement("div");
+    track.style.cssText = `
+        width: 200px;
+        height: 4px;
+        background: ${theme.track};
+        border-radius: 2px;
+        overflow: hidden;
+    `;
+
+    const bar = document.createElement("div");
+    bar.style.cssText = `
+        width: 0%;
+        height: 100%;
+        background: ${theme.bar};
+        transition: width 0.15s ease-out;
+    `;
+    track.appendChild(bar);
+
+    return { track, bar };
+}
+
+function shallotLoading(canvas: HTMLCanvasElement, theme: Theme): Loading {
+    let overlay: HTMLDivElement | null = null;
+    let bar: HTMLDivElement | null = null;
+
+    return {
+        show() {
+            overlay = createOverlay(canvas, theme.bg);
+
+            const logo = document.createElement("div");
+            logo.innerHTML = LOGO_SVG;
+            logo.style.cssText = "width: 64px; height: 64px; margin-bottom: 24px;";
+            overlay.appendChild(logo);
+
+            const progressBar = createProgressBar(theme);
+            bar = progressBar.bar;
+            overlay.appendChild(progressBar.track);
+
+            return () => {
+                overlay?.remove();
+                overlay = null;
+                bar = null;
+            };
+        },
+
+        update(progress) {
+            if (bar) bar.style.width = `${progress * 100}%`;
+        },
+    };
+}
+
+function minimalLoading(canvas: HTMLCanvasElement, theme: Theme): Loading {
+    let overlay: HTMLDivElement | null = null;
+    let bar: HTMLDivElement | null = null;
+
+    return {
+        show() {
+            overlay = createOverlay(canvas, theme.bg);
+            const progressBar = createProgressBar(theme);
+            bar = progressBar.bar;
+            overlay.appendChild(progressBar.track);
+
+            return () => {
+                overlay?.remove();
+                overlay = null;
+                bar = null;
+            };
+        },
+
+        update(progress) {
+            if (bar) bar.style.width = `${progress * 100}%`;
+        },
+    };
+}
+
+export const shallotDark = (canvas: HTMLCanvasElement): Loading => shallotLoading(canvas, dark);
+export const shallotLight = (canvas: HTMLCanvasElement): Loading => shallotLoading(canvas, light);
+export const minimalDark = (canvas: HTMLCanvasElement): Loading => minimalLoading(canvas, dark);
+export const minimalLight = (canvas: HTMLCanvasElement): Loading => minimalLoading(canvas, light);
+
+export { shallotDark as canvasLoading };

package/src/standard/render/camera.ts

@@ -0,0 +1,87 @@
+import { setTraits } from "../../core/component";
+import { WorldTransform } from "../transforms";
+import { clearColor } from "./forward";
+import { perspective, multiply, invert } from "./scene";
+
+export const RenderMode = {
+    Raster: 0,
+    Raytracing: 1,
+} as const;
+
+export const DebugMode = {
+    Color: 0,
+    Depth: 1,
+    Normal: 2,
+    Material: 3,
+    Hit: 4,
+} as const;
+
+export const Camera = {
+    fov: [] as number[],
+    near: [] as number[],
+    far: [] as number[],
+    active: [] as number[],
+    clearColor: [] as number[],
+    renderMode: [] as number[],
+    debugMode: [] as number[],
+};
+
+setTraits(Camera, {
+    defaults: () => ({
+        fov: 60,
+        near: 0.1,
+        far: 1000,
+        active: 1,
+        clearColor: 0x1a1a1a,
+        renderMode: RenderMode.Raster,
+        debugMode: DebugMode.Color,
+    }),
+});
+
+export const Tonemap = {
+    exposure: [] as number[],
+};
+
+setTraits(Tonemap, {
+    defaults: () => ({ exposure: 1.0 }),
+});
+
+export const FXAA = {};
+
+export const Vignette = {
+    strength: [] as number[],
+    inner: [] as number[],
+    outer: [] as number[],
+};
+
+setTraits(Vignette, {
+    defaults: () => ({ strength: 0.5, inner: 0.4, outer: 0.8 }),
+});
+
+export function unpackColor(packed: number): { r: number; g: number; b: number } {
+    return {
+        r: ((packed >> 16) & 0xff) / 255,
+        g: ((packed >> 8) & 0xff) / 255,
+        b: (packed & 0xff) / 255,
+    };
+}
+
+export function uploadCamera(
+    device: GPUDevice,
+    buffer: GPUBuffer,
+    eid: number,
+    aspect: number
+): void {
+    const color = unpackColor(Camera.clearColor[eid]);
+    clearColor.r = color.r;
+    clearColor.g = color.g;
+    clearColor.b = color.b;
+
+    const proj = perspective(Camera.fov[eid], aspect, Camera.near[eid], Camera.far[eid]);
+    const world = WorldTransform.data.subarray(eid * 16, eid * 16 + 16);
+    const view = invert(world);
+    const viewProj = multiply(proj, view);
+
+    device.queue.writeBuffer(buffer, 0, viewProj as Float32Array<ArrayBuffer>);
+    device.queue.writeBuffer(buffer, 64, world);
+}