@multiplekex/shallot 0.1.9 → 0.1.10

package/src/extras/index.ts

@@ -2,3 +2,4 @@ export * from "./orbit";
 export * from "./lines";
 export * from "./arrows";
 export * from "./text";
+export * from "./gradient";

package/src/extras/lines/index.ts

@@ -5,9 +5,10 @@ import {
     Render,
     RenderPlugin,
     DEPTH_FORMAT,
-    registerDrawContributor,
-    type DrawContributor,
-    type DrawContext,
+    Pass,
+    registerDraw,
+    type Draw,
+    type SharedPassContext,
 } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
@@ -316,15 +317,18 @@ export function createLinesPipeline(
     });
 }
 
-function createLinesContributor(config: LinesConfig): DrawContributor {
+function createLinesDraw(config: LinesConfig): Draw {
     let pipeline: GPURenderPipeline | null = null;
     let bindGroup: GPUBindGroup | null = null;
 
     return {
         id: "lines",
+        pass: Pass.Transparent,
         order: 0,
 
-        draw(pass: GPURenderPassEncoder, ctx: DrawContext) {
+        execute() {},
+
+        draw(pass: GPURenderPassEncoder, ctx: SharedPassContext) {
             const count = config.getCount();
             if (count === 0) return;
 
@@ -377,7 +381,8 @@ const LinesSystem: System = {
             entityIdArray[count++] = eid;
         }
 
-        device.queue.writeBuffer(lines.buffer, 0, LineData.data);
+        const uploadCount = state.maxEid + 1;
+        device.queue.writeBuffer(lines.buffer, 0, LineData.data, 0, uploadCount * 12);
         device.queue.writeBuffer(lines.entityIds, 0, entityIdArray, 0, count);
         lines.count = count;
     },
@@ -407,9 +412,9 @@ export const LinesPlugin: Plugin = {
 
         state.setResource(Lines, linesState);
 
-        registerDrawContributor(
+        registerDraw(
             state,
-            createLinesContributor({
+            createLinesDraw({
                 scene: render.scene,
                 lines: linesState.buffer,
                 entityIds: linesState.entityIds,

package/src/extras/text/index.ts

@@ -14,9 +14,10 @@ import {
     Render,
     RenderPlugin,
     DEPTH_FORMAT,
-    registerDrawContributor,
-    type DrawContributor,
-    type DrawContext,
+    Pass,
+    registerDraw,
+    type Draw,
+    type SharedPassContext,
 } from "../../standard/render";
 import { Transform } from "../../standard/transforms";
 
@@ -646,15 +647,18 @@ export interface TextConfig {
     getCount: () => number;
 }
 
-function createTextContributor(config: TextConfig): DrawContributor {
+function createTextDraw(config: TextConfig): Draw {
     let pipeline: GPURenderPipeline | null = null;
     let bindGroup: GPUBindGroup | null = null;
 
     return {
         id: "text",
+        pass: Pass.Transparent,
         order: 2,
 
-        draw(pass: GPURenderPassEncoder, ctx: DrawContext) {
+        execute() {},
+
+        draw(pass: GPURenderPassEncoder, ctx: SharedPassContext) {
             const count = config.getCount();
             if (count === 0) return;
 
@@ -805,9 +809,9 @@ export const TextPlugin: Plugin = {
 
         state.setResource(TextResource, textState);
 
-        registerDrawContributor(
+        registerDraw(
             state,
-            createTextContributor({
+            createTextDraw({
                 scene: render.scene,
                 glyphs: textState.buffer,
                 atlas: atlas.textureView,

package/src/standard/compute/graph.ts

@@ -1,11 +1,9 @@
 import { CycleError } from "../../core";
 import { inspect as inspectGraph, type GraphInspection } from "./inspect";
+import { Pass, PASS_ORDER } from "./pass";
 
 export type ResourceId = string;
 export type NodeId = string;
-export type Phase = "opaque" | "transparent" | "postprocess";
-
-const PHASE_ORDER: Phase[] = ["opaque", "transparent", "postprocess"];
 
 export interface ResourceRef {
     id: ResourceId;
@@ -29,7 +27,7 @@ export interface ExecutionContext {
 
 export interface ComputeNode {
     readonly id: NodeId;
-    readonly phase?: Phase;
+    readonly pass?: Pass;
     readonly inputs: readonly ResourceRef[];
     readonly outputs: readonly ResourceRef[];
     readonly execute: (ctx: ExecutionContext) => void;
@@ -113,20 +111,20 @@ function compile(nodes: ComputeNode[]): ExecutionPlan {
         return { sorted: [] };
     }
 
-    const byPhase = new Map<Phase, ComputeNode[]>();
-    for (const phase of PHASE_ORDER) {
-        byPhase.set(phase, []);
+    const byPass = new Map<Pass, ComputeNode[]>();
+    for (const pass of PASS_ORDER) {
+        byPass.set(pass, []);
     }
 
     for (const node of nodes) {
-        const phase = node.phase ?? "opaque";
-        byPhase.get(phase)!.push(node);
+        const pass = node.pass ?? Pass.Opaque;
+        byPass.get(pass)!.push(node);
     }
 
     const sorted: ComputeNode[] = [];
-    for (const phase of PHASE_ORDER) {
-        const phaseNodes = byPhase.get(phase)!;
-        sorted.push(...topoSort(phaseNodes));
+    for (const pass of PASS_ORDER) {
+        const passNodes = byPass.get(pass)!;
+        sorted.push(...topoSort(passNodes));
     }
 
     return { sorted };

package/src/standard/compute/index.ts

@@ -4,6 +4,7 @@ import { createTimingCollector, type FrameTiming } from "./timing";
 
 export * from "./graph";
 export * from "./inspect";
+export * from "./pass";
 export * from "./readback";
 export * from "./timing";
 

package/src/standard/compute/inspect.ts

@@ -1,9 +1,10 @@
-import type { ComputeNode, NodeId, Phase, ResourceId, ResourceRef } from "./graph";
+import type { ComputeNode, NodeId, ResourceId, ResourceRef } from "./graph";
 import type { FrameTiming } from "./timing";
+import { Pass, PASS_ORDER } from "./pass";
 
 export interface NodeInfo {
     readonly id: NodeId;
-    readonly phase: Phase;
+    readonly pass: Pass;
     readonly inputs: readonly ResourceRef[];
     readonly outputs: readonly ResourceRef[];
 }
@@ -18,15 +19,13 @@ export interface GraphInspection {
     readonly nodes: readonly NodeInfo[];
     readonly edges: readonly EdgeInfo[];
     readonly executionOrder: readonly NodeId[];
-    readonly byPhase: ReadonlyMap<Phase, readonly NodeId[]>;
+    readonly byPass: ReadonlyMap<Pass, 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",
+        pass: n.pass ?? Pass.Opaque,
         inputs: n.inputs,
         outputs: n.outputs,
     }));
@@ -52,17 +51,17 @@ export function inspect(nodes: readonly ComputeNode[]): GraphInspection {
         }
     }
 
-    const byPhase = new Map<Phase, NodeId[]>();
-    for (const phase of PHASE_ORDER) {
-        byPhase.set(phase, []);
+    const byPass = new Map<Pass, NodeId[]>();
+    for (const pass of PASS_ORDER) {
+        byPass.set(pass, []);
     }
     for (const n of nodeInfos) {
-        byPhase.get(n.phase)!.push(n.id);
+        byPass.get(n.pass)!.push(n.id);
     }
 
     const executionOrder = topoSortIds(nodes);
 
-    return { nodes: nodeInfos, edges, executionOrder, byPhase };
+    return { nodes: nodeInfos, edges, executionOrder, byPass };
 }
 
 function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
@@ -75,52 +74,34 @@ function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
         }
     }
 
-    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, []);
+    const byPass = new Map<Pass, ComputeNode[]>();
+    for (const pass of PASS_ORDER) {
+        byPass.set(pass, []);
     }
     for (const node of nodes) {
-        const phase = node.phase ?? "opaque";
-        byPhase.get(phase)!.push(node);
+        const pass = node.pass ?? Pass.Opaque;
+        byPass.get(pass)!.push(node);
     }
 
     const sorted: NodeId[] = [];
-    for (const phase of PHASE_ORDER) {
-        const phaseNodes = byPhase.get(phase)!;
-        const phaseInDegree = new Map<ComputeNode, number>();
+    for (const pass of PASS_ORDER) {
+        const passNodes = byPass.get(pass)!;
+        const passInDegree = new Map<ComputeNode, number>();
 
-        for (const node of phaseNodes) {
+        for (const node of passNodes) {
             let degree = 0;
             for (const input of node.inputs) {
                 const producer = producers.get(input.id);
-                if (producer && phaseNodes.includes(producer)) {
+                if (producer && passNodes.includes(producer)) {
                     degree++;
                 }
             }
-            phaseInDegree.set(node, degree);
+            passInDegree.set(node, degree);
         }
 
         const queue: ComputeNode[] = [];
-        for (const node of phaseNodes) {
-            if (phaseInDegree.get(node) === 0) {
+        for (const node of passNodes) {
+            if (passInDegree.get(node) === 0) {
                 queue.push(node);
             }
         }
@@ -130,12 +111,12 @@ function topoSortIds(nodes: readonly ComputeNode[]): NodeId[] {
             const node = queue[i++];
             sorted.push(node.id);
 
-            for (const dep of phaseNodes) {
+            for (const dep of passNodes) {
                 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);
+                        const newDegree = passInDegree.get(dep)! - 1;
+                        passInDegree.set(dep, newDegree);
                         if (newDegree === 0) {
                             queue.push(dep);
                         }
@@ -156,11 +137,11 @@ export function formatGraph(info: GraphInspection, timing?: FrameTiming): string
     const nodeMap = new Map(info.nodes.map((n) => [n.id, n]));
     const timingMap = new Map(timing?.nodes.map((t) => [t.nodeId, t]));
 
-    for (const phase of PHASE_ORDER) {
-        const nodeIds = info.byPhase.get(phase) ?? [];
+    for (const pass of PASS_ORDER) {
+        const nodeIds = info.byPass.get(pass) ?? [];
         if (nodeIds.length === 0) continue;
 
-        lines.push(`[${phase}]`);
+        lines.push(`[${Pass[pass]}]`);
         for (const id of nodeIds) {
             const node = nodeMap.get(id)!;
             const ins = node.inputs.map((r) => r.id).join(", ") || "none";
@@ -196,12 +177,13 @@ export function toDot(info: GraphInspection): string {
     lines.push("  node [shape=box];");
     lines.push("");
 
-    for (const phase of PHASE_ORDER) {
-        const nodeIds = info.byPhase.get(phase) ?? [];
+    for (const pass of PASS_ORDER) {
+        const nodeIds = info.byPass.get(pass) ?? [];
         if (nodeIds.length === 0) continue;
 
-        lines.push(`  subgraph cluster_${phase} {`);
-        lines.push(`    label="${phase}";`);
+        const passName = Pass[pass];
+        lines.push(`  subgraph cluster_${passName} {`);
+        lines.push(`    label="${passName}";`);
         for (const id of nodeIds) {
             lines.push(`    "${id}";`);
         }

package/src/standard/compute/pass.ts

@@ -0,0 +1,23 @@
+export enum Pass {
+    BeforeOpaque,
+    Opaque,
+    AfterOpaque,
+    BeforeTransparent,
+    Transparent,
+    AfterTransparent,
+    BeforePost,
+    Post,
+    AfterPost,
+}
+
+export const PASS_ORDER: Pass[] = [
+    Pass.BeforeOpaque,
+    Pass.Opaque,
+    Pass.AfterOpaque,
+    Pass.BeforeTransparent,
+    Pass.Transparent,
+    Pass.AfterTransparent,
+    Pass.BeforePost,
+    Pass.Post,
+    Pass.AfterPost,
+];

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, orthographic, multiply, invert } from "./scene";
+import { perspective, orthographic, multiply, invert, extractFrustumPlanes } from "./scene";
 
 export const RenderMode = {
     Raster: 0,
@@ -98,9 +98,14 @@ export function uploadCamera(
 
     device.queue.writeBuffer(buffer, 0, viewProj as Float32Array<ArrayBuffer>);
     device.queue.writeBuffer(buffer, 64, world as Float32Array<ArrayBuffer>);
+
+    const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
     device.queue.writeBuffer(
         buffer,
         176,
-        new Float32Array([Camera.mode[eid], Camera.size[eid], width, height])
+        new Float32Array([Camera.mode[eid], Camera.size[eid], width / dpr, height / dpr])
     );
+
+    const planes = extractFrustumPlanes(viewProj);
+    device.queue.writeBuffer(buffer, 192, planes as Float32Array<ArrayBuffer>);
 }