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

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

@@ -105235,14 +105235,24 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    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
 	                ;
@@ -105253,6 +105263,8 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        catch {
 	            // Best-effort sync; ignore if camera or script API differs
 	        }
+	        if (typeof this.fly.activate === 'function')
+	            this.fly.activate();
 	    }
 	    deactivateFlyMode() {
 	        if (!this.fly)
@@ -105262,6 +105274,373 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    }
 	}
 
+	/**
+	 * 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') {
@@ -105347,10 +105726,18 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        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)
@@ -105358,13 +105745,17 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                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)
@@ -105460,9 +105851,11 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        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 ||
@@ -105471,7 +105864,10 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                        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) => {
@@ -105479,22 +105875,36 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	                        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) {
@@ -105583,6 +105993,27 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        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;
@@ -105879,7 +106310,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	        scope.resolve(key).setValue(values[key]);
 	    }
 	};
-	const createBlueNoiseTexture = (device) => {
+	const createBlueNoiseTexture$1 = (device) => {
 	    const size = 32;
 	    const texture = new Texture$1(device, {
 	        width: size,
@@ -105958,7 +106389,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	            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();
 	    }
@@ -139095,6 +139526,7 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    enableStats: false,
 	    autoFocus: true,
 	    maxSplats: 2000000,
+	    previewMode: false,
 	    camera: {
 	        position: { x: 0, y: 0, z: 10 },
 	        target: { x: 0, y: 0, z: 0 },
@@ -139184,6 +139616,10 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    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) {
@@ -140324,51 +140760,161 @@ fn fragmentMain(input: FragmentInput) -> FragmentOutput {
 	    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();
@@ -140405,6 +140951,7 @@ void main(void) {
 	        this.ensureTranslateGizmo();
 	        this.updateGizmoSize();
 	        this.updateGizmoAttachment();
+	        this.updateBoxShaderUniforms();
 	    }
 	    createBox(options = {}) {
 	        if (!this.app || !this.parent) {
@@ -140427,7 +140974,7 @@ void main(void) {
 	        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,
@@ -140514,8 +141061,8 @@ void main(void) {
 	            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;
 	    }
@@ -140710,19 +141257,34 @@ void main(void) {
 	    }
 	    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);
@@ -140734,59 +141296,110 @@ void main(void) {
 	    }
 	}
 
-	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();
@@ -140822,6 +141435,7 @@ void main(void) {
 	        this.ensureTranslateGizmo();
 	        this.updateGizmoSize();
 	        this.updateGizmoAttachment();
+	        this.updateSphereShaderUniforms();
 	    }
 	    createSphere(options = {}) {
 	        if (!this.app || !this.parent) {
@@ -140834,7 +141448,8 @@ void main(void) {
 	        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
@@ -140842,7 +141457,7 @@ void main(void) {
 	        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,
@@ -140925,8 +141540,12 @@ void main(void) {
 	            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;
 	    }
@@ -141124,19 +141743,30 @@ void main(void) {
 	    }
 	    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);
@@ -142543,222 +143173,222 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	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();
@@ -142795,18 +143425,18 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            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
@@ -144045,176 +144675,176 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	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) => {
@@ -144285,36 +144915,36 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	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 {
@@ -144632,72 +145262,72 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	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 {
@@ -144786,19 +145416,19 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    }
 	}
 
-	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 {
@@ -146763,7 +147393,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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 };
@@ -147075,6 +147705,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        };
 	        this.enableStats = false;
 	        this.autoFocus = true;
+	        this.previewMode = false;
 	        this.isLoading = false;
 	        this.hasModel = false;
 	        this.error = null;
@@ -147127,6 +147758,11 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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;
@@ -147157,11 +147793,20 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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);
@@ -147197,6 +147842,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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') {
@@ -147222,16 +147870,25 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                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';
 	        }
@@ -149082,6 +149739,11 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    // 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;
@@ -149100,17 +149762,33 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                // 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';
@@ -149227,9 +149905,48 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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() {
@@ -149281,8 +149998,8 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            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 =
@@ -149297,48 +150014,57 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                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() {
@@ -149583,6 +150309,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            'enable-stats',
 	            'auto-focus',
 	            'max-splats',
+	            'preview-mode',
 	            'camera-position',
 	            'camera-target',
 	            'orbit-sensitivity',
@@ -149613,6 +150340,9 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	    get autoFocus() {
 	        return this.hasAttribute('auto-focus');
 	    }
+	    get previewMode() {
+	        return this.hasAttribute('preview-mode');
+	    }
 	    get maxSplats() {
 	        return this.getAttribute('max-splats');
 	    }
@@ -149690,6 +150420,14 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	            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');
@@ -149871,6 +150609,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	                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;
@@ -150817,7 +151556,7 @@ bool initCenter(SplatSource source, vec3 modelCenter, out SplatCenter center) {
 	        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) {