@multiplekex/shallot 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@multiplekex/shallot",
-    "version": "0.1.4",
+    "version": "0.1.6",
     "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/arrows/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 import { Line, Lines, LinesPlugin } from "../lines";
 
@@ -125,65 +125,72 @@ fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> Ver
     let line = lines[eid];
     let transform = matrices[eid];
 
+    // Extract scale from transform matrix
+    let scaleX = length(transform[0].xyz);
+    let scaleY = length(transform[1].xyz);
+    let scaleZ = length(transform[2].xyz);
+    let avgScale = (scaleX + scaleY + scaleZ) / 3.0;
+
+    // Skip rendering if scale is near zero
+    if avgScale < 0.001 {
+        var out: VertexOutput;
+        out.position = vec4(0.0, 0.0, -2.0, 1.0);
+        out.color = vec4(0.0);
+        return out;
+    }
+
     let start = transform[3].xyz;
     let rotation = mat3x3<f32>(transform[0].xyz, transform[1].xyz, transform[2].xyz);
     let end = start + rotation * line.offset;
 
-    // Project both points to clip space
-    let startClip = scene.viewProj * vec4(start, 1.0);
-    let endClip = scene.viewProj * vec4(end, 1.0);
-
-    // Convert to NDC
-    let startNDC = startClip.xy / startClip.w;
-    let endNDC = endClip.xy / endClip.w;
-
-    // Direction in screen space
-    let dir = endNDC - startNDC;
-    let len = length(dir);
-    let normDir = select(vec2(1.0, 0.0), dir / len, len > 0.0001);
+    // Line direction in world space
+    let lineVec = end - start;
+    let lineLen = length(lineVec);
+    let lineDir = select(vec3(1.0, 0.0, 0.0), lineVec / lineLen, lineLen > 0.0001);
 
-    // Perpendicular in screen space (this naturally faces camera)
-    let perp = vec2(-normDir.y, normDir.x);
+    // Camera position and direction to arrow
+    let cameraPos = scene.cameraWorld[3].xyz;
+    let anchorWorld = select(start, end, isEnd);
+    let toCamera = normalize(cameraPos - anchorWorld);
+
+    // Billboard perpendicular: perpendicular to both line and view direction
+    var perp = cross(lineDir, toCamera);
+    let perpLen = length(perp);
+    if perpLen < 0.001 {
+        // Line pointing at camera, pick arbitrary perpendicular
+        let up = select(vec3(0.0, 1.0, 0.0), vec3(1.0, 0.0, 0.0), abs(lineDir.y) > 0.9);
+        perp = normalize(cross(lineDir, up));
+    } else {
+        perp = perp / perpLen;
+    }
 
     // Arrow size scales with sqrt of line thickness and world-space distance to camera
-    let cameraPos = scene.cameraWorld[3].xyz;
-    let midpoint = (start + end) * 0.5;
-    let distToCamera = length(cameraPos - midpoint);
+    let distToCamera = length(cameraPos - anchorWorld);
     let refDist = 15.0;
     let rawScale = distToCamera / refDist;
     let maxScale = 3.0;
     let zoomScale = max(1.0, rawScale / (1.0 + rawScale / maxScale));
-    let baseSize = sqrt(line.thickness) * 0.008 * zoomScale;
-    let arrowLength = arrow.size * baseSize * 3.0;
-    let arrowWidth = arrow.size * baseSize * 1.5;
-
-    // Pick anchor position and direction based on which end
-    var anchorNDC: vec2<f32>;
-    var anchorDepth: f32;
-    var arrowDir: vec2<f32>;
-
-    if isEnd {
-        anchorNDC = endNDC;
-        anchorDepth = endClip.z / endClip.w;
-        arrowDir = normDir;
-    } else {
-        anchorNDC = startNDC;
-        anchorDepth = startClip.z / startClip.w;
-        arrowDir = -normDir;
-    }
+    let baseSize = sqrt(line.thickness) * 0.1 * zoomScale;
+    let arrowLength = arrow.size * baseSize * 2.0;
+    let arrowWidth = arrow.size * baseSize * 0.8;
 
-    // Build triangle centered on anchor (tip extends forward, base extends back)
-    let halfLen = arrowLength * 0.5;
-    var pos: vec2<f32>;
+    // Arrow direction along line
+    let arrowDir = select(-lineDir, lineDir, isEnd);
+
+    // Build triangle vertices in world space
+    var worldPos: vec3<f32>;
     switch vid {
-        case 0u: { pos = anchorNDC + arrowDir * halfLen; }
-        case 1u: { pos = anchorNDC - arrowDir * halfLen + perp * arrowWidth; }
-        case 2u: { pos = anchorNDC - arrowDir * halfLen - perp * arrowWidth; }
-        default: { pos = anchorNDC; }
+        case 0u: { worldPos = anchorWorld + arrowDir * arrowLength * 0.5; }
+        case 1u: { worldPos = anchorWorld - arrowDir * arrowLength * 0.5 + perp * arrowWidth; }
+        case 2u: { worldPos = anchorWorld - arrowDir * arrowLength * 0.5 - perp * arrowWidth; }
+        default: { worldPos = anchorWorld; }
     }
 
+    // Project to clip space
+    let clipPos = scene.viewProj * vec4(worldPos, 1.0);
+
     var out: VertexOutput;
-    out.position = vec4(pos, anchorDepth, 1.0);
+    out.position = clipPos;
     out.color = vec4(line.color.rgb, line.color.a * line.opacity);
     return out;
 }
@@ -230,6 +237,11 @@ export function createArrowsPipeline(
         primitive: {
             topology: "triangle-list",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -239,7 +251,7 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
 
     return {
         id: "arrows",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -267,6 +279,8 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -275,6 +289,11 @@ export function createArrowsNode(config: ArrowsConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);

package/src/extras/lines/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
 export const LineData = {
@@ -245,6 +245,11 @@ export function createLinesPipeline(
         primitive: {
             topology: "triangle-list",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -254,7 +259,7 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
 
     return {
         id: "lines",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -281,6 +286,8 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -289,6 +296,11 @@ export function createLinesNode(config: LinesConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);

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/extras/text/index.ts

@@ -7,7 +7,7 @@ import {
     type ComputeNode,
     type ExecutionContext,
 } from "../../standard/compute";
-import { Render, RenderPlugin } from "../../standard/render";
+import { Render, RenderPlugin, DEPTH_FORMAT } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
 const MAX_GLYPHS = 50000;
@@ -304,7 +304,7 @@ struct GlyphInstance {
     posX: f32,
     posY: f32,
     posZ: f32,
-    _pad0: f32,
+    entityId: u32,
     width: f32,
     height: f32,
     _pad1: vec2<f32>,
@@ -319,6 +319,7 @@ struct GlyphInstance {
 @group(0) @binding(1) var<storage, read> glyphs: array<GlyphInstance>;
 @group(0) @binding(2) var atlasTexture: texture_2d<f32>;
 @group(0) @binding(3) var atlasSampler: sampler;
+@group(0) @binding(4) var<storage, read> matrices: array<mat4x4<f32>>;
 
 struct VertexOutput {
     @builtin(position) position: vec4<f32>,
@@ -369,14 +370,17 @@ fn vs(@builtin(vertex_index) vid: u32) -> VertexOutput {
         }
     }
 
-    let worldPos = vec3(
+    let localPos3 = vec3(
         glyph.posX + localPos.x * glyph.width,
         glyph.posY + localPos.y * glyph.height,
         glyph.posZ
     );
 
+    let transform = matrices[glyph.entityId];
+    let worldPos = transform * vec4(localPos3, 1.0);
+
     var out: VertexOutput;
-    out.position = scene.viewProj * vec4(worldPos, 1.0);
+    out.position = scene.viewProj * worldPos;
     out.uv = uv;
     out.color = glyph.color;
     return out;
@@ -429,6 +433,11 @@ function createTextPipeline(device: GPUDevice, format: GPUTextureFormat): GPURen
             topology: "triangle-list",
             cullMode: "none",
         },
+        depthStencil: {
+            format: DEPTH_FORMAT,
+            depthCompare: "less",
+            depthWriteEnabled: false,
+        },
     });
 }
 
@@ -437,6 +446,7 @@ export interface TextConfig {
     glyphs: GPUBuffer;
     atlas: GPUTextureView;
     sampler: GPUSampler;
+    matrices: GPUBuffer;
     getCount: () => number;
 }
 
@@ -446,7 +456,7 @@ export function createTextNode(config: TextConfig): ComputeNode {
 
     return {
         id: "text",
-        phase: "overlay",
+        phase: "transparent",
         inputs: [],
         outputs: [],
 
@@ -469,10 +479,13 @@ export function createTextNode(config: TextConfig): ComputeNode {
                         { binding: 1, resource: { buffer: config.glyphs } },
                         { binding: 2, resource: config.atlas },
                         { binding: 3, resource: config.sampler },
+                        { binding: 4, resource: { buffer: config.matrices } },
                     ],
                 });
             }
 
+            const depthView = ctx.getTextureView("depth")!;
+
             const pass = encoder.beginRenderPass({
                 colorAttachments: [
                     {
@@ -481,6 +494,11 @@ export function createTextNode(config: TextConfig): ComputeNode {
                         storeOp: "store" as const,
                     },
                 ],
+                depthStencilAttachment: {
+                    view: depthView,
+                    depthLoadOp: "load" as const,
+                    depthStoreOp: "store" as const,
+                },
             });
 
             pass.setPipeline(pipeline);
@@ -523,6 +541,7 @@ const TextSystem: System = {
 
         const { device } = compute;
         const { atlas, staging, content } = text;
+        const stagingU32 = new Uint32Array(staging.buffer);
 
         let glyphCount = 0;
 
@@ -542,10 +561,6 @@ const TextSystem: System = {
             const offsetX = -layout.width * anchorX;
             const offsetY = -layout.height * anchorY;
 
-            const baseX = Transform.posX[eid] + offsetX;
-            const baseY = Transform.posY[eid] + offsetY;
-            const baseZ = Transform.posZ[eid];
-
             const color = Text.color[eid];
             const r = ((color >> 16) & 0xff) / 255;
             const g = ((color >> 8) & 0xff) / 255;
@@ -557,10 +572,10 @@ const TextSystem: System = {
 
                 const offset = glyphCount * GLYPH_FLOATS;
 
-                staging[offset + 0] = baseX + glyph.x;
-                staging[offset + 1] = baseY + glyph.y;
-                staging[offset + 2] = baseZ;
-                staging[offset + 3] = 0;
+                staging[offset + 0] = offsetX + glyph.x;
+                staging[offset + 1] = offsetY + glyph.y;
+                staging[offset + 2] = 0;
+                stagingU32[offset + 3] = eid;
 
                 staging[offset + 4] = glyph.width;
                 staging[offset + 5] = glyph.height;
@@ -634,6 +649,7 @@ export const TextPlugin: Plugin = {
                 glyphs: textState.buffer,
                 atlas: atlas.textureView,
                 sampler,
+                matrices: render.matrices,
                 getCount: () => textState.count,
             })
         );

package/src/standard/compute/graph.ts

@@ -1,10 +1,11 @@
 import { CycleError } from "../../core";
+import { inspect as inspectGraph, type GraphInspection } from "./inspect";
 
 export type ResourceId = string;
 export type NodeId = string;
-export type Phase = "render" | "overlay" | "postprocess";
+export type Phase = "opaque" | "transparent" | "postprocess";
 
-const PHASE_ORDER: Phase[] = ["render", "overlay", "postprocess"];
+const PHASE_ORDER: Phase[] = ["opaque", "transparent", "postprocess"];
 
 export interface ResourceRef {
     id: ResourceId;
@@ -21,6 +22,9 @@ export interface ExecutionContext {
     getTexture(id: ResourceId): GPUTexture | null;
     getTextureView(id: ResourceId): GPUTextureView | null;
     getBuffer(id: ResourceId): GPUBuffer | null;
+    setTexture(id: ResourceId, texture: GPUTexture): void;
+    setTextureView(id: ResourceId, view: GPUTextureView): void;
+    setBuffer(id: ResourceId, buffer: GPUBuffer): void;
 }
 
 export interface ComputeNode {
@@ -115,7 +119,7 @@ function compile(nodes: ComputeNode[]): ExecutionPlan {
     }
 
     for (const node of nodes) {
-        const phase = node.phase ?? "render";
+        const phase = node.phase ?? "opaque";
         byPhase.get(phase)!.push(node);
     }
 
@@ -162,4 +166,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;
 
@@ -102,6 +105,15 @@ export const ComputeSystem: System = {
             getBuffer(id: ResourceId) {
                 return resources.buffers.get(id) ?? null;
             },
+            setTexture(id: ResourceId, texture: GPUTexture) {
+                resources.textures.set(id, texture);
+            },
+            setTextureView(id: ResourceId, view: GPUTextureView) {
+                resources.textureViews.set(id, view);
+            },
+            setBuffer(id: ResourceId, buffer: GPUBuffer) {
+                resources.buffers.set(id, buffer);
+            },
         };
 
         for (const node of plan.sorted) {

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[] = ["opaque", "transparent", "postprocess"];
+
+export function inspect(nodes: readonly ComputeNode[]): GraphInspection {
+    const nodeInfos: NodeInfo[] = nodes.map((n) => ({
+        id: n.id,
+        phase: n.phase ?? "opaque",
+        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 ?? "opaque";
+        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/input/index.ts

@@ -30,6 +30,10 @@ const inputState: InputState = {
 };
 
 let canvas: HTMLCanvasElement | null = null;
+let lastPointerX = 0;
+let lastPointerY = 0;
+let activePointerId: number | null = null;
+let activeButton: number | null = null;
 
 function handleKeyDown(e: KeyboardEvent): void {
     if (!keys.has(e.code)) {
@@ -43,22 +47,55 @@ function handleKeyUp(e: KeyboardEvent): void {
     keysReleased.add(e.code);
 }
 
-function handleMouseDown(e: MouseEvent): void {
+function setButtonState(button: number, pressed: boolean): void {
+    if (button === 0) mouse.left = pressed;
+    if (button === 1) mouse.middle = pressed;
+    if (button === 2) mouse.right = pressed;
+}
+
+function clearPointerState(): void {
+    if (activeButton !== null) {
+        setButtonState(activeButton, false);
+    }
+    activePointerId = null;
+    activeButton = null;
+    lastPointerX = 0;
+    lastPointerY = 0;
+}
+
+function handlePointerDown(e: PointerEvent): 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;
+    if (activePointerId === null) {
+        activePointerId = e.pointerId;
+        activeButton = e.button;
+        lastPointerX = e.clientX;
+        lastPointerY = e.clientY;
+        setButtonState(e.button, true);
+        canvas!.setPointerCapture(e.pointerId);
+        e.preventDefault();
+    }
+}
+
+function handlePointerUp(e: PointerEvent): void {
+    if (e.pointerId === activePointerId) {
+        canvas?.releasePointerCapture(e.pointerId);
+        clearPointerState();
+    }
 }
 
-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 handlePointerCancel(e: PointerEvent): void {
+    if (e.pointerId === activePointerId) {
+        clearPointerState();
+    }
 }
 
-function handleMouseMove(e: MouseEvent): void {
-    mouse.deltaX += e.movementX;
-    mouse.deltaY += e.movementY;
+function handlePointerMove(e: PointerEvent): void {
+    if (e.pointerId !== activePointerId) return;
+    e.preventDefault();
+    mouse.deltaX += e.clientX - lastPointerX;
+    mouse.deltaY += e.clientY - lastPointerY;
+    lastPointerX = e.clientX;
+    lastPointerY = e.clientY;
 }
 
 function handleWheel(e: WheelEvent): void {
@@ -91,6 +128,10 @@ function clearAllState(): void {
     mouse.left = false;
     mouse.right = false;
     mouse.middle = false;
+    activePointerId = null;
+    activeButton = null;
+    lastPointerX = 0;
+    lastPointerY = 0;
 }
 
 export const InputSystem: System = {
@@ -99,12 +140,14 @@ export const InputSystem: System = {
     setup(state: State) {
         if (!state.canvas) return;
         canvas = state.canvas;
+        canvas.style.touchAction = "none";
 
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("keyup", handleKeyUp);
-        canvas.addEventListener("mousedown", handleMouseDown);
-        window.addEventListener("mouseup", handleMouseUp);
-        canvas.addEventListener("mousemove", handleMouseMove);
+        canvas.addEventListener("pointerdown", handlePointerDown);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerCancel);
+        window.addEventListener("pointermove", handlePointerMove);
         canvas.addEventListener("wheel", handleWheel, { passive: false });
         canvas.addEventListener("contextmenu", handleContextMenu);
 
@@ -115,9 +158,10 @@ export const InputSystem: System = {
         if (canvas) {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("keyup", handleKeyUp);
-            canvas.removeEventListener("mousedown", handleMouseDown);
-            window.removeEventListener("mouseup", handleMouseUp);
-            canvas.removeEventListener("mousemove", handleMouseMove);
+            canvas.removeEventListener("pointerdown", handlePointerDown);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerCancel);
+            window.removeEventListener("pointermove", handlePointerMove);
             canvas.removeEventListener("wheel", handleWheel);
             canvas.removeEventListener("contextmenu", handleContextMenu);
             canvas = null;

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/light.ts

@@ -22,9 +22,9 @@ setTraits(DirectionalLight, {
     defaults: () => ({
         color: 0xffffff,
         intensity: 1.0,
-        directionX: -0.5,
+        directionX: -0.6,
         directionY: -1.0,
-        directionZ: -0.5,
+        directionZ: -0.8,
     }),
 });
 

package/src/standard/render/postprocess.ts

@@ -6,26 +6,6 @@ struct VertexOutput {
     @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,
@@ -37,12 +17,31 @@ struct Uniforms {
     _pad: u32,
 }
 
+@group(0) @binding(0) var inputTexture: texture_2d<f32>;
+@group(0) @binding(1) var inputSampler: sampler;
 @group(0) @binding(2) var<uniform> uniforms: Uniforms;
 
 const FLAG_TONEMAP: u32 = 1u;
 const FLAG_FXAA: u32 = 2u;
 const FLAG_VIGNETTE: u32 = 4u;
 
+@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;
+}
+
 fn aces(x: vec3f) -> vec3f {
     let a = 2.51;
     let b = 0.03;
@@ -111,11 +110,11 @@ fn applyVignette(color: vec3f, uv: vec2f) -> vec3f {
 }
 
 @fragment
-fn fragmentMain(@location(0) uv: vec2f) -> @location(0) vec4f {
-    var color = textureSample(inputTexture, inputSampler, uv).rgb;
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+    var color = textureSample(inputTexture, inputSampler, input.uv).rgb;
 
     if (uniforms.flags & FLAG_FXAA) != 0u {
-        color = applyFXAA(uv, color);
+        color = applyFXAA(input.uv, color);
     }
 
     if (uniforms.flags & FLAG_TONEMAP) != 0u {
@@ -123,7 +122,7 @@ fn fragmentMain(@location(0) uv: vec2f) -> @location(0) vec4f {
     }
 
     if (uniforms.flags & FLAG_VIGNETTE) != 0u {
-        color = applyVignette(color, uv);
+        color = applyVignette(color, input.uv);
     }
 
     return vec4f(color, 1.0);

package/src/standard/render/scene.ts

@@ -66,6 +66,18 @@ 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 = [];