WebXR Hit Test Ergebnis: Ray Casting Ergebnisverarbeitung für immersive Erlebnisse

Die WebXR Device API eröffnet aufregende Möglichkeiten zur Erstellung immersiver Augmented Reality (AR)- und Virtual Reality (VR)-Erlebnisse direkt im Browser. Einer der grundlegenden Aspekte beim Erstellen interaktiver WebXR-Anwendungen ist das Verstehen und effektive Nutzen von Hit-Test-Ergebnissen. Dieser Blogbeitrag bietet eine umfassende Anleitung zur Verarbeitung von Hit-Test-Ergebnissen, die durch Ray-Casting erhalten werden, und ermöglicht es Ihnen, intuitive und ansprechende Benutzerinteraktionen in Ihren WebXR-Szenen zu erstellen.

Was ist Ray Casting und warum ist es in WebXR wichtig?

Ray Casting ist eine Technik, mit der ermittelt wird, ob ein Strahl, der von einem bestimmten Punkt und einer bestimmten Richtung ausgeht, Objekte in einer 3D-Szene schneidet. In WebXR wird Ray Casting typischerweise verwendet, um den Blick des Benutzers oder die Flugbahn eines virtuellen Objekts zu simulieren. Wenn der Strahl eine reale Oberfläche (in AR) oder ein virtuelles Objekt (in VR) schneidet, wird ein Hit-Test-Ergebnis generiert.

Hit-Test-Ergebnisse sind aus mehreren Gründen von entscheidender Bedeutung:

• Platzierung virtueller Objekte: In AR ermöglichen Hit-Tests die genaue Platzierung virtueller Objekte auf realen Oberflächen, wie z. B. Tischen, Böden oder Wänden.
• Benutzerinteraktion: Durch die Verfolgung, wohin der Benutzer schaut oder zeigt, ermöglichen Hit-Tests Interaktionen mit virtuellen Objekten, z. B. deren Auswahl, Manipulation oder Aktivierung.
• Navigation: In VR-Umgebungen können Hit-Tests verwendet werden, um Navigationssysteme zu implementieren, mit denen Benutzer durch das Zeigen auf bestimmte Orte teleportieren oder sich in der Szene bewegen können.
• Kollisionserkennung: Hit-Tests können zur grundlegenden Kollisionserkennung verwendet werden, um zu bestimmen, wann ein virtuelles Objekt mit einem anderen Objekt oder der realen Welt kollidiert.

Verständnis der WebXR Hit Test API

Die WebXR Hit Test API stellt die notwendigen Werkzeuge zum Ausführen von Ray Casting und zum Abrufen von Hit-Test-Ergebnissen bereit. Hier ist eine Aufschlüsselung der wichtigsten Konzepte und Funktionen:

XRRay

Ein XRRay stellt einen Strahl im 3D-Raum dar. Er wird durch einen Ursprungspunkt und einen Richtungsvektor definiert. Sie können einen XRRay mit der Methode XRFrame.getPose() erstellen, die die Pose einer verfolgten Eingabequelle (z. B. der Kopf des Benutzers, ein Handcontroller) zurückgibt. Aus der Pose können Sie den Ursprung und die Richtung des Strahls ableiten.

XRHitTestSource

Ein XRHitTestSource stellt eine Quelle für Hit-Test-Ergebnisse dar. Sie erstellen eine Hit-Test-Quelle mit der Methode XRSession.requestHitTestSource() oder XRSession.requestHitTestSourceForTransientInput(). Die erste Methode wird im Allgemeinen für kontinuierliche Hit-Tests basierend auf einer persistenten Quelle, z. B. der Kopfposition des Benutzers, verwendet, während die zweite für vorübergehende Eingabeereignisse wie Tastendrücke oder Gesten vorgesehen ist.

XRHitTestResult

Ein XRHitTestResult stellt einen einzelnen Schnittpunkt zwischen dem Strahl und einer Oberfläche dar. Es enthält Informationen über den Schnittpunkt, z. B. die Entfernung vom Strahlursprung zum Trefferpunkt und die Pose des Trefferpunkts im Referenzraum der Szene.

XRHitTestResult.getPose()

Diese Methode gibt die XRPose des Trefferpunkts zurück. Die Pose enthält die Position und Ausrichtung des Trefferpunkts, die zum Platzieren virtueller Objekte oder zum Ausführen anderer Transformationen verwendet werden kann.

Verarbeiten von Hit-Test-Ergebnissen: Eine Schritt-für-Schritt-Anleitung

Gehen wir den Prozess des Abrufens und Verarbeitens von Hit-Test-Ergebnissen in einer WebXR-Anwendung durch. Dieses Beispiel geht davon aus, dass Sie eine Rendering-Bibliothek wie three.js oder Babylon.js verwenden.

1. Anfordern einer Hit-Test-Quelle

Zuerst müssen Sie eine Hit-Test-Quelle von der XRSession anfordern. Dies erfolgt in der Regel, nachdem die Sitzung gestartet wurde. Sie müssen das Koordinatensystem angeben, in dem die Hit-Test-Ergebnisse zurückgegeben werden sollen. Zum Beispiel:

            let xrHitTestSource = null;

async function createHitTestSource(xrSession) {
  try {
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrSession.viewerSpace // Or xrSession.local
    });
  } catch (error) {
    console.error("Fehler beim Erstellen der Hit-Test-Quelle: ", error);
  }
}

// Rufen Sie diese Funktion auf, nachdem die XR-Sitzung gestartet wurde
// createHitTestSource(xrSession);

            

              
                Copy
              
            
          

Erläuterung:

• xrSession.requestHitTestSource(): Diese Funktion fordert eine Hit-Test-Quelle von der XR-Sitzung an.
• { space: xrSession.viewerSpace }: Dies gibt das Koordinatensystem an, in dem die Hit-Test-Ergebnisse zurückgegeben werden. viewerSpace ist relativ zur Position des Betrachters, während local relativ zum XR-Ursprung ist. Sie können auch localFloor verwenden, um relativ zum Boden zu verfolgen.
• Fehlerbehandlung: Der try...catch-Block stellt sicher, dass Fehler während der Erstellung der Hit-Test-Quelle abgefangen und protokolliert werden.

2. Durchführen des Hit-Tests in der Animationsschleife

Innerhalb Ihrer Animationsschleife (der Funktion, die jeden Frame rendert), müssen Sie den Hit-Test mit der Methode XRFrame.getHitTestResults() durchführen. Diese Methode gibt ein Array von XRHitTestResult-Objekten zurück, die alle in der Szene gefundenen Schnittpunkte darstellen.

            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
              
            
          

Erläuterung:

• frame.getViewerPose(xrSession.referenceSpace): Ruft die Pose des Betrachters (Headset) ab. Dies ist notwendig, um zu wissen, wo sich der Betrachter befindet und wohin er blickt.
• frame.getHitTestResults(xrHitTestSource): Führt den Hit-Test mit der zuvor erstellten Hit-Test-Quelle aus.
• hitTestResults.length > 0: Überprüft, ob Schnittpunkte gefunden wurden.

3. Verarbeiten der Hit-Test-Ergebnisse

Die Funktion processHitTestResults() ist der Ort, an dem Sie die Ergebnisse des Hit-Tests verarbeiten. Dies beinhaltet typischerweise die Aktualisierung der Position und Ausrichtung eines virtuellen Objekts basierend auf der Pose des Trefferpunkts.

            function processHitTestResults(hitTestResults) {
  const hit = hitTestResults[0]; // Erhalten Sie das erste Treffergebnis
  const hitPose = hit.getPose(xrSession.referenceSpace);

  if (hitPose) {
    // Aktualisieren Sie die Position und Ausrichtung eines virtuellen Objekts
    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);

    // Visuelles Feedback anzeigen (z. B. ein Kreis) am Trefferpunkt
    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
              
            
          

Erläuterung:

• hitTestResults[0]: Ruft das erste Hit-Test-Ergebnis ab. Wenn mehrere Schnittpunkte möglich sind, müssen Sie möglicherweise das gesamte Array durchlaufen und das am besten geeignete Ergebnis basierend auf der Logik Ihrer Anwendung auswählen.
• hit.getPose(xrSession.referenceSpace): Ruft die Pose des Trefferpunkts im angegebenen Referenzraum ab.
• virtualObject.position.set(...) und virtualObject.quaternion.set(...): Aktualisieren Sie die Position und Rotation (Quaternion) eines virtuellen Objekts (z. B. ein three.js Mesh), um mit der Pose des Trefferpunkts übereinzustimmen.
• Visuelles Feedback: Das Beispiel enthält auch Code zur Anzeige von visuellem Feedback am Trefferpunkt, z. B. ein Kreis oder eine einfache Markierung, um dem Benutzer zu helfen, zu verstehen, wo er mit der Szene interagiert.

Erweiterte Hit-Testing-Techniken

Über das obige grundlegende Beispiel hinaus gibt es mehrere erweiterte Techniken, mit denen Sie Ihre Hit-Testing-Implementierungen verbessern können:

Hit-Testing mit vorübergehender Eingabe

Für Interaktionen, die durch vorübergehende Eingaben ausgelöst werden, z. B. Tastendrücke oder Handgesten, können Sie die Methode XRSession.requestHitTestSourceForTransientInput() verwenden. Diese Methode erstellt eine Hit-Test-Quelle, die für ein einzelnes Eingabeereignis spezifisch ist. Dies ist nützlich, um unbeabsichtigte Interaktionen zu vermeiden, die auf kontinuierlichem Hit-Testing basieren.

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

    const hitTestResults = await frame.getHitTestResultsForTransientInput(inputSource, {
      profile: 'generic-touchscreen', // Oder das entsprechende Eingabeprofil
      space: xrSession.viewerSpace
    });

    if (hitTestResults.length > 0) {
      processHitTestResults(hitTestResults);
    }
  } catch (error) {
    console.error("Fehler während des vorübergehenden Hit-Tests: ", error);
  }
}

// Fügen Sie diese Funktion Ihrem Ereignislistener für die Eingabeauswahl hinzu
// xrSession.addEventListener('select', handleSelect);

            

              
                Copy
              
            
          

Filtern von Hit-Test-Ergebnissen

In einigen Fällen möchten Sie möglicherweise Hit-Test-Ergebnisse basierend auf bestimmten Kriterien filtern, z. B. der Entfernung vom Strahlursprung oder der Art der Oberfläche, die sich überschnitten hat. Dies können Sie erreichen, indem Sie das Array XRHitTestResult manuell filtern, nachdem Sie es erhalten haben.

            function processHitTestResults(hitTestResults) {
  const filteredResults = hitTestResults.filter(result => {
    const hitPose = result.getPose(xrSession.referenceSpace);
    if (!hitPose) return false; // Überspringen, wenn keine 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; // Berücksichtigen Sie nur Treffer innerhalb von 2 Metern
  });

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

    if (hitPose) {
      // Objektposition basierend auf dem gefilterten Ergebnis aktualisieren
      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
              
            
          

Verwenden verschiedener Referenzräume

Die Wahl des Referenzraums (viewerSpace, local, localFloor oder andere benutzerdefinierte Räume) hat erhebliche Auswirkungen darauf, wie Hit-Test-Ergebnisse interpretiert werden. Berücksichtigen Sie Folgendes:

• viewerSpace: Liefert Ergebnisse relativ zur Position des Betrachters. Dies ist nützlich, um Interaktionen zu erstellen, die direkt mit dem Blick des Benutzers verbunden sind.
• local: Liefert Ergebnisse relativ zum XR-Ursprung (dem Startpunkt der XR-Sitzung). Dies eignet sich zum Erstellen von Erlebnissen, bei denen Objekte in der physischen Umgebung fixiert bleiben.
• localFloor: Ähnlich wie local, aber die Y-Achse ist am Boden ausgerichtet. Dies vereinfacht den Prozess der Platzierung von Objekten auf dem Boden.

Wählen Sie den Referenzraum, der am besten zu den Anforderungen Ihrer Anwendung passt. Experimentieren Sie mit verschiedenen Referenzräumen, um ihr Verhalten und ihre Einschränkungen zu verstehen.

Optimierungsstrategien für das Hit-Testing

Hit-Testing kann ein rechenintensiver Prozess sein, insbesondere in komplexen Szenen. Hier sind einige Optimierungsstrategien, die Sie berücksichtigen sollten:

• Begrenzen Sie die Häufigkeit von Hit-Tests: Führen Sie Hit-Tests nur bei Bedarf und nicht in jedem Frame durch. Beispielsweise könnten Sie Hit-Tests nur ausführen, wenn der Benutzer aktiv mit der Szene interagiert.
• Verwenden Sie eine Bounding Volume Hierarchy (BVH): Wenn Sie Hit-Tests für eine große Anzahl von Objekten durchführen, sollten Sie eine BVH verwenden, um die Schnittpunktberechnungen zu beschleunigen. Bibliotheken wie three.js und Babylon.js bieten integrierte BVH-Implementierungen.
• Räumliche Partitionierung: Teilen Sie die Szene in kleinere Regionen auf und führen Sie Hit-Tests nur für die Regionen durch, die wahrscheinlich Schnittpunkte enthalten. Dies kann die Anzahl der zu überprüfenden Objekte erheblich reduzieren.
• Reduzieren Sie die Polygonanzahl: Vereinfachen Sie die Geometrie Ihrer Modelle, um die Anzahl der zu testenden Polygone zu reduzieren. Dies kann die Leistung verbessern, insbesondere auf Mobilgeräten.
• WebWorker: Lagern Sie die Berechnung an einen Web Worker aus, um sicherzustellen, dass der Hit-Test-Prozess den Haupt-Thread nicht sperrt.

Plattformübergreifende Überlegungen

WebXR soll plattformübergreifend sein, aber es kann subtile Unterschiede im Verhalten auf verschiedenen Geräten und Browsern geben. Beachten Sie Folgendes:

• Gerätefunktionen: Nicht alle Geräte unterstützen alle WebXR-Funktionen. Verwenden Sie die Feature-Erkennung, um festzustellen, welche Funktionen verfügbar sind, und passen Sie Ihre Anwendung entsprechend an.
• Eingabeprofile: Verschiedene Geräte können unterschiedliche Eingabeprofile verwenden (z. B. generischer Touchscreen, Hand-Tracking, Gamepad). Stellen Sie sicher, dass Ihre Anwendung mehrere Eingabeprofile unterstützt und geeignete Fallback-Mechanismen bietet.
• Leistung: Die Leistung kann auf verschiedenen Geräten erheblich variieren. Optimieren Sie Ihre Anwendung für die Low-End-Geräte, die Sie unterstützen möchten.
• Browserkompatibilität: Stellen Sie sicher, dass Ihre App in gängigen Browsern wie Chrome, Firefox und Edge getestet wird und funktioniert.

Globale Beispiele für WebXR-Anwendungen, die Hit-Testing verwenden

Hier sind einige Beispiele für WebXR-Anwendungen, die Hit-Testing effektiv nutzen, um überzeugende und intuitive Benutzererlebnisse zu schaffen:

• IKEA Place (Schweden): Ermöglicht es Benutzern, IKEA-Möbel virtuell in ihren Häusern mit AR zu platzieren. Hit-Testing wird verwendet, um die Möbel genau auf dem Boden und anderen Oberflächen zu positionieren.
• Sketchfab AR (Frankreich): Ermöglicht es Benutzern, 3D-Modelle von Sketchfab in AR anzuzeigen. Hit-Testing wird verwendet, um die Modelle in der realen Welt zu platzieren.
• Augmented Images (Verschiedene): Viele AR-Anwendungen verwenden Bildverfolgung in Kombination mit Hit-Testing, um virtuelle Inhalte an bestimmte Bilder oder Marker in der realen Welt zu verankern.
• WebXR-Spiele (Global): Es werden zahlreiche Spiele mit WebXR entwickelt, von denen viele auf Hit-Testing für die Objektplatzierung, Interaktion und Navigation angewiesen sind.
• Virtuelle Touren (Global): Immersive Touren von Orten, Museen oder Immobilien verwenden häufig Hit-Testing für die Benutzernavigation und interaktive Elemente innerhalb der virtuellen Umgebung.

Fazit

Das Beherrschen von WebXR Hit-Test-Ergebnissen und der Ray-Casting-Verarbeitung ist unerlässlich, um überzeugende und intuitive AR- und VR-Erlebnisse im Web zu schaffen. Indem Sie die zugrunde liegenden Konzepte verstehen und die in diesem Blogbeitrag beschriebenen Techniken anwenden, können Sie immersive Anwendungen erstellen, die die virtuelle und reale Welt nahtlos miteinander verbinden, oder ansprechende virtuelle Umgebungen mit natürlichen und intuitiven Benutzerinteraktionen schaffen. Denken Sie daran, Ihre Hit-Testing-Implementierung auf Leistung zu optimieren und die plattformübergreifende Kompatibilität zu berücksichtigen, um ein reibungsloses Erlebnis für alle Benutzer zu gewährleisten. Da sich das WebXR-Ökosystem weiterentwickelt, erwarten Sie weitere Fortschritte und Verfeinerungen der Hit-Testing-API, die noch mehr kreative Möglichkeiten für die Entwicklung des immersiven Webs eröffnen. Konsultieren Sie immer die neuesten WebXR-Spezifikationen und die Browserdokumentation, um die aktuellsten Informationen zu erhalten.