Augmented Reality für das Web

Joe Medley
Joe Medley
GitHub

In Chrome 67 haben wir die WebXR Device API sowohl für Augmented Reality (AR) als auch für Virtual Reality (VR) angekündigt, wobei jedoch nur die VR-Funktionen aktiviert wurden. VR ist ein Erlebnis, das ausschließlich auf einem Computer basiert. Mit AR hingegen können Sie virtuelle Objekte in der realen Welt rendern. Um die Platzierung und das Tracking dieser Objekte zu ermöglichen, haben wir gerade die WebXR Hit Test API zu Chrome Canary hinzugefügt. Mit dieser neuen Methode können Objekte mit immersivem Webcode in der realen Welt platziert werden.

Wo kann ich Google Wifi kaufen?

Diese API soll in naher Zukunft auch in Canary bleiben. Wir möchten einen längeren Testzeitraum, da es sich um einen sehr neuen API-Vorschlag handelt und wir sicherstellen möchten, dass er sowohl robust als auch für Entwickler geeignet ist.

Neben Chrome Canary benötigen Sie Folgendes:

Damit können Sie die Demos ausprobieren oder unser Codelab testen.

Es ist nur das Web

Auf der diesjährigen Google IO haben wir Augmented Reality mit einer frühen Version von Chrome demonstriert. In diesen drei Tagen habe ich sowohl Entwicklern als auch Nicht-Entwicklern wiederholt etwas gesagt, das ich in meinen Artikel über immersives Web hätte aufnehmen sollen: „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?“ „Das ist nur das Internet.“

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

Das ist Ihnen vielleicht klar, da Sie diesen Artikel auf einer Website lesen, die sich dem Web widmet. Wenn Sie Demonstrationen mit dieser neuen API erstellen, bereiten Sie sich auf diese Frage vor. Sie werden es ganz schön bekommen.

Wenn Sie mehr über das immersive Web im Allgemeinen erfahren möchten, wo es steht und wohin es sich entwickelt, sehen Sie sich dieses Video an.

Wozu ist es nützlich?

Augmented Reality wird für viele bestehende Webseiten eine wertvolle Ergänzung sein. So können Nutzer beispielsweise auf Bildungswebsites lernen und potenzielle Käufer sich beim Einkaufen Objekte in ihrem Zuhause vorstellen.

Das wird in unseren Demos veranschaulicht. Sie ermöglichen es Nutzenden, ein Objekt wie in der Realität darzustellen. Nach dem Platzieren bleibt das Bild auf der ausgewählten Oberfläche, wird in der Größe angezeigt, die es hätte, wenn sich das tatsächliche Objekt auf dieser Oberfläche befände, und der Nutzer kann sich um das Bild herum bewegen und sich ihm nähern oder von ihm entfernen. So erhalten die Betrachter ein besseres Verständnis des Objekts als mit einem zweidimensionalen Bild.

Wenn Sie sich nicht sicher sind, was ich damit meine, wird es bei der Verwendung der Demos klar. Wenn Sie kein Gerät haben, auf dem die Demo ausgeführt werden kann, klicken Sie oben in diesem Artikel auf den Videolink.

In der Demo und im Video wird nicht gezeigt, wie mit AR die Größe eines echten Objekts vermittelt werden kann. Dieses Video zeigt eine von uns erstellte pädagogische Demo namens Chacmool. In einem begleitenden Artikel wird diese Demo ausführlich beschrieben. Das Wichtigste bei dieser Diskussion ist, dass Sie die Chacmool-Statue in Augmented Reality platzieren, sodass Sie sehen, wie groß sie ist, als befände sie sich tatsächlich mit Ihnen im Raum.

Das Chacmool-Beispiel ist lehrreich, könnte aber genauso gut kommerziell sein. Stellen Sie sich eine Möbelkaufseite vor, auf der Sie ein Sofa in Ihrem Wohnzimmer platzieren können. Die AR-App zeigt Ihnen, ob das Sofa in Ihren Raum 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 besteht darin, Objekte in eine reale Ansicht einzufügen. Diese Methode wird als Raycasting bezeichnet. Beim Raytracing wird die Schnittmenge zwischen dem Cursorstrahl und einer Oberfläche in der realen Welt berechnet. Diese Übereinstimmung wird als Treffer bezeichnet. Die Prüfung, ob ein Treffer vorliegt, wird als Treffertest bezeichnet.

Jetzt ist ein guter Zeitpunkt, das neue Codebeispiel in Chrome Canary auszuprobieren. Prüfen Sie zuerst, ob die richtigen Flags aktiviert sind. Laden Sie jetzt das Sample und klicken Sie auf „AR starten“.

Beachten Sie Folgendes: Erstens zeigt der Geschwindigkeitsmesser, den Sie aus den anderen immersiven Beispielen kennen, 30 statt 60 Bilder pro Sekunde an. Dies ist die Rate, mit der die Webseite Bilder von der Kamera empfängt.

AR läuft mit 30 Bildern pro Sekunde.

Die AR-Treffertest-Demo

Außerdem sollten Sie auf das Bild der Sonnenblumen achten. Sie bewegt sich mit Ihnen und haftet an Oberflächen wie Böden und Tischplatten. Wenn Sie auf das Display tippen, wird eine Sonnenblume auf einer Oberfläche platziert und eine neue Sonnenblume bewegt sich mit Ihrem Gerät.

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

Der Code

Die Chacmool-Demo zeigt, wie AR in einer Produktions-App aussehen könnte. Glücklicherweise gibt es eine wesentlich einfachere Demo im WebXR-Beispiel-Repository. Mein Beispielcode stammt aus der Demo AR-Treffertest in diesem Repository. Zur Information: Ich möchte Codebeispiele vereinfachen, damit Sie besser verstehen, was hier passiert.

Die Grundlagen für den Einstieg in eine AR-Sitzung und das Ausführen eines Render-Loops sind für AR und VR identisch. Weitere Informationen finden Sie in meinem vorherigen Artikel. Das Aufrufen und Ausführen einer AR-Sitzung ähnelt fast genau dem Aufrufen einer VR Magic Window-Sitzung. Wie bei einem magischen Fenster darf der Sitzungstyp nicht komplex und der Frame des Referenztyps 'eye-level' sein.

Die neue API

Jetzt zeige ich Ihnen, wie Sie die neue API verwenden. Wie Sie wissen, versucht das Fadenkreuz in AR, eine Oberfläche zu finden, bevor ein Objekt platziert wird. Dies geschieht mit einem Treffertest. Wenn Sie einen Treffertest durchführen möchten, rufen Sie XRSession.requestHitTest() auf. Sie sieht so aus:

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

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

Fadenkreuz bewegen

Wenn Sie Ihr Gerät bewegen, muss sich das Fadenkreuz mitbewegen, da versucht wird, 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 der VR-Technologie benötigen 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.
  }
}

Nachdem Sie die Sitzung und die Pose festgelegt haben, bestimmen Sie, wo der Strahl geworfen wird. Im Beispielcode wird die gl-matrix-Mathematika-Bibliothek verwendet. gl-matrix ist jedoch keine Voraussetzung. Wichtig ist, zu wissen, was Sie damit berechnen und dass es auf der Position des Geräts basiert. Geräteposition von XRPose.poseModalMatrix abrufen Rufen Sie requestHitTest() an, während Sie den Strahlenwurf in der Hand halten.

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 es im Beispiel für den Hit-Test nicht so offensichtlich ist, müssen Sie trotzdem die Ansichten durchlaufen, um die Szene zu zeichnen. Das Zeichnen erfolgt mit WebGL-APIs. Das ist möglich, wenn Sie wirklich ehrgeizig sind. Wir empfehlen jedoch, ein Framework zu verwenden. Für die immersiven Web-Samples wird eine speziell für die Demos erstellte Version namens Cottontail verwendet. Three.js unterstützt WebXR seit Mai.

Objekt platzieren

Ein Objekt wird in AR platziert, wenn der Nutzer auf den Bildschirm tippt. Verwenden Sie dazu das Ereignis select. Bei diesem Schritt ist es wichtig zu wissen, wo es am besten platziert werden soll. Da das sich bewegende Fadenkreuz Ihnen eine konstante Quelle für Kollisionstests bietet, ist die einfachste Methode zum Platzieren eines Objekts, es an der Position des Fadenkreuzes nach dem letzten Kollisionstest zu zeichnen. Wenn Sie beispielsweise aus einem triftigen Grund kein Fadenkreuz anzeigen möchten, können Sie requestHitTest() im ausgewählten Ereignis aufrufen, wie im Beispiel gezeigt.

Fazit

Sehen Sie sich am besten den Beispielcode an oder probieren Sie das Codelab aus. Ich hoffe, ich konnte Ihnen ausreichend Hintergrundinformationen geben, damit Sie beides verstehen können.

Wir sind noch lange nicht fertig mit der Entwicklung von immersiven Web-APIs. Im Laufe der Zeit werden wir hier neue Artikel veröffentlichen.