@nice2dev/game-engine 1.0.5 → 1.0.10

package/dist/cjs/editor/VRARMode.js

@@ -0,0 +1,658 @@
+'use strict';
+
+/**
+ * @file VRARMode.ts
+ * @description VR/AR Mode with WebXR integration and hand tracking
+ * PRO-1.4: Professional Editor Features
+ *
+ * Features:
+ * - WebXR session management
+ * - VR headset support
+ * - AR passthrough mode
+ * - Hand tracking
+ * - Controller input
+ * - Spatial anchors
+ * - Room-scale setup
+ * - Teleportation movement
+ * - Haptic feedback
+ * - Mixed reality support
+ */
+// ============================================================
+// Default Settings
+// ============================================================
+const DEFAULT_XR_SETTINGS = {
+    sessionMode: 'immersive-vr',
+    referenceSpaceType: 'local-floor',
+    requiredFeatures: ['local-floor'],
+    optionalFeatures: ['hand-tracking', 'bounded-floor'],
+    framebufferScaleFactor: 1.0,
+    depthSensing: false,
+    lightEstimation: false,
+    teleportEnabled: true,
+    continuousMovement: false,
+    snapTurnAngle: 45,
+    vignetteOnMove: true,
+    handTrackingEnabled: true,
+    planeDetection: true,
+    hitTesting: true,
+    imageTracking: false,
+    roomScale: true,
+    boundaryVisible: true,
+};
+// ============================================================
+// XR System
+// ============================================================
+class VRARMode {
+    constructor() {
+        this.xrSession = null;
+        this.xrReferenceSpace = null;
+        this.settings = { ...DEFAULT_XR_SETTINGS };
+        // State
+        this.isSupported = false;
+        this.isSessionActive = false;
+        this.frameId = 0;
+        // Input
+        this.controllers = new Map();
+        this.hands = new Map();
+        // Spatial
+        this.anchors = new Map();
+        this.roomBoundary = null;
+        this.detectedPlanes = new Map();
+        // Teleport
+        this.teleportTarget = null;
+        this.isTeleporting = false;
+        // Image tracking
+        this.imageTargets = new Map();
+        // Gestures
+        this.registeredGestures = new Map();
+        this.activeGestures = new Set();
+    }
+    // ─── Initialization ────────────────────────────────────
+    async checkSupport() {
+        if (!navigator.xr) {
+            return { vr: false, ar: false, handTracking: false };
+        }
+        const [vr, ar] = await Promise.all([
+            navigator.xr.isSessionSupported('immersive-vr').catch(() => false),
+            navigator.xr.isSessionSupported('immersive-ar').catch(() => false),
+        ]);
+        this.isSupported = vr || ar;
+        return {
+            vr,
+            ar,
+            handTracking: true, // Can only check during session
+        };
+    }
+    isXRSupported() {
+        return this.isSupported;
+    }
+    // ─── Session Management ────────────────────────────────
+    async startSession(mode) {
+        if (!navigator.xr) {
+            return false;
+        }
+        if (this.isSessionActive) {
+            return false;
+        }
+        const sessionMode = mode ?? this.settings.sessionMode;
+        try {
+            const options = {
+                requiredFeatures: this.settings.requiredFeatures,
+                optionalFeatures: this.settings.optionalFeatures,
+            };
+            this.xrSession = await navigator.xr.requestSession(sessionMode, options);
+            // Setup reference space
+            this.xrReferenceSpace = await this.xrSession.requestReferenceSpace(this.settings.referenceSpaceType);
+            // Setup event listeners
+            this.setupSessionListeners();
+            this.isSessionActive = true;
+            this.onSessionStarted?.();
+            // Start render loop
+            this.xrSession.requestAnimationFrame(this.onXRFrame.bind(this));
+            return true;
+        }
+        catch (error) {
+            console.error('Failed to start XR session:', error);
+            return false;
+        }
+    }
+    async endSession() {
+        if (!this.xrSession) {
+            return;
+        }
+        try {
+            await this.xrSession.end();
+        }
+        catch {
+            // Session may already be ended
+        }
+        this.cleanup();
+    }
+    cleanup() {
+        this.xrSession = null;
+        this.xrReferenceSpace = null;
+        this.isSessionActive = false;
+        this.controllers.clear();
+        this.hands.clear();
+        this.detectedPlanes.clear();
+        this.activeGestures.clear();
+        this.onSessionEnded?.();
+    }
+    setupSessionListeners() {
+        if (!this.xrSession) {
+            return;
+        }
+        this.xrSession.addEventListener('end', () => this.cleanup());
+        this.xrSession.addEventListener('inputsourceschange', this.onInputSourcesChange.bind(this));
+        this.xrSession.addEventListener('select', this.onSelect.bind(this));
+        this.xrSession.addEventListener('selectstart', this.onSelectStart.bind(this));
+        this.xrSession.addEventListener('selectend', this.onSelectEnd.bind(this));
+        this.xrSession.addEventListener('squeeze', this.onSqueeze.bind(this));
+        this.xrSession.addEventListener('squeezestart', this.onSqueezeStart.bind(this));
+        this.xrSession.addEventListener('squeezeend', this.onSqueezeEnd.bind(this));
+    }
+    // ─── Frame Loop ────────────────────────────────────────
+    onXRFrame(time, frame) {
+        if (!this.xrSession || !this.xrReferenceSpace) {
+            return;
+        }
+        this.frameId++;
+        // Update input sources
+        for (const inputSource of this.xrSession.inputSources) {
+            this.updateInputSource(inputSource, frame);
+        }
+        // Update hand tracking
+        this.updateHandTracking(frame);
+        // Check gestures
+        this.checkGestures();
+        // Update teleport
+        this.updateTeleport(frame);
+        // Callback
+        this.onFrame?.(time, frame);
+        // Continue loop
+        this.xrSession.requestAnimationFrame(this.onXRFrame.bind(this));
+    }
+    updateInputSource(inputSource, frame) {
+        if (!this.xrReferenceSpace) {
+            return;
+        }
+        const index = Array.from(this.xrSession?.inputSources ?? []).indexOf(inputSource);
+        const state = {
+            handedness: inputSource.handedness,
+            targetRayMode: inputSource.targetRayMode,
+            buttons: [],
+            axes: [],
+            isTracking: false,
+        };
+        // Get poses
+        const targetRayPose = frame.getPose(inputSource.targetRaySpace, this.xrReferenceSpace);
+        if (targetRayPose) {
+            state.pose = this.convertXRPose(targetRayPose);
+            state.isTracking = true;
+        }
+        if (inputSource.gripSpace) {
+            const gripPose = frame.getPose(inputSource.gripSpace, this.xrReferenceSpace);
+            if (gripPose) {
+                state.gripPose = this.convertXRPose(gripPose);
+            }
+        }
+        // Get gamepad state
+        if (inputSource.gamepad) {
+            state.buttons = inputSource.gamepad.buttons.map((btn) => ({
+                pressed: btn.pressed,
+                touched: btn.touched,
+                value: btn.value,
+            }));
+            state.axes = Array.from(inputSource.gamepad.axes);
+        }
+        this.controllers.set(index, state);
+    }
+    updateHandTracking(frame) {
+        if (!this.settings.handTrackingEnabled || !this.xrSession || !this.xrReferenceSpace) {
+            return;
+        }
+        for (const inputSource of this.xrSession.inputSources) {
+            const hand = inputSource.hand;
+            if (!hand) {
+                continue;
+            }
+            const side = inputSource.handedness;
+            if (side !== 'left' && side !== 'right') {
+                continue;
+            }
+            const handState = this.extractHandState(hand, frame, side);
+            if (handState) {
+                this.hands.set(side, handState);
+                this.onHandTrackingUpdate?.(handState);
+            }
+        }
+    }
+    extractHandState(hand, frame, side) {
+        if (!this.xrReferenceSpace) {
+            return null;
+        }
+        const joints = {
+            thumb: [],
+            index: [],
+            middle: [],
+            ring: [],
+            pinky: [],
+        };
+        // Extract joint poses
+        const jointNames = [
+            'wrist',
+            'thumb-metacarpal',
+            'thumb-phalanx-proximal',
+            'thumb-phalanx-distal',
+            'thumb-tip',
+            'index-finger-metacarpal',
+            'index-finger-phalanx-proximal',
+            'index-finger-phalanx-intermediate',
+            'index-finger-phalanx-distal',
+            'index-finger-tip',
+            'middle-finger-metacarpal',
+            'middle-finger-phalanx-proximal',
+            'middle-finger-phalanx-intermediate',
+            'middle-finger-phalanx-distal',
+            'middle-finger-tip',
+            'ring-finger-metacarpal',
+            'ring-finger-phalanx-proximal',
+            'ring-finger-phalanx-intermediate',
+            'ring-finger-phalanx-distal',
+            'ring-finger-tip',
+            'pinky-finger-metacarpal',
+            'pinky-finger-phalanx-proximal',
+            'pinky-finger-phalanx-intermediate',
+            'pinky-finger-phalanx-distal',
+            'pinky-finger-tip',
+        ];
+        let isTracking = false;
+        for (const jointName of jointNames) {
+            const jointSpace = hand.get(jointName);
+            if (!jointSpace) {
+                continue;
+            }
+            const jointPose = frame.getJointPose?.(jointSpace, this.xrReferenceSpace);
+            if (!jointPose) {
+                continue;
+            }
+            isTracking = true;
+            const pose = {
+                position: {
+                    x: jointPose.transform.position.x,
+                    y: jointPose.transform.position.y,
+                    z: jointPose.transform.position.z,
+                },
+                orientation: {
+                    x: jointPose.transform.orientation.x,
+                    y: jointPose.transform.orientation.y,
+                    z: jointPose.transform.orientation.z,
+                    w: jointPose.transform.orientation.w,
+                },
+                radius: jointPose.radius ?? 0,
+            };
+            if (jointName === 'wrist') {
+                joints.wrist = pose;
+            }
+            else if (jointName.startsWith('thumb')) {
+                joints.thumb.push(pose);
+            }
+            else if (jointName.startsWith('index')) {
+                joints.index.push(pose);
+            }
+            else if (jointName.startsWith('middle')) {
+                joints.middle.push(pose);
+            }
+            else if (jointName.startsWith('ring')) {
+                joints.ring.push(pose);
+            }
+            else if (jointName.startsWith('pinky')) {
+                joints.pinky.push(pose);
+            }
+        }
+        return {
+            side,
+            joints,
+            isTracking,
+            pinchStrength: this.calculatePinchStrength(joints),
+            gripStrength: this.calculateGripStrength(joints),
+        };
+    }
+    calculatePinchStrength(joints) {
+        if (joints.thumb.length < 4 || joints.index.length < 4) {
+            return 0;
+        }
+        const thumbTip = joints.thumb[3];
+        const indexTip = joints.index[4];
+        const distance = this.distance(thumbTip.position, indexTip.position);
+        const maxDistance = 0.1; // 10cm
+        return Math.max(0, 1 - distance / maxDistance);
+    }
+    calculateGripStrength(joints) {
+        // Simplified grip detection based on finger curl
+        let curlSum = 0;
+        const fingers = [joints.index, joints.middle, joints.ring, joints.pinky];
+        for (const finger of fingers) {
+            if (finger.length >= 4) {
+                const tip = finger[finger.length - 1];
+                const base = finger[0];
+                if (joints.wrist) {
+                    const fingerLength = this.distance(tip.position, base.position);
+                    const toWrist = this.distance(tip.position, joints.wrist.position);
+                    curlSum += Math.max(0, 1 - fingerLength / toWrist);
+                }
+            }
+        }
+        return curlSum / 4;
+    }
+    distance(a, b) {
+        return Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2) + Math.pow(a.z - b.z, 2));
+    }
+    convertXRPose(pose) {
+        return {
+            position: {
+                x: pose.transform.position.x,
+                y: pose.transform.position.y,
+                z: pose.transform.position.z,
+            },
+            orientation: {
+                x: pose.transform.orientation.x,
+                y: pose.transform.orientation.y,
+                z: pose.transform.orientation.z,
+                w: pose.transform.orientation.w,
+            },
+        };
+    }
+    // ─── Input Events ──────────────────────────────────────
+    onInputSourcesChange(event) {
+        for (const inputSource of event.added) {
+            const index = Array.from(this.xrSession?.inputSources ?? []).indexOf(inputSource);
+            const state = {
+                handedness: inputSource.handedness,
+                targetRayMode: inputSource.targetRayMode,
+                buttons: [],
+                axes: [],
+                isTracking: false,
+            };
+            this.controllers.set(index, state);
+            this.onControllerConnected?.(state, index);
+        }
+        for (const inputSource of event.removed) {
+            const index = Array.from(this.xrSession?.inputSources ?? []).indexOf(inputSource);
+            if (index >= 0) {
+                this.controllers.delete(index);
+                this.onControllerDisconnected?.(index);
+            }
+        }
+    }
+    onSelect(_event) {
+        // Primary action completed
+    }
+    onSelectStart(_event) {
+        // Primary action started
+    }
+    onSelectEnd(_event) {
+        // Primary action ended
+        if (this.settings.teleportEnabled && this.teleportTarget?.valid) {
+            this.executeTeleport();
+        }
+    }
+    onSqueeze(_event) {
+        // Squeeze action completed
+    }
+    onSqueezeStart(_event) {
+        // Squeeze action started
+    }
+    onSqueezeEnd(_event) {
+        // Squeeze action ended
+    }
+    // ─── Gesture Detection ─────────────────────────────────
+    registerGesture(gesture) {
+        this.registeredGestures.set(gesture.id, gesture);
+    }
+    unregisterGesture(gestureId) {
+        this.registeredGestures.delete(gestureId);
+        this.activeGestures.delete(gestureId);
+    }
+    checkGestures() {
+        for (const [side, hand] of this.hands) {
+            for (const [id, gesture] of this.registeredGestures) {
+                if (gesture.hand && gesture.hand !== side) {
+                    continue;
+                }
+                const isActive = this.isGestureActive(gesture, hand);
+                const wasActive = this.activeGestures.has(`${id}_${side}`);
+                if (isActive && !wasActive) {
+                    this.activeGestures.add(`${id}_${side}`);
+                    this.onGestureDetected?.(id, side);
+                }
+                else if (!isActive && wasActive) {
+                    this.activeGestures.delete(`${id}_${side}`);
+                    this.onGestureEnded?.(id, side);
+                }
+            }
+        }
+    }
+    isGestureActive(gesture, hand) {
+        if (gesture.customChecker) {
+            return gesture.customChecker(hand);
+        }
+        switch (gesture.type) {
+            case 'pinch':
+                return hand.pinchStrength > 0.8;
+            case 'grab':
+                return hand.gripStrength > 0.8;
+            case 'open_hand':
+                return hand.gripStrength < 0.2 && hand.pinchStrength < 0.2;
+            case 'fist':
+                return hand.gripStrength > 0.9;
+            case 'point':
+                // Index extended, others curled
+                return hand.gripStrength > 0.6 && hand.pinchStrength < 0.3;
+            default:
+                return false;
+        }
+    }
+    // ─── Teleportation ─────────────────────────────────────
+    updateTeleport(_frame) {
+        if (!this.settings.teleportEnabled) {
+            return;
+        }
+        // Get controller ray for teleport targeting
+        const controller = this.getControllerByHandedness('right') ?? this.getControllerByHandedness('left');
+        if (!controller?.pose) {
+            this.teleportTarget = null;
+            return;
+        }
+        // Cast ray to find valid teleport target
+        // This would need integration with scene raycast
+        // For now, just clear the target
+    }
+    setTeleportTarget(target) {
+        this.teleportTarget = target;
+    }
+    executeTeleport() {
+        if (!this.teleportTarget?.valid) {
+            return;
+        }
+        this.isTeleporting = true;
+        this.onTeleport?.(this.teleportTarget);
+        this.teleportTarget = null;
+        this.isTeleporting = false;
+    }
+    teleportTo(position) {
+        const target = {
+            position,
+            normal: { x: 0, y: 1, z: 0 },
+            valid: true,
+        };
+        this.onTeleport?.(target);
+    }
+    // ─── Locomotion ────────────────────────────────────────
+    snapTurn(direction) {
+        this.settings.snapTurnAngle * (direction === 'left' ? -1 : 1);
+        // Apply rotation to player
+        // This would need integration with player transform
+    }
+    // ─── Haptics ───────────────────────────────────────────
+    triggerHaptics(handedness, feedback) {
+        if (!this.xrSession) {
+            return;
+        }
+        for (const inputSource of this.xrSession.inputSources) {
+            if (inputSource.handedness !== handedness) {
+                continue;
+            }
+            const actuator = inputSource.gamepad?.hapticActuators?.[0];
+            if (actuator && 'pulse' in actuator) {
+                actuator.pulse(feedback.intensity, feedback.duration);
+            }
+        }
+    }
+    // ─── Spatial Anchors ───────────────────────────────────
+    async createAnchor(pose, name, persistent = false, metadata) {
+        const anchor = {
+            id: `anchor_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+            name,
+            pose,
+            createdAt: Date.now(),
+            persistent,
+            metadata,
+        };
+        this.anchors.set(anchor.id, anchor);
+        this.onAnchorAdded?.(anchor);
+        return anchor;
+    }
+    getAnchor(id) {
+        return this.anchors.get(id);
+    }
+    getAnchors() {
+        return Array.from(this.anchors.values());
+    }
+    removeAnchor(id) {
+        const deleted = this.anchors.delete(id);
+        if (deleted) {
+            this.onAnchorRemoved?.(id);
+        }
+        return deleted;
+    }
+    // ─── Plane Detection (AR) ──────────────────────────────
+    getDetectedPlanes() {
+        return Array.from(this.detectedPlanes.values());
+    }
+    getPlanesByClassification(classification) {
+        return Array.from(this.detectedPlanes.values()).filter((p) => p.classification === classification);
+    }
+    // ─── Image Tracking (AR) ────────────────────────────────
+    addImageTarget(target) {
+        this.imageTargets.set(target.id, {
+            ...target,
+            tracked: false,
+        });
+    }
+    removeImageTarget(id) {
+        this.imageTargets.delete(id);
+    }
+    getTrackedImages() {
+        return Array.from(this.imageTargets.values()).filter((t) => t.tracked);
+    }
+    // ─── State Getters ─────────────────────────────────────
+    getSession() {
+        return this.xrSession;
+    }
+    getReferenceSpace() {
+        return this.xrReferenceSpace;
+    }
+    isActive() {
+        return this.isSessionActive;
+    }
+    getControllers() {
+        return Array.from(this.controllers.values());
+    }
+    getController(index) {
+        return this.controllers.get(index);
+    }
+    getControllerByHandedness(handedness) {
+        return Array.from(this.controllers.values()).find((c) => c.handedness === handedness);
+    }
+    getHand(side) {
+        return this.hands.get(side);
+    }
+    getHands() {
+        return Array.from(this.hands.values());
+    }
+    getRoomBoundary() {
+        return this.roomBoundary;
+    }
+    // ─── Settings ──────────────────────────────────────────
+    getSettings() {
+        return { ...this.settings };
+    }
+    setSettings(settings) {
+        this.settings = { ...this.settings, ...settings };
+    }
+    // ─── Callbacks ─────────────────────────────────────────
+    setOnSessionStarted(callback) {
+        this.onSessionStarted = callback;
+    }
+    setOnSessionEnded(callback) {
+        this.onSessionEnded = callback;
+    }
+    setOnFrame(callback) {
+        this.onFrame = callback;
+    }
+    setOnControllerConnected(callback) {
+        this.onControllerConnected = callback;
+    }
+    setOnControllerDisconnected(callback) {
+        this.onControllerDisconnected = callback;
+    }
+    setOnHandTrackingUpdate(callback) {
+        this.onHandTrackingUpdate = callback;
+    }
+    setOnGestureDetected(callback) {
+        this.onGestureDetected = callback;
+    }
+    setOnGestureEnded(callback) {
+        this.onGestureEnded = callback;
+    }
+    setOnTeleport(callback) {
+        this.onTeleport = callback;
+    }
+    setOnPlaneDetected(callback) {
+        this.onPlaneDetected = callback;
+    }
+    setOnImageTracked(callback) {
+        this.onImageTracked = callback;
+    }
+    setOnAnchorAdded(callback) {
+        this.onAnchorAdded = callback;
+    }
+    setOnAnchorRemoved(callback) {
+        this.onAnchorRemoved = callback;
+    }
+}
+// ============================================================
+// Factory Functions
+// ============================================================
+function createVRARMode() {
+    return new VRARMode();
+}
+function createDefaultGestures() {
+    return [
+        { id: 'pinch_left', name: 'Left Pinch', type: 'pinch', hand: 'left' },
+        { id: 'pinch_right', name: 'Right Pinch', type: 'pinch', hand: 'right' },
+        { id: 'grab_left', name: 'Left Grab', type: 'grab', hand: 'left' },
+        { id: 'grab_right', name: 'Right Grab', type: 'grab', hand: 'right' },
+        { id: 'point_left', name: 'Left Point', type: 'point', hand: 'left' },
+        { id: 'point_right', name: 'Right Point', type: 'point', hand: 'right' },
+        { id: 'fist_left', name: 'Left Fist', type: 'fist', hand: 'left' },
+        { id: 'fist_right', name: 'Right Fist', type: 'fist', hand: 'right' },
+    ];
+}
+
+exports.DEFAULT_XR_SETTINGS = DEFAULT_XR_SETTINGS;
+exports.VRARMode = VRARMode;
+exports.createDefaultGestures = createDefaultGestures;
+exports.createVRARMode = createVRARMode;
+//# sourceMappingURL=VRARMode.js.map