WebXR Hit Test Manager: Implementierung eines Ray-Casting-Systems für immersive Erlebnisse

Der Aufstieg von Augmented Reality (AR) und Virtual Reality (VR) Technologien hat aufregende neue Möglichkeiten für die Erstellung immersiver und interaktiver digitaler Erlebnisse eröffnet. WebXR, eine JavaScript-API für den Zugriff auf VR- und AR-Funktionen in Webbrowsern, ermöglicht es Entwicklern weltweit, diese Erlebnisse auf einer Vielzahl von Geräten zu erstellen. Eine Schlüsselkomponente bei der Erstellung überzeugender WebXR-Erlebnisse ist die Fähigkeit, mit der virtuellen Umgebung zu interagieren. Hier kommen der WebXR Hit Test Manager und das Ray-Casting ins Spiel.

Was ist Ray-Casting und warum ist es wichtig?

Ray-Casting ist im Kontext von WebXR eine Technik, mit der festgestellt wird, ob ein virtueller Strahl (eine gerade Linie) eine reale Oberfläche schneidet, die vom AR-System oder einem virtuellen Objekt in der VR-Umgebung erkannt wurde. Stellen Sie es sich wie einen Laserpointer vor, der in Ihre Umgebung scheint und sieht, wo er auftrifft. Der WebXR Hit Test Manager stellt die Werkzeuge zur Verfügung, um diese Ray-Casts durchzuführen und die Ergebnisse abzurufen. Diese Informationen sind für eine Vielzahl von Interaktionen von entscheidender Bedeutung, darunter:

• Objektplatzierung: Ermöglichen Sie Benutzern, virtuelle Objekte auf realen Oberflächen zu platzieren, z. B. einen virtuellen Stuhl in ihrem Wohnzimmer (AR). Stellen Sie sich einen Benutzer in Tokio vor, der seine Wohnung virtuell dekoriert, bevor er sich zum Möbelkauf verpflichtet.
• Zielausrichtung und Auswahl: Ermöglichen Sie Benutzern, virtuelle Objekte auszuwählen oder mit UI-Elementen mit einem virtuellen Zeiger oder einer Hand zu interagieren (AR/VR). Stellen Sie sich einen Chirurgen in London vor, der AR verwendet, um anatomische Informationen auf einen Patienten zu überlagern und bestimmte Bereiche zur Überprüfung auswählt.
• Navigation: Bewegen Sie den Avatar des Benutzers durch die virtuelle Welt, indem Sie auf einen Ort zeigen und ihn anweisen, sich dorthin zu bewegen (VR). Ein Museum in Paris könnte VR verwenden, um Besuchern die Navigation durch historische Ausstellungen zu ermöglichen.
• Gesten-Erkennung: Kombinieren Sie Hit-Tests mit Hand-Tracking, um Benutzergesten wie das Zusammendrücken zum Zoomen oder das Wischen zum Scrollen zu interpretieren (AR/VR). Dies könnte in einem kollaborativen Design-Meeting in Sydney verwendet werden, bei dem die Teilnehmer virtuelle Modelle gemeinsam manipulieren.

Grundlagen des WebXR Hit Test Managers

Der WebXR Hit Test Manager ist ein wesentlicher Bestandteil der WebXR-API, der Ray-Casting ermöglicht. Es bietet Methoden zum Erstellen und Verwalten von Hit-Test-Quellen, die den Ursprung und die Richtung des Strahls definieren. Der Manager verwendet dann diese Quellen, um Hit-Tests gegen die reale Welt (in AR) oder die virtuelle Welt (in VR) durchzuführen und Informationen über etwaige Schnittpunkte zurückzugeben. Zu den Schlüsselkonzepten gehören:

• XRFrame: Der XRFrame stellt eine Momentaufnahme der XR-Szene in der Zeit dar, einschließlich der Pose des Betrachters und aller erkannten Ebenen oder Merkmale. Hit-Tests werden anhand des XRFrame durchgeführt.
• XRHitTestSource: Stellt die Quelle des zu werfenden Strahls dar. Es definiert den Ursprung (wo der Strahl beginnt) und die Richtung (wo der Strahl zeigt). Sie erstellen typischerweise einen XRHitTestSource pro Eingabemethode (z. B. einen Controller, eine Hand).
• XRHitTestResult: Enthält Informationen über einen erfolgreichen Treffer, einschließlich der Pose (Position und Ausrichtung) des Schnittpunkts und des Abstands vom Strahlursprung.
• XRHitTestTrackable: Repräsentiert ein verfolgtes Merkmal (z. B. eine Ebene) in der realen Welt.

Implementierung eines grundlegenden Hit-Test-Systems

Gehen wir die Schritte zur Implementierung eines grundlegenden WebXR-Hit-Test-Systems mit JavaScript durch. Dieses Beispiel konzentriert sich auf die AR-Objektplatzierung, aber die Prinzipien können an andere Interaktionsszenarien angepasst werden.

Schritt 1: Anfordern einer WebXR-Sitzung und Hit-Test-Unterstützung

Zuerst müssen Sie eine WebXR-Sitzung anfordern und sicherstellen, dass die Funktion 'hit-test' aktiviert ist. Diese Funktion ist erforderlich, um den Hit Test Manager zu verwenden.

            
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
              
            
          

Erläuterung:

• `navigator.xr.requestSession('immersive-ar', ...)`: Fordert eine immersive AR-Sitzung an. Das erste Argument gibt den Sitzungstyp an ('immersive-ar' für AR, 'immersive-vr' für VR).
• `requiredFeatures: ['hit-test']`: Fordert entscheidend die Funktion 'hit-test' an, wodurch der Hit Test Manager aktiviert wird.
• `xrSession.requestHitTestSource(...)`: Erstellt einen XRHitTestSource, der den Ursprung und die Richtung des Strahls definiert. In diesem einfachen Beispiel verwenden wir den Referenzraum 'viewer', der dem Blickwinkel des Benutzers entspricht.

Schritt 2: Erstellen der Render-Schleife

Die Render-Schleife ist das Herzstück Ihrer WebXR-Anwendung. Hier aktualisieren Sie die Szene und rendern jeden Frame. Innerhalb der Render-Schleife führen Sie den Hit-Test durch und aktualisieren die Position Ihres virtuellen Objekts.

            
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
              
            
          

Erläuterung:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Führt den Hit-Test mit dem zuvor erstellten XRHitTestSource durch. Es gibt ein Array von XRHitTestResult-Objekten zurück, die alle gefundenen Schnittpunkte darstellen.
• `hitTestResults[0]`: Wir nehmen das erste Trefferergebnis. In komplexeren Szenarien möchten Sie möglicherweise alle Ergebnisse durchlaufen und das am besten geeignete auswählen.
• `hit.getPose(xrReferenceSpace)`: Ruft die Pose (Position und Ausrichtung) des Treffers im angegebenen Referenzraum ab.
• `object3D.position.set(...)` und `object3D.quaternion.set(...)`: Aktualisieren Sie die Position und Ausrichtung Ihres virtuellen Objekts (object3D), damit es mit der Trefferpose übereinstimmt. Dadurch wird das Objekt am Schnittpunkt platziert.
• `object3D.visible = true/false`: Steuert die Sichtbarkeit des virtuellen Objekts und lässt es nur dann erscheinen, wenn ein Treffer gefunden wird.

Schritt 3: Einrichten Ihrer 3D-Szene (Beispiel mit Three.js)

Dieses Beispiel verwendet Three.js, eine beliebte JavaScript-3D-Bibliothek, um eine einfache Szene mit einem Würfel zu erstellen. Sie können dies anpassen, um andere Bibliotheken wie Babylon.js oder A-Frame zu verwenden.

            
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
              
            
          

Wichtig: Stellen Sie sicher, dass Sie die Three.js-Bibliothek in Ihrer HTML-Datei einfügen:

            
<script src="https://threejs.org/build/three.js"></script>

            

              
                Copy
              
            
          

Erweiterte Techniken und Optimierungen

Die obige Grundimplementierung bietet eine Grundlage für WebXR-Hit-Tests. Hier sind einige erweiterte Techniken und Optimierungen, die Sie bei der Erstellung komplexerer Erlebnisse berücksichtigen sollten:

1. Filtern von Hit-Test-Ergebnissen

In einigen Fällen möchten Sie möglicherweise Hit-Test-Ergebnisse filtern, um nur bestimmte Arten von Oberflächen zu berücksichtigen. Beispielsweise möchten Sie möglicherweise nur die Platzierung von Objekten auf horizontalen Oberflächen (Böden oder Tischen) zulassen. Sie können dies erreichen, indem Sie den Normalenvektor der Trefferpose untersuchen und ihn mit dem Up-Vektor vergleichen.

            
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. Verwenden von transienten Eingabequellen

Für erweiterte Eingabemethoden wie Hand-Tracking verwenden Sie normalerweise transiente Eingabequellen. Transiente Eingabequellen stellen temporäre Eingabeereignisse dar, z. B. ein Fingertippen oder eine Handgeste. Die WebXR-Eingabe-API ermöglicht es Ihnen, auf diese Ereignisse zuzugreifen und Hit-Test-Quellen basierend auf der Handposition des Benutzers zu erstellen.

            
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. Optimierung der Leistung

WebXR-Erlebnisse können rechenintensiv sein, insbesondere auf mobilen Geräten. Hier sind einige Tipps zur Leistungsoptimierung:

• Reduzieren Sie die Häufigkeit von Hit-Tests: Das Durchführen von Hit-Tests in jedem Frame kann teuer sein. Erwägen Sie, die Frequenz zu reduzieren, insbesondere wenn sich der Benutzer langsam bewegt. Sie können einen Timer verwenden oder Hit-Tests nur durchführen, wenn der Benutzer eine Aktion auslöst.
• Verwenden Sie eine Bounding Volume Hierarchy (BVH): Wenn Sie eine komplexe Szene mit vielen Objekten haben, kann die Verwendung eines BVH die Kollisionserkennung erheblich beschleunigen. Three.js und Babylon.js bieten BVH-Implementierungen.
• LOD (Level of Detail): Verwenden Sie je nach Entfernung von der Kamera unterschiedliche Detailgenauigkeitsgrade für Ihre 3D-Modelle. Dies reduziert die Anzahl der Polygone, die für entfernte Objekte gerendert werden müssen.
• Occlusion Culling: Rendern Sie keine Objekte, die sich hinter anderen Objekten verbergen. Dies kann die Leistung in komplexen Szenen erheblich verbessern.

4. Umgang mit verschiedenen Referenzräumen

WebXR unterstützt verschiedene Referenzräume, die das Koordinatensystem definieren, das zum Verfolgen der Position und Ausrichtung des Benutzers verwendet wird. Die gebräuchlichsten Referenzräume sind:

• Lokal: Der Ursprung des Koordinatensystems ist relativ zur Startposition des Benutzers festgelegt. Dies eignet sich für Erlebnisse, bei denen sich der Benutzer in einem kleinen Bereich aufhält.
• Bounded-floor: Der Ursprung befindet sich auf Bodenniveau, und die XZ-Ebene stellt den Boden dar. Dies eignet sich für Erlebnisse, bei denen sich der Benutzer in einem Raum bewegen kann.
• Unbounded: Der Ursprung ist nicht festgelegt, und der Benutzer kann sich frei bewegen. Dies eignet sich für groß angelegte AR-Erlebnisse.

Die Auswahl des geeigneten Referenzraums ist wichtig, um sicherzustellen, dass Ihr WebXR-Erlebnis in verschiedenen Umgebungen korrekt funktioniert. Sie können einen bestimmten Referenzraum anfordern, wenn Sie die XR-Sitzung erstellen.

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

            

              
                Copy
              
            
          

5. Umgang mit Gerätekompatibilität

WebXR ist eine relativ neue Technologie, und nicht alle Browser und Geräte unterstützen sie gleichermaßen. Es ist wichtig, die WebXR-Unterstützung zu überprüfen, bevor Sie versuchen, eine WebXR-Sitzung zu initialisieren.

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

            

              
                Copy
              
            
          

Sie sollten Ihr WebXR-Erlebnis auch auf einer Vielzahl von Geräten testen, um sicherzustellen, dass es korrekt funktioniert.

Internationale Erwägungen

Bei der Entwicklung von WebXR-Anwendungen für ein globales Publikum ist es wichtig, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen.

• Text- und UI-Elemente: Verwenden Sie eine Lokalisierungsbibliothek, um Text- und UI-Elemente in verschiedene Sprachen zu übersetzen. Stellen Sie sicher, dass Ihr UI-Layout unterschiedliche Textlängen aufnehmen kann. Deutsche Wörter sind beispielsweise tendenziell länger als englische Wörter.
• Maßeinheiten: Verwenden Sie geeignete Maßeinheiten für verschiedene Regionen. Verwenden Sie beispielsweise Meter und Kilometer in den meisten Ländern, aber Fuß und Meilen in den Vereinigten Staaten und im Vereinigten Königreich. Ermöglichen Sie Benutzern die Auswahl ihrer bevorzugten Maßeinheiten.
• Datums- und Uhrzeitformate: Verwenden Sie geeignete Datums- und Uhrzeitformate für verschiedene Regionen. Verwenden Sie beispielsweise das Format JJJJ-MM-TT in einigen Ländern und das Format MM/TT/JJJJ in anderen.
• Währungen: Zeigen Sie Währungen im entsprechenden Format für verschiedene Regionen an. Verwenden Sie eine Bibliothek, um Währungsumrechnungen zu verarbeiten.
• Kulturelle Sensibilität: Achten Sie auf kulturelle Unterschiede und vermeiden Sie die Verwendung von Bildern, Symbolen oder Sprache, die für einige Kulturen anstößig sein können. Bestimmte Handgesten können beispielsweise in verschiedenen Kulturen unterschiedliche Bedeutungen haben.

WebXR-Entwicklungstools und -Ressourcen

Mehrere Tools und Ressourcen können Ihnen bei der WebXR-Entwicklung helfen:

• Three.js: Eine beliebte JavaScript-3D-Bibliothek zum Erstellen von WebGL-basierten Erlebnissen.
• Babylon.js: Eine weitere leistungsstarke JavaScript-3D-Engine mit Schwerpunkt auf WebXR-Unterstützung.
• A-Frame: Ein Web-Framework zum Erstellen von VR-Erlebnissen mit HTML.
• WebXR Emulator: Eine Browsererweiterung, mit der Sie WebXR-Erlebnisse testen können, ohne ein physisches VR- oder AR-Gerät zu benötigen.
• WebXR Device API Specification: Die offizielle WebXR-Spezifikation von W3C.
• Mozilla Mixed Reality Blog: Eine großartige Ressource, um mehr über WebXR und verwandte Technologien zu erfahren.

Fazit

Der WebXR Hit Test Manager ist ein leistungsstarkes Werkzeug zum Erstellen interaktiver und immersiver AR/VR-Erlebnisse. Wenn Sie die Konzepte des Ray-Castings und der Hit Test-API verstehen, können Sie überzeugende Anwendungen erstellen, mit denen Benutzer auf natürliche und intuitive Weise mit der virtuellen Welt interagieren können. Da sich die WebXR-Technologie weiterentwickelt, sind die Möglichkeiten zur Erstellung innovativer und ansprechender Erlebnisse endlos. Denken Sie daran, Ihren Code für die Leistung zu optimieren und die Internationalisierung zu berücksichtigen, wenn Sie für ein globales Publikum entwickeln. Nehmen Sie die Herausforderungen und Belohnungen des Aufbaus der nächsten Generation immersiver Web-Erlebnisse an.