Bemästra WebXR-input: En djupdykning i spårning av knappstatus på handkontroller

Landskapet för immersiva teknologier, som omfattar Virtual Reality (VR) och Augmented Reality (AR), utvecklas snabbt. Kärnan i att skapa engagerande och interaktiva XR-upplevelser ligger i förmågan att korrekt fånga och svara på användarens input. För webbaserad XR tillhandahåller WebXR Device API ett kraftfullt ramverk, och att förstå hur man spårar tillståndet för handkontrollknappar är grundläggande för att bygga intuitiva och responsiva applikationer. Denna omfattande guide kommer att dyka djupt ner i komplexiteten i spårning av WebXR-handkontrollknappars tillstånd, vilket ger utvecklare över hela världen möjlighet att skapa verkligt fängslande immersiva upplevelser.

Grunden för interaktion: Att förstå XR-handkontroller

Innan vi dyker ner i de tekniska detaljerna är det avgörande att förstå mångfalden av XR-handkontroller som finns på marknaden. Även om vissa designprinciper är vanliga, finns det variationer mellan plattformar och tillverkare. Generellt sett erbjuder XR-handkontroller en rad olika inmatningsmekanismer:

• Knappar: Dessa är de vanligaste inmatningselementen och erbjuder binära tillstånd (nedtryckt eller inte nedtryckt). De kan vara knappar med en funktion, dubbelfunktionsknappar (t.ex. en trigger som kan pressas till en viss punkt) eller till och med sammansatta knappar.
• Styrspakar/Joysticks: Dessa ger analog input, vilket möjliggör nyanserad kontroll över rörelse och rotation.
• Pekplattor/Styrplattor: Dessa finns ofta på mer strömlinjeformade kontroller och erbjuder beröringskänsliga ytor som kan detektera beröringsposition, gester och tryckningar.
• Greppsensorer: Dessa sensorer känner av hur hårt en användare greppar kontrollen, vilket möjliggör naturliga interaktioner som att greppa föremål.
• Orientering- och positionsspårning: Även om det inte strikt är knapptillstånd, är den exakta rumsliga spårningen av själva kontrollerna en kritisk komponent av input.

I denna guide kommer vi främst att fokusera på spårning av knappstatus, eftersom det representerar en central interaktionsmetod för ett stort antal XR-applikationer.

WebXR-inputkällor: XRSession och XRInputSource

WebXR Device API organiserar input genom konceptet inputkällor. När en WebXR-session är aktiv ger webbläsaren information om de anslutna XR-enheterna och deras tillhörande inmatningsmekanismer.

Det primära objektet för att hantera en XR-session är XRSession. Inom en aktiv session kan du fråga efter tillgängliga inputkällor:

            const inputSources = xrSession.inputSources;

            

              
                Copy
              
            
          

Varje objekt i inputSources-arrayen är ett XRInputSource-objekt. Detta objekt är porten till att förstå kapabiliteterna och det nuvarande tillståndet för en specifik inmatningsenhet, som en VR-handkontroll eller ett handspårningssystem.

Nyckelegenskaper hos XRInputSource för knappspårning

När man hanterar fysiska handkontroller erbjuder XRInputSource-objektet flera viktiga egenskaper:

• handedness: Indikerar om inputkällan är för 'vänster' eller 'höger' hand. Detta är avgörande för att associera input med rätt visuell representation eller spelkaraktär.
• targetRayMode: Specificerar hur inputkällan interagerar med scenen. Vanliga värden inkluderar 'gaze' (input kommer från användarens blickpunkt) och 'pointing' (input kommer från en stråle som sträcker sig från kontrollen).
• gamepad: Detta är den viktigaste egenskapen för spårning av knappstatus. Den ger tillgång till ett standard Gamepad-objekt, som kapslar in rådata från kontrollens input.

Egenskapen gamepad är där magin sker. Gamepad-objektet, definierat av Gamepad API, erbjuder detaljerad information om kontrollens knappar och axlar.

Gamepad-objektet och knappindexering

Gamepad-objektet, som nås via xrInputSource.gamepad, har två viktiga arrayer för att spåra input:

• buttons: En array med GamepadButton-objekt. Varje GamepadButton representerar en knapp på kontrollen.
• axes: En array med siffror som representerar tillståndet för analoga inputs som styrspakar och triggers (när de behandlas som axlar).

Avgörande är att knapparnas tillstånd nås via deras index. Den exakta mappningen av knappar till index kan variera mellan olika kontrolltyper. WebXR API strävar dock efter att tillhandahålla en standardiserad mappning där det är möjligt, särskilt för vanliga knappar.

Att förstå egenskaperna hos GamepadButton

Varje GamepadButton-objekt inom buttons-arrayen har följande nyckelegenskaper:

• pressed: Ett booleskt värde som är true om knappen för närvarande är nedtryckt, och false annars. Detta är den primära egenskapen för att detektera ett knapptryck.
• touched: Ett booleskt värde som är true om knappen har en beröringssensor och för närvarande berörs av användaren. Detta är användbart för att detektera hover-tillstånd eller subtila beröringar före ett fullständigt tryck.
• value: Ett flyttal mellan 0.0 och 1.0, som representerar trycket eller intensiteten i knapptrycket. För standardknappar kommer detta att vara 0.0 eller 1.0. För analoga triggers eller adaptiva knappar kan det representera mellanliggande värden.

Spåra knappstatus: Kärnlogiken

Den grundläggande principen för att spåra knappstatus i WebXR är att kontinuerligt avfråga Gamepad-objektet under din applikations renderingsloop.

Här är en konceptuell översikt över hur man implementerar detta:

1. Hämta XRSession-objektet: Detta görs vanligtvis när XR-sessionen har initierats framgångsrikt.
2. Iterera genom inputSources: I varje animationsbildruta, loopa igenom alla anslutna XRInputSource-objekt.
3. Kontrollera tillgängligheten av gamepad: Inte alla inputkällor kommer att ha en gamepad-egenskap (t.ex. blickbaserad input).
4. Åtkom gamepad.buttons: Om en gamepad är tillgänglig, åtkom dess buttons-array.
5. Kontrollera enskilda knappars tillstånd: Iterera genom buttons-arrayen och inspektera pressed-egenskapen för varje GamepadButton.

Ett praktiskt exempel: Att detektera ett tryck på primärknappen

Låt oss illustrera med ett förenklat JavaScript-exempel. Detta kodstycke förutsätter att du har ett aktivt xrSession-objekt och befinner dig i din animationsloop.

            let primaryButtonIsPressed = false;

function renderLoop(time, frame) {
  // Hämta XRReferenceSpace för den aktuella bildrutan
  const xrRefSpace = frame.session.requestReferenceSpace('local');

  // Iterera genom inputkällor
  for (const inputSource of frame.session.inputSources) {
    if (inputSource.gamepad) {
      const gamepad = inputSource.gamepad;

      // Vanliga knappindex:
      // Index 0: Primärknapp (t.ex. A på Oculus Touch, X på Vive Wands)
      // Index 1: Sekundärknapp (t.ex. B på Oculus Touch, Y på Vive Wands)
      // Index 2: Primärtrigger (ofta analog)
      // Index 3: Sekundärtrigger (ofta analog)
      // Index 4: Styrspak/Pekplatta nedtryckning

      // Låt oss spåra primärknappen (index 0)
      const primaryButton = gamepad.buttons[0];

      if (primaryButton) {
        // Detektera ett nytt tryck (övergång från ej nedtryckt till nedtryckt)
        if (primaryButton.pressed && !primaryButtonIsPressed) {
          console.log(`Primärknappen nedtryckt på ${inputSource.handedness}-kontrollen!`);
          // Utlös din applikations åtgärd här
          // Till exempel, avfyra en projektil, välja ett objekt, etc.
        }
        // Detektera ett släpp (övergång från nedtryckt till ej nedtryckt)
        if (!primaryButton.pressed && primaryButtonIsPressed) {
          console.log(`Primärknappen släppt på ${inputSource.handedness}-kontrollen.`);
          // Hantera logik för knappsläpp vid behov
        }
        primaryButtonIsPressed = primaryButton.pressed;
      }

      // Du kan utöka detta för att spåra andra knappar, triggers eller axlar...
      // const triggerButton = gamepad.buttons[2]; // Exempel för en trigger
      // if (triggerButton) {
      //   console.log(`Triggervärde på ${inputSource.handedness}: ${triggerButton.value}`);
      // }
    }
  }

  // ... resten av din renderingslogik ...

  xrSession.requestAnimationFrame(renderLoop);
}

// Starta animationsloopen när sessionen är aktiv
// xrSession.requestAnimationFrame(renderLoop);

            

              
                Copy
              
            
          

Mappning av knappindex: Att navigera i labyrinten

Som nämnts är knappindex avgörande. Även om WebXR API strävar efter standardisering är det viktigt att vara medveten om potentiella variationer. Här är en allmän guide till vanliga knappindex, även om du alltid bör testa med din målhårdvara:

Vanliga mappningar för VR-handkontroller (ungefärliga):

Viktiga överväganden:

• Kontrollspecifika mappningsverktyg: För exakt mappning, konsultera dokumentationen för specifika VR-headset (t.ex. Oculus Quest, HTC Vive, Valve Index). Många utvecklare använder också community-drivna mappningsresurser eller bygger sina egna interna mappningslager.
• XRSession.inputSources.gamepad.mapping: Denna egenskap kan ibland ge ledtrådar om kontrollens mappning (t.ex. 'xr-standard').
• Testa noggrant: Det bästa tillvägagångssättet är att testa din applikation på målhårdvaran och observera vilka knappindex som motsvarar önskade åtgärder.

            let movementSpeed = 0;

function renderLoop(time, frame) {
  // ... (hämta xrSession, iterera inputSources) ...

  for (const inputSource of frame.session.inputSources) {
    if (inputSource.gamepad) {
      const gamepad = inputSource.gamepad;

      // Exempel: Använda primärtriggern (index 2) för framåtrörelse
      const triggerButton = gamepad.buttons[2];
      if (triggerButton) {
        // Egenskapen 'value' för triggerknappen ger analog input
        movementSpeed = triggerButton.value;
        console.log(`Rörelsehastighet: ${movementSpeed.toFixed(2)}`);
        // Applicera denna movementSpeed på din karaktärs eller objekts hastighet
      }

      // Exempel: Använda styrspakens X-axel (index 8) för att svänga
      const thumbstickX = gamepad.axes[8];
      if (thumbstickX !== undefined) {
        const turnAmount = thumbstickX;
        console.log(`Svängbelopp: ${turnAmount.toFixed(2)}`);
        // Applicera denna turnAmount på din karaktärs rotation
      }
    }
  }

  // ... resten av din renderingslogik ...

  xrSession.requestAnimationFrame(renderLoop);
}

            

              
                Copy