WebXR-invoerbronnen: Controllers en handtracking beheersen voor meeslepende ervaringen

WebXR biedt krachtige tools om meeslepende virtual en augmented reality-ervaringen rechtstreeks in de browser te creëren. Een cruciaal aspect van elke meeslepende applicatie is de manier waarop gebruikers met de virtuele wereld interageren. WebXR biedt robuuste ondersteuning voor diverse invoerbronnen, voornamelijk controllers en handtracking. Het is essentieel om te begrijpen hoe deze invoermethoden benut kunnen worden om intuïtieve en boeiende ervaringen voor een wereldwijd publiek te ontwikkelen.

Inzicht in WebXR-invoerbronnen

In WebXR vertegenwoordigt een invoerbron een fysiek apparaat of een methode die wordt gebruikt om met de virtuele omgeving te interageren. Deze invoerbronnen kunnen variëren van eenvoudige gamepad-achtige controllers tot geavanceerde systemen voor handtracking. Elke invoerbron levert een stroom aan gegevens die ontwikkelaars kunnen gebruiken om objecten te besturen, door de scène te navigeren en acties binnen de XR-ervaring te activeren.

Soorten invoerbronnen

• Controllers: Fysieke apparaten met knoppen, joysticks, triggers en touchpads die gebruikers vasthouden en bedienen. Controllers zijn een veelvoorkomende en betrouwbare invoermethode voor VR-ervaringen.
• Handtracking: Gebruikt camera's en computervisie-algoritmes om de handen van de gebruiker in 3D-ruimte te detecteren en te volgen. Dit maakt natuurlijke en intuïtieve interacties met de virtuele omgeving mogelijk.
• Andere invoerbronnen: Hoewel minder gebruikelijk, kan WebXR ook andere invoerbronnen ondersteunen, zoals head tracking (met behulp van op blik gebaseerde interactie) en spraakherkenning.

Werken met controllers in WebXR

Controllers zijn een breed ondersteunde en relatief eenvoudige invoerbron voor WebXR-ontwikkeling. Ze bieden een balans tussen precisie en gebruiksgemak, waardoor ze geschikt zijn voor een breed scala aan toepassingen.

Detecteren en benaderen van controllers

De WebXR API biedt events om ontwikkelaars te informeren wanneer nieuwe invoerbronnen worden aangesloten of losgekoppeld. Het xr.session.inputsourceschange-event is de belangrijkste manier om veranderingen in beschikbare invoerbronnen te detecteren.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // Nieuwe invoerbron verbonden
  event.added.forEach(inputSource => {
    console.log('Nieuwe invoerbron:', inputSource);
    // Behandel de nieuwe invoerbron
  });

  // Invoerbron losgekoppeld
  event.removed.forEach(inputSource => {
    console.log('Invoerbron verwijderd:', inputSource);
    // Behandel de losgekoppelde invoerbron
  });
});

            

              
                Copy
              
            
          

Zodra een invoerbron is gedetecteerd, kunt u de eigenschappen ervan benaderen om de mogelijkheden te bepalen en hoe ermee te interageren. De inputSource.profiles-array bevat een lijst met gestandaardiseerde profielen die de lay-out en functionaliteit van de controller beschrijven. Veelvoorkomende profielen zijn 'generic-trigger', 'oculus-touch' en 'google-daydream'.

Controllergegevens ophalen

Om de huidige staat van een controller op te halen (bijv. knopindrukken, joystickposities, triggerwaarden), moet u de XRFrame.getControllerState()-methode gebruiken. Deze methode retourneert een XRInputSourceState-object dat de huidige invoerwaarden van de controller bevat.

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (inputSource.hand) continue; // Sla handtracking over

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Toegang tot knopstatussen
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Behandel knopdruk-event
            console.log('Knop ingedrukt:', button);
          }
        }

        // Toegang tot as-waarden (bijv. joystickposities)
        for (const axis of inputSourceState.axes) {
          console.log('As-waarde:', axis);
          // Gebruik as-waarde om beweging of andere acties te besturen
        }

         //Toegang tot knijpstatus (indien beschikbaar)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Squeeze ingedrukt");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualiseren van de aanwezigheid van de controller

Het is essentieel om visuele feedback aan de gebruiker te geven om de aanwezigheid en positie van hun controllers in de virtuele wereld aan te geven. U kunt dit bereiken door 3D-modellen van de controllers te maken en hun posities en oriëntaties bij te werken op basis van de pose van de controller.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Sla handtracking over
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Werk de positie en rotatie van het controllermodel bij
        controllerModel.position.set(gripPose.transform.position.x, gripPose.transform.position.y, gripPose.transform.position.z);
        controllerModel.quaternion.set(gripPose.transform.orientation.x, gripPose.transform.orientation.y, gripPose.transform.orientation.z, gripPose.transform.orientation.w);
    }
}

            

              
                Copy
              
            
          

Voorbeeld: Controller-gebaseerde interactie – Teleportatie

Een veelvoorkomend gebruik van controllers is teleportatie, waarmee gebruikers zich snel door de virtuele omgeving kunnen verplaatsen. Hier is een vereenvoudigd voorbeeld van hoe teleportatie te implementeren met een controller-trigger:

            // Controleer of de triggerknop is ingedrukt
if (inputSourceState.buttons[0].pressed) {
  // Voer teleportatielogica uit
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

De kracht van handtracking benutten in WebXR

Handtracking biedt een natuurlijkere en intuïtievere interactiemethode in vergelijking met controllers. Het stelt gebruikers in staat om virtuele objecten direct te manipuleren, gebaren te maken en met de omgeving te interageren met hun eigen handen.

Handtracking inschakelen

Handtracking vereist het aanvragen van de optionele feature 'hand-tracking' bij het aanmaken van de WebXR-sessie.

            navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: [],
  optionalFeatures: ['hand-tracking']
}).then(session => {
  xrSession = session;
  // ...
});

            

              
                Copy
              
            
          

Toegang tot handgegevens

Zodra handtracking is ingeschakeld, kunt u de handgegevens benaderen via de inputSource.hand-eigenschap. Deze eigenschap retourneert een XRHand-object, dat de hand van de gebruiker vertegenwoordigt. Het XRHand-object biedt toegang tot de posities en oriëntaties van de gewrichten in de hand, zoals de vingertoppen, knokkels en handpalm.

            xrSession.requestAnimationFrame(function onAnimationFrame(time, frame) {
  const pose = frame.getViewerPose(xrReferenceSpace);

  if (pose) {
    const inputSources = xrSession.inputSources;

    for (const inputSource of inputSources) {
      if (!inputSource.hand) continue; // Sla controllers over

      // Haal het XRHand-object op
      const hand = inputSource.hand;

      // Itereer door de gewrichten van de hand
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Haal de pose van het gewricht op
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Toegang tot de positie en oriëntatie van het gewricht
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Werk de positie en rotatie bij van een 3D-model dat het gewricht vertegenwoordigt
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualiseren van de aanwezigheid van de hand

Net als bij controllers is het cruciaal om visuele feedback aan de gebruiker te geven om hun handen in de virtuele wereld weer te geven. U kunt dit bereiken door 3D-modellen van de hand te maken en hun posities en oriëntaties bij te werken op basis van de handtrackinggegevens. Als alternatief kunt u eenvoudigere visualisaties gebruiken, zoals bollen of kubussen, om de posities van de gewrichten weer te geven.

Voorbeeld: Handgebaseerde interactie – Objecten vastpakken

Een van de meest voorkomende en intuïtieve toepassingen van handtracking is het vastpakken en manipuleren van virtuele objecten. Hier is een vereenvoudigd voorbeeld van hoe u het vastpakken van objecten kunt implementeren met handtracking:

            // Controleer of een vinger dicht bij een object is
if (distanceBetweenFingerAndObject < threshold) {
  // Pak het object vast
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Bevestig het object aan de hand
}

// Wanneer de vinger van het object weggaat
if (distanceBetweenFingerAndObject > threshold) {
  // Laat het object los
  grabbedObject.parent = null; // Maak het object los van de hand
  // Pas snelheid toe op het object op basis van de beweging van de hand
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

Best practices voor de ontwikkeling van WebXR-invoer

Om boeiende en gebruiksvriendelijke WebXR-ervaringen te creëren, is het belangrijk om deze best practices te volgen:

• Zorg voor duidelijke visuele feedback: Geef de gebruiker altijd visuele feedback om de aanwezigheid en de status van hun invoerapparaten (controllers of handen) aan te geven.
• Geef prioriteit aan intuïtieve interacties: Ontwerp interacties die natuurlijk en intuïtief aanvoelen voor de gebruiker. Overweeg handtracking te gebruiken voor taken die directe manipulatie vereisen en controllers voor taken die meer precisie of complexe bedieningselementen nodig hebben.
• Optimaliseer voor prestaties: Handtracking en controller-invoer kunnen prestatie-intensief zijn. Optimaliseer uw code om vertraging te minimaliseren en een soepele en responsieve ervaring te garanderen. Overweeg technieken zoals object pooling en LOD (Level of Detail) te gebruiken om de prestaties te verbeteren.
• Behandel invoer-events efficiënt: Vermijd het uitvoeren van kostbare operaties rechtstreeks binnen de event handlers voor invoer. Plaats in plaats daarvan de invoer-events in een wachtrij en verwerk ze in een aparte thread of met behulp van requestAnimationFrame om te voorkomen dat de hoofd rendering thread wordt geblokkeerd.
• Ondersteun meerdere invoerbronnen: Zorg voor fallback-mechanismen voor gebruikers die geen toegang hebben tot handtracking of specifieke controllertypes. Overweeg gebruikers toe te staan om te schakelen tussen verschillende invoermethoden op basis van hun voorkeuren en beschikbare hardware.
• Toegankelijkheid: Ontwerp uw XR-ervaring met toegankelijkheid in gedachten. Bied alternatieve invoermethoden voor gebruikers met een beperking, zoals spraakbesturing of op blik gebaseerde interactie. Zorg ervoor dat alle interacties duidelijk worden gecommuniceerd via visuele en auditieve signalen.

Globale overwegingen voor het ontwerp van invoer

Bij het ontwerpen van WebXR-ervaringen voor een wereldwijd publiek is het belangrijk om rekening te houden met culturele verschillen en toegankelijkheidseisen. Hier zijn enkele belangrijke factoren om in gedachten te houden:

• Culturele verschillen in gebarenherkenning: Gebaren kunnen in verschillende culturen verschillende betekenissen hebben. Vermijd het gebruik van gebaren die in bepaalde regio's als beledigend of verkeerd geïnterpreteerd kunnen worden. Overweeg alternatieve interactiemethoden aan te bieden of gebruikers toe te staan de gebaarkoppelingen aan te passen. Een duim omhoog-gebaar is bijvoorbeeld positief in veel westerse culturen, maar kan beledigend zijn in sommige delen van het Midden-Oosten en Zuid-Amerika.
• Variaties in handgrootte en -vorm: Handtracking-algoritmes moeten mogelijk worden aangepast om rekening te houden met variaties in handgrootte en -vorm bij verschillende bevolkingsgroepen. Bied kalibratie-opties aan zodat gebruikers de handtracking kunnen afstemmen op hun specifieke handkenmerken.
• Taal en lokalisatie: Zorg ervoor dat alle tekst en audiosignalen correct worden gelokaliseerd voor verschillende talen. Overweeg het gebruik van op iconen gebaseerde interfaces om de noodzaak van tekstlokalisatie te minimaliseren.
• Toegankelijkheid voor gebruikers met een beperking: Ontwerp uw XR-ervaring vanaf het begin met toegankelijkheid in gedachten. Bied alternatieve invoermethoden voor gebruikers met een beperking, zoals spraakbesturing, op blik gebaseerde interactie of schakelaarbediening. Zorg ervoor dat alle interacties duidelijk worden gecommuniceerd via visuele en auditieve signalen. Overweeg opties te bieden om de grootte en kleur van tekst en iconen aan te passen om de zichtbaarheid te verbeteren.
• Beschikbaarheid en kosten van hardware: Houd rekening met de beschikbaarheid en kosten van XR-hardware in verschillende regio's. Ontwerp uw ervaring zodat deze compatibel is met een reeks apparaten, waaronder goedkopere mobiele VR-headsets en smartphones met augmented reality-functionaliteit.

Conclusie

Het beheersen van WebXR-invoerbronnen, inclusief controllers en handtracking, is essentieel voor het creëren van boeiende en intuïtieve meeslepende ervaringen. Door de mogelijkheden van elke invoermethode te begrijpen en de best practices voor interactieontwerp te volgen, kunt u XR-toepassingen ontwikkelen die aantrekkelijk, toegankelijk en plezierig zijn voor een wereldwijd publiek. Naarmate de WebXR-technologie zich verder ontwikkelt, kunnen we nog geavanceerdere invoermethoden verwachten, die de grenzen tussen de fysieke en virtuele wereld verder doen vervagen.

Door aandacht te besteden aan de details van gebruikersinteractie en deze best practices te integreren, kunnen ontwikkelaars WebXR-ervaringen creëren die echt meeslepend, intuïtief en toegankelijk zijn voor gebruikers wereldwijd. De toekomst van XR is veelbelovend, en met een focus op doordacht en gebruikersgericht ontwerp kunnen we het volledige potentieel van deze transformerende technologie ontsluiten.