In Chrome 67 haben wir die WebXR Device API für Augmented Reality (AR) und Virtual Reality (VR) angekündigt. Allerdings waren nur die VR-Funktionen aktiviert. VR ist ein Erlebnis, das ausschließlich auf der Hardware eines Geräts basiert. Mit AR hingegen können Sie virtuelle Objekte in der realen Welt darstellen. Um das Platzieren und Tracking dieser Objekte zu ermöglichen, haben wir Chrome Canary vor Kurzem die WebXR Hit Test API hinzugefügt. Diese neue Methode hilft, mit immersivem Webcode Objekte in der realen Welt zu platzieren.
Wo kann ich Google Wifi kaufen?
Diese API wird vorerst in Canary verfügbar 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:
- Ein kompatibles Smartphone mit Android O oder höher
- ARCore installieren
- Zwei Chrome-Flags (chrome://flags): WebXRDevice API (#webxr) und WebXR-Treffertest (#webxr-hit-test)
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 Internet.“
„Brauche ich einen speziellen Browser?“ „Das ist nur das Internet.“
„Welche App muss ich installieren?“ „Es gibt keine spezielle App. Es ist nur das Web.“
Das ist Ihnen vielleicht klar, da Sie diesen Artikel auf einer Website lesen, die sich dem Web widmet. Wenn Sie mit dieser neuen API Demos erstellen, sollten Sie sich auf diese Frage vorbereiten. Sie werden es oft hören.
Wenn Sie mehr über das immersive Web im Allgemeinen erfahren möchten, wo es steht und wohin es geht, sehen Sie sich dieses Video an.
Wozu ist sie 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.
Unsere Demos veranschaulichen dies. So können Nutzer ein Objekt in Lebensgröße platzieren, als wäre es real. 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 AR die Größe eines realen Objekts vermitteln kann. Das Video zeigt eine Demo, die wir unter dem Namen Chacmool erstellt haben. In einem begleitenden Artikel wird diese Demo ausführlich beschrieben. Für diese Diskussion ist es wichtig, dass Sie die Chacmool-Statue in Augmented Reality so sehen, als wäre sie tatsächlich 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.
Raycasts, Treffertests und Absehen
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: Der Geschwindigkeitsmesser, den Sie vielleicht aus den anderen immersiven Beispielen kennen, zeigt 30 Frames pro Sekunde an, statt 60. Dies ist die Rate, mit der die Webseite Bilder von der Kamera empfängt.
Die AR-Treffertest-Demo
Außerdem sollten Sie das Bild der Sonnenblume bemerken. 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 Ihrem Gerät bewegt und versucht, sich an Oberflächen zu fixieren, wird als Abstandraster 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, der ungefähr die gleiche Form wie die Basis des platzierten Objekts hat.
Der Code
Die Chacmool-Demo zeigt, wie AR in einer Produktions-App aussehen könnte. Glücklicherweise gibt es im WebXR-Samples-Repository eine viel einfachere Demo. Mein Beispielcode stammt aus der Demo AR-Treffertest in diesem Repository. Zur Information: Ich vereinfache Codebeispiele gerne, damit Sie besser nachvollziehen können, was 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. In diesem Artikel habe ich bereits darüber geschrieben. Genauer gesagt ähnelt das Starten und Ausführen einer AR-Sitzung fast genau dem Starten einer VR-Sitzung mit dem magischen Fenster.
Wie bei einem Magic Window muss der Sitzungstyp nicht immersiv sein und der Frame vom Referenztyp muss '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 Strahl wird durch zwei Punkte auf dem Strahl (origin und direction) und den Ursprung dieser Punkte (frameOfReference) definiert. Ursprung und Richtung sind 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 die Verwendung eines Frameworks. 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. Wichtig ist dabei, zu wissen, wo Sie sie platzieren.
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
Am besten gehen Sie den Beispielcode durch oder testen das Codelab. Ich hoffe, ich konnte Ihnen genügend Hintergrundinformationen geben, damit Sie beides nachvollziehen können.
Wir sind noch lange nicht fertig mit der Entwicklung von immersiven Web-APIs. Wir veröffentlichen hier nach und nach neue Artikel.