WebXR Találati Teszt Eredmény: Sugárvetítési Eredmények Feldolgozása Immerzív Élményekhez

A WebXR Device API izgalmas lehetőségeket nyit meg a magával ragadó kiterjesztett valóság (AR) és virtuális valóság (VR) élmények létrehozásához közvetlenül a böngészőn belül. Az interaktív WebXR alkalmazások építésének egyik alapvető szempontja a találati teszt eredmények megértése és hatékony felhasználása. Ez a blogbejegyzés átfogó útmutatót nyújt a sugárvetítéssel kapott találati teszt eredmények feldolgozásához, lehetővé téve intuitív és lebilincselő felhasználói interakciók létrehozását a WebXR jeleneteidben.

Mi az a Sugárvetítés és Miért Fontos a WebXR-ben?

A sugárvetítés egy olyan technika, amellyel megállapítható, hogy egy adott pontból és irányból kiinduló sugár metszi-e a 3D-s jelenet objektumait. A WebXR-ben a sugárvetítést általában a felhasználó tekintetének vagy egy virtuális objektum pályájának szimulálására használják. Amikor a sugár metszi a valós felületet (AR-ben) vagy egy virtuális objektumot (VR-ben), létrejön egy találati teszt eredmény.

A találati teszt eredmények számos okból kulcsfontosságúak:

• Virtuális Objektumok Elhelyezése: Az AR-ben a találati tesztek lehetővé teszik a virtuális objektumok pontos elhelyezését valós felületekre, például asztalokra, padlókra vagy falakra.
• Felhasználói Interakció: A felhasználó tekintetének vagy mutatásának követésével a találati tesztek lehetővé teszik a virtuális objektumokkal való interakciókat, például kiválasztást, manipulálást vagy aktiválást.
• Navigáció: VR környezetekben a találati tesztek navigációs rendszerek megvalósítására használhatók, lehetővé téve a felhasználók számára a teleportálást vagy a jelenetben való mozgást adott helyekre mutatva.
• Ütközés Érzékelés: A találati tesztek használhatók az alapvető ütközésérzékeléshez, meghatározva, hogy egy virtuális objektum mikor ütközik egy másik objektummal vagy a valós világgal.

A WebXR Találati Teszt API Megértése

A WebXR Hit Test API biztosítja a sugárvetítéshez és a találati teszt eredmények megszerzéséhez szükséges eszközöket. Íme a legfontosabb fogalmak és funkciók lebontása:

XRRay

Az XRRay egy sugarat képvisel a 3D-s térben. Egy kezdőpont és egy irányvektor határozza meg. Az XRRay-t az XRFrame.getPose() metódussal hozhatod létre, amely egy követett bemeneti forrás (pl. a felhasználó feje, egy kézi vezérlő) pozícióját adja vissza. A pozícióból levezethető a sugár eredete és iránya.

XRHitTestSource

Az XRHitTestSource a találati teszt eredmények forrását képviseli. A találati teszt forrást az XRSession.requestHitTestSource() vagy az XRSession.requestHitTestSourceForTransientInput() metódussal hozhatod létre. Az első metódust általában a folyamatos találati teszteléshez használják egy állandó forrás alapján, például a felhasználó fejének pozíciója, míg a másodikat átmeneti bemeneti eseményekhez, például gombnyomásokhoz vagy gesztusokhoz szánják.

XRHitTestResult

Az XRHitTestResult a sugár és egy felület közötti egyetlen metszéspontot képviseli. Információkat tartalmaz a metszéspontról, például a sugár eredetétől a találati pontig mért távolságot és a találati pont pozícióját a jelenet referenciatérében.

XRHitTestResult.getPose()

Ez a metódus adja vissza a találati pont XRPose-ját. A pozíció tartalmazza a találati pont helyzetét és tájolását, amely felhasználható virtuális objektumok elhelyezésére vagy egyéb transzformációk végrehajtására.

Találati Teszt Eredmények Feldolgozása: Lépésről Lépésre Útmutató

Nézzük végig a találati teszt eredmények megszerzésének és feldolgozásának folyamatát egy WebXR alkalmazásban. Ez a példa feltételezi, hogy olyan renderelő könyvtárat használsz, mint a three.js vagy a Babylon.js.

1. Találati Teszt Forrás Kérése

Először találati teszt forrást kell kérned az XRSession-tól. Ezt általában a munkamenet indítása után teszik meg. Meg kell adnod azt a koordináta-rendszert, amelyben a találati teszt eredményeket vissza szeretnéd kapni. Például:

            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
              
            
          

Magyarázat:

• xrSession.requestHitTestSource(): Ez a függvény találati teszt forrást kér az XR munkamenettől.
• { space: xrSession.viewerSpace }: Ez határozza meg azt a koordináta-rendszert, amelyben a találati teszt eredmények vissza lesznek adva. A viewerSpace a néző pozíciójához viszonyítva van, míg a local az XR origóhoz viszonyítva. Használhatod a localFloor-t is a padlóhoz viszonyított követéshez.
• Hibakezelés: A try...catch blokk biztosítja, hogy a találati teszt forrás létrehozása során fellépő hibák el legyenek kapva és naplózva.

2. Találati Teszt Végrehajtása az Animációs Ciklusban

Az animációs cikluson belül (a függvény, amely minden képkockát renderel) el kell végezned a találati tesztet az XRFrame.getHitTestResults() metódussal. Ez a metódus egy XRHitTestResult objektumok tömbjét adja vissza, amely a jelenetben talált összes metszéspontot képviseli.

            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
              
            
          

Magyarázat:

• frame.getViewerPose(xrSession.referenceSpace): Lekéri a néző (headset) pozícióját. Ez azért szükséges, hogy tudjuk, hol van a néző és merre néz.
• frame.getHitTestResults(xrHitTestSource): Elvégzi a találati tesztet a korábban létrehozott találati teszt forrással.
• hitTestResults.length > 0: Ellenőrzi, hogy találtak-e metszéspontokat.

3. Találati Teszt Eredmények Feldolgozása

            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
              
            
          

Magyarázat:

• hitTestResults[0]: Lekéri az első találati teszt eredményt. Ha több metszéspont is lehetséges, előfordulhat, hogy végig kell iterálnod a teljes tömbön, és ki kell választanod a legmegfelelőbb eredményt az alkalmazás logikája alapján.
• hit.getPose(xrSession.referenceSpace): Lekéri a találati pont pozícióját a megadott referenciatérben.
• virtualObject.position.set(...) és virtualObject.quaternion.set(...): Frissíti egy virtuális objektum (pl. egy three.js Mesh) pozícióját és forgatását (kvaternió) a találati pont pozíciójának megfelelően.
• Vizuális Visszajelzés: A példa olyan kódot is tartalmaz, amely vizuális visszajelzést mutat a találati ponton, például egy kört vagy egy egyszerű markert, hogy segítse a felhasználót megérteni, hol lép interakcióba a jelenettel.

Haladó Találati Tesztelési Technikák

Találati Tesztelés Átmeneti Bemenettel

Az átmeneti bemenet által kiváltott interakciókhoz, például gombnyomásokhoz vagy kézmozdulatokhoz, használhatod az XRSession.requestHitTestSourceForTransientInput() metódust. Ez a metódus egy olyan találati teszt forrást hoz létre, amely egyetlen bemeneti eseményre vonatkozik. Ez hasznos a folyamatos találati tesztelésen alapuló nem kívánt interakciók elkerülésére.

            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
              
            
          

Találati Teszt Eredmények Szűrése

Bizonyos esetekben érdemes lehet szűrni a találati teszt eredményeket bizonyos kritériumok alapján, például a sugár eredetétől való távolság vagy a metszett felület típusa alapján. Ezt úgy érheted el, hogy manuálisan szűröd az XRHitTestResult tömböt a megszerzése után.

            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
              
            
          

Különböző Referencia Terek Használata

• viewerSpace: A néző pozíciójához viszonyított eredményeket ad. Ez hasznos a felhasználó tekintetéhez közvetlenül kapcsolódó interakciók létrehozásához.
• local: Az XR origóhoz (az XR munkamenet kiindulópontjához) viszonyított eredményeket ad. Ez alkalmas olyan élmények létrehozására, ahol az objektumok rögzítve maradnak a fizikai környezetben.
• localFloor: Hasonló a local-hoz, de az Y-tengely a padlóhoz van igazítva. Ez leegyszerűsíti az objektumok padlóra helyezésének folyamatát.

Válaszd ki azt a referencia teret, amely a legjobban illeszkedik az alkalmazás követelményeihez. Kísérletezz különböző referencia terekkel, hogy megértsd a viselkedésüket és korlátaikat.

Optimalizálási Stratégiák a Találati Teszteléshez

• A Találati Tesztek Gyakoriságának Korlátozása: Csak akkor végezz találati teszteket, amikor az szükséges, nem pedig minden képkockában. Például csak akkor végezhetsz találati teszteket, ha a felhasználó aktívan interakcióba lép a jelenettel.
• Határoló Test Hierarchia (BVH) Használata: Ha nagyszámú objektumon végzel találati teszteket, fontold meg a BVH használatát a metszéspont-számítások felgyorsítására. A three.js és a Babylon.js könyvtárak beépített BVH implementációkat biztosítanak.
• Térbeli Felosztás: Oszd fel a jelenetet kisebb régiókra, és csak azokon a régiókon végezz találati teszteket, amelyek valószínűleg metszéspontokat tartalmaznak. Ez jelentősen csökkentheti a vizsgálandó objektumok számát.
• Poligonok Számának Csökkentése: Egyszerűsítsd a modelljeid geometriáját, hogy csökkentsd a tesztelendő poligonok számát. Ez javíthatja a teljesítményt, különösen a mobileszközökön.
• WebWorker: Terheld le a számításokat egy web workerre, hogy biztosítsd, hogy a találati teszt folyamata ne zárja le a fő szálat.

Platformokon Átívelő Szempontok

• Eszköz Képességei: Nem minden eszköz támogatja az összes WebXR funkciót. Használj funkcióérzékelést annak megállapításához, hogy mely funkciók érhetők el, és ennek megfelelően alakítsd ki az alkalmazásodat.
• Bemeneti Profilok: A különböző eszközök különböző bemeneti profilokat használhatnak (pl. generic-touchscreen, hand-tracking, gamepad). Győződj meg arról, hogy az alkalmazásod több bemeneti profilt is támogat, és megfelelő tartalék mechanizmusokat biztosít.
• Teljesítmény: A teljesítmény jelentősen eltérhet a különböző eszközökön. Optimalizáld az alkalmazásodat a legalacsonyabb kategóriájú eszközökre, amelyeket támogatni tervezel.
• Böngésző Kompatibilitás: Győződj meg arról, hogy az alkalmazásod tesztelve van, és működik a főbb böngészőkben, mint a Chrome, a Firefox és az Edge.

Globális Példák a Találati Tesztelést Használó WebXR Alkalmazásokra

• IKEA Place (Svédország): Lehetővé teszi a felhasználók számára, hogy virtuálisan elhelyezzék az IKEA bútorokat otthonukban AR segítségével. A találati tesztelést a bútorok pontos elhelyezésére használják a padlón és más felületeken.
• Sketchfab AR (Franciaország): Lehetővé teszi a felhasználók számára, hogy a Sketchfab 3D modelljeit AR-ben tekintsék meg. A találati tesztelést a modellek valós világba helyezésére használják.
• Kiterjesztett Képek (Különböző): Sok AR alkalmazás használ képlekövetést találati teszteléssel kombinálva, hogy virtuális tartalmat rögzítsen a valós világban található konkrét képekhez vagy markerekhez.
• WebXR Játékok (Globális): Számos játék készül WebXR használatával, amelyek közül sok a találati tesztelésre támaszkodik az objektumok elhelyezéséhez, az interakcióhoz és a navigációhoz.
• Virtuális Túrák (Globális): A helyszínek, múzeumok vagy ingatlanok immerzív túrái gyakran alkalmaznak találati tesztelést a felhasználói navigációhoz és a virtuális környezet interaktív elemeihez.

Következtetés