WebXR Hit Test Manager: Implementering av et strålekastesystem for engasjerende opplevelser

Fremveksten av Augmented Reality (AR) og Virtual Reality (VR) teknologier har åpnet for spennende nye muligheter for å skape engasjerende og interaktive digitale opplevelser. WebXR, et JavaScript API for å få tilgang til VR- og AR-funksjoner i nettlesere, gjør det mulig for utviklere over hele verden å bygge disse opplevelsene på tvers av en rekke enheter. En nøkkelkomponent i å skape overbevisende WebXR-opplevelser er evnen til å samhandle med det virtuelle miljøet. Det er her WebXR Hit Test Manager og strålekasting kommer inn i bildet.

Hva er strålekasting og hvorfor er det viktig?

Strålekasting, i sammenheng med WebXR, er en teknikk som brukes til å avgjøre om en virtuell stråle (en rett linje) krysser en overflate i den virkelige verden som er oppdaget av AR-systemet eller et virtuelt objekt i VR-miljøet. Tenk på det som å skinne en laserpeker inn i omgivelsene dine og se hvor den treffer. WebXR Hit Test Manager gir verktøyene for å utføre disse strålekastene og hente resultatene. Denne informasjonen er avgjørende for en rekke interaksjoner, inkludert:

• Objektplassering: Lar brukere plassere virtuelle objekter på virkelige overflater, som å sette en virtuell stol i stuen sin (AR). Tenk deg en bruker i Tokyo som dekorerer leiligheten sin virtuelt før de forplikter seg til møbelkjøp.
• Målretting og valg: Gjør det mulig for brukere å velge virtuelle objekter eller samhandle med UI-elementer ved hjelp av en virtuell peker eller hånd (AR/VR). Se for deg en kirurg i London som bruker AR til å legge anatomisk informasjon over en pasient og velge bestemte områder for gjennomgang.
• Navigasjon: Flytter brukerens avatar gjennom den virtuelle verden ved å peke på et sted og instruere dem om å flytte dit (VR). Et museum i Paris kan bruke VR for å la besøkende navigere gjennom historiske utstillinger.
• Gjenkjenning av bevegelser: Kombinerer hit testing med håndsporing for å tolke brukerbevegelser, som å knipe for å zoome eller sveipe for å rulle (AR/VR). Dette kan brukes i et samarbeidende designmøte i Sydney, hvor deltakerne manipulerer virtuelle modeller sammen.

Forstå WebXR Hit Test Manager

WebXR Hit Test Manager er en viktig del av WebXR API som forenkler strålekasting. Den gir metoder for å opprette og administrere hit test-kilder, som definerer opprinnelsen og retningen til strålen. Manageren bruker deretter disse kildene til å utføre hit tester mot den virkelige verden (i AR) eller den virtuelle verden (i VR) og returnerer informasjon om eventuelle kryssinger. Nøkkelbegreper inkluderer:

• XRFrame: XRFrame representerer et øyeblikksbilde i tid av XR-scenen, inkludert posisjonen til betrakteren og eventuelle oppdagede plan eller funksjoner. Hit tester utføres mot XRFrame.
• XRHitTestSource: Representerer kilden til strålen som skal kastes. Den definerer opprinnelsen (hvor strålen starter) og retningen (hvor strålen peker). Du vil vanligvis opprette én XRHitTestSource per inndatametode (f.eks. en kontroller, en hånd).
• XRHitTestResult: Inneholder informasjon om et vellykket treff, inkludert posisjonen (posisjon og orientering) til skjæringspunktet og avstanden fra stråleopprinnelsen.
• XRHitTestTrackable: Representerer en sporet funksjon (som et plan) i den virkelige verden.

Implementere et grunnleggende Hit Test-system

La oss gå gjennom trinnene for å implementere et grunnleggende WebXR hit test-system ved hjelp av JavaScript. Dette eksemplet fokuserer på AR-objektplassering, men prinsippene kan tilpasses andre interaksjonsscenarier.

Trinn 1: Be om WebXR-økt og Hit Test-støtte

Først må du be om en WebXR-økt og sørge for at 'hit-test'-funksjonen er aktivert. Denne funksjonen er nødvendig for å bruke 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
              
            
          

Forklaring:

• `navigator.xr.requestSession('immersive-ar', ...)`: Ber om en immersiv AR-økt. Det første argumentet spesifiserer økttypen ('immersive-ar' for AR, 'immersive-vr' for VR).
• `requiredFeatures: ['hit-test']`: Ber om 'hit-test'-funksjonen, som aktiverer Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: Oppretter en XRHitTestSource, som definerer opprinnelsen og retningen til strålen. I dette grunnleggende eksemplet bruker vi 'viewer'-referanserommet, som tilsvarer brukerens synspunkt.

Trinn 2: Opprette Render Loop

Render loopen er hjertet i WebXR-applikasjonen din. Det er her du oppdaterer scenen og gjengir hver frame. Innenfor render loopen vil du utføre hit testen og oppdatere posisjonen til det virtuelle objektet ditt.

            
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
              
            
          

Forklaring:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Utfører hit testen ved hjelp av den tidligere opprettede XRHitTestSource. Den returnerer en array av XRHitTestResult-objekter, som representerer alle kryssene som er funnet.
• `hitTestResults[0]`: Vi tar det første hit resultatet. I mer komplekse scenarier kan det være lurt å iterere gjennom alle resultatene og velge det mest passende.
• `hit.getPose(xrReferenceSpace)`: Henter posisjonen (posisjon og orientering) til treffet i det spesifiserte referanserommet.
• `object3D.position.set(...)` og `object3D.quaternion.set(...)`: Oppdater posisjonen og orienteringen til det virtuelle objektet ditt (object3D) for å matche hit posisjonen. Dette plasserer objektet i skjæringspunktet.
• `object3D.visible = true/false`: Kontrollerer synligheten til det virtuelle objektet, slik at det bare vises når et treff er funnet.

Trinn 3: Sette opp 3D-scenen din (eksempel med Three.js)

Dette eksemplet bruker Three.js, et populært JavaScript 3D-bibliotek, for å lage en enkel scene med en kube. Du kan tilpasse dette til å bruke andre biblioteker 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
              
            
          

Viktig: Sørg for å inkludere Three.js-biblioteket i HTML-filen din:

            


            

              
                Copy
              
            
          

Avanserte teknikker og optimaliseringer

Den grunnleggende implementeringen ovenfor gir et grunnlag for WebXR hit testing. Her er noen avanserte teknikker og optimaliseringer du bør vurdere når du bygger mer komplekse opplevelser:

1. Filtrere Hit Test-resultater

I noen tilfeller kan det være lurt å filtrere hit test-resultater for bare å vurdere spesifikke typer overflater. Du kan for eksempel bare tillate objektplassering på horisontale overflater (gulv eller bord). Du kan oppnå dette ved å undersøke normalvektoren til hit posisjonen og sammenligne den med opp-vektoren.

            
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. Bruke forbigående inndatakilder

For mer avanserte inndatametoder som håndsporing, vil du vanligvis bruke forbigående inndatakilder. Forbigående inndatakilder representerer midlertidige inndatahendelser, som et fingertrykk eller en håndbevegelse. WebXR Input API lar deg få tilgang til disse hendelsene og opprette hit test-kilder basert på brukerens håndposisjon.

            
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. Optimalisere ytelsen

WebXR-opplevelser kan være beregningsmessig intensive, spesielt på mobile enheter. Her er noen tips for å optimalisere ytelsen:

• Reduser frekvensen av Hit Tester: Å utføre hit tester hver frame kan være dyrt. Vurder å redusere frekvensen, spesielt hvis brukerens bevegelse er treg. Du kan bruke en timer eller bare utføre hit tester når brukeren initierer en handling.
• Bruk et Bounding Volume Hierarchy (BVH): Hvis du har en kompleks scene med mange objekter, kan bruk av en BVH øke kollisjonsdeteksjonen betydelig. Three.js og Babylon.js tilbyr BVH-implementeringer.
• LOD (Detaljnivå): Bruk forskjellige detaljnivåer for 3D-modellene dine avhengig av avstanden fra kameraet. Dette reduserer antall polygoner som må gjengis for fjerne objekter.
• Occlusion Culling: Ikke gjengi objekter som er skjult bak andre objekter. Dette kan forbedre ytelsen betydelig i komplekse scener.

4. Håndtere forskjellige referanserom

WebXR støtter forskjellige referanserom, som definerer koordinatsystemet som brukes til å spore brukerens posisjon og orientering. De vanligste referanserommene er:

• Lokal: Opprinnelsen til koordinatsystemet er fast i forhold til brukerens startposisjon. Dette er egnet for opplevelser der brukeren forblir i et lite område.
• Avgrenset gulv: Opprinnelsen er i gulvhøyde, og XZ-planet representerer gulvet. Dette er egnet for opplevelser der brukeren kan bevege seg rundt i et rom.
• Ubegrenset: Opprinnelsen er ikke fast, og brukeren kan bevege seg fritt. Dette er egnet for store AR-opplevelser.

Å velge riktig referanserom er viktig for å sikre at WebXR-opplevelsen din fungerer korrekt i forskjellige miljøer. Du kan be om et spesifikt referanserom når du oppretter XR-økten.

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

            

              
                Copy
              
            
          

5. Håndtere enhetskompatibilitet

WebXR er en relativt ny teknologi, og ikke alle nettlesere og enheter støtter den likt. Det er viktig å sjekke for WebXR-støtte før du prøver å initialisere en WebXR-økt.

            
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 også teste WebXR-opplevelsen din på en rekke enheter for å sikre at den fungerer korrekt.

Internasjonaliseringshensyn

Når du utvikler WebXR-applikasjoner for et globalt publikum, er det viktig å vurdere internasjonalisering (i18n) og lokalisering (l10n).

• Tekst- og UI-elementer: Bruk et lokaliseringsbibliotek for å oversette tekst- og UI-elementer til forskjellige språk. Forsikre deg om at UI-layouten din har plass til forskjellige tekstlengder. For eksempel har tyske ord en tendens til å være lengre enn engelske ord.
• Måleenheter: Bruk passende måleenheter for forskjellige regioner. Bruk for eksempel meter og kilometer i de fleste land, men bruk fot og miles i USA og Storbritannia. La brukere velge sine foretrukne måleenheter.
• Dato- og klokkeslettformater: Bruk passende dato- og klokkeslettformater for forskjellige regioner. Bruk for eksempel YYYY-MM-DD-formatet i noen land, og MM/DD/YYYY-formatet i andre.
• Valutaer: Vis valutaer i riktig format for forskjellige regioner. Bruk et bibliotek til å håndtere valutaomregninger.
• Kulturell følsomhet: Vær oppmerksom på kulturelle forskjeller og unngå å bruke bilder, symboler eller språk som kan være støtende for noen kulturer. For eksempel kan visse håndbevegelser ha forskjellige betydninger i forskjellige kulturer.

WebXR-utviklingsverktøy og -ressurser

Flere verktøy og ressurser kan hjelpe deg med WebXR-utvikling:

• Three.js: Et populært JavaScript 3D-bibliotek for å skape WebGL-baserte opplevelser.
• Babylon.js: En annen kraftig JavaScript 3D-motor med fokus på WebXR-støtte.
• A-Frame: Et webrammeverk for å bygge VR-opplevelser ved hjelp av HTML.
• WebXR Emulator: En nettleserutvidelse som lar deg teste WebXR-opplevelser uten å trenge en fysisk VR- eller AR-enhet.
• WebXR Device API-spesifikasjon: Den offisielle WebXR-spesifikasjonen fra W3C.
• Mozilla Mixed Reality Blog: En flott ressurs for å lære om WebXR og relaterte teknologier.

Konklusjon

WebXR Hit Test Manager er et kraftig verktøy for å skape interaktive og engasjerende AR/VR-opplevelser. Ved å forstå konseptene strålekasting og Hit Test API, kan du bygge overbevisende applikasjoner som lar brukere samhandle med den virtuelle verden på en naturlig og intuitiv måte. Etter hvert som WebXR-teknologien fortsetter å utvikle seg, er mulighetene for å skape innovative og engasjerende opplevelser uendelige. Husk å optimalisere koden din for ytelse og vurdere internasjonalisering når du utvikler for et globalt publikum. Omfavn utfordringene og belønningene ved å bygge neste generasjon av engasjerende webopplevelser.