@downdraft/engine 0.1.1 → 0.1.2-alpha.5

package/dist/modules/movement-3d/src/character-motor.js

@@ -0,0 +1,166 @@
+// ============================================================================
+// CharacterMotor3D — shared 3D character movement kernel
+//
+// Generalized from the andrews-sandbox moveLoop and to-the-ocean
+// player-manager. Computes desired per-tick movement deltas; collision
+// resolution is left to the game's physics backend (e.g. a Rapier character
+// controller) or a grid/terrain query.
+//
+// Conventions: yaw is radians, 0 faces -Z (matches getMoveForward below).
+// `facing` is the model yaw — atan2(-dx, -dz) of the movement direction.
+// ============================================================================
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+/** Horizontal forward/right basis for a yaw (0 faces -Z, +yaw turns right). */
+export function headingBasis(yaw) {
+    return {
+        fwd: [Math.sin(yaw), -Math.cos(yaw)],
+        right: [Math.cos(yaw), Math.sin(yaw)],
+    };
+}
+/** Shortest-arc signed angle difference a→b. */
+export function angleDelta(a, b) {
+    let d = b - a;
+    if (!Number.isFinite(d))
+        return 0;
+    return Math.atan2(Math.sin(d), Math.cos(d));
+}
+export function createCharacterMotor3D(cfg) {
+    const runSpeed = cfg.runSpeed ?? cfg.walkSpeed;
+    const flySpeed = cfg.flySpeed ?? cfg.walkSpeed;
+    const jumpForce = cfg.jumpForce ?? 0;
+    const gravity = cfg.gravity ?? 0;
+    const normalize = cfg.normalizeInput ?? true;
+    const turnMode = cfg.turn?.mode ?? "rate";
+    const turnRate = cfg.turn?.rate ?? 8.0;
+    const swimSpeed = cfg.swimSpeed ?? cfg.walkSpeed;
+    const surfaceOffset = cfg.swim?.surfaceOffset ?? 0.3;
+    function horizontalDelta(input, yaw, speed, dt) {
+        let fx = input.fwd;
+        let sx = input.strafe;
+        const len = Math.hypot(fx, sx);
+        if (len === 0)
+            return { dx: 0, dz: 0 };
+        if (normalize) {
+            fx /= len;
+            sx /= len;
+        }
+        const basis = headingBasis(yaw);
+        const mul = speed * (input.speedMul ?? 1) * dt;
+        return {
+            dx: (fx * basis.fwd[0] + sx * basis.right[0]) * mul,
+            dz: (fx * basis.fwd[1] + sx * basis.right[1]) * mul,
+        };
+    }
+    function turnToward(state, dx, dz, dt) {
+        if (dx === 0 && dz === 0)
+            return;
+        const target = Math.atan2(cfg.turn?.flip ? dx : -dx, -dz);
+        const diff = angleDelta(state.facing, target);
+        if (turnMode === "exp") {
+            state.facing += diff * Math.min(1, dt * turnRate);
+        }
+        else {
+            const step = turnRate * dt;
+            state.facing = Math.abs(diff) <= step ? target : state.facing + Math.sign(diff) * step;
+        }
+    }
+    function update(state, input, yaw, env, dt) {
+        const inWater = env.inWater && cfg.swim !== undefined;
+        const isRunning = !inWater && !!input.run;
+        const isDiving = inWater && (input.dive ?? input.run);
+        const isFloating = inWater && !!input.jump;
+        // --- Vertical ---
+        let dy = 0;
+        if (inWater) {
+            const swim = cfg.swim;
+            const forceMul = env.swimForceMul ?? 1;
+            const maxVert = swim.maxVertSpeed * (env.swimVertMul ?? 1);
+            state.vaultCooldown = Math.max(0, (state.vaultCooldown ?? 0) - dt);
+            if (Math.abs(state.vy) > maxVert) {
+                // Overspeed — a vault launch or a plunge from height. Decay
+                // ballistically back toward swim speeds; liquid forces re-engage once
+                // inside the cap, so a vault keeps its arc while still submerged
+                // instead of being crushed by drag on the next tick.
+                state.vy -= Math.sign(state.vy) * Math.min(Math.abs(state.vy) - maxVert, gravity * dt);
+            }
+            else {
+                if (isFloating)
+                    state.vy += swim.floatForce * forceMul * dt;
+                else if (isDiving)
+                    state.vy -= swim.diveForce * forceMul * dt;
+                else
+                    state.vy -= swim.sinkRate * (env.swimSinkMul ?? 1) * dt;
+                state.vy *= swim.drag;
+                state.vy = Math.max(-maxVert, Math.min(maxVert, state.vy));
+            }
+            dy = state.vy * dt;
+            if (env.waterHeight !== undefined && env.posY !== undefined) {
+                const vault = (swim.vaultForce ?? 0) * (env.swimVaultMul ?? 1);
+                const edgeDir = env.swimEdgeDir;
+                let towardEdge = input.fwd !== 0 || input.strafe !== 0;
+                if (edgeDir && towardEdge) {
+                    const b = headingBasis(yaw);
+                    const mvx = input.fwd * b.fwd[0] + input.strafe * b.right[0];
+                    const mvz = input.fwd * b.fwd[1] + input.strafe * b.right[1];
+                    towardEdge = mvx * edgeDir[0] + mvz * edgeDir[1] > 0.35;
+                }
+                // Vault out over the rim: holding jump in the shallow band while
+                // pressing toward the edge launches past the surface instead of
+                // clamping. vy>=0 + the cooldown stop a descending swimmer from
+                // re-triggering it; the env's inWater flag drops as the feet clear
+                // the surface, handing the launch to the ballistic branch.
+                if (isFloating && vault > 0 && (env.swimNearEdge ?? true) && towardEdge
+                    && state.vy >= 0 && (state.vaultCooldown ?? 0) <= 0
+                    && env.posY > env.waterHeight - (swim.vaultDepth ?? 0.55)) {
+                    state.vy = vault;
+                    state.vaultCooldown = swim.vaultCooldown ?? 0.5;
+                    state.grounded = false;
+                    dy = state.vy * dt;
+                }
+                else if (isFloating) {
+                    // Ease to a stop at the surface line — an asymptotic approach
+                    // instead of overshooting into the dry branch every other tick
+                    // (the old hard clamp made the swimmer bob visibly at the line).
+                    const cap = Math.max(0, env.waterHeight - surfaceOffset - env.posY) * 6;
+                    if (state.vy > cap) {
+                        state.vy = cap;
+                        dy = state.vy * dt;
+                    }
+                }
+            }
+        }
+        else {
+            if (cfg.resetVyWhenGrounded && state.grounded)
+                state.vy = 0;
+            if (state.grounded && input.jump && (env.jumpAllowed ?? true)) {
+                state.vy = jumpForce;
+                state.grounded = false;
+            }
+            state.vy -= gravity * dt;
+            dy = state.vy * dt;
+            // Flat ground-plane fallback (seabed / terrain floor).
+            if (cfg.groundHeight !== undefined && env.posY !== undefined
+                && env.posY + dy < cfg.groundHeight) {
+                dy = cfg.groundHeight - env.posY;
+                state.vy = 0;
+            }
+        }
+        // --- Horizontal ---
+        const moveSpeed = inWater ? swimSpeed : isRunning ? runSpeed : cfg.walkSpeed;
+        const { dx, dz } = horizontalDelta(input, yaw, moveSpeed, dt);
+        turnToward(state, dx, dz, dt);
+        return { dx, dy, dz };
+    }
+    function fly(input, yaw, dt) {
+        const mul = input.speedMul ?? 1;
+        const speed = flySpeed * mul;
+        const { dx, dz } = horizontalDelta({ ...input, speedMul: 1 }, yaw, speed, dt);
+        let dy = 0;
+        if (input.up)
+            dy += speed * dt;
+        if (input.down)
+            dy -= speed * dt;
+        return { dx, dy, dz };
+    }
+    return { update, fly };
+}

package/dist/modules/movement-3d/src/index.js

@@ -0,0 +1,27 @@
+// ============================================================================
+// @downdraft/engine/modules/movement-3d — 3D first-person/third-person movement
+//
+// Provides CharacterMotor3D: a configurable character movement kernel that
+// computes desired per-tick deltas (heading-relative WASD, walk/run, jump +
+// gravity, swimming, free-fly, turn-to-face). Collision resolution stays with
+// the game's physics backend (Rapier character controller, terrain query…).
+//
+// The module wraps the factory in a DI token for module-host games; games
+// with hand-rolled sims can import createCharacterMotor3D directly.
+// ============================================================================
+import { resourceToken } from "@downdraft/engine";
+import { createCharacterMotor3D } from "./character-motor.js";
+export { angleDelta, createCharacterMotor3D, headingBasis } from "./character-motor.js";
+export const CharacterMotor3DTok = resourceToken("movement-3d:motor");
+/** @deprecated Use CharacterMotor3DTok. */
+export const Movement3DStateTok = resourceToken("movement-3d:state");
+export function createMovement3DModule(config) {
+    return {
+        name: "movement-3d",
+        version: "1.0.0",
+        provides: [CharacterMotor3DTok],
+        register(ctx) {
+            ctx.provide(CharacterMotor3DTok, createCharacterMotor3D(config));
+        },
+    };
+}

package/dist/modules/native-osr/src/index.js

@@ -0,0 +1,12 @@
+// ============================================================================
+// Native OSR Module — Blitz-backed offscreen HTML/CSS panels
+// ============================================================================
+// Renderer-side machinery for the native (Bun/SDL/wgpu) runtime. The host
+// side lives in `@downdraft/platform-native` (NativeOsrHost owns one Blitz
+// document per renderer/panel behind the `downdraft.osr` bridge); this module
+// owns the GPU texture sink, world-space compositing pass, and input router.
+export { BillboardMode } from "./types.js";
+export { OSRInputRouter } from "./input-router.js";
+export { NativeOSRManager } from "./native-osr-manager.js";
+export { NativeOsrTextureSource } from "./native-texture-source.js";
+export { WorldSpaceUIPass } from "./world-space-ui-pass.js";

package/dist/modules/native-osr/src/input-router.js

@@ -0,0 +1,335 @@
+// ============================================================================
+// OSR Input Router — Raycasts against billboards and forwards input to OSR windows
+// ============================================================================
+import { invertMat4Into, transformMat4Vec4 } from "@downdraft/engine";
+export class OSRInputRouter {
+    config;
+    sendInputEvent;
+    hoveredElementId = null;
+    hoveredRendererId = null;
+    forcedFocusRendererId = null;
+    forcedFocusTextureIndex = -1;
+    forcedFocusCanvasWidth = 0;
+    forcedFocusCanvasHeight = 0;
+    lastMouseX = -1;
+    lastMouseY = -1;
+    lastButtons = 0;
+    constructor(config, sendInputEvent) {
+        this.config = config;
+        this.sendInputEvent = sendInputEvent;
+    }
+    updateConfig(config) {
+        this.config = config;
+    }
+    /**
+     * Processes mouse state and forwards events to the appropriate OSR renderer.
+     * Uses raycasting to determine which billboard the mouse is hovering over.
+     */
+    handleMouse(camera, mouse, elements) {
+        // Forced focus mode: raycast for position, always forward to focused renderer
+        if (this.forcedFocusRendererId) {
+            this.handleMouseForced(camera, mouse, elements);
+            return;
+        }
+        // Simple raycast: project mouse to world ray and test against billboard planes
+        const hit = this.raycastBillboards(camera, mouse, elements);
+        const rendererId = hit ? this.config.textureIndexToRendererId.get(hit.element.textureIndex) : null;
+        // Skip if renderer is crashed or failed
+        if (rendererId) {
+            const status = this.config.rendererStatuses.get(rendererId);
+            if (status === "crashed" || status === "failed")
+                return;
+        }
+        // Mouse move
+        if (mouse.x !== this.lastMouseX || mouse.y !== this.lastMouseY) {
+            if (hit && rendererId) {
+                const coords = this.computeRendererCoords(hit);
+                this.sendInputEvent(rendererId, {
+                    type: "mouseMove",
+                    x: coords.x,
+                    y: coords.y,
+                    button: "left",
+                });
+                this.hoveredRendererId = rendererId;
+            }
+            else {
+                this.hoveredRendererId = null;
+            }
+            this.lastMouseX = mouse.x;
+            this.lastMouseY = mouse.y;
+        }
+        // Mouse button changes
+        const buttonChanged = mouse.buttons !== this.lastButtons;
+        if (buttonChanged) {
+            const prevButtons = this.lastButtons;
+            const currButtons = mouse.buttons;
+            if (hit && rendererId) {
+                const coords = this.computeRendererCoords(hit);
+                // Left button
+                if ((currButtons & 1) && !(prevButtons & 1)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "left" });
+                    this.hoveredElementId = hit.element.id;
+                    this.hoveredRendererId = rendererId;
+                }
+                else if (!(currButtons & 1) && (prevButtons & 1)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "left" });
+                }
+                // Right button
+                if ((currButtons & 2) && !(prevButtons & 2)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "right" });
+                }
+                else if (!(currButtons & 2) && (prevButtons & 2)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "right" });
+                }
+                // Middle button
+                if ((currButtons & 4) && !(prevButtons & 4)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "middle" });
+                }
+                else if (!(currButtons & 4) && (prevButtons & 4)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "middle" });
+                }
+            }
+            else if (this.hoveredRendererId) {
+                // Mouse released outside any billboard — send mouseUp to last hovered
+                this.sendInputEvent(this.hoveredRendererId, { type: "mouseUp", x: 0, y: 0, button: "left" });
+                this.hoveredElementId = null;
+                this.hoveredRendererId = null;
+            }
+            this.lastButtons = currButtons;
+        }
+        // Mouse wheel
+        if (mouse.wheelDeltaY !== 0 || mouse.wheelDeltaX !== 0) {
+            if (hit && rendererId) {
+                const coords = this.computeRendererCoords(hit);
+                this.sendInputEvent(rendererId, {
+                    type: "mouseWheel",
+                    x: coords.x,
+                    y: coords.y,
+                    deltaX: mouse.wheelDeltaX,
+                    deltaY: mouse.wheelDeltaY,
+                });
+            }
+        }
+    }
+    /**
+     * Forced focus mode: raycasts for accurate mouse position on the billboard,
+     * but always forwards events to the forced-focus renderer (regardless of which
+     * billboard the raycast hits).
+     */
+    handleMouseForced(camera, mouse, elements) {
+        const rendererId = this.forcedFocusRendererId;
+        // Raycast to get accurate UV coordinates on the billboard
+        const hit = this.raycastBillboards(camera, mouse, elements);
+        const coords = hit ? this.computeRendererCoords(hit) : null;
+        // Mouse move
+        if (mouse.x !== this.lastMouseX || mouse.y !== this.lastMouseY) {
+            if (coords) {
+                this.sendInputEvent(rendererId, { type: "mouseMove", x: coords.x, y: coords.y, button: "left" });
+            }
+            this.lastMouseX = mouse.x;
+            this.lastMouseY = mouse.y;
+        }
+        // Mouse button changes
+        const buttonChanged = mouse.buttons !== this.lastButtons;
+        if (buttonChanged) {
+            const prevButtons = this.lastButtons;
+            const currButtons = mouse.buttons;
+            if (coords) {
+                // Left button
+                if ((currButtons & 1) && !(prevButtons & 1)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "left" });
+                }
+                else if (!(currButtons & 1) && (prevButtons & 1)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "left" });
+                }
+                // Right button
+                if ((currButtons & 2) && !(prevButtons & 2)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "right" });
+                }
+                else if (!(currButtons & 2) && (prevButtons & 2)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "right" });
+                }
+                // Middle button
+                if ((currButtons & 4) && !(prevButtons & 4)) {
+                    this.sendInputEvent(rendererId, { type: "mouseDown", x: coords.x, y: coords.y, button: "middle" });
+                }
+                else if (!(currButtons & 4) && (prevButtons & 4)) {
+                    this.sendInputEvent(rendererId, { type: "mouseUp", x: coords.x, y: coords.y, button: "middle" });
+                }
+            }
+            this.lastButtons = currButtons;
+        }
+        // Mouse wheel
+        if (mouse.wheelDeltaY !== 0 || mouse.wheelDeltaX !== 0) {
+            if (coords) {
+                this.sendInputEvent(rendererId, {
+                    type: "mouseWheel",
+                    x: coords.x,
+                    y: coords.y,
+                    deltaX: mouse.wheelDeltaX,
+                    deltaY: mouse.wheelDeltaY,
+                });
+            }
+        }
+    }
+    /**
+     * Manually focus the first available billboard renderer (bypasses raycasting).
+     * Sets forced focus mode so all mouse/keyboard events are forwarded to this renderer.
+     */
+    focusBillboard() {
+        for (const [texIdx, rendererId] of this.config.textureIndexToRendererId.entries()) {
+            const status = this.config.rendererStatuses.get(rendererId);
+            if (status === "crashed" || status === "failed")
+                continue;
+            this.hoveredRendererId = rendererId;
+            this.hoveredElementId = `manual-focus-${texIdx}`;
+            this.forcedFocusRendererId = rendererId;
+            this.forcedFocusTextureIndex = texIdx;
+            return rendererId;
+        }
+        return null;
+    }
+    /** Set canvas dimensions for proportional mouse mapping in forced focus mode. */
+    setForcedFocusCanvasSize(w, h) {
+        this.forcedFocusCanvasWidth = w;
+        this.forcedFocusCanvasHeight = h;
+    }
+    /** Check if forced focus mode is active. */
+    isForcedFocus() {
+        return this.forcedFocusRendererId !== null;
+    }
+    /** Check if the mouse is currently hovering over a billboard. */
+    isHoveringBillboard() {
+        return this.hoveredRendererId !== null;
+    }
+    /** Exit forced focus mode, return to raycast-based input. */
+    unfocusBillboard() {
+        this.forcedFocusRendererId = null;
+        this.forcedFocusTextureIndex = -1;
+        this.hoveredElementId = null;
+        this.hoveredRendererId = null;
+    }
+    /** Forwards a keyboard event to the currently focused/hovered renderer. */
+    handleKey(type, keyCode, modifiers) {
+        if (!this.hoveredRendererId)
+            return;
+        const status = this.config.rendererStatuses.get(this.hoveredRendererId);
+        if (status === "crashed" || status === "failed")
+            return;
+        this.sendInputEvent(this.hoveredRendererId, { type, x: 0, y: 0, keyCode, modifiers });
+    }
+    computeRendererCoords(hit) {
+        const rendererId = this.config.textureIndexToRendererId.get(hit.element.textureIndex);
+        if (!rendererId)
+            return { x: 0, y: 0 };
+        // For atlas mode: map UV to atlas pixel coordinates
+        const layout = this.config.atlasLayouts.get(rendererId);
+        if (layout) {
+            // UV within the panel = (hit.uv - uvOffset) / uvScale → panel-relative UV
+            const panelU = (hit.uv[0] - hit.element.uvOffset[0]) / hit.element.uvScale[0];
+            const panelV = (hit.uv[1] - hit.element.uvOffset[1]) / hit.element.uvScale[1];
+            // Find which panel this UV falls within
+            for (const [, rect] of layout.panels.entries()) {
+                const panelX = rect.x / layout.width;
+                const panelY = rect.y / layout.height;
+                const panelW = rect.w / layout.width;
+                const panelH = rect.h / layout.height;
+                if (panelU >= panelX && panelU <= panelX + panelW &&
+                    panelV >= panelY && panelV <= panelY + panelH) {
+                    // Map to atlas-space pixels — the surface is one document with
+                    // panels positioned at their rects, so events carry atlas coords.
+                    const x = (panelU - panelX) / panelW * rect.w + rect.x;
+                    const y = (panelV - panelY) / panelH * rect.h + rect.y;
+                    return { x, y };
+                }
+            }
+        }
+        // For dedicated mode: map UV directly to texture pixel coordinates
+        // Flip Y: UV origin is bottom-left, DOM origin is top-left
+        const dims = this.config.rendererDimensions.get(rendererId);
+        const w = dims?.width ?? 512;
+        const h = dims?.height ?? 384;
+        return { x: hit.uv[0] * w, y: (1 - hit.uv[1]) * h };
+    }
+    raycastBillboards(camera, mouse, elements) {
+        if (elements.length === 0)
+            return null;
+        // Convert mouse screen coords to NDC (-1 to 1)
+        // mouse.x/y are in canvas pixels (top-left origin)
+        const ndcX = (mouse.x / camera.canvasWidth) * 2.0 - 1.0;
+        const ndcY = -((mouse.y / camera.canvasHeight) * 2.0 - 1.0); // flip Y (NDC bottom-up)
+        // Build inverse of viewProj to unproject NDC → world
+        const vp = camera.viewProj;
+        const inv = new Float32Array(16);
+        if (!invertMat4Into(vp, inv))
+            return null;
+        // Ray origin = camera position
+        // Ray direction = unproject NDC point at far plane, normalize
+        const nearPoint = transformMat4Vec4(inv, [ndcX, ndcY, -1, 1]);
+        const farPoint = transformMat4Vec4(inv, [ndcX, ndcY, 1, 1]);
+        if (nearPoint[3] === 0 || farPoint[3] === 0)
+            return null;
+        // Perspective divide
+        const nx = nearPoint[0] / nearPoint[3];
+        const ny = nearPoint[1] / nearPoint[3];
+        const nz = nearPoint[2] / nearPoint[3];
+        const fx = farPoint[0] / farPoint[3];
+        const fy = farPoint[1] / farPoint[3];
+        const fz = farPoint[2] / farPoint[3];
+        // Ray direction
+        let dx = fx - nx;
+        let dy = fy - ny;
+        let dz = fz - nz;
+        const dlen = Math.sqrt(dx * dx + dy * dy + dz * dz);
+        if (dlen === 0)
+            return null;
+        dx /= dlen;
+        dy /= dlen;
+        dz /= dlen;
+        const right = camera.cameraRight;
+        const up = camera.cameraUp;
+        let closestHit = null;
+        let closestDist = Infinity;
+        for (let _i = 0, _it = elements, _n = _it.length; _i < _n; _i++) {
+            const el = _it[_i];
+            const cx = el.position[0];
+            const cy = el.position[1];
+            const cz = el.position[2];
+            // Billboard normal = cross(right, up) = camera forward
+            const normalX = right[1] * up[2] - right[2] * up[1];
+            const normalY = right[2] * up[0] - right[0] * up[2];
+            const normalZ = right[0] * up[1] - right[1] * up[0];
+            const nlen = Math.sqrt(normalX * normalX + normalY * normalY + normalZ * normalZ);
+            if (nlen === 0)
+                continue;
+            // Ray-plane intersection: t = dot(center - origin, normal) / dot(dir, normal)
+            const ocx = cx - camera.cameraPosition[0];
+            const ocy = cy - camera.cameraPosition[1];
+            const ocz = cz - camera.cameraPosition[2];
+            const denom = dx * (normalX / nlen) + dy * (normalY / nlen) + dz * (normalZ / nlen);
+            if (Math.abs(denom) < 1e-6)
+                continue;
+            const t = (ocx * (normalX / nlen) + ocy * (normalY / nlen) + ocz * (normalZ / nlen)) / denom;
+            if (t < 0)
+                continue; // behind camera
+            // Intersection point
+            const px = camera.cameraPosition[0] + dx * t;
+            const py = camera.cameraPosition[1] + dy * t;
+            const pz = camera.cameraPosition[2] + dz * t;
+            // Convert to local UV on the billboard
+            const localX = (px - cx) * right[0] + (py - cy) * right[1] + (pz - cz) * right[2];
+            const localY = (px - cx) * up[0] + (py - cy) * up[1] + (pz - cz) * up[2];
+            const halfW = el.size[0] * 0.5;
+            const halfH = el.size[1] * 0.5;
+            if (Math.abs(localX) > halfW || Math.abs(localY) > halfH)
+                continue;
+            const u = localX / el.size[0] + 0.5;
+            const v = localY / el.size[1] + 0.5;
+            if (t < closestDist) {
+                closestDist = t;
+                closestHit = { element: el, uv: [u, v] };
+            }
+        }
+        return closestHit;
+    }
+}