WebXR Hit Test-resultat: Bearbetning av strålgjutningsresultat för uppslukande upplevelser

WebXR Device API öppnar upp spännande möjligheter för att skapa uppslukande upplevelser av förstärkt verklighet (AR) och virtuell verklighet (VR) direkt i webbläsaren. En av de grundläggande aspekterna med att bygga interaktiva WebXR-applikationer är att förstå och effektivt använda träfftestresultat. Det här blogginlägget ger en omfattande guide till att bearbeta träfftestresultat som erhållits genom strålgjutning, vilket gör det möjligt för dig att skapa intuitiva och engagerande användarinteraktioner i dina WebXR-scener.

Vad är strålgjutning och varför är det viktigt i WebXR?

Strålgjutning är en teknik som används för att avgöra om en stråle, som utgår från en specifik punkt och riktning, korsar objekt i en 3D-scen. I WebXR används strålgjutning typiskt för att simulera användarens blick eller banan för ett virtuellt objekt. När strålen korsar en verklig yta (i AR) eller ett virtuellt objekt (i VR), genereras ett träfftestresultat.

Träfftestresultat är avgörande av flera skäl:

• Placering av virtuella objekt: I AR tillåter träfftester dig att noggrant placera virtuella objekt på verkliga ytor, såsom bord, golv eller väggar.
• Användarinteraktion: Genom att spåra var användaren tittar eller pekar, möjliggör träfftester interaktioner med virtuella objekt, såsom att välja, manipulera eller aktivera dem.
• Navigering: I VR-miljöer kan träfftester användas för att implementera navigeringssystem, vilket tillåter användare att teleportera eller röra sig runt i scenen genom att peka på specifika platser.
• Kollisionsdetektering: Träfftester kan användas för grundläggande kollisionsdetektering, för att avgöra när ett virtuellt objekt kolliderar med ett annat objekt eller den verkliga världen.

Förstå WebXR Hit Test API

WebXR Hit Test API tillhandahåller de nödvändiga verktygen för att utföra strålgjutning och erhålla träfftestresultat. Här är en uppdelning av nyckelkoncepten och funktionerna:

XRRay

En XRRay representerar en stråle i 3D-rymden. Den definieras av en ursprungspunkt och en riktningsvektor. Du kan skapa en XRRay med hjälp av metoden XRFrame.getPose(), som returnerar posen för en spårad inmatningskälla (t.ex. användarens huvud, en handkontroll). Från posen kan du härleda strålens ursprung och riktning.

XRHitTestSource

En XRHitTestSource representerar en källa för träfftestresultat. Du skapar en träfftestkälla med metoderna XRSession.requestHitTestSource() eller XRSession.requestHitTestSourceForTransientInput(). Den första metoden används generellt för kontinuerlig träfftestning baserat på en ihållande källa, såsom användarens huvudposition, medan den andra är avsedd för transienta inmatningshändelser, som knapptryckningar eller gester.

XRHitTestResult

En XRHitTestResult representerar en enda skärningspunkt mellan strålen och en yta. Den innehåller information om skärningspunkten, såsom avståndet från strålens ursprung till träffpunkten och posen för träffpunkten i scenens referensrum.

XRHitTestResult.getPose()

Denna metod returnerar XRPose för träffpunkten. Posen innehåller positionen och orienteringen för träffpunkten, som kan användas för att placera virtuella objekt eller utföra andra transformationer.

Bearbetning av träfftestresultat: En steg-för-steg-guide

Låt oss gå igenom processen för att erhålla och bearbeta träfftestresultat i en WebXR-applikation. Detta exempel antar att du använder ett renderingsbibliotek som three.js eller Babylon.js.

1. Begära en träfftestkälla

Först måste du begära en träfftestkälla från XRSession. Detta görs typiskt efter att sessionen har startats. Du måste specificera det koordinatsystem i vilket du vill att träfftestresultaten ska returneras. Till exempel:

            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
              
            
          

Förklaring:

• xrSession.requestHitTestSource(): Denna funktion begär en träfftestkälla från XR-sessionen.
• { space: xrSession.viewerSpace }: Detta specificerar koordinatsystemet i vilket träfftestresultaten kommer att returneras. viewerSpace är relativt betraktarens position, medan local är relativt XR-ursprunget. Du kan också använda localFloor för spårning relativt golvet.
• Felhantering: try...catch-blocket säkerställer att fel under skapandet av träfftestkällan fångas och loggas.

2. Utföra träfftestet i animationsloopen

Inne i din animationsloop (funktionen som renderar varje bildruta) måste du utföra träfftestet med metoden XRFrame.getHitTestResults(). Denna metod returnerar en array med XRHitTestResult-objekt, som representerar alla skärningar som hittats 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
              
            
          

Förklaring:

• frame.getViewerPose(xrSession.referenceSpace): Hämtar posen för betraktaren (headsetet). Detta är nödvändigt för att veta var betraktaren är och vart den tittar.
• frame.getHitTestResults(xrHitTestSource): Utför träfftestet med den tidigare skapade träfftestkällan.
• hitTestResults.length > 0: Kontrollerar om några skärningar hittades.

3. Bearbetning av träfftestresultaten

Funktionen processHitTestResults() är där du hanterar resultaten av träfftestet. Detta innebär typiskt att uppdatera positionen och orienteringen för ett virtuellt objekt baserat på träffpunktens pose.

            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
              
            
          

Förklaring:

• hitTestResults[0]: Hämtar det första träfftestresultatet. Om flera skärningar är möjliga, kan du behöva iterera genom hela arrayen och välja det lämpligaste resultatet baserat på din applikationslogik.
• hit.getPose(xrSession.referenceSpace): Hämtar posen för träffpunkten i det specificerade referensrummet.
• virtualObject.position.set(...) och virtualObject.quaternion.set(...): Uppdaterar positionen och rotationen (kvaternionen) för ett virtuellt objekt (t.ex. en three.js Mesh) för att matcha träffpunktens pose.
• Visuell feedback: Exemplet inkluderar också kod för att visa visuell feedback vid träffpunkten, såsom en cirkel eller en enkel markör, för att hjälpa användaren att förstå var de interagerar med scenen.

Avancerade träfftesttekniker

Utöver det grundläggande exemplet ovan finns det flera avancerade tekniker du kan använda för att förbättra dina träfftestimplementeringar:

Träfftestning med transient inmatning

För interaktioner som utlöses av transient inmatning, såsom knapptryckningar eller handgester, kan du använda metoden XRSession.requestHitTestSourceForTransientInput(). Denna metod skapar en träfftestkälla som är specifik för en enskild inmatningshändelse. Detta är användbart för att undvika oavsiktliga interaktioner baserade på kontinuerlig träfftestning.

            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
              
            
          

Filtrering av träfftestresultat

I vissa fall kanske du vill filtrera träfftestresultat baserat på specifika kriterier, såsom avståndet från strålens ursprung eller typen av yta som korsades. Du kan uppnå detta genom att manuellt filtrera arrayen XRHitTestResult efter att ha erhållit 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
              
            
          

Använda olika referensrum

Valet av referensrum (viewerSpace, local, localFloor eller andra anpassade rum) påverkar avsevärt hur träfftestresultat tolkas. Tänk på följande:

• viewerSpace: Ger resultat relativt betraktarens position. Detta är användbart för att skapa interaktioner som är direkt kopplade till användarens blick.
• local: Ger resultat relativt XR-ursprunget (startpunkten för XR-sessionen). Detta är lämpligt för att skapa upplevelser där objekt förblir fixerade i den fysiska miljön.
• localFloor: Liknar local, men Y-axeln är i linje med golvet. Detta förenklar processen att placera objekt på golvet.

Välj det referensrum som bäst överensstämmer med din applikations krav. Experimentera med olika referensrum för att förstå deras beteende och begränsningar.

Optimeringsstrategier för träfftestning

Träfftestning kan vara en beräkningsintensiv process, särskilt i komplexa scener. Här är några optimeringsstrategier att överväga:

• Begränsa frekvensen för träfftester: Utför träfftester endast vid behov, snarare än varje bildruta. Till exempel kan du utföra träfftester endast när användaren aktivt interagerar med scenen.
• Använd en Bounding Volume Hierarchy (BVH): Om du utför träfftester mot ett stort antal objekt, överväg att använda en BVH för att accelerera skärningsberäkningarna. Bibliotek som three.js och Babylon.js tillhandahåller inbyggda BVH-implementeringar.
• Spatial partitionering: Dela upp scenen i mindre regioner och utför träfftester endast mot de regioner som sannolikt innehåller skärningar. Detta kan avsevärt minska antalet objekt som behöver kontrolleras.
• Minska polygonantalet: Förenkla geometrin i dina modeller för att minska antalet polygoner som behöver testas. Detta kan förbättra prestanda, särskilt på mobila enheter.
• WebWorker: avlasta beräkningen till en web worker för att säkerställa att träfftestprocessen inte låser huvudtråden.

Tvärplattformskonsiderationer

WebXR strävar efter att vara plattformsoberoende, men det kan finnas subtila skillnader i beteende mellan olika enheter och webbläsare. Tänk på följande:

• Enhetsfunktioner: Alla enheter stöder inte alla WebXR-funktioner. Använd funktionsdetektering för att avgöra vilka funktioner som är tillgängliga och anpassa din applikation därefter.
• Inmatningsprofiler: Olika enheter kan använda olika inmatningsprofiler (t.ex. generic-touchscreen, hand-tracking, gamepad). Se till att din applikation stöder flera inmatningsprofiler och tillhandahåller lämpliga reservmekanismer.
• Prestanda: Prestanda kan variera avsevärt mellan olika enheter. Optimera din applikation för de lägst presterande enheter du planerar att stödja.
• Webbläsarkompatibilitet: Se till att din app testas och fungerar i stora webbläsare som Chrome, Firefox och Edge.

Globala exempel på WebXR-applikationer som använder träfftestning

Här är några exempel på WebXR-applikationer som effektivt använder träfftestning för att skapa övertygande och intuitiva användarupplevelser:

• IKEA Place (Sverige): Tillåter användare att virtuellt placera IKEA-möbler i sina hem med hjälp av AR. Träfftestning används för att noggrant positionera möblerna på golvet och andra ytor.
• Sketchfab AR (Frankrike): Gör det möjligt för användare att visa 3D-modeller från Sketchfab i AR. Träfftestning används för att placera modellerna i den verkliga världen.
• Förstärkta bilder (Olika): Många AR-applikationer använder bildspårning i kombination med träfftestning för att förankra virtuellt innehåll till specifika bilder eller markörer i den verkliga världen.
• WebXR-spel (Globalt): Ett flertal spel utvecklas med WebXR, varav många förlitar sig på träfftestning för objektplacering, interaktion och navigering.
• Virtuella turer (Globalt): Uppslukande turer av platser, museer eller fastigheter använder ofta träfftestning för användarnavigering och interaktiva element i den virtuella miljön.

Slutsats

Att behärska WebXR-träfftestresultat och strålgjutningsbearbetning är avgörande för att skapa övertygande och intuitiva AR- och VR-upplevelser på webben. Genom att förstå de underliggande koncepten och tillämpa de tekniker som beskrivs i detta blogginlägg kan du bygga uppslukande applikationer som sömlöst blandar de virtuella och verkliga världarna, eller skapa engagerande virtuella miljöer med naturliga och intuitiva användarinteraktioner. Kom ihåg att optimera din träfftestimplementering för prestanda och överväga plattformskompatibilitet för att säkerställa en smidig upplevelse för alla användare. Eftersom WebXR-ekosystemet fortsätter att utvecklas, förvänta dig ytterligare framsteg och förfiningar av träfftest-API:et, vilket öppnar upp ännu fler kreativa möjligheter för uppslukande webbutveckling. Konsultera alltid de senaste WebXR-specifikationerna och webbläsardokumentationen för den mest uppdaterade informationen.