@multiplekex/shallot 0.1.0

package/src/extras/arrows/index.ts

@@ -0,0 +1,363 @@
+import { MAX_ENTITIES, resource, type Plugin, type State, type System } from "../../core";
+import { setTraits, type FieldAccessor } from "../../core/component";
+import {
+    Compute,
+    ComputePlugin,
+    createEntityIdBuffer,
+    type ComputeNode,
+    type ExecutionContext,
+} from "../../standard/compute";
+import { Render, RenderPlugin } from "../../standard/render";
+import { Transform } from "../../standard/transforms";
+import { Line, Lines, LinesPlugin } from "../lines";
+
+export const ArrowData = {
+    data: new Float32Array(MAX_ENTITIES * 4),
+};
+
+interface ArrowProxy extends Array<number>, FieldAccessor {}
+
+function arrowProxy(offset: number): ArrowProxy {
+    const data = ArrowData.data;
+
+    function getValue(eid: number): number {
+        return data[eid * 4 + offset];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 4 + offset] = value;
+    }
+
+    return new Proxy([] as unknown as ArrowProxy, {
+        get(_, prop) {
+            if (prop === "get") return getValue;
+            if (prop === "set") return setValue;
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return undefined;
+            return getValue(eid);
+        },
+        set(_, prop, value) {
+            const eid = Number(prop);
+            if (Number.isNaN(eid)) return false;
+            setValue(eid, value);
+            return true;
+        },
+    });
+}
+
+export const Arrow: {
+    start: ArrowProxy;
+    end: ArrowProxy;
+    size: ArrowProxy;
+} = {
+    start: arrowProxy(0),
+    end: arrowProxy(1),
+    size: arrowProxy(2),
+};
+
+setTraits(Arrow, {
+    defaults: () => ({
+        start: 0,
+        end: 1,
+        size: 1,
+    }),
+    accessors: {
+        start: Arrow.start,
+        end: Arrow.end,
+        size: Arrow.size,
+    },
+});
+
+export interface ArrowsConfig {
+    scene: GPUBuffer;
+    arrows: GPUBuffer;
+    lines: GPUBuffer;
+    matrices: GPUBuffer;
+    entityIds: GPUBuffer;
+    getCount: () => number;
+}
+
+const END_FLAG = 0x80000000;
+
+export const arrowShader = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+}
+
+struct Scene {
+    viewProj: mat4x4<f32>,
+    cameraWorld: mat4x4<f32>,
+}
+
+struct ArrowData {
+    start: f32,
+    end: f32,
+    size: f32,
+    _pad: f32,
+}
+
+struct LineData {
+    offset: vec3<f32>,
+    thickness: f32,
+    visible: f32,
+    _pad1: f32,
+    _pad2: f32,
+    opacity: f32,
+    color: vec4<f32>,
+}
+
+const END_FLAG: u32 = 0x80000000u;
+
+@group(0) @binding(0) var<uniform> scene: Scene;
+@group(0) @binding(1) var<storage, read> entityIds: array<u32>;
+@group(0) @binding(2) var<storage, read> arrows: array<ArrowData>;
+@group(0) @binding(3) var<storage, read> lines: array<LineData>;
+@group(0) @binding(4) var<storage, read> matrices: array<mat4x4<f32>>;
+
+@vertex
+fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> VertexOutput {
+    let packed = entityIds[iid];
+    let isEnd = (packed & END_FLAG) != 0u;
+    let eid = packed & ~END_FLAG;
+
+    let arrow = arrows[eid];
+    let line = lines[eid];
+    let transform = matrices[eid];
+
+    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);
+
+    // Perpendicular in screen space (this naturally faces camera)
+    let perp = vec2(-normDir.y, normDir.x);
+
+    // 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 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;
+    }
+
+    // Build triangle centered on anchor (tip extends forward, base extends back)
+    let halfLen = arrowLength * 0.5;
+    var pos: vec2<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; }
+    }
+
+    var out: VertexOutput;
+    out.position = vec4(pos, anchorDepth, 1.0);
+    out.color = vec4(line.color.rgb, line.color.a * line.opacity);
+    return out;
+}
+
+@fragment
+fn fs(input: VertexOutput) -> @location(0) vec4<f32> {
+    return input.color;
+}
+`;
+
+export function createArrowsPipeline(
+    device: GPUDevice,
+    format: GPUTextureFormat
+): GPURenderPipeline {
+    const module = device.createShaderModule({ code: arrowShader });
+
+    return device.createRenderPipeline({
+        layout: "auto",
+        vertex: {
+            module,
+            entryPoint: "vs",
+        },
+        fragment: {
+            module,
+            entryPoint: "fs",
+            targets: [
+                {
+                    format,
+                    blend: {
+                        color: {
+                            srcFactor: "src-alpha",
+                            dstFactor: "one-minus-src-alpha",
+                            operation: "add",
+                        },
+                        alpha: {
+                            srcFactor: "one",
+                            dstFactor: "one-minus-src-alpha",
+                            operation: "add",
+                        },
+                    },
+                },
+            ],
+        },
+        primitive: {
+            topology: "triangle-list",
+        },
+    });
+}
+
+export function createArrowsNode(config: ArrowsConfig): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+    let bindGroup: GPUBindGroup | null = null;
+
+    return {
+        id: "arrows",
+        phase: "overlay",
+        inputs: [],
+        outputs: [],
+
+        execute(ctx: ExecutionContext) {
+            const count = config.getCount();
+            if (count === 0) return;
+
+            const { device, encoder, format } = ctx;
+            const targetView = ctx.getTextureView("scene") ?? ctx.canvasView;
+
+            if (!pipeline) {
+                pipeline = createArrowsPipeline(device, format);
+            }
+
+            if (!bindGroup) {
+                bindGroup = device.createBindGroup({
+                    layout: pipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: { buffer: config.scene } },
+                        { binding: 1, resource: { buffer: config.entityIds } },
+                        { binding: 2, resource: { buffer: config.arrows } },
+                        { binding: 3, resource: { buffer: config.lines } },
+                        { binding: 4, resource: { buffer: config.matrices } },
+                    ],
+                });
+            }
+
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: targetView,
+                        loadOp: "load" as const,
+                        storeOp: "store" as const,
+                    },
+                ],
+            });
+
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.draw(3, count);
+            pass.end();
+        },
+    };
+}
+
+export interface ArrowsState {
+    buffer: GPUBuffer;
+    entityIds: GPUBuffer;
+    count: number;
+}
+
+export const Arrows = resource<ArrowsState>("arrows");
+
+const arrowEntityIdArray = new Uint32Array(MAX_ENTITIES * 2);
+
+const ArrowsSystem: System = {
+    group: "draw",
+
+    update(state: State) {
+        const compute = Compute.from(state);
+        const arrows = Arrows.from(state);
+        const lines = Lines.from(state);
+        if (!compute || !arrows || !lines) return;
+
+        const { device } = compute;
+
+        let count = 0;
+        for (const eid of state.query([Arrow, Line, Transform])) {
+            if (!Line.visible[eid]) continue;
+
+            if (Arrow.start[eid]) {
+                arrowEntityIdArray[count++] = eid;
+            }
+            if (Arrow.end[eid]) {
+                arrowEntityIdArray[count++] = eid | END_FLAG;
+            }
+        }
+
+        device.queue.writeBuffer(arrows.buffer, 0, ArrowData.data);
+        device.queue.writeBuffer(arrows.entityIds, 0, arrowEntityIdArray, 0, count);
+        arrows.count = count;
+    },
+};
+
+export const ArrowsPlugin: Plugin = {
+    systems: [ArrowsSystem],
+    components: { Arrow },
+    dependencies: [ComputePlugin, RenderPlugin, LinesPlugin],
+
+    initialize(state: State) {
+        const compute = Compute.from(state);
+        const render = Render.from(state);
+        const lines = Lines.from(state);
+        if (!compute || !render || !lines) return;
+
+        const { device } = compute;
+
+        const arrowsState: ArrowsState = {
+            buffer: device.createBuffer({
+                label: "arrows",
+                size: MAX_ENTITIES * 4 * 4,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            }),
+            entityIds: createEntityIdBuffer(device, MAX_ENTITIES * 2),
+            count: 0,
+        };
+
+        state.setResource(Arrows, arrowsState);
+
+        compute.graph.add(
+            createArrowsNode({
+                scene: render.scene,
+                arrows: arrowsState.buffer,
+                lines: lines.buffer,
+                matrices: render.matrices,
+                entityIds: arrowsState.entityIds,
+                getCount: () => arrowsState.count,
+            })
+        );
+    },
+};

package/src/extras/index.ts

@@ -0,0 +1,4 @@
+export * from "./orbit";
+export * from "./lines";
+export * from "./arrows";
+export * from "./text";