Inmatningskällor för WebXR: Bemästra handkontroller och handspårning för uppslukande upplevelser

WebXR erbjuder kraftfulla verktyg för att skapa uppslukande upplevelser inom virtuell och förstärkt verklighet direkt i webbläsaren. En kritisk aspekt av alla uppslukande applikationer är hur användare interagerar med den virtuella världen. WebXR ger robust stöd för olika inmatningskällor, främst handkontroller och handspårning. Att förstå hur man utnyttjar dessa inmatningsmetoder är avgörande för att skapa intuitiva och engagerande upplevelser för en global publik.

Förståelse för WebXR:s inmatningskällor

Inom WebXR representerar en inmatningskälla en fysisk enhet eller metod som används för att interagera med den virtuella miljön. Dessa inmatningskällor kan sträcka sig från enkla gamepad-liknande kontroller till sofistikerade system för handspårning. Varje inmatningskälla tillhandahåller en ström av data som utvecklare kan använda för att styra objekt, navigera i scenen och utlösa handlingar inom XR-upplevelsen.

Typer av inmatningskällor

• Handkontroller: Fysiska enheter med knappar, joysticks, avtryckare och styrplattor som användare håller i och manipulerar. Handkontroller är en vanlig och tillförlitlig inmatningsmetod för VR-upplevelser.
• Handspårning: Använder kameror och datorseendealgoritmer för att upptäcka och spåra användarens händer i 3D-rymden. Detta möjliggör naturliga och intuitiva interaktioner med den virtuella miljön.
• Andra inmatningskällor: Även om det är mindre vanligt kan WebXR också stödja andra inmatningskällor som huvudspårning (med blickbaserad interaktion) och röstigenkänning.

Arbeta med handkontroller i WebXR

Handkontroller är en brett stödd och relativt okomplicerad inmatningskälla för WebXR-utveckling. De erbjuder en balans mellan precision och användarvänlighet, vilket gör dem lämpliga för ett brett spektrum av applikationer.

Upptäcka och komma åt handkontroller

WebXR API:et tillhandahåller händelser för att meddela utvecklare när nya inmatningskällor ansluts eller kopplas bort. Händelsen xr.session.inputsourceschange är det primära sättet att upptäcka förändringar i tillgängliga inmatningskällor.

            xrSession.addEventListener('inputsourceschange', (event) => {
  // Ny inmatningskälla ansluten
  event.added.forEach(inputSource => {
    console.log('Ny inmatningskälla:', inputSource);
    // Hantera den nya inmatningskällan
  });

  // Inmatningskälla frånkopplad
  event.removed.forEach(inputSource => {
    console.log('Inmatningskälla borttagen:', inputSource);
    // Hantera den frånkopplade inmatningskällan
  });
});

            

              
                Copy
              
            
          

När en inmatningskälla har upptäckts kan du komma åt dess egenskaper för att bestämma dess kapacitet och hur man interagerar med den. Arrayen inputSource.profiles innehåller en lista över standardiserade profiler som beskriver handkontrollens layout och funktionalitet. Vanliga profiler inkluderar 'generic-trigger', 'oculus-touch' och 'google-daydream'.

Hämta data från handkontroller

För att få det aktuella tillståndet för en handkontroll (t.ex. knapptryckningar, joystick-positioner, avtryckarvärden), måste du använda metoden XRFrame.getControllerState(). Denna metod returnerar ett XRInputSourceState-objekt som innehåller handkontrollens aktuella inmatningsvärden.

            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; // Hoppa över handspårning

      const inputSourceState = frame.getControllerState(inputSource);

      if (inputSourceState) {
        // Kom åt knappstatus
        for (const button of inputSourceState.buttons) {
          if (button.pressed) {
            // Hantera händelse för knapptryckning
            console.log('Knapp nedtryckt:', button);
          }
        }

        // Kom åt axelvärden (t.ex. joystick-positioner)
        for (const axis of inputSourceState.axes) {
          console.log('Axelvärde:', axis);
          // Använd axelvärde för att styra rörelse eller andra handlingar
        }

         //Åtkomst till greppstatus (om tillgängligt)
         if (inputSourceState.squeeze != null) {
          if(inputSourceState.squeeze.pressed) {
             console.log("Grepp nedtryckt");
          }
         }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualisera handkontrollens närvaro

Det är viktigt att ge visuell feedback till användaren för att indikera närvaron och positionen av deras handkontroller i den virtuella världen. Du kan uppnå detta genom att skapa 3D-modeller av handkontrollerna och uppdatera deras positioner och orienteringar baserat på handkontrollens pose.

            const inputSources = xrSession.inputSources;
for (const inputSource of inputSources) {
    if (inputSource.hand) continue; // Hoppa över handspårning
    const gripPose = frame.getPose(inputSource.gripSpace, xrReferenceSpace);
    if (gripPose) {
        // Uppdatera handkontrollmodellens position och rotation
        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
              
            
          

Exempel: Kontrollbaserad interaktion – Teleportering

Ett vanligt användningsfall för handkontroller är teleportering, vilket gör att användare snabbt kan förflytta sig inom den virtuella miljön. Här är ett förenklat exempel på hur man implementerar teleportering med en handkontrolls avtryckare:

            // Kontrollera om avtryckarknappen är nedtryckt
if (inputSourceState.buttons[0].pressed) {
  // Utför teleporteringslogik
  const targetPosition = calculateTeleportLocation();
  xrReferenceSpace = xrSession.requestReferenceSpace('local-floor', { position: targetPosition });
}

            

              
                Copy
              
            
          

Utnyttja kraften i handspårning i WebXR

Handspårning erbjuder en mer naturlig och intuitiv interaktionsmetod jämfört med handkontroller. Det låter användare direkt manipulera virtuella objekt, göra gester och interagera med miljön med sina egna händer.

Aktivera handspårning

Handspårning kräver att man begär den valfria funktionen 'hand-tracking' när man skapar WebXR-sessionen.

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

            

              
                Copy
              
            
          

Komma åt handdata

När handspårning är aktiverad kan du komma åt handdata via egenskapen inputSource.hand. Denna egenskap returnerar ett XRHand-objekt, som representerar användarens hand. XRHand-objektet ger tillgång till positioner och orienteringar för lederna i handen, såsom fingertoppar, knogar och handflata.

            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; // Hoppa över handkontroller

      // Hämta XRHand-objektet
      const hand = inputSource.hand;

      // Iterera genom handens leder
      for (let i = 0; i < hand.length; i++) {
        const jointSpace = hand[i];

        // Hämta ledens pose
        const jointPose = frame.getPose(jointSpace, xrReferenceSpace);

        if (jointPose) {
          // Kom åt ledens position och orientering
          const jointPosition = jointPose.transform.position;
          const jointOrientation = jointPose.transform.orientation;

          // Uppdatera position och rotation för en 3D-modell som representerar leden
          jointModels[i].position.set(jointPosition.x, jointPosition.y, jointPosition.z);
          jointModels[i].quaternion.set(jointOrientation.x, jointOrientation.y, jointOrientation.z, jointOrientation.w);
        }
      }
    }
  }
});

            

              
                Copy
              
            
          

Visualisera handens närvaro

Liksom med handkontroller är det avgörande att ge visuell feedback till användaren för att representera deras händer i den virtuella världen. Du kan uppnå detta genom att skapa 3D-modeller av handen och uppdatera deras positioner och orienteringar baserat på handspårningsdata. Alternativt kan du använda enklare visualiseringar som sfärer eller kuber för att representera ledpositionerna.

Exempel: Handbaserad interaktion – Gripa objekt

Ett av de vanligaste och mest intuitiva användningsfallen för handspårning är att gripa och manipulera virtuella objekt. Här är ett förenklat exempel på hur man implementerar objektgripning med handspårning:

            // Kontrollera om ett finger är nära ett objekt
if (distanceBetweenFingerAndObject < threshold) {
  // Grip objektet
  grabbedObject = object;
  grabbedObject.parent = handJointModel; // Fäst objektet vid handen
}

// När fingret rör sig bort från objektet
if (distanceBetweenFingerAndObject > threshold) {
  // Släpp objektet
  grabbedObject.parent = null; // Lossa objektet från handen
  // Applicera hastighet på objektet baserat på handens rörelse
  grabbedObject.velocity.set(handVelocity.x, handVelocity.y, handVelocity.z);
}

            

              
                Copy
              
            
          

Bästa praxis för utveckling av inmatning i WebXR

För att skapa fängslande och användarvänliga WebXR-upplevelser är det viktigt att följa dessa bästa praxis:

• Ge tydlig visuell feedback: Ge alltid visuell feedback till användaren för att indikera närvaro och status för deras inmatningsenheter (handkontroller eller händer).
• Prioritera intuitiva interaktioner: Designa interaktioner som känns naturliga och intuitiva för användaren. Överväg att använda handspårning för uppgifter som involverar direkt manipulation och handkontroller för uppgifter som kräver mer precision eller komplexa kontroller.
• Optimera för prestanda: Handspårning och inmatning från handkontroller kan vara prestandakrävande. Optimera din kod för att minimera lagg och säkerställa en smidig och responsiv upplevelse. Överväg att använda tekniker som "object pooling" och LOD (Level of Detail) för att förbättra prestandan.
• Hantera inmatningshändelser effektivt: Undvik att utföra kostsamma operationer direkt i hanterare för inmatningshändelser. Köa istället upp inmatningshändelserna och bearbeta dem i en separat tråd eller med requestAnimationFrame för att undvika att blockera huvudrenderingstråden.
• Stöd för flera inmatningskällor: Tillhandahåll reservmekanismer för användare som inte har tillgång till handspårning eller specifika typer av handkontroller. Överväg att låta användare växla mellan olika inmatningsmetoder baserat på deras preferenser och tillgänglig hårdvara.
• Tillgänglighet: Designa din XR-upplevelse med tillgänglighet i åtanke. Tillhandahåll alternativa inmatningsmetoder för användare med funktionsnedsättningar, såsom röststyrning eller blickbaserad interaktion. Se till att alla interaktioner kommuniceras tydligt genom visuella och auditiva ledtrådar.

Globala överväganden för inmatningsdesign

När man designar WebXR-upplevelser för en global publik är det viktigt att ta hänsyn till kulturella skillnader och tillgänglighetskrav. Här är några nyckelfaktorer att ha i åtanke:

• Kulturella skillnader i gestigenkänning: Gester kan ha olika betydelser i olika kulturer. Undvik att använda gester som kan vara stötande eller misstolkas i vissa regioner. Överväg att erbjuda alternativa interaktionsmetoder eller låta användare anpassa gestmappningarna. Till exempel är en tumme-upp-gest positiv i många västerländska kulturer, men kan vara stötande i delar av Mellanöstern och Sydamerika.
• Variationer i handstorlek och form: Handspårningsalgoritmer kan behöva anpassas för att hantera variationer i handstorlek och form hos olika populationer. Tillhandahåll kalibreringsalternativ för att låta användare finjustera handspårningen efter sina specifika handegenskaper.
• Språk och lokalisering: Se till att all text och alla ljudledtrådar är korrekt lokaliserade för olika språk. Överväg att använda ikonbaserade gränssnitt för att minimera behovet av textlokalisering.
• Tillgänglighet för användare med funktionsnedsättningar: Designa din XR-upplevelse med tillgänglighet i åtanke från första början. Tillhandahåll alternativa inmatningsmetoder för användare med funktionsnedsättningar, såsom röststyrning, blickbaserad interaktion eller switch-åtkomst. Se till att alla interaktioner kommuniceras tydligt genom visuella och auditiva ledtrådar. Överväg att erbjuda alternativ för att anpassa storlek och färg på text och ikoner för att förbättra synligheten.
• Hårdvarutillgänglighet och kostnad: Var medveten om tillgängligheten och kostnaden för XR-hårdvara i olika regioner. Designa din upplevelse så att den är kompatibel med ett brett utbud av enheter, inklusive billigare mobila VR-headset och smartphones med stöd för förstärkt verklighet.

Slutsats

Att bemästra WebXR:s inmatningskällor, inklusive handkontroller och handspårning, är avgörande för att skapa fängslande och intuitiva uppslukande upplevelser. Genom att förstå kapaciteten hos varje inmatningsmetod och följa bästa praxis för interaktionsdesign kan du skapa XR-applikationer som är engagerande, tillgängliga och njutbara för en global publik. I takt med att WebXR-tekniken fortsätter att utvecklas kan vi förvänta oss att se ännu mer sofistikerade inmatningsmetoder dyka upp, vilket ytterligare suddar ut gränserna mellan den fysiska och den virtuella världen.

Genom att uppmärksamma detaljerna i användarinteraktion och införliva dessa bästa praxis kan utvecklare skapa WebXR-upplevelser som är verkligt uppslukande, intuitiva och tillgängliga för användare över hela världen. Framtiden för XR är ljus, och med fokus på genomtänkt och användarcentrerad design kan vi frigöra den fulla potentialen hos denna omvälvande teknik.