@heliguy-xyz/splat-viewer 1.0.0-rc.24 → 1.0.0-rc.26

package/dist/web-component/splat-viewer.esm.js

@@ -105228,14 +105228,24 @@ class CameraModeManager {
     activateFlyMode() {
         if (!this.fly)
             return;
-        if (typeof this.fly.activate === 'function')
-            this.fly.activate();
-        // Align fly camera internal orientation with the current camera rotation so that
-        // switching from orbit -> fly does not snap the view back to the initial direction.
+        // Preserve camera position and rotation when switching to fly mode
         try {
+            // Preserve position
+            const pos = this.camera.getPosition
+                ? this.camera.getPosition().clone()
+                : this.camera.getLocalPosition
+                    ? this.camera.getLocalPosition().clone()
+                    : null;
+            if (pos && this.camera.setPosition) {
+                ;
+                this.camera.setPosition(pos);
+            }
+            // Preserve rotation (convert Euler to pitch/yaw)
             const euler = this.camera.getEulerAngles
                 ? this.camera.getEulerAngles()
-                : null;
+                : this.camera.getLocalEulerAngles
+                    ? this.camera.getLocalEulerAngles()
+                    : null;
             if (euler) {
                 // These properties are part of the FlyCamera runtime state
                 ;
@@ -105246,6 +105256,8 @@ class CameraModeManager {
         catch {
             // Best-effort sync; ignore if camera or script API differs
         }
+        if (typeof this.fly.activate === 'function')
+            this.fly.activate();
     }
     deactivateFlyMode() {
         if (!this.fly)
@@ -105255,6 +105267,373 @@ class CameraModeManager {
     }
 }
 
+/**
+ * Fly camera controller for environments where PlayCanvas ScriptComponentSystem is not available
+ * (e.g. supersplat-core's custom PCApp, which omits ScriptComponentSystem).
+ *
+ * This controller attaches DOM input listeners and updates the camera entity via `app.on('update')`.
+ */
+class FlyCameraController {
+    constructor(app, entity, emitFlyEvent, config) {
+        // Config
+        this.moveSpeed = 5.0;
+        this.fastSpeedMultiplier = 3.0;
+        this.slowSpeedMultiplier = 0.3;
+        this.lookSensitivity = 0.2;
+        this.invertY = false;
+        this.keyBindings = {
+            forward: 'KeyW',
+            backward: 'KeyS',
+            left: 'KeyA',
+            right: 'KeyD',
+            up: 'KeyE',
+            down: 'KeyQ',
+            fastMove: 'ShiftLeft',
+            slowMove: 'ControlLeft',
+        };
+        this.smoothing = 0.8;
+        this.friction = 0.85;
+        this.enableCollision = false;
+        this.minHeight = null;
+        this.maxHeight = null;
+        this._isActive = true;
+        this._isPointerLocked = false;
+        this._isLooking = false;
+        this._pressed = new Set();
+        this._velocity = new Vec3(0, 0, 0);
+        this._targetVelocity = new Vec3(0, 0, 0);
+        this._pitch = 0;
+        this._yaw = 0;
+        this._lastMoveEmitTime = 0;
+        this._lastLookEmitTime = 0;
+        this._updateHandler = null;
+        this.app = app;
+        this.entity = entity;
+        this.emitFlyEvent = emitFlyEvent;
+        if (config) {
+            this.setConfig(config);
+        }
+        // Sync initial yaw/pitch from entity orientation if available
+        try {
+            const euler = this.entity?.getEulerAngles?.();
+            if (euler) {
+                this._pitch = euler.x || 0;
+                this._yaw = euler.y || 0;
+            }
+        }
+        catch {
+            // ignore
+        }
+        this._bindInputListeners();
+    }
+    _bindInputListeners() {
+        // Keyboard (capture phase so we see keys even when other handlers run)
+        this._onKeyDown = this._handleKeyDown.bind(this);
+        this._onKeyUp = this._handleKeyUp.bind(this);
+        document.addEventListener('keydown', this._onKeyDown, true);
+        document.addEventListener('keyup', this._onKeyUp, true);
+        // Look: pointer events primary, mouse fallback
+        this._onMouseMove = this._handleMouseMove.bind(this);
+        this._onPointerMove = this._handlePointerMove.bind(this);
+        document.addEventListener('mousemove', this._onMouseMove);
+        document.addEventListener('pointermove', this._onPointerMove, true);
+        const canvas = this.app?.graphicsDevice?.canvas;
+        this._onMouseDown = (e) => {
+            if (e.button === 0 && this._isActive)
+                this._isLooking = true;
+        };
+        this._onPointerDown = (e) => {
+            if (e.button === 0 && this._isActive) {
+                this._isLooking = true;
+            }
+        };
+        canvas?.addEventListener('mousedown', this._onMouseDown, true);
+        canvas?.addEventListener('pointerdown', this._onPointerDown, true);
+        this._onMouseUp = (e) => {
+            if (e.button === 0)
+                this._isLooking = false;
+        };
+        this._onPointerUp = (e) => {
+            if (e.button === 0) {
+                this._isLooking = false;
+            }
+        };
+        document.addEventListener('mouseup', this._onMouseUp, true);
+        document.addEventListener('pointerup', this._onPointerUp, true);
+    }
+    _unbindInputListeners() {
+        document.removeEventListener('keydown', this._onKeyDown, true);
+        document.removeEventListener('keyup', this._onKeyUp, true);
+        document.removeEventListener('mousemove', this._onMouseMove);
+        document.removeEventListener('pointermove', this._onPointerMove, true);
+        document.removeEventListener('mouseup', this._onMouseUp, true);
+        document.removeEventListener('pointerup', this._onPointerUp, true);
+        const canvas = this.app?.graphicsDevice?.canvas;
+        if (canvas && this._onMouseDown) {
+            canvas.removeEventListener('mousedown', this._onMouseDown, true);
+        }
+        if (canvas && this._onPointerDown) {
+            canvas.removeEventListener('pointerdown', this._onPointerDown, true);
+        }
+    }
+    /**
+     * Sync position and rotation from the camera entity.
+     * Called when switching from orbit to fly mode to preserve camera state.
+     */
+    syncFromEntity() {
+        try {
+            // Preserve position
+            const pos = this.entity?.getPosition?.() || this.entity?.getLocalPosition?.();
+            if (pos) {
+                const posVec = pos.clone ? pos.clone() : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
+                this.entity?.setPosition?.(posVec);
+                this.entity?.setLocalPosition?.(posVec);
+            }
+            // Preserve rotation (convert Euler to pitch/yaw)
+            const euler = this.entity?.getEulerAngles?.() || this.entity?.getLocalEulerAngles?.();
+            if (euler) {
+                // PlayCanvas Euler: x=pitch, y=yaw, z=roll
+                this._pitch = euler.x || 0;
+                this._yaw = euler.y || 0;
+                // Apply rotation immediately so view doesn't snap
+                if (this.entity?.setLocalEulerAngles) {
+                    this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
+                }
+                else if (this.entity?.setEulerAngles) {
+                    this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+                }
+            }
+        }
+        catch {
+            // ignore
+        }
+    }
+    activate() {
+        if (this._isActive)
+            return;
+        this._isActive = true;
+        // Sync position and rotation from current camera state before activating
+        this.syncFromEntity();
+        if (!this._updateHandler) {
+            this._updateHandler = (dt) => this.update(dt);
+            this.app?.on?.('update', this._updateHandler);
+        }
+    }
+    deactivate() {
+        if (!this._isActive)
+            return;
+        this._isActive = false;
+        this._isLooking = false;
+        this._pressed.clear();
+        if (this._updateHandler) {
+            try {
+                this.app?.off?.('update', this._updateHandler);
+            }
+            catch {
+                // ignore
+            }
+            this._updateHandler = null;
+        }
+    }
+    destroy() {
+        try {
+            this.deactivate();
+        }
+        finally {
+            this._unbindInputListeners();
+        }
+    }
+    setConfig(config) {
+        if (config.moveSpeed !== undefined)
+            this.moveSpeed = config.moveSpeed;
+        if (config.fastSpeedMultiplier !== undefined)
+            this.fastSpeedMultiplier = config.fastSpeedMultiplier;
+        if (config.slowSpeedMultiplier !== undefined)
+            this.slowSpeedMultiplier = config.slowSpeedMultiplier;
+        if (config.lookSensitivity !== undefined)
+            this.lookSensitivity = config.lookSensitivity;
+        if (config.invertY !== undefined)
+            this.invertY = config.invertY;
+        if (config.keyBindings !== undefined)
+            this.keyBindings = config.keyBindings;
+        if (config.smoothing !== undefined)
+            this.smoothing = config.smoothing;
+        if (config.friction !== undefined)
+            this.friction = config.friction;
+        if (config.enableCollision !== undefined)
+            this.enableCollision = config.enableCollision;
+        if (config.minHeight !== undefined)
+            this.minHeight = config.minHeight;
+        if (config.maxHeight !== undefined)
+            this.maxHeight = config.maxHeight;
+    }
+    getState() {
+        const pos = this.entity?.getPosition?.();
+        return {
+            position: { x: pos?.x ?? 0, y: pos?.y ?? 0, z: pos?.z ?? 0 },
+            rotation: { pitch: this._pitch, yaw: this._yaw },
+            velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+            isMoving: Math.abs(this._velocity.x) +
+                Math.abs(this._velocity.y) +
+                Math.abs(this._velocity.z) >
+                1e-4,
+        };
+    }
+    _handleKeyDown(e) {
+        const keys = [];
+        if (e.code)
+            keys.push(e.code);
+        if (e.key) {
+            keys.push(e.key);
+            if (e.key.length === 1) {
+                keys.push(`Key${e.key.toUpperCase()}`);
+                keys.push(e.key.toUpperCase());
+                keys.push(e.key.toLowerCase());
+            }
+        }
+        for (const k of keys)
+            this._pressed.add(k);
+    }
+    _handleKeyUp(e) {
+        const keys = [];
+        if (e.code)
+            keys.push(e.code);
+        if (e.key) {
+            keys.push(e.key);
+            if (e.key.length === 1) {
+                keys.push(`Key${e.key.toUpperCase()}`);
+                keys.push(e.key.toUpperCase());
+                keys.push(e.key.toLowerCase());
+            }
+        }
+        for (const k of keys)
+            this._pressed.delete(k);
+    }
+    _handleMouseMove(e) {
+        if (!this._isLooking || !this._isActive)
+            return;
+        const dx = e.movementX * this.lookSensitivity;
+        const dy = e.movementY * this.lookSensitivity * (this.invertY ? 1 : -1);
+        this._yaw = (this._yaw - dx) % 360;
+        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+    }
+    _handlePointerMove(e) {
+        if (!this._isLooking || !this._isActive)
+            return;
+        const dx = (e.movementX || 0) * this.lookSensitivity;
+        const dy = (e.movementY || 0) * this.lookSensitivity * (this.invertY ? 1 : -1);
+        this._yaw = (this._yaw - dx) % 360;
+        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+    }
+    _getEffectiveSpeed() {
+        const fast = this._pressed.has(this.keyBindings.fastMove);
+        const slow = this._pressed.has(this.keyBindings.slowMove);
+        let s = this.moveSpeed;
+        if (fast)
+            s *= this.fastSpeedMultiplier;
+        if (slow)
+            s *= this.slowSpeedMultiplier;
+        return s;
+    }
+    _updateVelocity() {
+        const kb = this.keyBindings;
+        const isPressed = (binding, fallbacks) => {
+            const all = [binding, ...fallbacks].filter(Boolean);
+            return all.some(k => this._pressed.has(k));
+        };
+        const forward = isPressed(kb.forward, ['KeyW', 'w', 'W']) ? 1 : 0;
+        const backward = isPressed(kb.backward, ['KeyS', 's', 'S']) ? 1 : 0;
+        const left = isPressed(kb.left, ['KeyA', 'a', 'A']) ? 1 : 0;
+        const right = isPressed(kb.right, ['KeyD', 'd', 'D']) ? 1 : 0;
+        const up = isPressed(kb.up, ['KeyE', 'e', 'E']) ? 1 : 0;
+        const down = isPressed(kb.down, ['KeyQ', 'q', 'Q']) ? 1 : 0;
+        const inputZ = forward - backward;
+        const inputX = right - left;
+        const inputY = up - down;
+        const planarLen = Math.hypot(inputX, inputZ);
+        const nx = planarLen > 0 ? inputX / planarLen : 0;
+        const nz = planarLen > 0 ? inputZ / planarLen : 0;
+        const speed = this._getEffectiveSpeed() * 2;
+        const entity = this.entity;
+        const fwd = entity?.forward && entity.forward.clone
+            ? entity.forward.clone()
+            : entity?.forward
+                ? new Vec3(entity.forward.x, entity.forward.y, entity.forward.z)
+                : new Vec3(0, 0, -1);
+        const rightVec = entity?.right && entity.right.clone
+            ? entity.right.clone()
+            : entity?.right
+                ? new Vec3(entity.right.x, entity.right.y, entity.right.z)
+                : new Vec3(1, 0, 0);
+        const upVec = entity?.up && entity.up.clone
+            ? entity.up.clone()
+            : entity?.up
+                ? new Vec3(entity.up.x, entity.up.y, entity.up.z)
+                : Vec3.UP.clone();
+        const target = new Vec3(0, 0, 0);
+        target.add(fwd.mulScalar(nz * speed));
+        target.add(rightVec.mulScalar(nx * speed));
+        target.add(upVec.mulScalar(inputY * speed));
+        this._targetVelocity.copy(target);
+        this._velocity.lerp(this._velocity, this._targetVelocity, Math.min(1, this.smoothing));
+        if (nx === 0 && nz === 0 && inputY === 0) {
+            this._velocity.mulScalar(this.friction);
+            if (this._velocity.length() < 0.0001)
+                this._velocity.set(0, 0, 0);
+        }
+    }
+    _applyMovement(dt) {
+        if (this._velocity.length() === 0)
+            return;
+        const pos = this.entity?.getPosition?.()?.clone?.() ?? new Vec3(0, 0, 0);
+        pos.add(this._velocity.clone().mulScalar(dt));
+        this.entity?.setPosition?.(pos);
+    }
+    _applyRotation() {
+        if (this.entity?.setLocalEulerAngles) {
+            this.entity.setLocalEulerAngles(this._pitch, this._yaw, 0);
+        }
+        else if (this.entity?.setEulerAngles) {
+            this.entity.setEulerAngles(this._pitch, this._yaw, 0);
+        }
+    }
+    _applyConstraints() {
+        if (!this.enableCollision &&
+            this.minHeight == null &&
+            this.maxHeight == null) {
+            return;
+        }
+        const pos = this.entity?.getPosition?.()?.clone?.() ?? new Vec3(0, 0, 0);
+        if (this.minHeight != null)
+            pos.y = Math.max(pos.y, this.minHeight);
+        if (this.maxHeight != null)
+            pos.y = Math.min(pos.y, this.maxHeight);
+        this.entity?.setPosition?.(pos);
+    }
+    update(dt) {
+        if (!this._isActive)
+            return;
+        this._updateVelocity();
+        this._applyMovement(dt);
+        this._applyRotation();
+        this._applyConstraints();
+        // Emit throttled movement/look events (100ms)
+        const now = performance.now();
+        if (!this._lastMoveEmitTime || now - this._lastMoveEmitTime >= 100) {
+            const pos = this.entity?.getPosition?.();
+            this.emitFlyEvent?.('fly-camera-move', {
+                position: { x: pos?.x ?? 0, y: pos?.y ?? 0, z: pos?.z ?? 0 },
+                velocity: { x: this._velocity.x, y: this._velocity.y, z: this._velocity.z },
+            });
+            this._lastMoveEmitTime = now;
+        }
+        if (!this._lastLookEmitTime || now - this._lastLookEmitTime >= 100) {
+            this.emitFlyEvent?.('fly-camera-look', { pitch: this._pitch, yaw: this._yaw });
+            this._lastLookEmitTime = now;
+        }
+    }
+}
+
 // FlyCamera PlayCanvas script: first-person WASD movement with mouse-look
 function registerFlyCameraScript() {
     if (typeof pc === 'undefined') {
@@ -105340,10 +105719,18 @@ function registerFlyCameraScript() {
         this._onKeyUp = this._handleKeyUp.bind(this);
         document.addEventListener('keydown', this._onKeyDown, true);
         document.addEventListener('keyup', this._onKeyUp, true);
-        // Mouse move for look (while mouse button held)
+        // Mouse/pointer move for look (while primary button held).
+        //
+        // Important: SuperSplat camera controls are pointer-event based and may call
+        // preventDefault() on pointer events. When that happens, browsers often
+        // suppress the corresponding legacy mouse events (mousedown/mousemove).
+        // So we listen to *pointer* events as the primary path, with mouse as a
+        // fallback for older environments.
         this._onMouseMove = this._handleMouseMove.bind(this);
+        this._onPointerMove = this._handlePointerMove.bind(this);
         document.addEventListener('mousemove', this._onMouseMove);
-        // Mouse button handling: click + hold to look, release to stop
+        document.addEventListener('pointermove', this._onPointerMove, true);
+        // Button handling: click + hold to look, release to stop
         const canvas = this.app.graphicsDevice.canvas;
         this._onClickToLock = (e) => {
             // Left button enables look while held (no pointer lock)
@@ -105351,13 +105738,17 @@ function registerFlyCameraScript() {
                 this._isLooking = true;
             }
         };
-        canvas.addEventListener('mousedown', this._onClickToLock);
+        canvas.addEventListener('mousedown', this._onClickToLock, true);
+        this._onPointerDownToLook = this._handlePointerDown.bind(this);
+        canvas.addEventListener('pointerdown', this._onPointerDownToLook, true);
         this._onMouseUp = (e) => {
             if (e.button === 0) {
                 this._isLooking = false;
             }
         };
-        document.addEventListener('mouseup', this._onMouseUp);
+        document.addEventListener('mouseup', this._onMouseUp, true);
+        this._onPointerUp = this._handlePointerUp.bind(this);
+        document.addEventListener('pointerup', this._onPointerUp, true);
     };
     FlyCamera.prototype.update = function (dt) {
         if (!this._isActive)
@@ -105453,9 +105844,11 @@ function registerFlyCameraScript() {
         this._onKeyDown = this._onKeyDown || this._handleKeyDown.bind(this);
         this._onKeyUp = this._onKeyUp || this._handleKeyUp.bind(this);
         this._onMouseMove = this._onMouseMove || this._handleMouseMove.bind(this);
+        this._onPointerMove = this._onPointerMove || this._handlePointerMove.bind(this);
         document.addEventListener('keydown', this._onKeyDown, true);
         document.addEventListener('keyup', this._onKeyUp, true);
         document.addEventListener('mousemove', this._onMouseMove);
+        document.addEventListener('pointermove', this._onPointerMove, true);
         const canvas = this.app.graphicsDevice.canvas;
         this._onClickToLock =
             this._onClickToLock ||
@@ -105464,7 +105857,10 @@ function registerFlyCameraScript() {
                         this._isLooking = true;
                     }
                 });
-        canvas.addEventListener('mousedown', this._onClickToLock);
+        canvas.addEventListener('mousedown', this._onClickToLock, true);
+        this._onPointerDownToLook =
+            this._onPointerDownToLook || this._handlePointerDown.bind(this);
+        canvas.addEventListener('pointerdown', this._onPointerDownToLook, true);
         this._onMouseUp =
             this._onMouseUp ||
                 ((e) => {
@@ -105472,22 +105868,36 @@ function registerFlyCameraScript() {
                         this._isLooking = false;
                     }
                 });
-        document.addEventListener('mouseup', this._onMouseUp);
+        document.addEventListener('mouseup', this._onMouseUp, true);
+        this._onPointerUp = this._onPointerUp || this._handlePointerUp.bind(this);
+        document.addEventListener('pointerup', this._onPointerUp, true);
     };
     FlyCamera.prototype.deactivate = function () {
         if (!this._isActive)
             return;
         this._isActive = false;
+        this._isLooking = false;
+        try {
+            this._pressed?.clear?.();
+        }
+        catch {
+            // ignore
+        }
         // Exit pointer lock when deactivating
         this._exitPointerLock();
         // Remove listeners
         document.removeEventListener('keydown', this._onKeyDown, true);
         document.removeEventListener('keyup', this._onKeyUp, true);
         document.removeEventListener('mousemove', this._onMouseMove);
-        document.removeEventListener('mouseup', this._onMouseUp);
+        document.removeEventListener('pointermove', this._onPointerMove, true);
+        document.removeEventListener('mouseup', this._onMouseUp, true);
+        document.removeEventListener('pointerup', this._onPointerUp, true);
         const canvas = this.app?.graphicsDevice?.canvas;
         if (canvas && this._onClickToLock) {
-            canvas.removeEventListener('mousedown', this._onClickToLock);
+            canvas.removeEventListener('mousedown', this._onClickToLock, true);
+        }
+        if (canvas && this._onPointerDownToLook) {
+            canvas.removeEventListener('pointerdown', this._onPointerDownToLook, true);
         }
     };
     FlyCamera.prototype.setConfig = function (config) {
@@ -105576,6 +105986,27 @@ function registerFlyCameraScript() {
         this._yaw = (this._yaw - dx) % 360;
         this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
     };
+    FlyCamera.prototype._handlePointerMove = function (e) {
+        if (!this._isLooking || !this._isActive)
+            return;
+        const dx = (e.movementX || 0) * this.lookSensitivity;
+        const dy = (e.movementY || 0) * this.lookSensitivity * (this.invertY ? 1 : -1);
+        this._yaw = (this._yaw - dx) % 360;
+        this._pitch = Math.max(-89, Math.min(89, this._pitch + dy));
+    };
+    FlyCamera.prototype._handlePointerDown = function (e) {
+        if (!this._isActive)
+            return;
+        // Primary button enables look while held (no pointer lock)
+        if (e.button === 0) {
+            this._isLooking = true;
+        }
+    };
+    FlyCamera.prototype._handlePointerUp = function (e) {
+        if (e.button === 0) {
+            this._isLooking = false;
+        }
+    };
     FlyCamera.prototype._handlePointerLockChange = function () {
         const canvas = this.app.graphicsDevice.canvas;
         this._isPointerLocked = document.pointerLockElement === canvas;
@@ -105872,7 +106303,7 @@ const resolveUniforms = (scope, values) => {
         scope.resolve(key).setValue(values[key]);
     }
 };
-const createBlueNoiseTexture = (device) => {
+const createBlueNoiseTexture$1 = (device) => {
     const size = 32;
     const texture = new Texture$1(device, {
         width: size,
@@ -105951,7 +106382,7 @@ let InfiniteGrid$1 = class InfiniteGrid {
             throw new Error('InfiniteGrid: QuadRender is not available in this PlayCanvas version.');
         }
         this.quadRender = new QuadRender$1(this.shader);
-        this.blueNoiseTexture = createBlueNoiseTexture(device);
+        this.blueNoiseTexture = createBlueNoiseTexture$1(device);
         this._createBlendState();
         this._registerRenderHook();
     }
@@ -139088,6 +139519,7 @@ const DEFAULT_CONFIG = {
     enableStats: false,
     autoFocus: true,
     maxSplats: 2000000,
+    previewMode: false,
     camera: {
         position: { x: 0, y: 0, z: 10 },
         target: { x: 0, y: 0, z: 0 },
@@ -139177,6 +139609,10 @@ function getConfigFromAttributes(element) {
     if (enableStats !== null) {
         config.enableStats = parseBoolean(enableStats);
     }
+    const previewMode = element.getAttribute('preview-mode');
+    if (previewMode !== null) {
+        config.previewMode = parseBoolean(previewMode);
+    }
     // Parse number attributes
     const maxSplats = element.getAttribute('max-splats');
     if (maxSplats !== null) {
@@ -140317,51 +140753,161 @@ function toPcVec3(value, fallback) {
     return fallback.clone();
 }
 
-const THICK_WIREFRAME_LINE_WIDTH_UV$1 = 0.06;
-const THICK_WIREFRAME_OPACITY$1 = 1.0;
-const THICK_WIREFRAME_BOX_VS = /* glsl */ `
-attribute vec3 vertex_position;
-attribute vec2 vertex_texCoord0;
+const cache = new WeakMap();
+function createBlueNoiseTexture(device) {
+    const size = 32;
+    const texture = new Texture$1(device, {
+        width: size,
+        height: size,
+        format: PIXELFORMAT_R8_G8_B8_A8,
+        mipmaps: false,
+    });
+    texture.addressU = ADDRESS_REPEAT;
+    texture.addressV = ADDRESS_REPEAT;
+    texture.minFilter = FILTER_NEAREST;
+    texture.magFilter = FILTER_NEAREST;
+    const pixels = texture.lock();
+    const seed = 1337;
+    let value = seed;
+    const random = () => {
+        value ^= value << 13;
+        value ^= value >>> 17;
+        value ^= value << 5;
+        return ((value >>> 0) % 256) / 255;
+    };
+    for (let i = 0; i < size * size; i++) {
+        const noise = Math.floor(random() * 255);
+        const idx = i * 4;
+        pixels[idx + 0] = noise;
+        pixels[idx + 1] = noise;
+        pixels[idx + 2] = noise;
+        pixels[idx + 3] = 255;
+    }
+    texture.unlock();
+    texture.name = 'supersplat-blue-noise';
+    return texture;
+}
+function getBlueNoiseTex32(device) {
+    const existing = cache.get(device);
+    if (existing)
+        return existing;
+    const tex = createBlueNoiseTexture(device);
+    cache.set(device, tex);
+    return tex;
+}
 
-uniform mat4 matrix_model;
-uniform mat4 matrix_viewProjection;
+// SuperSplat-like selection box shader: screen-space ray/box intersection that draws a thick
+// white wire/grid pattern (not dependent on WebGL line width).
+const BOX_SELECT_VS = /* glsl */ `
+    attribute vec3 vertex_position;
 
-varying vec2 vUv;
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
 
-void main(void) {
-  vUv = vertex_texCoord0;
-  gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
-}
+    void main() {
+        gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
+    }
 `;
-const THICK_WIREFRAME_BOX_FS = /* glsl */ `
-#ifdef GL_OES_standard_derivatives
-#extension GL_OES_standard_derivatives : enable
-#endif
+const BOX_SELECT_FS = /* glsl */ `
+    // ray-box intersection in box space
+    bool intersectBox(out float t0, out float t1, out int axis0, out int axis1, vec3 pos, vec3 dir, vec3 boxCen, vec3 boxLen)
+    {
+        bvec3 validDir = notEqual(dir, vec3(0.0));
+        vec3 absDir = abs(dir);
+        vec3 signDir = sign(dir);
+        vec3 m = vec3(
+            validDir.x ? 1.0 / absDir.x : 0.0,
+            validDir.y ? 1.0 / absDir.y : 0.0,
+            validDir.z ? 1.0 / absDir.z : 0.0
+        ) * signDir;
 
-precision mediump float;
+        vec3 n = m * (pos - boxCen);
+        vec3 k = abs(m) * boxLen;
 
-uniform vec3 lineColor;
-uniform float lineWidth;
-uniform float opacity;
+        vec3 v0 = -n - k;
+        vec3 v1 = -n + k;
 
-varying vec2 vUv;
+        // replace invalid axes with -inf and +inf so the tests below ignore them
+        v0 = mix(vec3(-1.0 / 0.0000001), v0, validDir);
+        v1 = mix(vec3(1.0 / 0.0000001), v1, validDir);
 
-void main(void) {
-  // Distance to nearest face border in UV space (0 at border, 0.5 at center).
-  float d = min(min(vUv.x, 1.0 - vUv.x), min(vUv.y, 1.0 - vUv.y));
+        axis0 = (v0.x > v0.y) ? ((v0.x > v0.z) ? 0 : 2) : ((v0.y > v0.z) ? 1 : 2);
+        axis1 = (v1.x < v1.y) ? ((v1.x < v1.z) ? 0 : 2) : ((v1.y < v1.z) ? 1 : 2);
 
-  // Anti-aliased edge mask (1 near border, 0 in face interior).
-  float aa = 0.002;
-#ifdef GL_OES_standard_derivatives
-  aa = max(aa, fwidth(d) * 1.5);
-#endif
-  float a = 1.0 - smoothstep(lineWidth, lineWidth + aa, d);
-  a *= opacity;
+        t0 = v0[axis0];
+        t1 = v1[axis1];
 
-  if (a <= 0.001) discard;
-  gl_FragColor = vec4(lineColor, a);
-}
+        if (t0 > t1 || t1 < 0.0) {
+            return false;
+        }
+
+        return true;
+    }
+
+    float calcDepth(in vec3 pos, in mat4 viewProjection) {
+        vec4 v = viewProjection * vec4(pos, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
+
+    uniform sampler2D blueNoiseTex32;
+    uniform mat4 matrix_viewProjection;
+    uniform vec3 boxCen;
+    uniform vec3 boxLen;
+
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
+
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    uniform vec2 targetSize;
+    uniform vec3 lineColor;
+
+    bool writeDepth(float alpha) {
+        ivec2 uv = ivec2(gl_FragCoord.xy);
+        ivec2 size = textureSize(blueNoiseTex32, 0);
+        return alpha > texelFetch(blueNoiseTex32, uv % size, 0).y;
+    }
+
+    bool strips(vec3 pos, int axis) {
+        // Thickness tuned to match SuperSplat viewer "thick wire"
+        bvec3 b = lessThan(fract(pos * 2.0 + vec3(0.015)), vec3(0.06));
+        b[axis] = false;
+        return any(b);
+    }
+
+    void main() {
+        vec2 clip = gl_FragCoord.xy / targetSize;
+        vec3 worldNear = near_origin + near_x * clip.x + near_y * clip.y;
+        vec3 worldFar = far_origin + far_x * clip.x + far_y * clip.y;
+        vec3 rayDir = normalize(worldFar - worldNear);
+
+        float t0, t1;
+        int axis0, axis1;
+        if (!intersectBox(t0, t1, axis0, axis1, worldNear, rayDir, boxCen, boxLen)) {
+            discard;
+        }
+
+        vec3 frontPos = worldNear + rayDir * t0;
+        bool front = t0 > 0.0 && strips(frontPos - boxCen, axis0);
+
+        vec3 backPos = worldNear + rayDir * t1;
+        bool back = strips(backPos - boxCen, axis1);
+
+        if (front) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(frontPos, matrix_viewProjection) : 1.0;
+        } else if (back) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(backPos, matrix_viewProjection) : 1.0;
+        } else {
+            discard;
+        }
+    }
 `;
+const tmpPos$1 = new Vec3();
 class BoxSelectionAPI {
     constructor() {
         this.boxes = new Map();
@@ -140398,6 +140944,7 @@ class BoxSelectionAPI {
         this.ensureTranslateGizmo();
         this.updateGizmoSize();
         this.updateGizmoAttachment();
+        this.updateBoxShaderUniforms();
     }
     createBox(options = {}) {
         if (!this.app || !this.parent) {
@@ -140420,7 +140967,7 @@ class BoxSelectionAPI {
         entity.render.castShadows = false;
         entity.render.receiveShadows = false;
         entity.render.enabled = visible;
-        // Render as a thick wireframe (shader-based) so line width is consistent across browsers.
+        // Render as a thick wireframe (shader-based) to match SuperSplat viewer.
         this.parent.addChild(entity);
         const record = {
             id,
@@ -140507,8 +141054,8 @@ class BoxSelectionAPI {
             return false;
         }
         record.color.set(r, g, b);
-        const mat = this.buildWireframeMaterial(record.color);
-        record.entity.render.material = mat;
+        const mat = record.entity.render?.material;
+        mat?.setParameter?.('lineColor', [record.color.x, record.color.y, record.color.z]);
         this.requestRender();
         return true;
     }
@@ -140703,19 +141250,34 @@ class BoxSelectionAPI {
     }
     buildWireframeMaterial(color) {
         const material = new ShaderMaterial$1({
-            uniqueName: 'boxSelectionThickWireframe',
-            vertexGLSL: THICK_WIREFRAME_BOX_VS,
-            fragmentGLSL: THICK_WIREFRAME_BOX_FS,
+            uniqueName: 'boxSelectionSupersplatWire',
+            vertexGLSL: BOX_SELECT_VS,
+            fragmentGLSL: BOX_SELECT_FS,
         });
-        material.cull = CULLFACE_NONE;
-        material.depthWrite = false;
+        material.cull = CULLFACE_FRONT;
         material.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE_MINUS_SRC_ALPHA);
-        material.setParameter('lineColor', [color.x, color.y, color.z]);
-        material.setParameter('lineWidth', THICK_WIREFRAME_LINE_WIDTH_UV$1);
-        material.setParameter('opacity', THICK_WIREFRAME_OPACITY$1);
         material.update();
+        material.setParameter('lineColor', [color.x, color.y, color.z]);
         return material;
     }
+    updateBoxShaderUniforms() {
+        if (!this.app)
+            return;
+        const device = this.app.graphicsDevice;
+        // Ensure required global uniforms for selection shaders.
+        device.scope.resolve('targetSize').setValue([device.width, device.height]);
+        device.scope.resolve('blueNoiseTex32').setValue(getBlueNoiseTex32(device));
+        for (const record of this.boxes.values()) {
+            const mat = record.entity.render?.material;
+            if (!mat?.setParameter)
+                continue;
+            // World-space center
+            record.entity.getWorldTransform().getTranslation(tmpPos$1);
+            mat.setParameter('boxCen', [tmpPos$1.x, tmpPos$1.y, tmpPos$1.z]);
+            // Half extents
+            mat.setParameter('boxLen', [record.lenX * 0.5, record.lenY * 0.5, record.lenZ * 0.5]);
+        }
+    }
     emitEvent(event, detail) {
         if (this.onEvent) {
             this.onEvent(event, detail);
@@ -140727,59 +141289,110 @@ class BoxSelectionAPI {
     }
 }
 
-const THICK_WIREFRAME_LINE_WIDTH_UV = 0.035;
-const THICK_WIREFRAME_OPACITY = 1.0;
-const SPHERE_GRID_U = 14.0;
-const SPHERE_GRID_V = 10.0;
-const THICK_WIREFRAME_SPHERE_VS = /* glsl */ `
-attribute vec3 vertex_position;
-attribute vec2 vertex_texCoord0;
-
-uniform mat4 matrix_model;
-uniform mat4 matrix_viewProjection;
+// SuperSplat-like selection sphere shader: screen-space ray/sphere intersection that draws a thick
+// white wire/grid pattern (not dependent on WebGL line width).
+const SPHERE_SELECT_VS = /* glsl */ `
+    attribute vec3 vertex_position;
 
-varying vec2 vUv;
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
 
-void main(void) {
-  vUv = vertex_texCoord0;
-  gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
-}
+    void main() {
+        gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position, 1.0);
+    }
 `;
-const THICK_WIREFRAME_SPHERE_FS = /* glsl */ `
-#ifdef GL_OES_standard_derivatives
-#extension GL_OES_standard_derivatives : enable
-#endif
+const SPHERE_SELECT_FS = /* glsl */ `
+    bool intersectSphere(out float t0, out float t1, vec3 pos, vec3 dir, vec4 sphere) {
+        vec3 L = sphere.xyz - pos;
+        float tca = dot(L, dir);
 
-precision mediump float;
+        float d2 = sphere.w * sphere.w - (dot(L, L) - tca * tca);
+        if (d2 <= 0.0) {
+            return false;
+        }
 
-uniform vec3 lineColor;
-uniform float lineWidth;
-uniform float opacity;
+        float thc = sqrt(d2);
+        t0 = tca - thc;
+        t1 = tca + thc;
+        if (t1 <= 0.0) {
+            return false;
+        }
 
-varying vec2 vUv;
+        return true;
+    }
 
-float gridLineDist(float v, float freq) {
-  float f = fract(v * freq);
-  return min(f, 1.0 - f);
-}
+    float calcDepth(in vec3 pos, in mat4 viewProjection) {
+        vec4 v = viewProjection * vec4(pos, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
 
-void main(void) {
-  // "Wireframe-like" lat/long grid in UV space.
-  float du = gridLineDist(vUv.x, ${SPHERE_GRID_U});
-  float dv = gridLineDist(vUv.y, ${SPHERE_GRID_V});
-  float d = min(du, dv);
-
-  float aa = 0.002;
-#ifdef GL_OES_standard_derivatives
-  aa = max(aa, fwidth(d) * 1.5);
-#endif
-  float a = 1.0 - smoothstep(lineWidth, lineWidth + aa, d);
-  a *= opacity;
+    vec2 calcAzimuthElev(in vec3 dir) {
+        float azimuth = atan(dir.z, dir.x);
+        float elev = asin(dir.y);
+        return vec2(azimuth, elev) * 180.0 / 3.14159;
+    }
 
-  if (a <= 0.001) discard;
-  gl_FragColor = vec4(lineColor, a);
-}
+    uniform sampler2D blueNoiseTex32;
+    uniform mat4 matrix_viewProjection;
+    uniform vec4 sphere;
+    uniform vec3 lineColor;
+
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
+
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    uniform vec2 targetSize;
+
+    bool writeDepth(float alpha) {
+        vec2 uv = fract(gl_FragCoord.xy / 32.0);
+        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
+        return alpha > noise;
+    }
+
+    bool strips(vec3 lp) {
+        vec2 ae = calcAzimuthElev(normalize(lp));
+
+        float spacing = 180.0 / (2.0 * 3.14159 * sphere.w);
+        // Thickness tuned to match SuperSplat viewer "thick wire"
+        float size = 0.06;
+        return fract(ae.x / spacing) < size ||
+               fract(ae.y / spacing) < size;
+    }
+
+    void main() {
+        vec2 clip = gl_FragCoord.xy / targetSize;
+        vec3 worldNear = near_origin + near_x * clip.x + near_y * clip.y;
+        vec3 worldFar = far_origin + far_x * clip.x + far_y * clip.y;
+
+        vec3 rayDir = normalize(worldFar - worldNear);
+
+        float t0, t1;
+        if (!intersectSphere(t0, t1, worldNear, rayDir, sphere)) {
+            discard;
+        }
+
+        vec3 frontPos = worldNear + rayDir * t0;
+        bool front = t0 > 0.0 && strips(frontPos - sphere.xyz);
+
+        vec3 backPos = worldNear + rayDir * t1;
+        bool back = strips(backPos - sphere.xyz);
+
+        if (front) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(frontPos, matrix_viewProjection) : 1.0;
+        } else if (back) {
+            gl_FragColor = vec4(lineColor, 0.6);
+            gl_FragDepth = writeDepth(0.6) ? calcDepth(backPos, matrix_viewProjection) : 1.0;
+        } else {
+            discard;
+        }
+    }
 `;
+const tmpPos = new Vec3();
 class SphereSelectionAPI {
     constructor() {
         this.spheres = new Map();
@@ -140815,6 +141428,7 @@ class SphereSelectionAPI {
         this.ensureTranslateGizmo();
         this.updateGizmoSize();
         this.updateGizmoAttachment();
+        this.updateSphereShaderUniforms();
     }
     createSphere(options = {}) {
         if (!this.app || !this.parent) {
@@ -140827,7 +141441,8 @@ class SphereSelectionAPI {
         const visible = options.visible ?? true;
         const entity = new Entity(id);
         entity.addComponent('render', {
-            type: 'sphere',
+            // Use a box proxy like SuperSplat; shader ray-marches a true sphere.
+            type: 'box',
             material: this.buildWireframeMaterial(color),
         });
         entity.setLocalScale(radius * 2, radius * 2, radius * 2); // sphere diameter = radius * 2
@@ -140835,7 +141450,7 @@ class SphereSelectionAPI {
         entity.render.castShadows = false;
         entity.render.receiveShadows = false;
         entity.render.enabled = visible;
-        // Render as a thick wireframe (shader-based) so line width is consistent across browsers.
+        // Render as a thick wireframe (shader-based) to match SuperSplat viewer.
         this.parent.addChild(entity);
         const record = {
             id,
@@ -140918,8 +141533,12 @@ class SphereSelectionAPI {
             return false;
         }
         record.color.set(r, g, b);
-        const mat = this.buildWireframeMaterial(record.color);
-        record.entity.render.material = mat;
+        const mat = record.entity.render?.material;
+        mat?.setParameter?.('lineColor', [
+            record.color.x,
+            record.color.y,
+            record.color.z,
+        ]);
         this.requestRender();
         return true;
     }
@@ -141117,19 +141736,30 @@ class SphereSelectionAPI {
     }
     buildWireframeMaterial(color) {
         const material = new ShaderMaterial$1({
-            uniqueName: 'sphereSelectionThickWireframe',
-            vertexGLSL: THICK_WIREFRAME_SPHERE_VS,
-            fragmentGLSL: THICK_WIREFRAME_SPHERE_FS,
+            uniqueName: 'sphereSelectionSupersplatWire',
+            vertexGLSL: SPHERE_SELECT_VS,
+            fragmentGLSL: SPHERE_SELECT_FS,
         });
-        material.cull = CULLFACE_NONE;
-        material.depthWrite = false;
+        material.cull = CULLFACE_FRONT;
         material.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE_MINUS_SRC_ALPHA);
-        material.setParameter('lineColor', [color.x, color.y, color.z]);
-        material.setParameter('lineWidth', THICK_WIREFRAME_LINE_WIDTH_UV);
-        material.setParameter('opacity', THICK_WIREFRAME_OPACITY);
         material.update();
+        material.setParameter('lineColor', [color.x, color.y, color.z]);
         return material;
     }
+    updateSphereShaderUniforms() {
+        if (!this.app)
+            return;
+        const device = this.app.graphicsDevice;
+        device.scope.resolve('targetSize').setValue([device.width, device.height]);
+        device.scope.resolve('blueNoiseTex32').setValue(getBlueNoiseTex32(device));
+        for (const record of this.spheres.values()) {
+            const mat = record.entity.render?.material;
+            if (!mat?.setParameter)
+                continue;
+            record.entity.getWorldTransform().getTranslation(tmpPos);
+            mat.setParameter('sphere', [tmpPos.x, tmpPos.y, tmpPos.z, record.radius]);
+        }
+    }
     emitEvent(event, detail) {
         if (this.onEvent) {
             this.onEvent(event, detail);
@@ -142536,222 +143166,222 @@ class AssetLoader {
     }
 }
 
-const vertexShader$6 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-const fragmentShader$6 = /* glsl */ `
-    uniform highp usampler2D transformA;                // splat center x, y, z
-    uniform highp usampler2D splatTransform;            // transform palette index
-    uniform sampler2D transformPalette;                 // palette of transforms
-    uniform sampler2D splatState;                       // per-splat state
-    uniform highp ivec3 splat_params;                   // texture width, texture height, num splats
-    uniform highp uint mode;                            // 0: selected, 1: visible
-
-    // calculate min and max for a single column of splats
-    void main(void) {
-
-        vec3 boundMin = vec3(1e6);
-        vec3 boundMax = vec3(-1e6);
-
-        for (int id = 0; id < splat_params.y; id++) {
-            // calculate splatUV
-            ivec2 splatUV = ivec2(gl_FragCoord.x, id);
-
-            // skip out-of-range splats
-            if ((splatUV.x + splatUV.y * splat_params.x) >= splat_params.z) {
-                continue;
-            }
-
-            // read splat state
-            uint state = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
-
-            // skip deleted or locked splats
-            if (((mode == 0u) && (state != 1u)) || ((mode == 1u) && ((state & 4u) != 0u))) {
-                continue;
-            }
-
-            // read splat center
-            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-            // apply optional per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat3x4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-                center = vec4(center, 1.0) * t;
-            }
-
-            boundMin = min(boundMin, mix(center, boundMin, isinf(center)));
-            boundMax = max(boundMax, mix(center, boundMax, isinf(center)));
-        }
-
-        pcFragColor0 = vec4(boundMin, 0.0);
-        pcFragColor1 = vec4(boundMax, 0.0);
-    }
-`;
-
-const vertexShader$5 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-const fragmentShader$5 = /* glsl */ `
-    uniform highp usampler2D transformA;            // splat center x, y, z
-    uniform highp usampler2D splatTransform;        // transform palette index
-    uniform sampler2D transformPalette;             // palette of transforms
-    uniform uvec2 splat_params;                     // splat texture width, num splats
-
-    uniform mat4 matrix_model;
-    uniform mat4 matrix_viewProjection;
-
-    uniform uvec2 output_params;                    // output width, height
-
-    // 0: mask, 1: rect, 2: sphere
-    uniform int mode;
-
-    // mask params
-    uniform sampler2D mask;                         // mask in alpha channel
-    uniform vec2 mask_params;                       // mask width, height
-
-    // rect params
-    uniform vec4 rect_params;                       // rect x, y, width, height
-
-    // sphere params
-    uniform vec4 sphere_params;                     // sphere x, y, z, radius
-
-    // box params
-    uniform vec4 box_params;                     // box x, y, z
-    uniform vec4 aabb_params;                    // len x, y, z
-
-    void main(void) {
-        // calculate output id
-        uvec2 outputUV = uvec2(gl_FragCoord);
-        uint outputId = (outputUV.x + outputUV.y * output_params.x) * 4u;
-
-        vec4 clr = vec4(0.0);
-
-        for (uint i = 0u; i < 4u; i++) {
-            uint id = outputId + i;
-
-            if (id >= splat_params.y) {
-                continue;
-            }
-
-            // calculate splatUV
-            ivec2 splatUV = ivec2(
-                int(id % splat_params.x),
-                int(id / splat_params.x)
-            );
-
-            // read splat center
-            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-            // apply optional per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat3x4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-                center = vec4(center, 1.0) * t;
-            }
-
-            // transform to clip space and discard if outside
-            vec3 world = (matrix_model * vec4(center, 1.0)).xyz;
-            vec4 clip = matrix_viewProjection * vec4(world, 1.0);
-            vec3 ndc = clip.xyz / clip.w;
-
-            // skip offscreen fragments
-            if (!any(greaterThan(abs(ndc), vec3(1.0)))) {
-                if (mode == 0) {
-                    // select by mask
-                    ivec2 maskUV = ivec2((ndc.xy * vec2(0.5, -0.5) + 0.5) * mask_params);
-                    clr[i] = texelFetch(mask, maskUV, 0).a < 1.0 ? 0.0 : 1.0;
-                } else if (mode == 1) {
-                    // select by rect
-                    clr[i] = all(greaterThan(ndc.xy * vec2(1.0, -1.0), rect_params.xy)) && all(lessThan(ndc.xy * vec2(1.0, -1.0), rect_params.zw)) ? 1.0 : 0.0;
-                } else if (mode == 2) {
-                    // select by sphere
-                    clr[i] = length(world - sphere_params.xyz) < sphere_params.w ? 1.0 : 0.0;
-                } else if (mode == 3) {
-                    // select by box
-                    vec3 relativePosition = world - box_params.xyz;
-                    bool isInsideCube = true;
-                    if (relativePosition.x < -aabb_params.x || relativePosition.x > aabb_params.x) {
-                        isInsideCube = false;
-                    }
-                    if (relativePosition.y < -aabb_params.y || relativePosition.y > aabb_params.y) {
-                        isInsideCube = false;
-                    }
-                    if (relativePosition.z < -aabb_params.z || relativePosition.z > aabb_params.z) {
-                        isInsideCube = false;
-                    }
-                    clr[i] = isInsideCube ? 1.0 : 0.0;
-                }
-            }
-        }
-
-        gl_FragColor = clr;
-    }
-`;
-
-const vertexShader$4 = /* glsl */ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-const fragmentShader$4 = /* glsl */ `
-    uniform highp usampler2D transformA;            // splat center x, y, z
-    uniform highp usampler2D splatTransform;        // transform palette index
-    uniform sampler2D transformPalette;             // palette of transforms
-    uniform ivec2 splat_params;                     // splat texture width, num splats
-
-    void main(void) {
-        // calculate output id
-        ivec2 splatUV = ivec2(gl_FragCoord);
-
-        // skip if splat index is out of bounds
-        if (splatUV.x + splatUV.y * splat_params.x >= splat_params.y) {
-            discard;
-        }
-
-        // read splat center
-        vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
-
-        // apply optional per-splat transform
-        uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-        if (transformIndex > 0u) {
-            // read transform matrix
-            int u = int(transformIndex % 512u) * 3;
-            int v = int(transformIndex / 512u);
-
-            mat3x4 t;
-            t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-            t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-            t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-
-            center = vec4(center, 1.0) * t;
-        }
-
-        gl_FragColor = vec4(center, 0.0);
-    }
+const vertexShader$6 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+const fragmentShader$6 = /* glsl */ `
+    uniform highp usampler2D transformA;                // splat center x, y, z
+    uniform highp usampler2D splatTransform;            // transform palette index
+    uniform sampler2D transformPalette;                 // palette of transforms
+    uniform sampler2D splatState;                       // per-splat state
+    uniform highp ivec3 splat_params;                   // texture width, texture height, num splats
+    uniform highp uint mode;                            // 0: selected, 1: visible
+
+    // calculate min and max for a single column of splats
+    void main(void) {
+
+        vec3 boundMin = vec3(1e6);
+        vec3 boundMax = vec3(-1e6);
+
+        for (int id = 0; id < splat_params.y; id++) {
+            // calculate splatUV
+            ivec2 splatUV = ivec2(gl_FragCoord.x, id);
+
+            // skip out-of-range splats
+            if ((splatUV.x + splatUV.y * splat_params.x) >= splat_params.z) {
+                continue;
+            }
+
+            // read splat state
+            uint state = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
+
+            // skip deleted or locked splats
+            if (((mode == 0u) && (state != 1u)) || ((mode == 1u) && ((state & 4u) != 0u))) {
+                continue;
+            }
+
+            // read splat center
+            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+            // apply optional per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat3x4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+                center = vec4(center, 1.0) * t;
+            }
+
+            boundMin = min(boundMin, mix(center, boundMin, isinf(center)));
+            boundMax = max(boundMax, mix(center, boundMax, isinf(center)));
+        }
+
+        pcFragColor0 = vec4(boundMin, 0.0);
+        pcFragColor1 = vec4(boundMax, 0.0);
+    }
+`;
+
+const vertexShader$5 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+const fragmentShader$5 = /* glsl */ `
+    uniform highp usampler2D transformA;            // splat center x, y, z
+    uniform highp usampler2D splatTransform;        // transform palette index
+    uniform sampler2D transformPalette;             // palette of transforms
+    uniform uvec2 splat_params;                     // splat texture width, num splats
+
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
+
+    uniform uvec2 output_params;                    // output width, height
+
+    // 0: mask, 1: rect, 2: sphere
+    uniform int mode;
+
+    // mask params
+    uniform sampler2D mask;                         // mask in alpha channel
+    uniform vec2 mask_params;                       // mask width, height
+
+    // rect params
+    uniform vec4 rect_params;                       // rect x, y, width, height
+
+    // sphere params
+    uniform vec4 sphere_params;                     // sphere x, y, z, radius
+
+    // box params
+    uniform vec4 box_params;                     // box x, y, z
+    uniform vec4 aabb_params;                    // len x, y, z
+
+    void main(void) {
+        // calculate output id
+        uvec2 outputUV = uvec2(gl_FragCoord);
+        uint outputId = (outputUV.x + outputUV.y * output_params.x) * 4u;
+
+        vec4 clr = vec4(0.0);
+
+        for (uint i = 0u; i < 4u; i++) {
+            uint id = outputId + i;
+
+            if (id >= splat_params.y) {
+                continue;
+            }
+
+            // calculate splatUV
+            ivec2 splatUV = ivec2(
+                int(id % splat_params.x),
+                int(id / splat_params.x)
+            );
+
+            // read splat center
+            vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+            // apply optional per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat3x4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+                center = vec4(center, 1.0) * t;
+            }
+
+            // transform to clip space and discard if outside
+            vec3 world = (matrix_model * vec4(center, 1.0)).xyz;
+            vec4 clip = matrix_viewProjection * vec4(world, 1.0);
+            vec3 ndc = clip.xyz / clip.w;
+
+            // skip offscreen fragments
+            if (!any(greaterThan(abs(ndc), vec3(1.0)))) {
+                if (mode == 0) {
+                    // select by mask
+                    ivec2 maskUV = ivec2((ndc.xy * vec2(0.5, -0.5) + 0.5) * mask_params);
+                    clr[i] = texelFetch(mask, maskUV, 0).a < 1.0 ? 0.0 : 1.0;
+                } else if (mode == 1) {
+                    // select by rect
+                    clr[i] = all(greaterThan(ndc.xy * vec2(1.0, -1.0), rect_params.xy)) && all(lessThan(ndc.xy * vec2(1.0, -1.0), rect_params.zw)) ? 1.0 : 0.0;
+                } else if (mode == 2) {
+                    // select by sphere
+                    clr[i] = length(world - sphere_params.xyz) < sphere_params.w ? 1.0 : 0.0;
+                } else if (mode == 3) {
+                    // select by box
+                    vec3 relativePosition = world - box_params.xyz;
+                    bool isInsideCube = true;
+                    if (relativePosition.x < -aabb_params.x || relativePosition.x > aabb_params.x) {
+                        isInsideCube = false;
+                    }
+                    if (relativePosition.y < -aabb_params.y || relativePosition.y > aabb_params.y) {
+                        isInsideCube = false;
+                    }
+                    if (relativePosition.z < -aabb_params.z || relativePosition.z > aabb_params.z) {
+                        isInsideCube = false;
+                    }
+                    clr[i] = isInsideCube ? 1.0 : 0.0;
+                }
+            }
+        }
+
+        gl_FragColor = clr;
+    }
+`;
+
+const vertexShader$4 = /* glsl */ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+const fragmentShader$4 = /* glsl */ `
+    uniform highp usampler2D transformA;            // splat center x, y, z
+    uniform highp usampler2D splatTransform;        // transform palette index
+    uniform sampler2D transformPalette;             // palette of transforms
+    uniform ivec2 splat_params;                     // splat texture width, num splats
+
+    void main(void) {
+        // calculate output id
+        ivec2 splatUV = ivec2(gl_FragCoord);
+
+        // skip if splat index is out of bounds
+        if (splatUV.x + splatUV.y * splat_params.x >= splat_params.y) {
+            discard;
+        }
+
+        // read splat center
+        vec3 center = uintBitsToFloat(texelFetch(transformA, splatUV, 0).xyz);
+
+        // apply optional per-splat transform
+        uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+        if (transformIndex > 0u) {
+            // read transform matrix
+            int u = int(transformIndex % 512u) * 3;
+            int v = int(transformIndex / 512u);
+
+            mat3x4 t;
+            t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+            t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+            t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+
+            center = vec4(center, 1.0) * t;
+        }
+
+        gl_FragColor = vec4(center, 0.0);
+    }
 `;
 
 const v1 = new Vec3();
@@ -142788,18 +143418,18 @@ class DataProcessor {
             attributes: {
                 vertex_position: SEMANTIC_POSITION
             },
-            vertexGLSL: `
-                attribute vec2 vertex_position;
-                void main(void) {
-                    gl_Position = vec4(vertex_position, 0.0, 1.0);
-                }
+            vertexGLSL: `
+                attribute vec2 vertex_position;
+                void main(void) {
+                    gl_Position = vec4(vertex_position, 0.0, 1.0);
+                }
             `,
-            fragmentGLSL: `
-                uniform sampler2D colorTex;
-                void main(void) {
-                    ivec2 texel = ivec2(gl_FragCoord.xy);
-                    gl_FragColor = texelFetch(colorTex, texel, 0);
-                }
+            fragmentGLSL: `
+                uniform sampler2D colorTex;
+                void main(void) {
+                    ivec2 texel = ivec2(gl_FragCoord.xy);
+                    gl_FragColor = texelFetch(colorTex, texel, 0);
+                }
             `
         });
         // intersection test
@@ -144038,176 +144668,176 @@ class Camera extends Element$1 {
     }
 }
 
-const vertexShader$3 = /* glsl*/ `
-    uniform vec3 near_origin;
-    uniform vec3 near_x;
-    uniform vec3 near_y;
-
-    uniform vec3 far_origin;
-    uniform vec3 far_x;
-    uniform vec3 far_y;
-
-    attribute vec2 vertex_position;
-
-    varying vec3 worldFar;
-    varying vec3 worldNear;
-
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-
-        vec2 p = vertex_position * 0.5 + 0.5;
-        worldNear = near_origin + near_x * p.x + near_y * p.y;
-        worldFar = far_origin + far_x * p.x + far_y * p.y;
-    }
-`;
-const fragmentShader$3 = /* glsl*/ `
-    uniform vec3 view_position;
-    uniform mat4 matrix_viewProjection;
-    uniform sampler2D blueNoiseTex32;
-
-    uniform int plane;  // 0: x (yz), 1: y (xz), 2: z (xy)
-
-    vec4 planes[3] = vec4[3](
-        vec4(1.0, 0.0, 0.0, 0.0),
-        vec4(0.0, 1.0, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0)
-    );
-
-    vec3 colors[3] = vec3[3](
-        vec3(1.0, 0.2, 0.2),
-        vec3(0.2, 1.0, 0.2),
-        vec3(0.2, 0.2, 1.0)
-    );
-
-    int axis0[3] = int[3](1, 0, 0);
-    int axis1[3] = int[3](2, 2, 1);
-
-    varying vec3 worldNear;
-    varying vec3 worldFar;
-
-    bool intersectPlane(inout float t, vec3 pos, vec3 dir, vec4 plane) {
-        float d = dot(dir, plane.xyz);
-        if (abs(d) < 1e-06) {
-            return false;
-        }
-
-        float n = -(dot(pos, plane.xyz) + plane.w) / d;
-        if (n < 0.0) {
-            return false;
-        }
-
-        t = n;
-
-        return true;
-    }
-
-    // https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8#1e7c
-    float pristineGrid(in vec2 uv, in vec2 ddx, in vec2 ddy, vec2 lineWidth) {
-        vec2 uvDeriv = vec2(length(vec2(ddx.x, ddy.x)), length(vec2(ddx.y, ddy.y)));
-        bvec2 invertLine = bvec2(lineWidth.x > 0.5, lineWidth.y > 0.5);
-        vec2 targetWidth = vec2(
-            invertLine.x ? 1.0 - lineWidth.x : lineWidth.x,
-            invertLine.y ? 1.0 - lineWidth.y : lineWidth.y
-        );
-        vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
-        vec2 lineAA = uvDeriv * 1.5;
-        vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
-        gridUV.x = invertLine.x ? gridUV.x : 1.0 - gridUV.x;
-        gridUV.y = invertLine.y ? gridUV.y : 1.0 - gridUV.y;
-        vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
-
-        grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
-        grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
-        grid2.x = invertLine.x ? 1.0 - grid2.x : grid2.x;
-        grid2.y = invertLine.y ? 1.0 - grid2.y : grid2.y;
-
-        return mix(grid2.x, 1.0, grid2.y);
-    }
-
-    float calcDepth(vec3 p) {
-        vec4 v = matrix_viewProjection * vec4(p, 1.0);
-        return (v.z / v.w) * 0.5 + 0.5;
-    }
-
-    bool writeDepth(float alpha) {
-        vec2 uv = fract(gl_FragCoord.xy / 32.0);
-        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
-        return alpha > noise;
-    }
-
-    void main(void) {
-        vec3 p = worldNear;
-        vec3 v = normalize(worldFar - worldNear);
-
-        // intersect ray with the world xz plane
-        float t;
-        if (!intersectPlane(t, p, v, planes[plane])) {
-            discard;
-        }
-
-        // calculate grid intersection
-        vec3 worldPos = p + v * t;
-        vec2 pos = plane == 0 ? worldPos.yz : (plane == 1 ? worldPos.xz : worldPos.xy);
-        vec2 ddx = dFdx(pos);
-        vec2 ddy = dFdy(pos);
-
-        float epsilon = 1.0 / 255.0;
-
-        // calculate fade
-        float fade = 1.0 - smoothstep(400.0, 1000.0, length(worldPos - view_position));
-        if (fade < epsilon) {
-            discard;
-        }
-
-        vec2 levelPos;
-        float levelSize;
-        float levelAlpha;
-
-        // 10m grid with colored main axes
-        levelPos = pos * 0.1;
-        levelSize = 2.0 / 1000.0;
-        levelAlpha = pristineGrid(levelPos, ddx * 0.1, ddy * 0.1, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            vec3 color;
-            vec2 loc = abs(levelPos);
-            if (loc.x < levelSize) {
-                if (loc.y < levelSize) {
-                    color = vec3(1.0);
-                } else {
-                    color = colors[axis1[plane]];
-                }
-            } else if (loc.y < levelSize) {
-                color = colors[axis0[plane]];
-            } else {
-                color = vec3(0.9);
-            }
-            gl_FragColor = vec4(color, levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        // 1m grid
-        levelPos = pos;
-        levelSize = 1.0 / 100.0;
-        levelAlpha = pristineGrid(levelPos, ddx, ddy, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            gl_FragColor = vec4(vec3(0.7), levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        // 0.1m grid
-        levelPos = pos * 10.0;
-        levelSize = 1.0 / 100.0;
-        levelAlpha = pristineGrid(levelPos, ddx * 10.0, ddy * 10.0, vec2(levelSize)) * fade;
-        if (levelAlpha > epsilon) {
-            gl_FragColor = vec4(vec3(0.7), levelAlpha);
-            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
-            return;
-        }
-
-        discard;
-    }
+const vertexShader$3 = /* glsl*/ `
+    uniform vec3 near_origin;
+    uniform vec3 near_x;
+    uniform vec3 near_y;
+
+    uniform vec3 far_origin;
+    uniform vec3 far_x;
+    uniform vec3 far_y;
+
+    attribute vec2 vertex_position;
+
+    varying vec3 worldFar;
+    varying vec3 worldNear;
+
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+
+        vec2 p = vertex_position * 0.5 + 0.5;
+        worldNear = near_origin + near_x * p.x + near_y * p.y;
+        worldFar = far_origin + far_x * p.x + far_y * p.y;
+    }
+`;
+const fragmentShader$3 = /* glsl*/ `
+    uniform vec3 view_position;
+    uniform mat4 matrix_viewProjection;
+    uniform sampler2D blueNoiseTex32;
+
+    uniform int plane;  // 0: x (yz), 1: y (xz), 2: z (xy)
+
+    vec4 planes[3] = vec4[3](
+        vec4(1.0, 0.0, 0.0, 0.0),
+        vec4(0.0, 1.0, 0.0, 0.0),
+        vec4(0.0, 0.0, 1.0, 0.0)
+    );
+
+    vec3 colors[3] = vec3[3](
+        vec3(1.0, 0.2, 0.2),
+        vec3(0.2, 1.0, 0.2),
+        vec3(0.2, 0.2, 1.0)
+    );
+
+    int axis0[3] = int[3](1, 0, 0);
+    int axis1[3] = int[3](2, 2, 1);
+
+    varying vec3 worldNear;
+    varying vec3 worldFar;
+
+    bool intersectPlane(inout float t, vec3 pos, vec3 dir, vec4 plane) {
+        float d = dot(dir, plane.xyz);
+        if (abs(d) < 1e-06) {
+            return false;
+        }
+
+        float n = -(dot(pos, plane.xyz) + plane.w) / d;
+        if (n < 0.0) {
+            return false;
+        }
+
+        t = n;
+
+        return true;
+    }
+
+    // https://bgolus.medium.com/the-best-darn-grid-shader-yet-727f9278b9d8#1e7c
+    float pristineGrid(in vec2 uv, in vec2 ddx, in vec2 ddy, vec2 lineWidth) {
+        vec2 uvDeriv = vec2(length(vec2(ddx.x, ddy.x)), length(vec2(ddx.y, ddy.y)));
+        bvec2 invertLine = bvec2(lineWidth.x > 0.5, lineWidth.y > 0.5);
+        vec2 targetWidth = vec2(
+            invertLine.x ? 1.0 - lineWidth.x : lineWidth.x,
+            invertLine.y ? 1.0 - lineWidth.y : lineWidth.y
+        );
+        vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
+        vec2 lineAA = uvDeriv * 1.5;
+        vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
+        gridUV.x = invertLine.x ? gridUV.x : 1.0 - gridUV.x;
+        gridUV.y = invertLine.y ? gridUV.y : 1.0 - gridUV.y;
+        vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+
+        grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
+        grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
+        grid2.x = invertLine.x ? 1.0 - grid2.x : grid2.x;
+        grid2.y = invertLine.y ? 1.0 - grid2.y : grid2.y;
+
+        return mix(grid2.x, 1.0, grid2.y);
+    }
+
+    float calcDepth(vec3 p) {
+        vec4 v = matrix_viewProjection * vec4(p, 1.0);
+        return (v.z / v.w) * 0.5 + 0.5;
+    }
+
+    bool writeDepth(float alpha) {
+        vec2 uv = fract(gl_FragCoord.xy / 32.0);
+        float noise = texture2DLod(blueNoiseTex32, uv, 0.0).y;
+        return alpha > noise;
+    }
+
+    void main(void) {
+        vec3 p = worldNear;
+        vec3 v = normalize(worldFar - worldNear);
+
+        // intersect ray with the world xz plane
+        float t;
+        if (!intersectPlane(t, p, v, planes[plane])) {
+            discard;
+        }
+
+        // calculate grid intersection
+        vec3 worldPos = p + v * t;
+        vec2 pos = plane == 0 ? worldPos.yz : (plane == 1 ? worldPos.xz : worldPos.xy);
+        vec2 ddx = dFdx(pos);
+        vec2 ddy = dFdy(pos);
+
+        float epsilon = 1.0 / 255.0;
+
+        // calculate fade
+        float fade = 1.0 - smoothstep(400.0, 1000.0, length(worldPos - view_position));
+        if (fade < epsilon) {
+            discard;
+        }
+
+        vec2 levelPos;
+        float levelSize;
+        float levelAlpha;
+
+        // 10m grid with colored main axes
+        levelPos = pos * 0.1;
+        levelSize = 2.0 / 1000.0;
+        levelAlpha = pristineGrid(levelPos, ddx * 0.1, ddy * 0.1, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            vec3 color;
+            vec2 loc = abs(levelPos);
+            if (loc.x < levelSize) {
+                if (loc.y < levelSize) {
+                    color = vec3(1.0);
+                } else {
+                    color = colors[axis1[plane]];
+                }
+            } else if (loc.y < levelSize) {
+                color = colors[axis0[plane]];
+            } else {
+                color = vec3(0.9);
+            }
+            gl_FragColor = vec4(color, levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        // 1m grid
+        levelPos = pos;
+        levelSize = 1.0 / 100.0;
+        levelAlpha = pristineGrid(levelPos, ddx, ddy, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            gl_FragColor = vec4(vec3(0.7), levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        // 0.1m grid
+        levelPos = pos * 10.0;
+        levelSize = 1.0 / 100.0;
+        levelAlpha = pristineGrid(levelPos, ddx * 10.0, ddy * 10.0, vec2(levelSize)) * fade;
+        if (levelAlpha > epsilon) {
+            gl_FragColor = vec4(vec3(0.7), levelAlpha);
+            gl_FragDepth = writeDepth(levelAlpha) ? calcDepth(worldPos) : 1.0;
+            return;
+        }
+
+        discard;
+    }
 `;
 
 const resolve = (scope, values) => {
@@ -144278,36 +144908,36 @@ class InfiniteGrid extends Element$1 {
     }
 }
 
-const vertexShader$2 = /* glsl*/ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
-`;
-const fragmentShader$2 = /* glsl*/ `
-    uniform sampler2D outlineTexture;
-    uniform float alphaCutoff;
-    uniform vec4 clr;
-
-    void main(void) {
-        ivec2 texel = ivec2(gl_FragCoord.xy);
-
-        // skip solid pixels
-        if (texelFetch(outlineTexture, texel, 0).a > alphaCutoff) {
-            discard;
-        }
-
-        for (int x = -2; x <= 2; x++) {
-            for (int y = -2; y <= 2; y++) {
-                if ((x != 0) && (y != 0) && (texelFetch(outlineTexture, texel + ivec2(x, y), 0).a > alphaCutoff)) {
-                    gl_FragColor = clr;
-                    return;
-                }
-            }
-        }
-
-        discard;
-    }
+const vertexShader$2 = /* glsl*/ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
+`;
+const fragmentShader$2 = /* glsl*/ `
+    uniform sampler2D outlineTexture;
+    uniform float alphaCutoff;
+    uniform vec4 clr;
+
+    void main(void) {
+        ivec2 texel = ivec2(gl_FragCoord.xy);
+
+        // skip solid pixels
+        if (texelFetch(outlineTexture, texel, 0).a > alphaCutoff) {
+            discard;
+        }
+
+        for (int x = -2; x <= 2; x++) {
+            for (int y = -2; y <= 2; y++) {
+                if ((x != 0) && (y != 0) && (texelFetch(outlineTexture, texel + ivec2(x, y), 0).a > alphaCutoff)) {
+                    gl_FragColor = clr;
+                    return;
+                }
+            }
+        }
+
+        discard;
+    }
 `;
 
 class Outline extends Element$1 {
@@ -144625,72 +145255,72 @@ class SceneState {
     }
 }
 
-const vertexShader$1 = /* glsl */ `
-    attribute uint vertex_id;
-
-    uniform mat4 matrix_model;
-    uniform mat4 matrix_viewProjection;
-
-    uniform sampler2D splatState;
-    uniform highp usampler2D splatPosition;
-    uniform highp usampler2D splatTransform;        // per-splat index into transform palette
-    uniform sampler2D transformPalette;             // palette of transform matrices
-
-    uniform uvec2 texParams;
-
-    uniform float splatSize;
-    uniform vec4 selectedClr;
-    uniform vec4 unselectedClr;
-
-    varying vec4 varying_color;
-
-    // calculate the current splat index and uv
-    ivec2 calcSplatUV(uint index, uint width) {
-        return ivec2(int(index % width), int(index / width));
-    }
-
-    void main(void) {
-        ivec2 splatUV = calcSplatUV(vertex_id, texParams.x);
-        uint splatState = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
-
-        if ((splatState & 6u) != 0u) {
-            // deleted or locked (4 or 2)
-            gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
-            gl_PointSize = 0.0;
-        } else {
-            mat4 model = matrix_model;
-        
-            // handle per-splat transform
-            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
-            if (transformIndex > 0u) {
-                // read transform matrix
-                int u = int(transformIndex % 512u) * 3;
-                int v = int(transformIndex / 512u);
-
-                mat4 t;
-                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
-                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
-                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
-                t[3] = vec4(0.0, 0.0, 0.0, 1.0);
-
-                model = matrix_model * transpose(t);
-            }
-
-            varying_color = (splatState == 1u) ? selectedClr : unselectedClr;
-
-            vec3 center = uintBitsToFloat(texelFetch(splatPosition, splatUV, 0).xyz);
-
-            gl_Position = matrix_viewProjection * model * vec4(center, 1.0);
-            gl_PointSize = splatSize;
-        }
-    }
-`;
-const fragmentShader$1 = /* glsl */ `
-    varying vec4 varying_color;
-
-    void main(void) {
-        gl_FragColor = varying_color;
-    }
+const vertexShader$1 = /* glsl */ `
+    attribute uint vertex_id;
+
+    uniform mat4 matrix_model;
+    uniform mat4 matrix_viewProjection;
+
+    uniform sampler2D splatState;
+    uniform highp usampler2D splatPosition;
+    uniform highp usampler2D splatTransform;        // per-splat index into transform palette
+    uniform sampler2D transformPalette;             // palette of transform matrices
+
+    uniform uvec2 texParams;
+
+    uniform float splatSize;
+    uniform vec4 selectedClr;
+    uniform vec4 unselectedClr;
+
+    varying vec4 varying_color;
+
+    // calculate the current splat index and uv
+    ivec2 calcSplatUV(uint index, uint width) {
+        return ivec2(int(index % width), int(index / width));
+    }
+
+    void main(void) {
+        ivec2 splatUV = calcSplatUV(vertex_id, texParams.x);
+        uint splatState = uint(texelFetch(splatState, splatUV, 0).r * 255.0);
+
+        if ((splatState & 6u) != 0u) {
+            // deleted or locked (4 or 2)
+            gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
+            gl_PointSize = 0.0;
+        } else {
+            mat4 model = matrix_model;
+        
+            // handle per-splat transform
+            uint transformIndex = texelFetch(splatTransform, splatUV, 0).r;
+            if (transformIndex > 0u) {
+                // read transform matrix
+                int u = int(transformIndex % 512u) * 3;
+                int v = int(transformIndex / 512u);
+
+                mat4 t;
+                t[0] = texelFetch(transformPalette, ivec2(u, v), 0);
+                t[1] = texelFetch(transformPalette, ivec2(u + 1, v), 0);
+                t[2] = texelFetch(transformPalette, ivec2(u + 2, v), 0);
+                t[3] = vec4(0.0, 0.0, 0.0, 1.0);
+
+                model = matrix_model * transpose(t);
+            }
+
+            varying_color = (splatState == 1u) ? selectedClr : unselectedClr;
+
+            vec3 center = uintBitsToFloat(texelFetch(splatPosition, splatUV, 0).xyz);
+
+            gl_Position = matrix_viewProjection * model * vec4(center, 1.0);
+            gl_PointSize = splatSize;
+        }
+    }
+`;
+const fragmentShader$1 = /* glsl */ `
+    varying vec4 varying_color;
+
+    void main(void) {
+        gl_FragColor = varying_color;
+    }
 `;
 
 class SplatOverlay extends Element$1 {
@@ -144779,19 +145409,19 @@ class SplatOverlay extends Element$1 {
     }
 }
 
-const vertexShader = /* glsl*/ `
-    attribute vec2 vertex_position;
-    void main(void) {
-        gl_Position = vec4(vertex_position, 0.0, 1.0);
-    }
+const vertexShader = /* glsl*/ `
+    attribute vec2 vertex_position;
+    void main(void) {
+        gl_Position = vec4(vertex_position, 0.0, 1.0);
+    }
 `;
-const fragmentShader = /* glsl*/ `
-    uniform sampler2D blitTexture;
-    void main(void) {
-        ivec2 texel = ivec2(gl_FragCoord.xy);
-
-        gl_FragColor = texelFetch(blitTexture, texel, 0);
-    }
+const fragmentShader = /* glsl*/ `
+    uniform sampler2D blitTexture;
+    void main(void) {
+        ivec2 texel = ivec2(gl_FragCoord.xy);
+
+        gl_FragColor = texelFetch(blitTexture, texel, 0);
+    }
 `;
 
 class Underlay extends Element$1 {
@@ -146756,7 +147386,7 @@ class SupersplatAdapter {
         const { config } = this.scene;
         const state = this.viewerEventState;
         // Colors and view settings from scene config
-        const selectedClr = config.selectedClr ?? { r: 1, g: 1, b: 0, a: 1 };
+        const selectedClr = config.selectedClr ?? { r: 1, g: 0.5, b: 0, a: 1 };
         const unselectedClr = config.unselectedClr ?? { r: 0, g: 0, b: 1, a: 0.5 };
         const lockedClr = config.lockedClr ?? { r: 0, g: 0, b: 0, a: 0.05 };
         const bgClr = config.bgClr ?? { r: 0, g: 0, b: 0, a: 1 };
@@ -147068,6 +147698,7 @@ class SplatViewerCore {
         };
         this.enableStats = false;
         this.autoFocus = true;
+        this.previewMode = false;
         this.isLoading = false;
         this.hasModel = false;
         this.error = null;
@@ -147120,6 +147751,11 @@ class SplatViewerCore {
         this.canvas = options.canvas || null;
         this.enableStats = options.enableStats || false;
         this.autoFocus = options.autoFocus !== false;
+        this.previewMode = options.previewMode || false;
+        // In preview mode, always enable auto-focus
+        if (this.previewMode) {
+            this.autoFocus = true;
+        }
         this._navigationCubeConfig = options.navigationCube || null;
         if (options.onStatsUpdate !== undefined) {
             this._onStatsUpdate = options.onStatsUpdate;
@@ -147150,11 +147786,20 @@ class SplatViewerCore {
         const emitEvent = (type, detail) => {
             this.emit({ type, detail });
         };
-        this._supersplat = new SupersplatAdapter(this.canvas, this._navigationCubeConfig, emitEvent);
+        this._supersplat = new SupersplatAdapter(this.canvas, 
+        // Disable navigation cube in preview mode
+        this.previewMode ? null : this._navigationCubeConfig, emitEvent);
         this._supersplatReady = this._supersplat.init();
         this._supersplatReady
             ?.then(() => {
-            this._setupFlyCameraForSupersplat();
+            // Disable camera controls in preview mode
+            if (this.previewMode && this._supersplat) {
+                this._supersplat.setCameraControlsEnabled?.(false);
+            }
+            // Only set up fly camera if not in preview mode
+            if (!this.previewMode) {
+                this._setupFlyCameraForSupersplat();
+            }
         })
             .catch(error => {
             console.error('SplatViewerCore.init: Failed to set up fly camera for supersplat path', error);
@@ -147190,6 +147835,9 @@ class SplatViewerCore {
         this.app = ctx.app;
         this.entities.camera = ctx.camera;
         const cameraAny = this.entities.camera;
+        // SuperSplat's PCApp omits ScriptComponentSystem, so `addComponent('script')`
+        // will not produce `camera.script.create()`. We keep the attempt (in case
+        // the underlying app changes), but also support a controller-based fallback.
         if (cameraAny &&
             !cameraAny.script &&
             typeof cameraAny.addComponent === 'function') {
@@ -147215,16 +147863,25 @@ class SplatViewerCore {
                 minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
                 maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
             };
-            this._fly = cameraAny?.script?.create?.('flyCamera', {
-                attributes: flyAttributes,
-            });
-            if (this._fly) {
-                ;
-                this._fly.emitFlyEvent = (type, detail) => {
-                    this.emit({ type: type, detail });
-                };
-                // Deactivate by default; orbit is the initial mode
-                this._fly.deactivate?.();
+            // Prefer script-based fly when available; fallback to controller otherwise.
+            const canCreateScript = typeof cameraAny?.script?.create === 'function';
+            if (canCreateScript) {
+                const created = cameraAny.script.create('flyCamera', {
+                    attributes: flyAttributes,
+                });
+                this._fly = created;
+                if (this._fly) {
+                    ;
+                    this._fly.emitFlyEvent = (type, detail) => {
+                        this.emit({ type: type, detail });
+                    };
+                    this._fly.deactivate?.();
+                }
+            }
+            else {
+                const controller = new FlyCameraController(ctx.app, cameraAny, (type, detail) => this.emit({ type: type, detail }), flyAttributes);
+                controller.deactivate();
+                this._fly = controller;
             }
             this._cameraMode = 'orbit';
         }
@@ -149075,6 +149732,11 @@ class SplatViewerCore {
     // Camera Mode / Fly Camera API
     // ==========================================
     setCameraMode(mode) {
+        // Prevent camera mode changes in preview mode
+        if (this.previewMode) {
+            console.warn('SplatViewerCore.setCameraMode: Camera controls are disabled in preview mode');
+            return;
+        }
         // supersplat-core path: manage mode switching explicitly (camera entity is updated by supersplat-core each frame)
         if (this._supersplat) {
             const prev = this._cameraMode;
@@ -149093,17 +149755,33 @@ class SplatViewerCore {
                 // Stop supersplat orbit updates + input
                 this._supersplat.setCameraControlsEnabled(false);
                 this._supersplat.setCameraManualControl(true);
-                // Align fly yaw/pitch with current camera rotation to avoid snapping
-                try {
-                    const euler = this.entities.camera?.getEulerAngles?.();
-                    if (euler && this._fly) {
-                        ;
-                        this._fly._pitch = euler.x || 0;
-                        this._fly._yaw = euler.y || 0;
+                // Preserve camera position and rotation when switching to fly mode
+                if (this._fly) {
+                    // For FlyCameraController (fallback path)
+                    if (typeof this._fly.syncFromEntity === 'function') {
+                        this._fly.syncFromEntity();
+                    }
+                    else {
+                        // For FlyCameraScript (legacy path)
+                        try {
+                            const pos = this.entities.camera?.getPosition?.();
+                            if (pos) {
+                                const posVec = pos.clone
+                                    ? pos.clone()
+                                    : new Vec3(pos.x || 0, pos.y || 0, pos.z || 0);
+                                this.entities.camera?.setPosition?.(posVec);
+                            }
+                            const euler = this.entities.camera?.getEulerAngles?.();
+                            if (euler) {
+                                ;
+                                this._fly._pitch = euler.x || 0;
+                                this._fly._yaw = euler.y || 0;
+                            }
+                        }
+                        catch {
+                            // ignore
+                        }
                     }
-                }
-                catch {
-                    // ignore
                 }
                 this._fly?.activate?.();
                 this._cameraMode = 'fly';
@@ -149220,9 +149898,48 @@ class SplatViewerCore {
         this._cameraModeManager?.setFlyConfig(config);
     }
     getFlyCameraConfig() {
+        // SuperSplat path: fly is either a script instance or controller fallback
+        if (this._supersplat && this._fly) {
+            try {
+                const flyAny = this._fly;
+                const cfg = {
+                    moveSpeed: flyAny.moveSpeed,
+                    fastSpeedMultiplier: flyAny.fastSpeedMultiplier,
+                    slowSpeedMultiplier: flyAny.slowSpeedMultiplier,
+                    lookSensitivity: flyAny.lookSensitivity,
+                    invertY: !!flyAny.invertY,
+                    keyBindings: { ...(flyAny.keyBindings || {}) },
+                    smoothing: flyAny.smoothing,
+                    friction: flyAny.friction,
+                    enableCollision: !!flyAny.enableCollision,
+                    minHeight: flyAny.minHeight ?? null,
+                    maxHeight: flyAny.maxHeight ?? null,
+                };
+                return cfg;
+            }
+            catch {
+                return null;
+            }
+        }
         return this._cameraModeManager?.getFlyConfig() || null;
     }
     getFlyCameraState() {
+        // SuperSplat path: fly is either a script instance or controller fallback
+        if (this._supersplat && this._fly?.getState) {
+            try {
+                const state = this._fly.getState();
+                return {
+                    mode: this._cameraMode,
+                    position: state.position,
+                    rotation: state.rotation,
+                    velocity: state.velocity,
+                    isMoving: state.isMoving,
+                };
+            }
+            catch {
+                return null;
+            }
+        }
         return this._cameraModeManager?.getFlyState() || null;
     }
     _setupScene() {
@@ -149274,8 +149991,8 @@ class SplatViewerCore {
             panSensitivity: 1.0,
             zoomSensitivity: 0.1,
         };
-        // Add navigation cube configuration if available
-        if (this._navigationCubeConfig) {
+        // Add navigation cube configuration if available (but not in preview mode)
+        if (this._navigationCubeConfig && !this.previewMode) {
             orbitAttributes.enableNavigationCube =
                 this._navigationCubeConfig.enabled || false;
             this.entities.camera._navigationCubeConfig =
@@ -149290,48 +150007,57 @@ class SplatViewerCore {
                 detail: { type: interactionType },
             });
         };
+        // Disable camera controls in preview mode
+        if (this.previewMode && this._orbit) {
+            const orbitAny = this._orbit;
+            if (typeof orbitAny.setEnabled === 'function') {
+                orbitAny.setEnabled(false);
+            }
+        }
         this.entities.camera.setPosition(0, 0, 10);
         this.entities.camera.lookAt(Vec3.ZERO);
         // ==============================
-        // Setup fly camera (disabled by default)
+        // Setup fly camera (disabled by default, skipped in preview mode)
         // ==============================
-        try {
-            registerFlyCameraScript();
-            // Ensure script component exists (created above)
-            const flyAttributes = {
-                moveSpeed: DEFAULT_FLY_CAMERA_CONFIG.moveSpeed,
-                fastSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.fastSpeedMultiplier,
-                slowSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.slowSpeedMultiplier,
-                lookSensitivity: DEFAULT_FLY_CAMERA_CONFIG.lookSensitivity,
-                invertY: DEFAULT_FLY_CAMERA_CONFIG.invertY,
-                keyBindings: DEFAULT_FLY_CAMERA_CONFIG.keyBindings,
-                smoothing: DEFAULT_FLY_CAMERA_CONFIG.smoothing,
-                friction: DEFAULT_FLY_CAMERA_CONFIG.friction,
-                enableCollision: DEFAULT_FLY_CAMERA_CONFIG.enableCollision,
-                minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
-                maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
-            };
-            this._fly = this.entities.camera.script.create('flyCamera', {
-                attributes: flyAttributes,
-            });
-            // Wire event emission to core
-            if (this._fly) {
-                ;
-                this._fly.emitFlyEvent = (type, detail) => {
-                    this.emit({ type: type, detail });
+        if (!this.previewMode) {
+            try {
+                registerFlyCameraScript();
+                // Ensure script component exists (created above)
+                const flyAttributes = {
+                    moveSpeed: DEFAULT_FLY_CAMERA_CONFIG.moveSpeed,
+                    fastSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.fastSpeedMultiplier,
+                    slowSpeedMultiplier: DEFAULT_FLY_CAMERA_CONFIG.slowSpeedMultiplier,
+                    lookSensitivity: DEFAULT_FLY_CAMERA_CONFIG.lookSensitivity,
+                    invertY: DEFAULT_FLY_CAMERA_CONFIG.invertY,
+                    keyBindings: DEFAULT_FLY_CAMERA_CONFIG.keyBindings,
+                    smoothing: DEFAULT_FLY_CAMERA_CONFIG.smoothing,
+                    friction: DEFAULT_FLY_CAMERA_CONFIG.friction,
+                    enableCollision: DEFAULT_FLY_CAMERA_CONFIG.enableCollision,
+                    minHeight: DEFAULT_FLY_CAMERA_CONFIG.minHeight,
+                    maxHeight: DEFAULT_FLY_CAMERA_CONFIG.maxHeight,
                 };
+                this._fly = this.entities.camera.script.create('flyCamera', {
+                    attributes: flyAttributes,
+                });
+                // Wire event emission to core
+                if (this._fly) {
+                    ;
+                    this._fly.emitFlyEvent = (type, detail) => {
+                        this.emit({ type: type, detail });
+                    };
+                }
+                // Deactivate fly by default; orbit is the initial mode
+                if (this._fly?.deactivate) {
+                    this._fly.deactivate();
+                }
+                // Initialize camera mode manager
+                this._cameraModeManager = new CameraModeManager(this.app, this.entities.camera, this._orbit, this._fly, (eventType, detail) => {
+                    this.emit({ type: eventType, detail });
+                }, 'orbit');
             }
-            // Deactivate fly by default; orbit is the initial mode
-            if (this._fly?.deactivate) {
-                this._fly.deactivate();
+            catch (e) {
+                console.warn('Failed to set up fly camera', e);
             }
-            // Initialize camera mode manager
-            this._cameraModeManager = new CameraModeManager(this.app, this.entities.camera, this._orbit, this._fly, (eventType, detail) => {
-                this.emit({ type: eventType, detail });
-            }, 'orbit');
-        }
-        catch (e) {
-            console.warn('Failed to set up fly camera', e);
         }
     }
     _setupStats() {
@@ -149576,6 +150302,7 @@ class SplatViewerElement extends HTMLElement {
             'enable-stats',
             'auto-focus',
             'max-splats',
+            'preview-mode',
             'camera-position',
             'camera-target',
             'orbit-sensitivity',
@@ -149606,6 +150333,9 @@ class SplatViewerElement extends HTMLElement {
     get autoFocus() {
         return this.hasAttribute('auto-focus');
     }
+    get previewMode() {
+        return this.hasAttribute('preview-mode');
+    }
     get maxSplats() {
         return this.getAttribute('max-splats');
     }
@@ -149683,6 +150413,14 @@ class SplatViewerElement extends HTMLElement {
             this.removeAttribute('auto-focus');
         }
     }
+    set previewMode(value) {
+        if (value) {
+            this.setAttribute('preview-mode', '');
+        }
+        else {
+            this.removeAttribute('preview-mode');
+        }
+    }
     set maxSplats(value) {
         if (value === null) {
             this.removeAttribute('max-splats');
@@ -149864,6 +150602,7 @@ class SplatViewerElement extends HTMLElement {
                 return value.length > 0;
             case 'enable-stats':
             case 'auto-focus':
+            case 'preview-mode':
             case 'enable-navigation-cube':
                 // Boolean attributes - any value is valid
                 return true;
@@ -150810,7 +151549,7 @@ class SplatViewerElement extends HTMLElement {
         if (!this._core) {
             throw new Error('SplatViewerElement: Core not initialized. Call connectedCallback first.');
         }
-        return this._core.selectSplatsInSphere(center, radius, modelId, addToSelection);
+        return this._core.selectSplatsInSphere(new Vec3(center.x, center.y, center.z), radius, modelId, addToSelection);
     }
     clearSplatSelection() {
         if (!this._core) {