Maîtriser les entrées WebXR : Une analyse approfondie de la gestion de l'état des contrôleurs

Le monde de la réalité étendue (XR) évolue rapidement, et avec lui, la manière dont les utilisateurs interagissent avec les environnements virtuels et augmentés. Au cœur de cette interaction se trouve la gestion des entrées provenant des contrôleurs. Pour les développeurs qui créent des expériences immersives avec WebXR, comprendre et gérer efficacement les états des contrôleurs est primordial pour offrir des applications intuitives, réactives et engageantes. Cet article de blog explore en profondeur le Gestionnaire de sources d'entrée WebXR (WebXR Input Source Manager) et son rôle crucial dans la gestion de l'état des contrôleurs, en fournissant des perspectives et des bonnes pratiques pour un public mondial de créateurs XR.

Comprendre le gestionnaire de sources d'entrée WebXR

L'API WebXR Device fournit un moyen standardisé pour les navigateurs web d'accéder aux appareils XR, tels que les casques de réalité virtuelle (VR) et les lunettes de réalité augmentée (AR). Un composant clé de cette API est le Gestionnaire de sources d'entrée (Input Source Manager). Il agit comme le hub central pour détecter et gérer tous les périphériques d'entrée connectés à une session XR. Ces périphériques d'entrée peuvent aller des simples contrôleurs de mouvement avec des boutons et des joysticks à des systèmes plus complexes de suivi des mains.

Qu'est-ce qu'une source d'entrée ?

Dans la terminologie WebXR, une Source d'entrée (Input Source) représente un appareil physique qu'un utilisateur peut utiliser pour interagir avec l'environnement XR. Les exemples courants incluent :

• Contrôleurs VR : Des appareils comme les contrôleurs Oculus Touch, Valve Index ou PlayStation Move, qui offrent une variété de boutons, gâchettes, joysticks et pavés tactiles.
• Suivi des mains : Certains appareils peuvent suivre directement les mains de l'utilisateur, fournissant une entrée basée sur les gestes et les mouvements des doigts.
• Contrôleurs AR : Pour les expériences AR, l'entrée peut provenir d'un contrôleur Bluetooth couplé ou même de gestes reconnus par les caméras de l'appareil AR.
• Entrée par le regard : Bien qu'il ne s'agisse pas d'un contrôleur physique, le regard peut être considéré comme une source d'entrée, où le focus de l'utilisateur détermine l'interaction.

Le rôle du gestionnaire de sources d'entrée

Le gestionnaire de sources d'entrée est responsable de :

• Énumérer les sources d'entrée : Détecter quand des sources d'entrée (contrôleurs, suivi des mains, etc.) deviennent disponibles ou sont retirées de la session XR.
• Fournir des informations sur les sources d'entrée : Offrir des détails sur chaque source d'entrée détectée, comme son type (par ex., 'hand', 'other'), son espace de rayon cible (vers où il pointe) et son pointeur (pour les interactions de type écran).
• Gérer les événements d'entrée : Faciliter le flux d'événements depuis les sources d'entrée vers l'application, tels que les pressions sur les boutons, les actions sur les gâchettes ou les mouvements du joystick.

Gestion de l'état des contrôleurs : Le fondement de l'interaction

Une gestion efficace de l'état des contrôleurs ne consiste pas seulement à savoir quand un bouton est pressé ; il s'agit de comprendre le spectre complet des états dans lesquels un contrôleur peut se trouver et comment ces états se traduisent en actions de l'utilisateur au sein de votre application XR. Cela inclut le suivi :

• États des boutons : Un bouton est-il actuellement pressé, relâché ou maintenu ?
• Valeurs des axes : Quelle est la position actuelle d'un joystick ou d'un pavé tactile ?
• États de préhension/pincement : Pour les contrôleurs avec des capteurs de préhension, l'utilisateur tient-il ou relâche-t-il le contrôleur ?
• Pose/Transformation : Où se trouve le contrôleur dans l'espace 3D et comment est-il orienté ? Ceci est crucial pour la manipulation et l'interaction directes.
• Statut de la connexion : Le contrôleur est-il connecté et actif, ou a-t-il été déconnecté ?

Les défis du développement XR mondial

Lors du développement pour un public mondial, plusieurs facteurs compliquent la gestion de l'état des contrôleurs :

• Fragmentation des appareils : La grande diversité du matériel XR disponible dans le monde signifie que les développeurs doivent tenir compte des différentes conceptions de contrôleurs, dispositions de boutons et capacités des capteurs. Ce qui fonctionne intuitivement sur une plateforme peut être déroutant sur une autre.
• Localisation des commandes : Bien que les boutons et les axes soient universels, leurs modèles d'utilisation courants ou leurs associations culturelles peuvent varier. Par exemple, le concept d'un bouton 'retour' peut dépendre du contexte selon les différentes interfaces culturelles.
• Performance selon les appareils : La puissance de calcul et la latence du réseau могут varier considérablement pour les utilisateurs dans différentes régions, ce qui a un impact sur la réactivité de la gestion des entrées.
• Accessibilité : Assurer que les utilisateurs ayant des capacités physiques différentes puissent interagir efficacement avec les applications XR nécessite une gestion des entrées robuste et flexible.

Tirer parti du gestionnaire de sources d'entrée WebXR pour la gestion d'état

Le gestionnaire de sources d'entrée WebXR fournit les outils fondamentaux pour relever ces défis. Voyons comment l'utiliser efficacement.

1. Accéder aux sources d'entrée

La principale façon d'interagir avec les sources d'entrée est via la propriété navigator.xr.inputSources, qui renvoie une liste de toutes les sources d'entrée actuellement actives.

            const xrSession = await navigator.xr.requestSession('immersive-vr');

function handleInputSources(session) {
    session.inputSources.forEach(inputSource => {
        console.log('Input Source Type:', inputSource.targetRayMode);
        console.log('Input Source Gamepad:', inputSource.gamepad);
        console.log('Input Source Profiles:', inputSource.profiles);
    });
}

xrSession.addEventListener('inputsourceschange', () => {
    handleInputSources(xrSession);
});

handleInputSources(xrSession);

            

              
                Copy
              
            
          

L'objet inputSources fournit des informations clés :

• targetRayMode : Indique comment la source d'entrée est utilisée pour le ciblage (par ex., 'gaze', 'controller', 'screen').
• gamepad : Un objet standard de l'API Gamepad qui donne accès aux états des boutons et des axes. C'est l'outil principal pour les entrées détaillées des contrôleurs.
• profiles : Un tableau de chaînes de caractères indiquant les profils de la source d'entrée (par ex., 'oculus-touch', 'vive-wands'). C'est inestimable pour adapter le comportement à un matériel spécifique.

2. Suivi des états des boutons et des axes via l'API Gamepad

La propriété gamepad d'une source d'entrée est un lien direct vers l'API Gamepad standard. Cette API existe depuis longtemps, garantissant une large compatibilité et une interface familière pour les développeurs.

Comprendre les indices des boutons et des axes du Gamepad :

L'API Gamepad utilise des indices numériques pour représenter les boutons et les axes. Ces indices peuvent varier légèrement entre les appareils, c'est pourquoi la vérification des profiles est importante. Cependant, des indices communs sont établis :

• Boutons : Typiquement, les indices 0-19 couvrent les boutons courants (boutons de façade, gâchettes, boutons de tranche, clics de joystick).
• Axes : Typiquement, les indices 0-5 couvrent les sticks analogiques (gauche/droite horizontal/vertical) et les gâchettes.

Exemple : Vérifier la pression d'un bouton et la valeur d'une gâchette :

            function updateControllerState(inputSource) {
    if (!inputSource.gamepad) return;

    const gamepad = inputSource.gamepad;

    // Exemple : Vérifier si le bouton 'A' (souvent l'index 0) est pressé
    if (gamepad.buttons[0].pressed) {
        console.log('Bouton principal pressé !');
        // Déclencher une action
    }

    // Exemple : Obtenir la valeur de la gâchette principale (souvent l'index 1)
    const triggerValue = gamepad.buttons[1].value; // Varie de 0.0 à 1.0
    if (triggerValue > 0.1) {
        console.log('Gâchette actionnée :', triggerValue);
        // Appliquer une force, sélectionner un objet, etc.
    }

    // Exemple : Obtenir la valeur horizontale du joystick gauche (souvent l'index 2)
    const thumbstickX = gamepad.axes[2]; // Varie de -1.0 à 1.0
    if (Math.abs(thumbstickX) > 0.2) {
        console.log('Joystick gauche déplacé :', thumbstickX);
        // Gérer le déplacement, le mouvement de la caméra, etc.
    }
}

function animate() {
    if (xrSession) {
        xrSession.inputSources.forEach(inputSource => {
            updateControllerState(inputSource);
        });
    }
    requestAnimationFrame(animate);
}

animate();

            

              
                Copy
              
            
          

Remarque importante sur les indices des boutons/axes : Bien que des indices communs existent, la meilleure pratique est de consulter les profiles de la source d'entrée et d'utiliser potentiellement une table de correspondance si une identification précise des boutons sur tous les appareils est essentielle. Des bibliothèques comme XRInput peuvent aider à abstraire ces différences.

3. Suivi de la pose et des transformations du contrôleur

La pose d'un contrôleur dans l'espace 3D est essentielle pour la manipulation directe, le ciblage et l'interaction avec l'environnement. L'API WebXR fournit cette information via la propriété inputSource.gamepad.pose, mais plus important encore, via inputSource.targetRaySpace et inputSource.gripSpace.

• targetRaySpace : C'est un espace de référence représentant le point et la direction d'où le raycasting ou le ciblage provient. Il est souvent aligné avec le pointeur du contrôleur ou son faisceau d'interaction principal.
• gripSpace : C'est un espace de référence représentant la position et l'orientation physiques du contrôleur lui-même. C'est utile pour saisir des objets virtuels ou lorsque la représentation visuelle du contrôleur doit correspondre à sa position dans le monde réel.

Pour obtenir la matrice de transformation réelle (position et orientation) de ces espaces par rapport à la pose de votre spectateur, vous utilisez les méthodes session.requestReferenceSpace et viewerSpace.getOffsetReferenceSpace.

            let viewerReferenceSpace = null;
let gripSpace = null;
let targetRaySpace = null;

xrSession.requestReferenceSpace('viewer').then(space => {
    viewerReferenceSpace = space;

    // Demander l'espace de préhension par rapport à l'espace du spectateur
    const inputSource = xrSession.inputSources[0]; // En supposant au moins une source d'entrée
    if (inputSource) {
        gripSpace = viewerReferenceSpace.getOffsetReferenceSpace(inputSource.gripSpace);
        targetRaySpace = viewerReferenceSpace.getOffsetReferenceSpace(inputSource.targetRaySpace);
    }
});

function updateControllerPose() {
    if (viewerReferenceSpace && gripSpace && targetRaySpace) {
        const frame = xrFrame;
        const gripPose = frame.getPose(gripSpace, viewerReferenceSpace);
        const rayPose = frame.getPose(targetRaySpace, viewerReferenceSpace);

        if (gripPose) {
            // gripPose.position contient [x, y, z]
            // gripPose.orientation contient [x, y, z, w] (quaternion)
            console.log('Position du contrôleur :', gripPose.position);
            console.log('Orientation du contrôleur :', gripPose.orientation);
            // Mettre à jour votre modèle 3D ou votre logique d'interaction
        }

        if (rayPose) {
            // C'est l'origine et la direction du rayon de ciblage
            // Utilisez-le pour le raycasting dans la scène
        }
    }
}

// Dans votre boucle de frame XR :
function renderXRFrame(xrFrame) {
    xrFrame;
    updateControllerPose();
    // ... logique de rendu ...
}

            

              
                Copy
              
            
          

Considérations globales pour la pose : Assurez-vous que votre système de coordonnées est cohérent. La plupart des développements XR utilisent un système de coordonnées droit où Y est vers le haut. Cependant, soyez conscient des différences potentielles de points d'origine ou de chiralité si vous intégrez des moteurs 3D externes qui ont des conventions différentes.

4. Gérer les événements d'entrée et les transitions d'état

Bien que l'interrogation de l'état du gamepad dans une boucle d'animation soit courante, WebXR fournit également des mécanismes événementiels pour les changements d'entrée, qui peuvent être plus efficaces et offrir une meilleure expérience utilisateur.

Événements select et squeeze :

Ce sont les principaux événements envoyés par l'API WebXR pour les sources d'entrée.

• selectstart / selectend : Déclenché lorsqu'un bouton d'action principal (comme 'A' sur Oculus, ou la gâchette principale) est pressé ou relâché.
• squeezestart / squeezeend : Déclenché lorsqu'une action de préhension (comme serrer le bouton de préhension latéral) est initiée ou relâchée.

            xrSession.addEventListener('selectstart', (event) => {
    const inputSource = event.inputSource;
    console.log('Sélection commencée sur :', inputSource.profiles);
    // Déclencher une action immédiate, comme ramasser un objet
});

xrSession.addEventListener('squeezeend', (event) => {
    const inputSource = event.inputSource;
    console.log('Préhension terminée sur :', inputSource.profiles);
    // Relâcher un objet, arrêter une action
});

// Vous pouvez également écouter des boutons spécifiques via l'API Gamepad directement si nécessaire

            

              
                Copy
              
            
          

Gestion d'événements personnalisée :

Pour des interactions plus complexes, vous pourriez vouloir construire une machine à états personnalisée pour chaque contrôleur. Cela implique de :

1. Définir les états : par ex., 'IDLE', 'POINTING', 'GRABBING', 'MENU_OPEN'.
2. Définir les transitions : Quelles pressions de bouton ou changements d'axe provoquent un changement d'état ?
3. Gérer les actions au sein des états : Quelles actions se produisent lorsqu'un état est actif ou lorsqu'une transition a lieu ?

Exemple de concept de machine à états simple :

            class ControllerStateManager {
    constructor(inputSource) {
        this.inputSource = inputSource;
        this.state = 'IDLE';
        this.isPrimaryButtonPressed = false;
        this.isGripPressed = false;
    }

    update() {
        const gamepad = this.inputSource.gamepad;
        if (!gamepad) return;

        const primaryButton = gamepad.buttons[0]; // En supposant que l'index 0 est le principal
        const gripButton = gamepad.buttons[2];  // En supposant que l'index 2 est la préhension

        // Logique du bouton principal
        if (primaryButton.pressed && !this.isPrimaryButtonPressed) {
            this.handleEvent('PRIMARY_PRESS');
            this.isPrimaryButtonPressed = true;
        } else if (!primaryButton.pressed && this.isPrimaryButtonPressed) {
            this.handleEvent('PRIMARY_RELEASE');
            this.isPrimaryButtonPressed = false;
        }

        // Logique du bouton de préhension
        if (gripButton.pressed && !this.isGripPressed) {
            this.handleEvent('GRIP_PRESS');
            this.isGripPressed = true;
        } else if (!gripButton.pressed && this.isGripPressed) {
            this.handleEvent('GRIP_RELEASE');
            this.isGripPressed = false;
        }

        // Mettre à jour la logique spécifique à l'état ici, par ex., le mouvement du joystick pour le déplacement
        if (this.state === 'MOVING') {
            // Gérer le déplacement en fonction des axes du joystick
        }
    }

    handleEvent(event) {
        switch (this.state) {
            case 'IDLE':
                if (event === 'PRIMARY_PRESS') {
                    this.state = 'INTERACTING';
                    console.log('Interaction commencée');
                } else if (event === 'GRIP_PRESS') {
                    this.state = 'GRABBING';
                    console.log('Préhension commencée');
                }
                break;
            case 'INTERACTING':
                if (event === 'PRIMARY_RELEASE') {
                    this.state = 'IDLE';
                    console.log('Interaction terminée');
                }
                break;
            case 'GRABBING':
                if (event === 'GRIP_RELEASE') {
                    this.state = 'IDLE';
                    console.log('Préhension terminée');
                }
                break;
        }
    }
}

// Dans votre configuration XR :
const controllerManagers = new Map();

xrSession.addEventListener('inputsourceschange', () => {
    xrSession.inputSources.forEach(inputSource => {
        if (!controllerManagers.has(inputSource)) {
            controllerManagers.set(inputSource, new ControllerStateManager(inputSource));
        }
    });
    // Nettoyer les gestionnaires pour les contrôleurs déconnectés...
});

// Dans votre boucle d'animation :
function animate() {
    if (xrSession) {
        controllerManagers.forEach(manager => manager.update());
    }
    requestAnimationFrame(animate);
}

            

              
                Copy
              
            
          

5. S'adapter aux différents profils de contrôleurs

Comme mentionné, la propriété profiles est la clé de la compatibilité internationale. Différentes plateformes VR/AR ont établi des profils qui décrivent les capacités et les correspondances de boutons communes de leurs contrôleurs.

Profils courants :

• oculus-touch
• vive-wands
• microsoft-mixed-reality-controller
• google-daydream-controller
• apple-vision-pro-controller (à venir, pourrait utiliser principalement des gestes)

Stratégies pour l'adaptation de profil :

• Comportement par défaut : Implémentez un comportement par défaut sensé pour les actions communes.
• Correspondances spécifiques au profil : Utilisez des instructions `if` ou un objet de correspondance pour assigner des indices de bouton/axe spécifiques en fonction du profil détecté.
• Commandes personnalisables par l'utilisateur : Pour les applications avancées, permettez aux utilisateurs de reconfigurer les commandes dans les paramètres de votre application, ce qui est particulièrement utile pour les utilisateurs ayant des préférences linguistiques ou des besoins d'accessibilité différents.

Exemple : Logique d'interaction tenant compte du profil :

            function getPrimaryAction(inputSource) {
    const profiles = inputSource.profiles;
    if (profiles.includes('oculus-touch')) {
        return 0; // Bouton 'A' de l'Oculus Touch
    } else if (profiles.includes('vive-wands')) {
        return 0; // Gâchette du Vive Wand
    }
    // Ajouter plus de vérifications de profil
    return 0; // Revenir à un défaut commun
}

function handlePrimaryAction(inputSource) {
    const buttonIndex = getPrimaryAction(inputSource);
    if (inputSource.gamepad.buttons[buttonIndex].pressed) {
        console.log('Exécution de l\'action principale pour :', inputSource.profiles);
        // ... votre logique d'action ...
    }
}

            

              
                Copy
              
            
          

Internationalisation des éléments d'interface liés aux commandes : Si vous affichez des icônes représentant des boutons (par ex., une icône 'A'), assurez-vous qu'elles sont localisées ou génériques. Par exemple, dans de nombreuses cultures occidentales, 'A' est souvent utilisé pour la sélection, mais cette convention peut différer. L'utilisation de repères visuels universellement compris (comme un doigt appuyant sur un bouton) peut être plus efficace.

Techniques avancées et meilleures pratiques

1. Entrée prédictive et compensation de la latence

Même avec des appareils à faible latence, les délais de réseau ou de rendu peuvent introduire un décalage perceptible entre l'action physique d'un utilisateur et sa répercussion dans l'environnement XR. Les techniques pour atténuer cela incluent :

• Prédiction côté client : Lorsqu'un bouton est pressé, mettez immédiatement à jour l'état visuel de l'objet virtuel (par ex., commencer à tirer avec une arme) avant que le serveur (ou la logique de votre application) ne le confirme.
• Mise en mémoire tampon des entrées : Stockez un court historique des événements d'entrée pour lisser les saccades ou les mises à jour manquées.
• Interpolation temporelle : Pour le mouvement du contrôleur, interpolez entre les poses connues pour rendre une trajectoire plus fluide.

Impact mondial : Les utilisateurs dans les régions avec une latence internet plus élevée bénéficieront le plus de ces techniques. Tester votre application avec des conditions de réseau simulées représentatives de diverses régions du monde est crucial.

2. Retour haptique pour une immersion améliorée

Le retour haptique (vibrations) est un outil puissant pour transmettre des sensations tactiles et confirmer les interactions. L'API Gamepad de WebXR donne accès aux actuateurs haptiques.

            function triggerHapticFeedback(inputSource, intensity = 0.5, duration = 100) {
    if (inputSource.gamepad && inputSource.gamepad.hapticActuators) {
        const hapticActuator = inputSource.gamepad.hapticActuators[0]; // Souvent le premier actuateur
        if (hapticActuator) {
            hapticActuator.playEffect('vibration', { 
                duration: duration, // millisecondes
                strongMagnitude: intensity, // 0.0 à 1.0
                weakMagnitude: intensity // 0.0 à 1.0
            }).catch(error => {
                console.error('Retour haptique a échoué :', error);
            });
        }
    }
}

// Exemple : Déclencher un retour haptique lors de la pression du bouton principal
xrSession.addEventListener('selectstart', (event) => {
    triggerHapticFeedback(event.inputSource, 0.7, 50);
});

            

              
                Copy
              
            
          

Localisation des haptiques : Bien que les haptiques soient généralement universels, le type de retour peut être localisé. Par exemple, une pulsation douce peut signifier une sélection, tandis qu'un bourdonnement sec pourrait indiquer une erreur. Assurez-vous que ces associations sont culturellement neutres ou adaptables.

3. Concevoir pour des modèles d'interaction diversifiés

Au-delà des simples pressions de boutons, considérez le riche ensemble d'interactions que WebXR permet :

• Manipulation directe : Saisir et déplacer des objets virtuels en utilisant la position et l'orientation du contrôleur.
• Raycasting/Pointage : Utiliser un pointeur laser virtuel depuis le contrôleur pour sélectionner des objets à distance.
• Reconnaissance de gestes : Pour les entrées par suivi des mains, interpréter des poses de main spécifiques (par ex., pointer, pouce en l'air) comme des commandes.
• Entrée vocale : Intégrer la reconnaissance vocale pour les commandes, particulièrement utile lorsque les mains sont occupées.

Application mondiale : Par exemple, dans les cultures d'Asie de l'Est, pointer avec l'index peut être considéré comme moins poli qu'un geste impliquant un poing fermé ou une légère vague. Concevez des gestes qui sont universellement acceptables ou offrez des options.

4. Accessibilité et mécanismes de repli

Une application véritablement mondiale doit être accessible au plus grand nombre d'utilisateurs possible.

• Entrée alternative : Fournissez des méthodes d'entrée de repli, telles que le clavier/souris sur les navigateurs de bureau ou la sélection basée sur le regard pour les utilisateurs incapables d'utiliser des contrôleurs.
• Sensibilité réglable : Permettez aux utilisateurs d'ajuster la sensibilité des joysticks et des gâchettes.
• Réaffectation des boutons : Comme mentionné, donner aux utilisateurs le pouvoir de personnaliser leurs commandes est une fonctionnalité d'accessibilité puissante.

Tests à l'échelle mondiale : Impliquez des bêta-testeurs de divers endroits géographiques et avec des besoins matériels et d'accessibilité variés. Leurs retours sont inestimables pour affiner votre stratégie de gestion des entrées.

Conclusion

Le Gestionnaire de sources d'entrée WebXR est plus qu'un simple composant technique ; c'est la porte d'entrée vers la création d'expériences XR véritablement immersives et intuitives. En comprenant à fond ses capacités, du suivi des poses des contrôleurs et des états des boutons à l'exploitation des événements et à l'adaptation à divers profils matériels, les développeurs peuvent créer des applications qui résonnent avec un public mondial.

Maîtriser la gestion de l'état des contrôleurs est un processus continu. À mesure que la technologie XR progresse et que les paradigmes d'interaction des utilisateurs évoluent, rester informé et employer des pratiques de développement robustes et flexibles sera la clé du succès. Relevez le défi de construire pour un monde diversifié et libérez tout le potentiel de WebXR.

Exploration complémentaire

• MDN Web Docs - API WebXR Device : Pour les spécifications officielles et la compatibilité des navigateurs.
• XR Interaction Toolkit (Unity/Unreal) : Si vous prototypez dans des moteurs de jeu avant de porter sur WebXR, ces boîtes à outils offrent des concepts similaires pour la gestion des entrées.
• Forums communautaires et canaux Discord : Échangez avec d'autres développeurs XR pour partager des idées et résoudre des problèmes.