@multiplekex/shallot 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.1.4",
+    "version": "0.1.5",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -13,7 +13,7 @@
         "rust/transforms/pkg"
     ],
     "scripts": {
-        "build:wasm": "./rust/transforms/build.sh",
+        "build:wasm": "bash ./rust/transforms/build.sh",
         "test": "bun test"
     },
     "dependencies": {

package/src/core/builder.ts

@@ -2,6 +2,7 @@ import { State } from "./state";
 import type { Plugin, Loading } from "./types";
 import { toposort, type System } from "./scheduler";
 import { registerComponent } from "./component";
+import { initRuntime } from "./runtime";
 
 export class StateBuilder {
     static defaultPlugins: readonly Plugin[] = [];
@@ -118,7 +119,6 @@ export class StateBuilder {
         }
 
         if (this._scenes.length > 0) {
-            const { initRuntime } = await import("./runtime");
             const { loadSceneFile } = await import("./xml");
             const runtime = await initRuntime();
             for (const scenePath of this._scenes) {

package/src/extras/orbit/index.ts

@@ -1,10 +1,16 @@
 import { setTraits } from "../../core/component";
-import { clamp, lookAt, type State, type System, type Plugin } from "../../core";
+import { clamp, lookAt, type State, type System, type Plugin, type MouseState } from "../../core";
 import { Transform } from "../../standard/transforms";
 import { Input, InputPlugin } from "../../standard/input";
 
 const Tau = Math.PI * 2;
 
+export const OrbitButton = {
+    Left: 0,
+    Middle: 1,
+    Right: 2,
+} as const;
+
 export const Orbit = {
     target: [] as number[],
     yaw: [] as number[],
@@ -20,6 +26,7 @@ export const Orbit = {
     smoothness: [] as number[],
     sensitivity: [] as number[],
     zoomSpeed: [] as number[],
+    button: [] as number[],
 };
 
 setTraits(Orbit, {
@@ -38,6 +45,7 @@ setTraits(Orbit, {
         smoothness: 0.3,
         sensitivity: 0.005,
         zoomSpeed: 0.025,
+        button: OrbitButton.Right,
     }),
 });
 
@@ -54,6 +62,12 @@ function angleDiff(from: number, to: number): number {
     return diff > Math.PI ? diff - Tau : diff;
 }
 
+function isOrbitButton(mouse: Readonly<MouseState>, button: number): boolean {
+    if (button === OrbitButton.Left) return mouse.left;
+    if (button === OrbitButton.Middle) return mouse.middle;
+    return mouse.right;
+}
+
 export const OrbitSystem: System = {
     group: "simulation",
 
@@ -70,7 +84,7 @@ export const OrbitSystem: System = {
             const maxDistance = Orbit.maxDistance[eid];
             const smoothness = Orbit.smoothness[eid];
 
-            if (input?.mouse.right) {
+            if (input && isOrbitButton(input.mouse, Orbit.button[eid])) {
                 Orbit.targetYaw[eid] -= input.mouse.deltaX * sensitivity;
                 Orbit.targetPitch[eid] = clamp(
                     Orbit.targetPitch[eid] + input.mouse.deltaY * sensitivity,

package/src/standard/compute/graph.ts

@@ -1,4 +1,5 @@
 import { CycleError } from "../../core";
+import { inspect as inspectGraph, type GraphInspection } from "./inspect";
 
 export type ResourceId = string;
 export type NodeId = string;
@@ -162,4 +163,8 @@ export class ComputeGraph {
         }
         return this._plan;
     }
+
+    inspect(): GraphInspection {
+        return inspectGraph(Array.from(this.nodes.values()));
+    }
 }

package/src/standard/compute/index.ts

@@ -2,6 +2,9 @@ import { resource, type Plugin, type State, type System } from "../../core";
 import { ComputeGraph, type ExecutionContext, type ResourceId } from "./graph";
 
 export * from "./graph";
+export * from "./inspect";
+export * from "./readback";
+export * from "./timing";
 
 const MIN_CANVAS_SIZE = 1;
 

package/src/standard/compute/inspect.ts

@@ -0,0 +1,205 @@
+import type { ComputeNode, NodeId, Phase, ResourceId, ResourceRef } from "./graph";
+
+export interface NodeInfo {
+    readonly id: NodeId;
+    readonly phase: Phase;
+    readonly inputs: readonly ResourceRef[];
+    readonly outputs: readonly ResourceRef[];
+}
+
+export interface EdgeInfo {
+    readonly from: NodeId;
+    readonly to: NodeId;
+    readonly resource: ResourceId;
+}
+
+export interface GraphInspection {
+    readonly nodes: readonly NodeInfo[];
+    readonly edges: readonly EdgeInfo[];
+    readonly executionOrder: readonly NodeId[];
+    readonly byPhase: ReadonlyMap<Phase, readonly NodeId[]>;
+}
+
+const PHASE_ORDER: Phase[] = ["render", "overlay", "postprocess"];
+
+export function inspect(nodes: readonly ComputeNode[]): GraphInspection {
+    const nodeInfos: NodeInfo[] = nodes.map((n) => ({
+        id: n.id,
+        phase: n.phase ?? "render",
+        inputs: n.inputs,
+        outputs: n.outputs,
+    }));
+
+    const producers = new Map<ResourceId, NodeId>();
+    for (const n of nodes) {
+        for (const out of n.outputs) {
+            producers.set(out.id, n.id);
+        }
+    }
+
+    const edges: EdgeInfo[] = [];
+    for (const n of nodes) {
+        for (const inp of n.inputs) {
+            const producer = producers.get(inp.id);
+            if (producer) {
+                edges.push({
+                    from: producer,
+                    to: n.id,
+                    resource: inp.id,
+                });
+            }
+        }
+    }
+
+    const byPhase = new Map<Phase, NodeId[]>();
+    for (const phase of PHASE_ORDER) {
+        byPhase.set(phase, []);
+    }
+    for (const n of nodeInfos) {
+        byPhase.get(n.phase)!.push(n.id);
+    }
+
+    const executionOrder = topoSortIds(nodes);
+
+    return { nodes: nodeInfos, edges, executionOrder, byPhase };
+}
+
+function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
+    if (nodes.length === 0) return [];
+
+    const producers = new Map<ResourceId, ComputeNode>();
+    for (const node of nodes) {
+        for (const output of node.outputs) {
+            producers.set(output.id, node);
+        }
+    }
+
+    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 node of nodes) {
+        for (const input of node.inputs) {
+            const producer = producers.get(input.id);
+            if (producer) {
+                adjacency.get(producer)!.push(node);
+                inDegree.set(node, inDegree.get(node)! + 1);
+            }
+        }
+    }
+
+    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: NodeId[] = [];
+    for (const phase of PHASE_ORDER) {
+        const phaseNodes = byPhase.get(phase)!;
+        const phaseInDegree = new Map<ComputeNode, number>();
+
+        for (const node of phaseNodes) {
+            let degree = 0;
+            for (const input of node.inputs) {
+                const producer = producers.get(input.id);
+                if (producer && phaseNodes.includes(producer)) {
+                    degree++;
+                }
+            }
+            phaseInDegree.set(node, degree);
+        }
+
+        const queue: ComputeNode[] = [];
+        for (const node of phaseNodes) {
+            if (phaseInDegree.get(node) === 0) {
+                queue.push(node);
+            }
+        }
+
+        let i = 0;
+        while (i < queue.length) {
+            const node = queue[i++];
+            sorted.push(node.id);
+
+            for (const dep of phaseNodes) {
+                for (const input of dep.inputs) {
+                    const producer = producers.get(input.id);
+                    if (producer === node) {
+                        const newDegree = phaseInDegree.get(dep)! - 1;
+                        phaseInDegree.set(dep, newDegree);
+                        if (newDegree === 0) {
+                            queue.push(dep);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    return sorted;
+}
+
+export function formatGraph(info: GraphInspection): string {
+    const lines: string[] = [];
+    lines.push("=== Compute Graph ===");
+    lines.push("");
+
+    const nodeMap = new Map(info.nodes.map((n) => [n.id, n]));
+
+    for (const phase of PHASE_ORDER) {
+        const nodeIds = info.byPhase.get(phase) ?? [];
+        if (nodeIds.length === 0) continue;
+
+        lines.push(`[${phase}]`);
+        for (const id of nodeIds) {
+            const node = nodeMap.get(id)!;
+            const ins = node.inputs.map((r) => r.id).join(", ") || "none";
+            const outs = node.outputs.map((r) => r.id).join(", ") || "none";
+            lines.push(`  ${id}: ${ins} -> ${outs}`);
+        }
+        lines.push("");
+    }
+
+    lines.push("Execution Order:");
+    info.executionOrder.forEach((id, i) => {
+        lines.push(`  ${i + 1}. ${id}`);
+    });
+
+    return lines.join("\n");
+}
+
+export function toDot(info: GraphInspection): string {
+    const lines: string[] = ["digraph ComputeGraph {"];
+    lines.push("  rankdir=LR;");
+    lines.push("  node [shape=box];");
+    lines.push("");
+
+    for (const phase of PHASE_ORDER) {
+        const nodeIds = info.byPhase.get(phase) ?? [];
+        if (nodeIds.length === 0) continue;
+
+        lines.push(`  subgraph cluster_${phase} {`);
+        lines.push(`    label="${phase}";`);
+        for (const id of nodeIds) {
+            lines.push(`    "${id}";`);
+        }
+        lines.push("  }");
+    }
+
+    lines.push("");
+
+    for (const edge of info.edges) {
+        lines.push(`  "${edge.from}" -> "${edge.to}" [label="${edge.resource}"];`);
+    }
+
+    lines.push("}");
+    return lines.join("\n");
+}

package/src/standard/compute/readback.ts

@@ -0,0 +1,88 @@
+export async function readBuffer(
+    device: GPUDevice,
+    source: GPUBuffer,
+    size: number
+): Promise<ArrayBuffer> {
+    const staging = device.createBuffer({
+        label: "staging-readback",
+        size,
+        usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+    });
+
+    const encoder = device.createCommandEncoder();
+    encoder.copyBufferToBuffer(source, 0, staging, 0, size);
+    device.queue.submit([encoder.finish()]);
+
+    await staging.mapAsync(GPUMapMode.READ);
+    const data = staging.getMappedRange().slice(0);
+    staging.unmap();
+    staging.destroy();
+
+    return data;
+}
+
+export async function readFloat32(
+    device: GPUDevice,
+    buffer: GPUBuffer,
+    count: number
+): Promise<Float32Array> {
+    const data = await readBuffer(device, buffer, count * 4);
+    return new Float32Array(data);
+}
+
+export async function readUint32(
+    device: GPUDevice,
+    buffer: GPUBuffer,
+    count: number
+): Promise<Uint32Array> {
+    const data = await readBuffer(device, buffer, count * 4);
+    return new Uint32Array(data);
+}
+
+function nextPowerOf2(n: number): number {
+    const min = 256;
+    return Math.pow(2, Math.ceil(Math.log2(Math.max(n, min))));
+}
+
+export class StagingPool {
+    private readonly pool = new Map<number, GPUBuffer[]>();
+    private readonly device: GPUDevice;
+
+    constructor(device: GPUDevice) {
+        this.device = device;
+    }
+
+    acquire(size: number): GPUBuffer {
+        const bucketSize = nextPowerOf2(size);
+        const bucket = this.pool.get(bucketSize);
+
+        if (bucket && bucket.length > 0) {
+            return bucket.pop()!;
+        }
+
+        return this.device.createBuffer({
+            label: `staging-pool-${bucketSize}`,
+            size: bucketSize,
+            usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+        });
+    }
+
+    release(buffer: GPUBuffer): void {
+        const bucketSize = buffer.size;
+        let bucket = this.pool.get(bucketSize);
+        if (!bucket) {
+            bucket = [];
+            this.pool.set(bucketSize, bucket);
+        }
+        bucket.push(buffer);
+    }
+
+    dispose(): void {
+        for (const bucket of this.pool.values()) {
+            for (const buffer of bucket) {
+                buffer.destroy();
+            }
+        }
+        this.pool.clear();
+    }
+}

package/src/standard/compute/timing.ts

@@ -0,0 +1,139 @@
+import type { NodeId } from "./graph";
+
+export interface NodeTiming {
+    readonly nodeId: NodeId;
+    readonly cpuMs: number;
+    readonly gpuNs?: number;
+}
+
+export interface FrameTiming {
+    readonly frameIndex: number;
+    readonly nodes: readonly NodeTiming[];
+    readonly totalCpuMs: number;
+    readonly totalGpuNs?: number;
+}
+
+export interface TimingConfig {
+    readonly enabled: boolean;
+    readonly gpuTimestamps: boolean;
+    readonly historySize: number;
+}
+
+export interface TimingState {
+    readonly config: TimingConfig;
+    readonly history: FrameTiming[];
+    readonly querySet?: GPUQuerySet;
+    readonly resolveBuffer?: GPUBuffer;
+    readonly readBuffer?: GPUBuffer;
+}
+
+export function supportsTimestampQuery(device: GPUDevice): boolean {
+    return device.features.has("timestamp-query");
+}
+
+export function createTimingState(
+    device: GPUDevice,
+    maxNodes: number,
+    historySize = 60
+): TimingState {
+    const gpuTimestamps = supportsTimestampQuery(device);
+
+    let querySet: GPUQuerySet | undefined;
+    let resolveBuffer: GPUBuffer | undefined;
+    let readBuffer: GPUBuffer | undefined;
+
+    if (gpuTimestamps) {
+        const queryCount = maxNodes * 2;
+        querySet = device.createQuerySet({
+            label: "timing-queries",
+            type: "timestamp",
+            count: queryCount,
+        });
+
+        resolveBuffer = device.createBuffer({
+            label: "timing-resolve",
+            size: queryCount * 8,
+            usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC,
+        });
+
+        readBuffer = device.createBuffer({
+            label: "timing-read",
+            size: queryCount * 8,
+            usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST,
+        });
+    }
+
+    return {
+        config: { enabled: true, gpuTimestamps, historySize },
+        history: [],
+        querySet,
+        resolveBuffer,
+        readBuffer,
+    };
+}
+
+export async function readTimestamps(
+    device: GPUDevice,
+    timing: TimingState,
+    nodeCount: number
+): Promise<BigUint64Array | null> {
+    if (!timing.querySet || !timing.resolveBuffer || !timing.readBuffer) {
+        return null;
+    }
+
+    const encoder = device.createCommandEncoder();
+    encoder.resolveQuerySet(timing.querySet, 0, nodeCount * 2, timing.resolveBuffer, 0);
+    encoder.copyBufferToBuffer(timing.resolveBuffer, 0, timing.readBuffer, 0, nodeCount * 2 * 8);
+    device.queue.submit([encoder.finish()]);
+
+    await timing.readBuffer.mapAsync(GPUMapMode.READ);
+    const data = new BigUint64Array(timing.readBuffer.getMappedRange().slice(0));
+    timing.readBuffer.unmap();
+
+    return data;
+}
+
+export function disposeTimingState(timing: TimingState): void {
+    timing.querySet?.destroy();
+    timing.resolveBuffer?.destroy();
+    timing.readBuffer?.destroy();
+}
+
+export interface TimingCollector {
+    readonly nodeTimings: Map<NodeId, { start: number; end: number }>;
+    beginNode(nodeId: NodeId): void;
+    endNode(nodeId: NodeId): void;
+    finish(frameIndex: number): FrameTiming;
+}
+
+export function createTimingCollector(): TimingCollector {
+    const nodeTimings = new Map<NodeId, { start: number; end: number }>();
+
+    return {
+        nodeTimings,
+
+        beginNode(nodeId: NodeId): void {
+            nodeTimings.set(nodeId, { start: performance.now(), end: 0 });
+        },
+
+        endNode(nodeId: NodeId): void {
+            const timing = nodeTimings.get(nodeId);
+            if (timing) {
+                timing.end = performance.now();
+            }
+        },
+
+        finish(frameIndex: number): FrameTiming {
+            const nodes: NodeTiming[] = [];
+            let totalCpuMs = 0;
+
+            for (const [nodeId, timing] of nodeTimings) {
+                const cpuMs = timing.end - timing.start;
+                totalCpuMs += cpuMs;
+                nodes.push({ nodeId, cpuMs });
+            }
+
+            return { frameIndex, nodes, totalCpuMs };
+        },
+    };
+}

package/src/standard/render/camera.ts

@@ -1,7 +1,7 @@
 import { setTraits } from "../../core/component";
 import { WorldTransform } from "../transforms";
 import { clearColor } from "./forward";
-import { perspective, multiply, invert } from "./scene";
+import { perspective, orthographic, multiply, invert } from "./scene";
 
 export const RenderMode = {
     Raster: 0,
@@ -16,6 +16,11 @@ export const DebugMode = {
     Hit: 4,
 } as const;
 
+export const CameraMode = {
+    Perspective: 0,
+    Orthographic: 1,
+} as const;
+
 export const Camera = {
     fov: [] as number[],
     near: [] as number[],
@@ -24,6 +29,8 @@ export const Camera = {
     clearColor: [] as number[],
     renderMode: [] as number[],
     debugMode: [] as number[],
+    mode: [] as number[],
+    size: [] as number[],
 };
 
 setTraits(Camera, {
@@ -35,6 +42,8 @@ setTraits(Camera, {
         clearColor: 0x1a1a1a,
         renderMode: RenderMode.Raster,
         debugMode: DebugMode.Color,
+        mode: CameraMode.Perspective,
+        size: 5,
     }),
 });
 
@@ -77,7 +86,10 @@ export function uploadCamera(
     clearColor.g = color.g;
     clearColor.b = color.b;
 
-    const proj = perspective(Camera.fov[eid], aspect, Camera.near[eid], Camera.far[eid]);
+    const proj =
+        Camera.mode[eid] === CameraMode.Orthographic
+            ? orthographic(Camera.size[eid], aspect, Camera.near[eid], Camera.far[eid])
+            : 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);

package/src/standard/render/scene.ts

@@ -66,6 +66,35 @@ export function perspective(fov: number, aspect: number, near: number, far: numb
     ]);
 }
 
+export function orthographic(
+    size: number,
+    aspect: number,
+    near: number,
+    far: number
+): Float32Array {
+    const lr = 1 / (size * aspect);
+    const bt = 1 / size;
+    const nf = 1 / (near - far);
+    return new Float32Array([
+        lr,
+        0,
+        0,
+        0,
+        0,
+        bt,
+        0,
+        0,
+        0,
+        0,
+        nf,
+        0,
+        0,
+        0,
+        near * nf,
+        1,
+    ]);
+}
+
 export function multiply(a: Float32Array, b: Float32Array): Float32Array {
     const out = new Float32Array(16);
     for (let i = 0; i < 4; i++) {

package/src/standard/tween/index.ts

@@ -8,6 +8,6 @@ export {
     type TweenOptions,
 } from "./tween";
 
-export { Sequence, SequenceState, Pause, computeTweenDelays, finalizeSequences } from "./sequence";
+export { Sequence, SequenceState, Pause, finalizeSequences } from "./sequence";
 
 export { EASING_FUNCTIONS, getEasing, getEasingIndex, type EasingFn } from "./easing";

package/src/standard/tween/sequence.ts

@@ -64,6 +64,10 @@ function updateSequencePlayheads(state: State, dt: number): void {
         if (Sequence.state[seqEid] !== SequenceState.PLAYING) continue;
 
         const prevElapsed = Sequence.elapsed[seqEid] ?? 0;
+
+        if (prevElapsed === 0) {
+            computeTweenDelays(state, seqEid);
+        }
         const elapsed = prevElapsed + dt;
         Sequence.elapsed[seqEid] = elapsed;
 

package/src/standard/tween/tween.ts

@@ -135,7 +135,6 @@ export function finalizePendingTweens(state: State, context: ParseContext): void
         if (!binding) continue;
 
         state.addRelation(pending.tweenEid, TweenTarget, targetEid);
-
         Tween.to[pending.tweenEid] = parseFloat(pending.to);
     }
     pendingXmlTweens = [];