WebXR Hit Test Resultat: Ray Casting Resultatbehandling for Immersive Opplevelser

WebXR Device API åpner opp spennende muligheter for å skape immersive augmented reality (AR) og virtual reality (VR) opplevelser direkte i nettleseren. En av de grunnleggende aspektene ved å bygge interaktive WebXR applikasjoner er å forstå og effektivt utnytte hit test resultater. Dette blogginnlegget gir en omfattende veiledning til behandling av hit test resultater oppnådd gjennom ray casting, slik at du kan skape intuitive og engasjerende brukerinteraksjoner i dine WebXR scener.

Hva er Ray Casting og Hvorfor er det Viktig i WebXR?

Ray casting er en teknikk som brukes til å avgjøre om en stråle, som stammer fra et bestemt punkt og retning, krysser objekter i en 3D-scene. I WebXR brukes ray casting vanligvis til å simulere brukerens blikk eller banen til et virtuelt objekt. Når strålen krysser en virkelig overflate (i AR) eller et virtuelt objekt (i VR), genereres et hit test resultat.

Hit test resultater er avgjørende av flere grunner:

• Plassering av Virtuelle Objekter: I AR lar hit tester deg nøyaktig plassere virtuelle objekter på virkelige overflater, som bord, gulv eller vegger.
• Brukerinteraksjon: Ved å spore hvor brukeren ser eller peker, muliggjør hit tester interaksjoner med virtuelle objekter, som å velge, manipulere eller aktivere dem.
• Navigasjon: I VR-miljøer kan hit tester brukes til å implementere navigasjonssystemer, slik at brukerne kan teleportere eller bevege seg rundt i scenen ved å peke på bestemte steder.
• Kollisjonsdeteksjon: Hit tester kan brukes for grunnleggende kollisjonsdeteksjon, og avgjør når et virtuelt objekt kolliderer med et annet objekt eller den virkelige verden.

Forstå WebXR Hit Test API

WebXR Hit Test API tilbyr de nødvendige verktøyene for å utføre ray casting og oppnå hit test resultater. Her er en oversikt over nøkkelkonsepter og funksjoner:

XRRay

En XRRay representerer en stråle i 3D-rom. Den er definert av et utgangspunkt og en retningsvektor. Du kan opprette en XRRay ved hjelp av XRFrame.getPose() metoden, som returnerer posisjonen til en sporet inndatakilde (f.eks. brukerens hode, en håndkontroller). Fra posisjonen kan du utlede strålens opprinnelse og retning.

XRHitTestSource

En XRHitTestSource representerer en kilde til hit test resultater. Du oppretter en hit test kilde ved hjelp av XRSession.requestHitTestSource() eller XRSession.requestHitTestSourceForTransientInput() metoden. Den første metoden brukes vanligvis for kontinuerlig hit testing basert på en vedvarende kilde, som brukerens hodeposisjon, mens den andre er ment for forbigående inndatahendelser, som knappetrykk eller bevegelser.

XRHitTestResult

En XRHitTestResult representerer et enkelt krysningspunkt mellom strålen og en overflate. Den inneholder informasjon om krysset, som avstanden fra stråleopprinnelsen til treffpunktet og posisjonen til treffpunktet i scenens referanserom.

XRHitTestResult.getPose()

Denne metoden returnerer XRPose av treffpunktet. Posisjonen inneholder posisjonen og orienteringen av treffpunktet, som kan brukes til å plassere virtuelle objekter eller utføre andre transformasjoner.

Behandle Hit Test Resultater: En Steg-for-Steg Veiledning

La oss gå gjennom prosessen med å skaffe og behandle hit test resultater i en WebXR applikasjon. Dette eksemplet antar at du bruker et gjengivelsesbibliotek som three.js eller Babylon.js.

1. Forespørre en Hit Test Kilde

Først må du be om en hit test kilde fra XRSession. Dette gjøres vanligvis etter at økten har startet. Du må spesifisere koordinatsystemet du vil at hit test resultatene skal returneres i. For eksempel:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Failed to create hit test source: ", error);
  }
}

// Call this function after the XR session has started
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Forklaring:

• xrSession.requestHitTestSource(): Denne funksjonen ber om en hit test kilde fra XR økten.
• { space: xrSession.viewerSpace }: Dette spesifiserer koordinatsystemet som hit test resultatene vil bli returnert i. viewerSpace er relativt til betrakterens posisjon, mens local er relativt til XR opprinnelsen. Du kan også bruke localFloor for sporing i forhold til gulvet.
• Feilhåndtering: try...catch blokken sikrer at feil under opprettelsen av hit test kilden fanges opp og logges.

2. Utføre Hit Test i Animasjonssløyfen

Inne i animasjonssløyfen din (funksjonen som gjengir hver ramme), må du utføre hit testen ved hjelp av XRFrame.getHitTestResults() metoden. Denne metoden returnerer en array av XRHitTestResult objekter, som representerer alle kryssene som er funnet i scenen.

            function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(xrSession.referenceSpace);

  if (pose) {
    if (xrHitTestSource) {
      const hitTestResults = frame.getHitTestResults(xrHitTestSource);

      if (hitTestResults.length > 0) {
        processHitTestResults(hitTestResults);
      }
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Forklaring:

• frame.getViewerPose(xrSession.referenceSpace): Henter posisjonen til betrakteren (headsettet). Dette er nødvendig for å vite hvor betrakteren er og hvor de ser.
• frame.getHitTestResults(xrHitTestSource): Utfører hit testen ved hjelp av den tidligere opprettede hit test kilden.
• hitTestResults.length > 0: Sjekker om noen kryss ble funnet.

3. Behandle Hit Test Resultatene

processHitTestResults() funksjonen er der du vil håndtere resultatene av hit testen. Dette innebærer vanligvis å oppdatere posisjonen og orienteringen til et virtuelt objekt basert på treffpunktets posisjon.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Get the first hit result
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Update the position and orientation of a virtual object
    virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);

    // Show visual feedback (e.g., a circle) at the hit point
    hitMarker.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    hitMarker.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    hitMarker.visible = true;
  } else {
    hitMarker.visible = false;
  }
}

            

              
                Copy
              
            
          

Forklaring:

• hitTestResults[0]: Henter det første hit test resultatet. Hvis flere kryss er mulige, kan det hende du må iterere gjennom hele arrayen og velge det mest passende resultatet basert på applikasjonens logikk.
• hit.getPose(xrSession.referenceSpace): Henter posisjonen til treffpunktet i det spesifiserte referanserommet.
• virtualObject.position.set(...) og virtualObject.quaternion.set(...): Oppdaterer posisjonen og rotasjonen (kvaternion) til et virtuelt objekt (f.eks. en three.js Mesh) for å matche treffpunktets posisjon.
• Visuell Tilbakemelding: Eksemplet inkluderer også kode for å vise visuell tilbakemelding ved treffpunktet, for eksempel en sirkel eller en enkel markør, for å hjelpe brukeren å forstå hvor de samhandler med scenen.

Avanserte Hit Testing Teknikker

Utover det grunnleggende eksemplet ovenfor, er det flere avanserte teknikker du kan bruke for å forbedre hit testing implementasjonene dine:

Hit Testing med Forbigående Inndata

For interaksjoner utløst av forbigående inndata, for eksempel knappetrykk eller håndbevegelser, kan du bruke XRSession.requestHitTestSourceForTransientInput() metoden. Denne metoden oppretter en hit test kilde som er spesifikk for en enkelt inndatahendelse. Dette er nyttig for å unngå utilsiktede interaksjoner basert på kontinuerlig hit testing.

            async function handleSelect(event) {
  try {
    const frame = event.frame;
    const inputSource = event.inputSource;

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Or the appropriate input profile
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Error during transient hit test: ", error);
  }
}

// Attach this function to your input select event listener
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Filtrere Hit Test Resultater

I noen tilfeller kan det hende du vil filtrere hit test resultater basert på spesifikke kriterier, for eksempel avstanden fra stråleopprinnelsen eller typen overflate som ble krysset. Du kan oppnå dette ved å manuelt filtrere XRHitTestResult arrayen etter at du har hentet den.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Skip if no pose

    const distance = Math.sqrt(
      Math.pow(hitPose.transform.position.x - camera.position.x, 2) +
      Math.pow(hitPose.transform.position.y - camera.position.y, 2) +
      Math.pow(hitPose.transform.position.z - camera.position.z, 2)
    );

    return distance < 2; // Only consider hits within 2 meters
  });

  if (filteredResults.length > 0) {
    const hit = filteredResults[0];
    const hitPose = hit.getPose(xrSession.referenceSpace);

    if (hitPose) {
      // Update object position based on the filtered result
      virtualObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      virtualObject.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    }
  }
}

            

              
                Copy
              
            
          

Bruke Ulike Referanserom

Valget av referanserom (viewerSpace, local, localFloor, eller andre tilpassede rom) påvirker betydelig hvordan hit test resultater tolkes. Vurder følgende:

• viewerSpace: Gir resultater relativt til betrakterens posisjon. Dette er nyttig for å skape interaksjoner som er direkte knyttet til brukerens blikk.
• local: Gir resultater relativt til XR opprinnelsen (startpunktet for XR økten). Dette er egnet for å skape opplevelser der objekter forblir faste i det fysiske miljøet.
• localFloor: Ligner på local, men Y-aksen er justert med gulvet. Dette forenkler prosessen med å plassere objekter på gulvet.

Velg referanserommet som best stemmer overens med applikasjonens krav. Eksperimenter med forskjellige referanserom for å forstå deres oppførsel og begrensninger.

Optimaliseringsstrategier for Hit Testing

Hit testing kan være en beregningsmessig krevende prosess, spesielt i komplekse scener. Her er noen optimaliseringsstrategier du bør vurdere:

• Begrens Frekvensen av Hit Tester: Utfør hit tester bare når det er nødvendig, i stedet for hver ramme. For eksempel kan du utføre hit tester bare når brukeren aktivt samhandler med scenen.
• Bruk et Bounding Volume Hierarchy (BVH): Hvis du utfører hit tester mot et stort antall objekter, bør du vurdere å bruke en BVH for å akselerere krysningsberegningene. Biblioteker som three.js og Babylon.js tilbyr innebygde BVH implementasjoner.
• Spatial Partitioning: Del scenen inn i mindre regioner og utfør hit tester bare mot regionene som sannsynligvis inneholder kryss. Dette kan redusere antall objekter som må sjekkes betydelig.
• Reduser Polygon Antall: Forenkle geometrien til modellene dine for å redusere antall polygoner som må testes. Dette kan forbedre ytelsen, spesielt på mobile enheter.
• WebWorker: Last ut beregningen til en web worker for å sikre at hit test prosessen ikke låser hovedtråden.

Kryssplattformhensyn

WebXR har som mål å være kryssplattform, men det kan være subtile forskjeller i oppførsel på tvers av forskjellige enheter og nettlesere. Husk følgende:

• Enhetskapasiteter: Ikke alle enheter støtter alle WebXR funksjoner. Bruk funksjonsdeteksjon for å finne ut hvilke funksjoner som er tilgjengelige, og tilpass applikasjonen din deretter.
• Inndataprofiler: Ulike enheter kan bruke forskjellige inndataprofiler (f.eks. generic-touchscreen, håndsporing, gamepad). Sørg for at applikasjonen din støtter flere inndataprofiler og gir passende fallback mekanismer.
• Ytelse: Ytelsen kan variere betydelig på tvers av forskjellige enheter. Optimaliser applikasjonen din for de laveste enhetene du planlegger å støtte.
• Nettleserkompatibilitet: Sørg for at appen din er testet og fungerer på tvers av store nettlesere som Chrome, Firefox og Edge.

Globale Eksempler på WebXR Applikasjoner som Bruker Hit Testing

Her er noen eksempler på WebXR applikasjoner som effektivt bruker hit testing for å skape overbevisende og intuitive brukeropplevelser:

• IKEA Place (Sverige): Lar brukere virtuelt plassere IKEA møbler i hjemmene sine ved hjelp av AR. Hit testing brukes til å nøyaktig plassere møblene på gulvet og andre overflater.
• Sketchfab AR (Frankrike): Gjør det mulig for brukere å se 3D modeller fra Sketchfab i AR. Hit testing brukes til å plassere modellene i den virkelige verden.
• Augmented Images (Diverse): Mange AR applikasjoner bruker bildesporing kombinert med hit testing for å forankre virtuelt innhold til spesifikke bilder eller markører i den virkelige verden.
• WebXR Spill (Globalt): Mange spill utvikles ved hjelp av WebXR, og mange av dem er avhengige av hit testing for objektplassering, interaksjon og navigasjon.
• Virtuelle Turer (Globalt): Immersive turer til steder, museer eller eiendommer bruker ofte hit testing for brukernavigasjon og interaktive elementer i det virtuelle miljøet.

Konklusjon

Å mestre WebXR hit test resultater og ray casting behandling er avgjørende for å skape overbevisende og intuitive AR og VR opplevelser på nettet. Ved å forstå de underliggende konseptene og bruke teknikkene som er beskrevet i dette blogginnlegget, kan du bygge immersive applikasjoner som sømløst blander den virtuelle og virkelige verden, eller skape engasjerende virtuelle miljøer med naturlige og intuitive brukerinteraksjoner. Husk å optimalisere hit testing implementasjonen din for ytelse og vurdere kryssplattformkompatibilitet for å sikre en jevn opplevelse for alle brukere. Etter hvert som WebXR økosystemet fortsetter å utvikle seg, kan du forvente ytterligere fremskritt og forbedringer av hit testing APIet, noe som åpner for enda flere kreative muligheter for immersive webutvikling. Se alltid de nyeste WebXR spesifikasjonene og nettleserdokumentasjonen for den mest oppdaterte informasjonen.