@multiplekex/shallot 0.1.0

package/src/extras/lines/index.ts

@@ -0,0 +1,368 @@
+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";
+
+export const LineData = {
+    data: new Float32Array(MAX_ENTITIES * 12),
+};
+
+interface LineProxy extends Array<number>, FieldAccessor {}
+
+function lineProxy(offset: number): LineProxy {
+    const data = LineData.data;
+
+    function getValue(eid: number): number {
+        return data[eid * 12 + offset];
+    }
+
+    function setValue(eid: number, value: number): void {
+        data[eid * 12 + offset] = value;
+    }
+
+    return new Proxy([] as unknown as LineProxy, {
+        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;
+        },
+    });
+}
+
+function colorProxy(): LineProxy {
+    const data = LineData.data;
+
+    function getValue(eid: number): number {
+        const offset = eid * 12 + 8;
+        const r = Math.round(data[offset] * 255);
+        const g = Math.round(data[offset + 1] * 255);
+        const b = Math.round(data[offset + 2] * 255);
+        return (r << 16) | (g << 8) | b;
+    }
+
+    function setValue(eid: number, value: number): void {
+        const offset = eid * 12 + 8;
+        data[offset] = ((value >> 16) & 0xff) / 255;
+        data[offset + 1] = ((value >> 8) & 0xff) / 255;
+        data[offset + 2] = (value & 0xff) / 255;
+        data[offset + 3] = 1;
+    }
+
+    return new Proxy([] as unknown as LineProxy, {
+        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 Line: {
+    offsetX: LineProxy;
+    offsetY: LineProxy;
+    offsetZ: LineProxy;
+    thickness: LineProxy;
+    visible: LineProxy;
+    opacity: LineProxy;
+    color: LineProxy;
+} = {
+    offsetX: lineProxy(0),
+    offsetY: lineProxy(1),
+    offsetZ: lineProxy(2),
+    thickness: lineProxy(3),
+    visible: lineProxy(4),
+    opacity: lineProxy(7),
+    color: colorProxy(),
+};
+
+setTraits(Line, {
+    defaults: () => ({
+        offsetX: 1,
+        offsetY: 0,
+        offsetZ: 0,
+        thickness: 2,
+        visible: 1,
+        opacity: 1,
+        color: 0xffffff,
+    }),
+    accessors: {
+        offsetX: Line.offsetX,
+        offsetY: Line.offsetY,
+        offsetZ: Line.offsetZ,
+        thickness: Line.thickness,
+        visible: Line.visible,
+        opacity: Line.opacity,
+        color: Line.color,
+    },
+});
+
+export interface LinesConfig {
+    scene: GPUBuffer;
+    lines: GPUBuffer;
+    entityIds: GPUBuffer;
+    matrices: GPUBuffer;
+    getCount: () => number;
+}
+
+export const lineShader = /* wgsl */ `
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+}
+
+struct Scene {
+    viewProj: mat4x4<f32>,
+    cameraWorld: mat4x4<f32>,
+}
+
+struct LineData {
+    offset: vec3<f32>,
+    thickness: f32,
+    visible: f32,
+    _pad1: f32,
+    _pad2: f32,
+    opacity: f32,
+    color: vec4<f32>,
+}
+
+@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> lines: array<LineData>;
+@group(0) @binding(3) var<storage, read> matrices: array<mat4x4<f32>>;
+
+@vertex
+fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> VertexOutput {
+    let eid = entityIds[iid];
+    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;
+
+    let startClip = scene.viewProj * vec4(start, 1.0);
+    let endClip = scene.viewProj * vec4(end, 1.0);
+
+    let startNDC = startClip.xy / startClip.w;
+    let endNDC = endClip.xy / endClip.w;
+
+    let dir = endNDC - startNDC;
+    let len = length(dir);
+    let normDir = select(vec2(1.0, 0.0), dir / len, len > 0.0001);
+
+    // Scale with world-space distance to camera (soft clamp prevents extreme thickness)
+    let midpoint = (start + end) * 0.5;
+    let cameraPos = scene.cameraWorld[3].xyz;
+    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 perp = vec2(-normDir.y, normDir.x) * line.thickness * 0.002 * zoomScale;
+
+    var pos: vec2<f32>;
+    var t: f32;
+    switch vid {
+        case 0u: { pos = startNDC - perp; t = 0.0; }
+        case 1u: { pos = startNDC + perp; t = 0.0; }
+        case 2u: { pos = endNDC + perp; t = 1.0; }
+        case 3u: { pos = startNDC - perp; t = 0.0; }
+        case 4u: { pos = endNDC + perp; t = 1.0; }
+        case 5u: { pos = endNDC - perp; t = 1.0; }
+        default: { pos = startNDC; t = 0.0; }
+    }
+
+    let depth = mix(startClip.z / startClip.w, endClip.z / endClip.w, t);
+
+    var out: VertexOutput;
+    out.position = vec4(pos, depth, 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 createLinesPipeline(
+    device: GPUDevice,
+    format: GPUTextureFormat
+): GPURenderPipeline {
+    const module = device.createShaderModule({ code: lineShader });
+
+    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 createLinesNode(config: LinesConfig): ComputeNode {
+    let pipeline: GPURenderPipeline | null = null;
+    let bindGroup: GPUBindGroup | null = null;
+
+    return {
+        id: "lines",
+        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 = createLinesPipeline(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.lines } },
+                        { binding: 3, 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(6, count);
+            pass.end();
+        },
+    };
+}
+
+export interface LinesState {
+    buffer: GPUBuffer;
+    entityIds: GPUBuffer;
+    count: number;
+}
+
+export const Lines = resource<LinesState>("lines");
+
+const entityIdArray = new Uint32Array(MAX_ENTITIES);
+
+const LinesSystem: System = {
+    group: "draw",
+
+    update(state: State) {
+        const compute = Compute.from(state);
+        const lines = Lines.from(state);
+        if (!compute || !lines) return;
+
+        const { device } = compute;
+
+        let count = 0;
+        for (const eid of state.query([Line, Transform])) {
+            if (!Line.visible[eid]) continue;
+            entityIdArray[count++] = eid;
+        }
+
+        device.queue.writeBuffer(lines.buffer, 0, LineData.data);
+        device.queue.writeBuffer(lines.entityIds, 0, entityIdArray, 0, count);
+        lines.count = count;
+    },
+};
+
+export const LinesPlugin: Plugin = {
+    systems: [LinesSystem],
+    components: { Line },
+    dependencies: [ComputePlugin, RenderPlugin],
+
+    initialize(state: State) {
+        const compute = Compute.from(state);
+        const render = Render.from(state);
+        if (!compute || !render) return;
+
+        const { device } = compute;
+
+        const linesState: LinesState = {
+            buffer: device.createBuffer({
+                label: "lines",
+                size: MAX_ENTITIES * 12 * 4,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+            }),
+            entityIds: createEntityIdBuffer(device, MAX_ENTITIES),
+            count: 0,
+        };
+
+        state.setResource(Lines, linesState);
+
+        compute.graph.add(
+            createLinesNode({
+                scene: render.scene,
+                lines: linesState.buffer,
+                entityIds: linesState.entityIds,
+                matrices: render.matrices,
+                getCount: () => linesState.count,
+            })
+        );
+    },
+};

package/src/extras/orbit/index.ts

@@ -0,0 +1,133 @@
+import { setTraits } from "../../core/component";
+import { clamp, lookAt, type State, type System, type Plugin } from "../../core";
+import { Transform } from "../../standard/transforms";
+import { Input, InputPlugin } from "../../standard/input";
+
+const Tau = Math.PI * 2;
+
+export const Orbit = {
+    target: [] as number[],
+    yaw: [] as number[],
+    pitch: [] as number[],
+    distance: [] as number[],
+    targetYaw: [] as number[],
+    targetPitch: [] as number[],
+    targetDistance: [] as number[],
+    minPitch: [] as number[],
+    maxPitch: [] as number[],
+    minDistance: [] as number[],
+    maxDistance: [] as number[],
+    smoothness: [] as number[],
+    sensitivity: [] as number[],
+    zoomSpeed: [] as number[],
+};
+
+setTraits(Orbit, {
+    defaults: () => ({
+        target: 0,
+        yaw: 0,
+        pitch: Math.PI / 6,
+        distance: 8,
+        targetYaw: 0,
+        targetPitch: Math.PI / 6,
+        targetDistance: 10,
+        minPitch: -Math.PI / 2 + 0.01,
+        maxPitch: Math.PI / 2 - 0.01,
+        minDistance: 1,
+        maxDistance: 25,
+        smoothness: 0.3,
+        sensitivity: 0.005,
+        zoomSpeed: 0.025,
+    }),
+});
+
+function smoothLerp(smoothness: number, dt: number): number {
+    return 1 - Math.pow(1 - smoothness, dt * 60);
+}
+
+function normalizeAngle(a: number): number {
+    return ((a % Tau) + Tau) % Tau;
+}
+
+function angleDiff(from: number, to: number): number {
+    const diff = normalizeAngle(to - from);
+    return diff > Math.PI ? diff - Tau : diff;
+}
+
+export const OrbitSystem: System = {
+    group: "simulation",
+
+    update(state: State) {
+        const input = Input.from(state);
+        const dt = state.time.deltaTime;
+
+        for (const eid of state.query([Orbit, Transform])) {
+            const sensitivity = Orbit.sensitivity[eid];
+            const zoomSpeed = Orbit.zoomSpeed[eid];
+            const minPitch = Orbit.minPitch[eid];
+            const maxPitch = Orbit.maxPitch[eid];
+            const minDistance = Orbit.minDistance[eid];
+            const maxDistance = Orbit.maxDistance[eid];
+            const smoothness = Orbit.smoothness[eid];
+
+            if (input?.mouse.right) {
+                Orbit.targetYaw[eid] -= input.mouse.deltaX * sensitivity;
+                Orbit.targetPitch[eid] = clamp(
+                    Orbit.targetPitch[eid] + input.mouse.deltaY * sensitivity,
+                    minPitch,
+                    maxPitch
+                );
+            }
+
+            if (input && input.mouse.scrollDelta !== 0) {
+                const currentDistance = Orbit.targetDistance[eid];
+                const distanceScale = Math.max(0.3, currentDistance * 0.08);
+                const zoomDelta = input.mouse.scrollDelta * zoomSpeed * distanceScale;
+                Orbit.targetDistance[eid] = clamp(
+                    currentDistance + zoomDelta,
+                    minDistance,
+                    maxDistance
+                );
+            }
+
+            const t = smoothLerp(smoothness, dt);
+            Orbit.yaw[eid] += angleDiff(Orbit.yaw[eid], Orbit.targetYaw[eid]) * t;
+            Orbit.pitch[eid] += (Orbit.targetPitch[eid] - Orbit.pitch[eid]) * t;
+            Orbit.distance[eid] += (Orbit.targetDistance[eid] - Orbit.distance[eid]) * t;
+
+            const yaw = Orbit.yaw[eid];
+            const pitch = Orbit.pitch[eid];
+            const distance = Orbit.distance[eid];
+
+            let targetX = 0,
+                targetY = 0,
+                targetZ = 0;
+            const targetEid = Orbit.target[eid];
+            if (targetEid && state.hasComponent(targetEid, Transform)) {
+                targetX = Transform.posX[targetEid];
+                targetY = Transform.posY[targetEid];
+                targetZ = Transform.posZ[targetEid];
+            }
+
+            const camX = targetX + distance * Math.cos(pitch) * Math.sin(yaw);
+            const camY = targetY + distance * Math.sin(pitch);
+            const camZ = targetZ + distance * Math.cos(pitch) * Math.cos(yaw);
+
+            Transform.posX[eid] = camX;
+            Transform.posY[eid] = camY;
+            Transform.posZ[eid] = camZ;
+
+            const rotation = lookAt(camX, camY, camZ, targetX, targetY, targetZ);
+            Transform.quatX[eid] = rotation.x;
+            Transform.quatY[eid] = rotation.y;
+            Transform.quatZ[eid] = rotation.z;
+            Transform.quatW[eid] = rotation.w;
+        }
+    },
+};
+
+export const OrbitPlugin: Plugin = {
+    systems: [OrbitSystem],
+    components: { Orbit },
+    dependencies: [InputPlugin],
+};