Augmented Reality für das Web

Joe Medley
Joe Medley

In Chrome 67 haben wir die WebXR Device API für Augmented Reality (AR) und Virtual Reality (VR) angekündigt, obwohl nur die VR-Funktionen aktiviert wurden. VR ist ein Erlebnis, das ausschließlich auf den Daten eines Geräts basiert. Mit AR hingegen lassen sich virtuelle Objekte in der realen Welt rendern. Um die Platzierung und das Tracking dieser Objekte zu ermöglichen, haben wir Chrome Canary um die WebXR Hit Test API erweitert. Mit dieser neuen Methode können durch immersiven Webcode Objekte in der realen Welt platziert werden.

Wo kann ich Google Wifi kaufen?

Diese API soll in naher Zukunft in Canary bleiben. Wir möchten eine langwierige Testphase, da dies ein ganz neuer API-Vorschlag ist und wir sicherstellen möchten, dass er robust und für Entwickler geeignet ist.

Zusätzlich zu Chrome Canary benötigen Sie Folgendes:

Damit können Sie direkt in die Demos eintauchen oder unser Codelab ausprobieren.

Nur das Web

Bei Google IO haben wir in diesem Jahr Augmented Reality mit einer frühen Version von Chrome demonstriert. Ich habe während dieser drei Tage sowohl Entwicklern als auch Nicht-Entwicklern wiederholt etwas gesagt, das ich gerne in meinen immersiven Webartikel aufgenommen hätte: „Es ist nur das Web.“

„Welche Chrome-Erweiterung muss ich installieren?“ „Es gibt keine Verlängerung. Es ist nur das Web.“

„Brauche ich einen speziellen Browser?“ „Es ist nur das Web.“

„Welche App muss ich installieren?“ „Es gibt keine spezielle App, sondern nur das Web.“

Vielleicht ist dies für Sie offensichtlich, da Sie dies auf einer Website lesen, die sich dem Web widmet. Wenn Sie Demos mit dieser neuen API erstellen, bereiten Sie sich auf diese Frage vor. Sie werden es oft bekommen.

Apropos E/A: Wenn Sie mehr über das immersive Web im Allgemeinen erfahren möchten, sehen Sie sich dieses Video an.

Wofür sind sie nützlich?

Augmented Reality wird eine wertvolle Ergänzung vieler Webseiten sein. So können Nutzer beispielsweise auf Bildungswebsites lernen und sich Objekte in ihrem Zuhause beim Einkaufen ansehen.

Unsere Demos veranschaulichen dies. Sie ermöglichen es Nutzenden, ein Objekt in Lebensgröße so zu platzieren, als wäre es in Wirklichkeit. Wenn das Bild einmal platziert ist, bleibt es auf der ausgewählten Oberfläche. Es wird in seiner Größe angezeigt, wenn es sich auf dieser Oberfläche befände würde. Der Nutzer kann sich um das Bild herum bewegen und es näher oder weiter von ihr entfernen. Betrachter erhalten so ein tieferes Verständnis des Objekts als mit einem zweidimensionalen Bild.

Wenn Sie nicht sicher sind, was ich damit meine, wird es Ihnen klar, wenn Sie die Demos verwenden. Wenn du kein Gerät hast, auf dem die Demo ausgeführt werden kann, klicke auf den Videolink oben in diesem Artikel.

Eine Sache, die in Demo und Video nicht gezeigt wird, ist die Art und Weise, wie AR die Größe eines echten Objekts vermitteln kann. Das folgende Video zeigt ein von uns entwickeltes Lehrvideo namens Chacmool. Diese Demo wird in einem Begleitartikel im Detail beschrieben. Das Wichtigste bei dieser Diskussion ist, dass Sie, wenn Sie die Chacmool-Statue in Augmented Reality platzieren, ihre Größe so sehen, als befände sie sich tatsächlich im Raum mit Ihnen.

Das Chacmool-Beispiel ist ein pädagogischer Zweck, kann aber genauso leicht kommerziell genutzt werden. Stellen Sie sich einen Onlineshop für Möbel vor, auf dem Sie eine Couch in Ihrem Wohnzimmer platzieren können. Die AR-App teilt Ihnen mit, ob das Sofa in Ihre Umgebung passt und wie es neben Ihren anderen Möbeln aussehen wird.

Ray-Casts, Treffertests und Fadenkreuze

Ein wichtiges Problem bei der Implementierung von Augmented Reality ist die Platzierung von Objekten in einer realen Ansicht. Die Methode hierfür wird als Raycasting bezeichnet. Beim Ray-Streamen wird der Schnittpunkt zwischen dem Zeigerstrahl und einer Oberfläche in der realen Welt berechnet. Dieser Schnittpunkt wird als Treffer bezeichnet. Mit einem Treffertest wird ermittelt, ob ein Treffer stattgefunden hat.

Dies ist ein guter Zeitpunkt, um das neue Codebeispiel in Chrome Canary auszuprobieren. Bevor Sie etwas unternehmen, sollten Sie prüfen, ob die richtigen Flags aktiviert sind. Laden Sie nun das Beispiel und klicken Sie auf "AR starten".

Beachten Sie einige Dinge. Erstens zeigt der Geschwindigkeitsmesser, den Sie vielleicht aus den anderen immersiven Beispielen erkennen, 30 Bilder pro Sekunde statt 60 Bildern pro Sekunde. Dies ist die Geschwindigkeit, mit der die Webseite Bilder von der Kamera empfängt.

AR wird mit 30 Bildern pro Sekunde ausgeführt.

Demo des AR-Treffertests

Außerdem sollten Sie auf das Bild der Sonnenblume achten. Es bewegt sich, wenn Sie sich bewegen, und rastet an Oberflächen wie Böden und Tischplatten an. Wenn du auf den Bildschirm tippst, wird eine Sonnenblume auf einer Oberfläche platziert und eine neue Sonnenblume bewegt sich mit deinem Gerät.

Das Bild, das sich mit Ihrem Gerät bewegt und versucht, sich an Oberflächen zu fixieren, wird als Streckenkreuz bezeichnet. Ein Fadenkreuz ist ein temporäres Bild, mit dem ein Objekt in Augmented Reality platziert werden kann. In dieser Demo ist das Retikel eine Kopie des zu platzierenden Bildes. Das muss aber nicht so sein. In der Chacmool-Demo ist es beispielsweise ein rechteckiger Kasten, der ungefähr die gleiche Form wie die Basis des platzierten Objekts hat.

Zum Code

Die Chacmool-Demo zeigt, wie AR in einer Produktions-App aussehen kann. Glücklicherweise gibt es im WebXR-Beispiel-Repository eine viel einfachere Demo. Mein Beispielcode stammt aus der AR Hit Test-Demo in diesem Repository. Zur Info: Ich möchte Codebeispiele vereinfachen, damit Sie den Sachverhalt besser verstehen.

Die Grundlagen zum Starten einer AR-Sitzung und zum Ausführen einer Renderingschleife sind für AR und VR identisch. Falls Sie mit diesem nicht vertraut sind, können Sie meinen vorherigen Artikel lesen. Genauer gesagt sieht das Starten und Ausführen einer AR-Sitzung fast genauso aus wie das Eingehen in eine VR-Magische Fenstersitzung. Wie bei einem magischen Fenster muss der Sitzungstyp nicht-immersiv sein und der Frame des Referenztyps muss 'eye-level' sein.

Die neue API

Jetzt zeige ich Ihnen, wie Sie die neue API verwenden. Denken Sie daran, dass das Fadenkreuz in AR versucht, eine Oberfläche zu finden, bevor ein Objekt platziert wird. Dazu wird ein Treffertest durchgeführt. Rufen Sie XRSession.requestHitTest() auf, um einen Treffertest durchzuführen. Sie sieht so aus:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

Die drei Argumente dieser Methode stellen einen Strahlenstrich dar. Der Strahlenstrich wird durch zwei Punkte auf dem Strahl (origin und direction) definiert, aus denen diese Punkte berechnet werden (frameOfReference). Der Ursprung und die Richtung sind beide 3D-Vektoren. Unabhängig davon, welchen Wert Sie einreichen, werden sie auf eine Länge von 1 normalisiert (umgerechnet).

Fadenkreuz bewegen

Wenn Sie Ihr Gerät bewegen, muss sich das Fadenkreuz mit ihm bewegen, da es versucht, einen Ort zu finden, an dem ein Objekt platziert werden kann. Das bedeutet, dass das Fadenkreuz in jedem Frame neu gezeichnet werden muss.

Beginnen Sie mit dem requestAnimationFrame()-Callback. Wie bei VR brauchen Sie eine Sitzung und eine Pose.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Sobald du die Übung und die Pose hast, stelle fest, wohin der Strahl wirft. Im Beispielcode wird die Mathematik-Bibliothek der gl-Matrix verwendet. Die gl-Matrix ist jedoch keine Voraussetzung. Wichtig ist, dass Sie wissen, was damit berechnet wird, und dass es auf der Position des Geräts basiert. Rufen Sie die Geräteposition aus XRPose.poseModalMatrix ab. Rufen Sie mit dem Raycast in der Hand requestHitTest() auf.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Auch wenn dies im Treffertestbeispiel nicht so offensichtlich ist, müssen Sie dennoch eine Schleife durch die Ansichten ausführen, um die Szene zu zeichnen. Zum Zeichnen werden WebGL APIs verwendet. Das können Sie tun, wenn Sie sehr ehrgeizig sind. Wir empfehlen jedoch die Verwendung eines Frameworks. Für die immersiven Webbeispiele wurde ein speziell für die Demos erstelltes Tool Cottontail verwendet und Three.js unterstützt WebXR seit Mai.

Objekt platzieren

Wenn der Nutzer auf den Bildschirm tippt, wird ein Objekt im AR-Modus platziert. Dazu verwenden Sie das Ereignis select. Wichtig bei diesem Schritt ist es, zu wissen, wo es am besten platziert werden muss. Da durch das bewegliche Fadenkreuz ständig Treffertests erzeugt werden, zeichnen Sie ein Objekt am einfachsten an der Position des Retikels beim letzten Treffertest. Wenn Sie einen berechtigten Grund haben, kein Fadenkreuz anzuzeigen, können Sie requestHitTest() im ausgewählten Ereignis wie im Beispiel gezeigt aufrufen.

Fazit

Dafür gehen Sie am besten den Beispielcode durch oder testen das Codelab. Ich hoffe, dass ich Ihnen mit diesem Hintergrund einige Informationen gegeben habe, um beides zu verstehen.

Wir sind mit der Erstellung immersiver Web-APIs noch nicht fertig. Neue Artikel werden hier veröffentlicht, während wir Fortschritte machen.