@multiplekex/shallot 0.1.12 → 0.2.0

package/src/extras/lines/index.ts

@@ -1,71 +1,48 @@
-import { MAX_ENTITIES, resource, type Plugin, type State, type System } from "../../core";
-import { setTraits, type FieldAccessor } from "../../core/component";
+import {
+    MAX_ENTITIES,
+    resource,
+    createFieldProxy,
+    type Plugin,
+    type State,
+    type System,
+    type FieldProxy,
+} from "../../core";
+import { setTraits } from "../../core/component";
 import { Compute, ComputePlugin, createEntityIdBuffer } from "../../standard/compute";
 import {
     Render,
     RenderPlugin,
-    DEPTH_FORMAT,
     Pass,
     registerDraw,
     type Draw,
     type SharedPassContext,
 } from "../../standard/render";
+import { DEPTH_FORMAT } from "../../standard/render/scene";
+import { SCENE_STRUCT_WGSL } from "../../standard/render/shaders";
 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 packedColorProxy(data: Float32Array, stride: number, offset: number): FieldProxy {
     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);
+        const o = eid * stride + offset;
+        const r = Math.round(data[o] * 255);
+        const g = Math.round(data[o + 1] * 255);
+        const b = Math.round(data[o + 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;
+        const o = eid * stride + offset;
+        data[o] = ((value >> 16) & 0xff) / 255;
+        data[o + 1] = ((value >> 8) & 0xff) / 255;
+        data[o + 2] = (value & 0xff) / 255;
+        data[o + 3] = 1;
     }
 
-    return new Proxy([] as unknown as LineProxy, {
+    return new Proxy([] as unknown as FieldProxy, {
         get(_, prop) {
             if (prop === "get") return getValue;
             if (prop === "set") return setValue;
@@ -82,56 +59,30 @@ function colorProxy(): LineProxy {
     });
 }
 
-function colorChannelProxy(channelIndex: number): LineProxy {
-    const data = LineData.data;
-
-    function getValue(eid: number): number {
-        return data[eid * 12 + 8 + channelIndex];
-    }
-
-    function setValue(eid: number, value: number): void {
-        data[eid * 12 + 8 + channelIndex] = 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;
-        },
-    });
-}
+const data = LineData.data;
 
 export const Line: {
-    offsetX: LineProxy;
-    offsetY: LineProxy;
-    offsetZ: LineProxy;
-    thickness: LineProxy;
-    visible: LineProxy;
-    opacity: LineProxy;
-    color: LineProxy;
-    colorR: LineProxy;
-    colorG: LineProxy;
-    colorB: LineProxy;
+    offsetX: FieldProxy;
+    offsetY: FieldProxy;
+    offsetZ: FieldProxy;
+    thickness: FieldProxy;
+    visible: FieldProxy;
+    opacity: FieldProxy;
+    color: FieldProxy;
+    colorR: FieldProxy;
+    colorG: FieldProxy;
+    colorB: FieldProxy;
 } = {
-    offsetX: lineProxy(0),
-    offsetY: lineProxy(1),
-    offsetZ: lineProxy(2),
-    thickness: lineProxy(3),
-    visible: lineProxy(4),
-    opacity: lineProxy(7),
-    color: colorProxy(),
-    colorR: colorChannelProxy(0),
-    colorG: colorChannelProxy(1),
-    colorB: colorChannelProxy(2),
+    offsetX: createFieldProxy(data, 12, 0),
+    offsetY: createFieldProxy(data, 12, 1),
+    offsetZ: createFieldProxy(data, 12, 2),
+    thickness: createFieldProxy(data, 12, 3),
+    visible: createFieldProxy(data, 12, 4),
+    opacity: createFieldProxy(data, 12, 7),
+    color: packedColorProxy(data, 12, 8),
+    colorR: createFieldProxy(data, 12, 8),
+    colorG: createFieldProxy(data, 12, 9),
+    colorB: createFieldProxy(data, 12, 10),
 };
 
 setTraits(Line, {
@@ -144,18 +95,6 @@ setTraits(Line, {
         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,
-        colorR: Line.colorR,
-        colorG: Line.colorG,
-        colorB: Line.colorB,
-    },
 });
 
 export interface LinesConfig {
@@ -174,16 +113,7 @@ struct VertexOutput {
     @location(2) halfWidth: f32,
 }
 
-struct Scene {
-    viewProj: mat4x4<f32>,
-    cameraWorld: mat4x4<f32>,
-    ambientColor: vec4<f32>,
-    sunDirection: vec4<f32>,
-    sunColor: vec4<f32>,
-    cameraMode: f32,
-    cameraSize: f32,
-    viewport: vec2<f32>,
-}
+${SCENE_STRUCT_WGSL}
 
 struct LineData {
     offset: vec3<f32>,
@@ -220,8 +150,8 @@ fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> Ver
     let len = length(dir);
     let normDir = select(vec2(1.0, 0.0), dir / len, len > 0.0001);
 
-    // Convert thickness from pixels to NDC (2 pixels / viewport = NDC units)
-    let halfWidth = line.thickness * 0.5;
+    let scale = scene.viewport.y / 1080.0;
+    let halfWidth = line.thickness * 0.5 * scale;
     let aaPadding = 1.0;
     let totalHalf = halfWidth + aaPadding;
     let perpNDC = vec2(-normDir.y, normDir.x) * totalHalf * 2.0 / scene.viewport;
@@ -241,7 +171,6 @@ fn vs(@builtin(vertex_index) vid: u32, @builtin(instance_index) iid: u32) -> Ver
 
     let depth = mix(startClip.z / startClip.w, endClip.z / endClip.w, t);
 
-    // edge is -1 to +1 across quad, convert to pixel distance from line center
     let pixelDist = edge * totalHalf;
 
     var out: VertexOutput;
@@ -323,7 +252,7 @@ function createLinesDraw(config: LinesConfig): Draw {
 
     return {
         id: "lines",
-        pass: Pass.Transparent,
+        pass: Pass.Overlay,
         order: 0,
 
         execute() {},
@@ -355,13 +284,13 @@ function createLinesDraw(config: LinesConfig): Draw {
     };
 }
 
-export interface LinesState {
+export interface Lines {
     buffer: GPUBuffer;
     entityIds: GPUBuffer;
     count: number;
 }
 
-export const Lines = resource<LinesState>("lines");
+export const Lines = resource<Lines>("lines");
 
 const entityIdArray = new Uint32Array(MAX_ENTITIES);
 
@@ -400,7 +329,7 @@ export const LinesPlugin: Plugin = {
 
         const { device } = compute;
 
-        const linesState: LinesState = {
+        const linesState: Lines = {
             buffer: device.createBuffer({
                 label: "lines",
                 size: MAX_ENTITIES * 12 * 4,

package/src/extras/orbit/index.ts

@@ -1,7 +1,8 @@
 import { setTraits } from "../../core/component";
-import { clamp, lookAt, type State, type System, type Plugin, type MouseState } from "../../core";
+import { clamp, lookAt, type State, type System, type Plugin } from "../../core";
 import { Transform } from "../../standard/transforms";
-import { Input, InputPlugin } from "../../standard/input";
+import { Inputs, InputPlugin, type Mouse } from "../../standard/input";
+import { Camera, CameraMode } from "../../standard/render/camera";
 
 const Tau = Math.PI * 2;
 
@@ -23,6 +24,9 @@ export const Orbit = {
     maxPitch: [] as number[],
     minDistance: [] as number[],
     maxDistance: [] as number[],
+    minSize: [] as number[],
+    maxSize: [] as number[],
+    targetSize: [] as number[],
     smoothness: [] as number[],
     sensitivity: [] as number[],
     zoomSpeed: [] as number[],
@@ -42,6 +46,9 @@ setTraits(Orbit, {
         maxPitch: Math.PI / 2 - 0.01,
         minDistance: 1,
         maxDistance: 25,
+        minSize: 0.5,
+        maxSize: 50,
+        targetSize: 5,
         smoothness: 0.3,
         sensitivity: 0.005,
         zoomSpeed: 0.025,
@@ -63,7 +70,7 @@ function angleDiff(from: number, to: number): number {
     return diff > Math.PI ? diff - Tau : diff;
 }
 
-function isOrbitButton(mouse: Readonly<MouseState>, button: number): boolean {
+function isOrbitButton(mouse: Readonly<Mouse>, button: number): boolean {
     if (button === OrbitButton.Left) return mouse.left;
     if (button === OrbitButton.Middle) return mouse.middle;
     return mouse.right;
@@ -73,7 +80,7 @@ export const OrbitSystem: System = {
     group: "simulation",
 
     update(state: State) {
-        const input = Input.from(state);
+        const input = Inputs.from(state);
         const dt = state.time.deltaTime;
 
         for (const eid of state.query([Orbit, Transform])) {
@@ -81,10 +88,11 @@ export const OrbitSystem: System = {
             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];
 
+            const hasCamera = state.hasComponent(eid, Camera);
+            const isOrtho = hasCamera && Camera.mode[eid] === CameraMode.Orthographic;
+
             if (input && isOrbitButton(input.mouse, Orbit.button[eid])) {
                 Orbit.targetYaw[eid] -= input.mouse.deltaX * sensitivity;
                 Orbit.targetPitch[eid] = clamp(
@@ -94,15 +102,26 @@ export const OrbitSystem: System = {
                 );
             }
 
-            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
-                );
+            if (input && input.mouse.scroll !== 0) {
+                if (isOrtho) {
+                    const currentSize = Orbit.targetSize[eid];
+                    const sizeScale = Math.max(0.1, currentSize * 0.08);
+                    const zoomDelta = input.mouse.scroll * zoomSpeed * sizeScale;
+                    Orbit.targetSize[eid] = clamp(
+                        currentSize + zoomDelta,
+                        Orbit.minSize[eid],
+                        Orbit.maxSize[eid]
+                    );
+                } else {
+                    const currentDistance = Orbit.targetDistance[eid];
+                    const distanceScale = Math.max(0.3, currentDistance * 0.08);
+                    const zoomDelta = input.mouse.scroll * zoomSpeed * distanceScale;
+                    Orbit.targetDistance[eid] = clamp(
+                        currentDistance + zoomDelta,
+                        Orbit.minDistance[eid],
+                        Orbit.maxDistance[eid]
+                    );
+                }
             }
 
             const t = smoothLerp(smoothness, dt);
@@ -110,6 +129,12 @@ export const OrbitSystem: System = {
             Orbit.pitch[eid] += (Orbit.targetPitch[eid] - Orbit.pitch[eid]) * t;
             Orbit.distance[eid] += (Orbit.targetDistance[eid] - Orbit.distance[eid]) * t;
 
+            if (isOrtho) {
+                const currentSize = Camera.size[eid];
+                const targetSize = Orbit.targetSize[eid];
+                Camera.size[eid] = currentSize + (targetSize - currentSize) * t;
+            }
+
             const yaw = Orbit.yaw[eid];
             const pitch = Orbit.pitch[eid];
             const distance = Orbit.distance[eid];