WebXR Hit Test Manager: Implementera ett Ray Casting-system för uppslukande upplevelser

Framväxten av Augmented Reality (AR) och Virtual Reality (VR) -teknologier har öppnat spännande nya möjligheter för att skapa uppslukande och interaktiva digitala upplevelser. WebXR, ett JavaScript API för att komma åt VR- och AR-funktioner i webbläsare, gör det möjligt för utvecklare över hela världen att bygga dessa upplevelser på en mängd olika enheter. En nyckelkomponent för att skapa övertygande WebXR-upplevelser är möjligheten att interagera med den virtuella miljön. Det är här WebXR Hit Test Manager och ray casting kommer in i bilden.

Vad är Ray Casting och varför är det viktigt?

Ray casting, i samband med WebXR, är en teknik som används för att avgöra om en virtuell stråle (en rak linje) korsar en verklig yta som detekteras av AR-systemet eller ett virtuellt objekt i VR-miljön. Tänk på det som att lysa med en laserpekare i din omgivning och se var den träffar. WebXR Hit Test Manager tillhandahåller verktygen för att utföra dessa ray casts och hämta resultaten. Denna information är avgörande för en mängd olika interaktioner, inklusive:

• Objektplacering: Tillåter användare att placera virtuella objekt på verkliga ytor, som att placera en virtuell stol i deras vardagsrum (AR). Tänk dig en användare i Tokyo som inreder sin lägenhet virtuellt innan de bestämmer sig för möbelköp.
• Målval och markering: Möjliggör för användare att välja virtuella objekt eller interagera med UI-element med hjälp av en virtuell pekare eller hand (AR/VR). Föreställ dig en kirurg i London som använder AR för att lägga anatomisk information ovanpå en patient och väljer specifika områden för granskning.
• Navigering: Flytta användarens avatar genom den virtuella världen genom att peka på en plats och instruera dem att flytta dit (VR). Ett museum i Paris kan använda VR för att tillåta besökare att navigera genom historiska utställningar.
• Gestigenkänning: Kombinera hit testing med handspårning för att tolka användargester, som att nypa för att zooma eller svepa för att bläddra (AR/VR). Detta kan användas i ett samarbetsdesignmöte i Sydney, där deltagarna manipulerar virtuella modeller tillsammans.

Förstå WebXR Hit Test Manager

WebXR Hit Test Manager är en viktig del av WebXR API:et som underlättar ray casting. Det tillhandahåller metoder för att skapa och hantera hit test-källor, som definierar strålens ursprung och riktning. Chefen använder sedan dessa källor för att utföra hit tests mot den verkliga världen (i AR) eller den virtuella världen (i VR) och returnerar information om eventuella korsningar. Viktiga begrepp inkluderar:

• XRFrame: XRFrame representerar en ögonblicksbild i tiden av XR-scenen, inklusive betraktarens position och eventuella detekterade plan eller funktioner. Hit tests utförs mot XRFrame.
• XRHitTestSource: Representerar källan till strålen som ska kastas. Det definierar ursprunget (var strålen börjar) och riktningen (vart strålen pekar). Du kommer vanligtvis att skapa en XRHitTestSource per inmatningsmetod (t.ex. en handkontroll, en hand).
• XRHitTestResult: Innehåller information om en lyckad träff, inklusive positionen (position och orientering) för skärningspunkten och avståndet från strålens ursprung.
• XRHitTestTrackable: Representerar en spårad funktion (som ett plan) i den verkliga världen.

Implementera ett grundläggande Hit Test-system

Låt oss gå igenom stegen för att implementera ett grundläggande WebXR hit test-system med JavaScript. Detta exempel fokuserar på AR-objektplacering, men principerna kan anpassas för andra interaktionsscenarier.

Steg 1: Begära WebXR-session och Hit Test-stöd

Först måste du begära en WebXR-session och se till att funktionen 'hit-test' är aktiverad. Den här funktionen krävs för att använda Hit Test Manager.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Förklaring:

• `navigator.xr.requestSession('immersive-ar', ...)`: Begär en uppslukande AR-session. Det första argumentet specificerar sessionstypen ('immersive-ar' för AR, 'immersive-vr' för VR).
• `requiredFeatures: ['hit-test']`: Begär viktigast av allt funktionen 'hit-test', vilket aktiverar Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: Skapar en XRHitTestSource som definierar strålens ursprung och riktning. I det här grundläggande exemplet använder vi referensutrymmet 'viewer', som motsvarar användarens synvinkel.

Steg 2: Skapa Render Loop

Render loop är hjärtat i din WebXR-applikation. Det är där du uppdaterar scenen och renderar varje bildruta. Inom render loop kommer du att utföra hit testet och uppdatera positionen för ditt virtuella objekt.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Förklaring:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Utför hit testet med hjälp av den tidigare skapade XRHitTestSource. Det returnerar en array av XRHitTestResult-objekt, som representerar alla korsningar som hittats.
• `hitTestResults[0]`: Vi tar det första hit-resultatet. I mer komplexa scenarier kanske du vill iterera genom alla resultat och välja det lämpligaste.
• `hit.getPose(xrReferenceSpace)`: Hämtar positionen (position och orientering) för träffen i det angivna referensutrymmet.
• `object3D.position.set(...)` och `object3D.quaternion.set(...)`: Uppdatera positionen och orienteringen för ditt virtuella objekt (object3D) så att det matchar hit positionen. Detta placerar objektet vid korsningspunkten.
• `object3D.visible = true/false`: Styr synligheten för det virtuella objektet, vilket gör att det visas endast när en träff hittas.

Steg 3: Konfigurera din 3D-scen (Exempel med Three.js)

Detta exempel använder Three.js, ett populärt JavaScript 3D-bibliotek, för att skapa en enkel scen med en kub. Du kan anpassa detta för att använda andra bibliotek som Babylon.js eller A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Viktigt: Se till att inkludera Three.js-biblioteket i din HTML-fil:

            


            

              
                Copy
              
            
          

Avancerade tekniker och optimeringar

Den grundläggande implementeringen ovan ger en grund för WebXR hit testing. Här är några avancerade tekniker och optimeringar att tänka på när du bygger mer komplexa upplevelser:

1. Filtrera Hit Test-resultat

I vissa fall kanske du vill filtrera hit test-resultat för att endast beakta specifika typer av ytor. Du kanske till exempel bara vill tillåta objektplacering på horisontella ytor (golv eller bord). Du kan uppnå detta genom att undersöka normalvektorn för hit positionen och jämföra den med uppvektorn.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Använda tillfälliga inmatningskällor

För mer avancerade inmatningsmetoder som handspårning kommer du vanligtvis att använda tillfälliga inmatningskällor. Tillfälliga inmatningskällor representerar temporära inmatningshändelser, som ett fingertryck eller en handgest. WebXR Input API låter dig komma åt dessa händelser och skapa hit test-källor baserat på användarens handposition.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Optimera prestanda

WebXR-upplevelser kan vara beräkningsmässigt intensiva, särskilt på mobila enheter. Här är några tips för att optimera prestanda:

• Minska frekvensen av Hit Tests: Att utföra hit tests varje bildruta kan vara dyrt. Överväg att minska frekvensen, särskilt om användarens rörelse är långsam. Du kan använda en timer eller bara utföra hit tests när användaren initierar en åtgärd.
• Använd en Bounding Volume Hierarchy (BVH): Om du har en komplex scen med många objekt kan användning av en BVH avsevärt påskynda kollisionsdetektering. Three.js och Babylon.js erbjuder BVH-implementeringar.
• LOD (Level of Detail): Använd olika detaljnivåer för dina 3D-modeller beroende på deras avstånd från kameran. Detta minskar antalet polygoner som behöver renderas för avlägsna objekt.
• Occlusion Culling: Rendera inte objekt som är dolda bakom andra objekt. Detta kan avsevärt förbättra prestanda i komplexa scener.

4. Hantera olika referensutrymmen

WebXR stöder olika referensutrymmen, som definierar koordinatsystemet som används för att spåra användarens position och orientering. De vanligaste referensutrymmena är:

• Local: Koordinatsystemets ursprung är fast i förhållande till användarens startposition. Detta är lämpligt för upplevelser där användaren befinner sig i ett litet område.
• Bounded-floor: Ursprunget är i golvnivå och XZ-planet representerar golvet. Detta är lämpligt för upplevelser där användaren kan röra sig i ett rum.
• Unbounded: Ursprunget är inte fast och användaren kan röra sig fritt. Detta är lämpligt för storskaliga AR-upplevelser.

Att välja lämpligt referensutrymme är viktigt för att säkerställa att din WebXR-upplevelse fungerar korrekt i olika miljöer. Du kan begära ett specifikt referensutrymme när du skapar XR-sessionen.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Hantera enhetskompatibilitet

WebXR är en relativt ny teknik och inte alla webbläsare och enheter stöder den lika bra. Det är viktigt att kontrollera WebXR-stöd innan du försöker initiera en WebXR-session.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Du bör också testa din WebXR-upplevelse på en mängd olika enheter för att säkerställa att den fungerar korrekt.

Internationaliseringsöverväganden

När du utvecklar WebXR-applikationer för en global publik är det viktigt att tänka på internationalisering (i18n) och lokalisering (l10n).

• Text- och UI-element: Använd ett lokaliseringsbibliotek för att översätta text- och UI-element till olika språk. Se till att din UI-layout kan rymma olika textlängder. Tyska ord tenderar till exempel att vara längre än engelska ord.
• Måttenheter: Använd lämpliga måttenheter för olika regioner. Använd till exempel meter och kilometer i de flesta länder, men använd fot och miles i USA och Storbritannien. Låt användare välja sina föredragna måttenheter.
• Datum- och tidsformat: Använd lämpliga datum- och tidsformat för olika regioner. Använd till exempel formatet ÅÅÅÅ-MM-DD i vissa länder och formatet MM/DD/ÅÅÅÅ i andra.
• Valutor: Visa valutor i lämpligt format för olika regioner. Använd ett bibliotek för att hantera valutakonverteringar.
• Kulturell känslighet: Var medveten om kulturella skillnader och undvik att använda bilder, symboler eller språk som kan vara stötande för vissa kulturer. Vissa handgester kan till exempel ha olika betydelser i olika kulturer.

WebXR-utvecklingsverktyg och resurser

Flera verktyg och resurser kan hjälpa dig med WebXR-utveckling:

• Three.js: Ett populärt JavaScript 3D-bibliotek för att skapa WebGL-baserade upplevelser.
• Babylon.js: En annan kraftfull JavaScript 3D-motor med fokus på WebXR-stöd.
• A-Frame: Ett webbramverk för att bygga VR-upplevelser med HTML.
• WebXR Emulator: Ett webbläsartillägg som låter dig testa WebXR-upplevelser utan att behöva en fysisk VR- eller AR-enhet.
• WebXR Device API Specification: Den officiella WebXR-specifikationen från W3C.
• Mozilla Mixed Reality Blog: En fantastisk resurs för att lära sig om WebXR och relaterade tekniker.

Slutsats

WebXR Hit Test Manager är ett kraftfullt verktyg för att skapa interaktiva och uppslukande AR/VR-upplevelser. Genom att förstå koncepten ray casting och Hit Test API kan du bygga övertygande applikationer som tillåter användare att interagera med den virtuella världen på ett naturligt och intuitivt sätt. Allt eftersom WebXR-tekniken fortsätter att utvecklas är möjligheterna oändliga för att skapa innovativa och engagerande upplevelser. Kom ihåg att optimera din kod för prestanda och överväg internationalisering när du utvecklar för en global publik. Omfamna utmaningarna och belöningarna med att bygga nästa generations uppslukande webbupplevelser.