Bei der Vorbereitung auf die Google I/O wollten wir die aufregenden Möglichkeiten von Augmented Reality (AR) im Web hervorheben. Chacmool ist eine lehrreiche Webdemo, die wir entwickelt haben, um zu zeigen, wie einfach webbasierte AR Nutzer bei der Interaktion mit AR unterstützt. Das Web macht AR praktisch und überall zugänglich.
Wir haben diese Demo jetzt für Chrome Canary auf ARCore-kompatiblen Android-Geräten mit Android O oder höher aktiviert. Außerdem müssen Sie ARCore installieren.
Diese Arbeit basiert auf einem neuen WebXR-Vorschlag (die WebXR Hit Test API), sodass sie unter dem Kennzeichen steht und in Canary bleiben soll, während wir den neuen API-Vorschlag mit anderen Mitgliedern der Immersive Web Community Group testen und optimieren. Für den Zugriff auf die Demo müssen Sie zwei Flags in chrome://flags:, #webxr und #webxr-hit-test aktivieren. Nachdem Sie beide aktiviert und Canary neu gestartet haben, können Sie sich die Chacmool-Demo ansehen.
Bei Chacmool AR dreht sich alles um Bildung. Dank der immersiven und interaktiven Natur von AR können Nutzer so etwas über antike Chacmool-Skulpturen lernen. Nutzer können eine lebensgroße Statue in ihrer Realität platzieren und sich bewegen, um die Skulptur aus verschiedenen Blickwinkeln und aus verschiedenen Entfernungen zu sehen. Die immersive Natur von AR ermöglicht es Nutzern, Inhalte genau wie im richtigen Leben zu erkunden, zu entdecken und mit ihnen zu spielen. Wenn wir ein Objekt im AR-Modus betrachten, anstatt es auf einem 2D-Flachbildschirm zu sehen, erhalten wir ein tiefgreifendes Verständnis dafür, was wir sehen, weil wir es mit einem sehr intuitiven Interaktionsmodell aus vielen verschiedenen Blickwinkeln und Entfernungen sehen können: um das Objekt herum zu gehen, sich physisch näher oder weiter weg zu bewegen. Außerdem werden Anmerkungen direkt auf der Skulptur platziert. Auf diese Weise können Nutzer direkt eine Verbindung herstellen, was im Text beschrieben ist und wo sich diese Merkmale auf der Skulptur befinden.
Die Erstellung dieser Demo dauerte etwa einen Monat. Dabei wurden einige der Komponenten aus der ersten webbasierten AR-Demo des WebXR-Teams, WebAR-Article, verwendet. Die Informationen zur Skulptur wurden auf der Google Arts & Culture-Seite bezogen. Das 3D-Modell wurde vom Google Arts & Culture-Partner CyArk zur Verfügung gestellt. Um das 3D-Modell für das Web vorzubereiten, wurde eine Kombination aus Meshlab und Mesh Mixer verwendet, um das Modell zu reparieren und das Mesh-Netzwerk zu dezimieren, um die Dateigröße zu verringern. Dann wurde Draco, eine Bibliothek zum Komprimieren und Dekomprimieren von geometrischen 3D-Mesh-Netzwerken und Punktwolken, verwendet, um die Dateigröße des Modells von 44,3 Megabyte auf nur 225 Kilobyte zu reduzieren. Schließlich wird ein Web Worker verwendet, um das Modell in einem Hintergrundthread zu laden, damit die Seite interaktiv bleibt, während das Modell geladen und dekomprimiert wird. Dieser Vorgang würde normalerweise Verzögerungen verursachen und das Scrollen auf der Seite verhindern.
Da wir für die Entwicklung auf Computern und für die Bereitstellung auf einem Smartphone entwickelt haben, sorgt der Einsatz der Chrome-Remote-Debugging-Tools zur Überprüfung der Umgebung für einen hervorragenden schnellen Iterationszyklus zwischen Codeänderungen. Außerdem gibt es in Chrome nützliche Entwicklertools für die Fehlerbehebung und Überprüfung der Leistung.
Best Practices für AR/VR-Erlebnisse
Die meisten Design- und Engineering-Richtlinien für die Entwicklung nativer AR-Erlebnisse gelten auch für die Entwicklung webbasierter AR-Erlebnisse. Wenn Sie mehr über allgemeine Best Practices erfahren möchten, sehen Sie sich die kürzlich veröffentlichten AR-Designrichtlinien an.
Bei der Entwicklung webbasierter AR-Erlebnisse empfiehlt es sich insbesondere, den gesamten Bildschirm zu verwenden (d.h., es wird in den Vollbildmodus gewechselt, ähnlich wie bei einem Videoplayer auf einem Mobilgerät), wenn Sie AR verwenden. So wird verhindert, dass Nutzer durch die Ansicht scrollen oder von anderen Elementen auf der Webseite abgelenkt werden. Der Übergang in AR sollte reibungslos und nahtlos sein und die Kameraansicht vor Beginn des AR-Onboardings zeigen (z.B. durch Zeichnen eines Fadenkreuzes). Bei webbasiertem AR ist es wichtig, dass Entwickler im Gegensatz zu nativen AR noch keinen Zugriff auf den Kamerarahmen, die Schätzung der Beleuchtung, Anker oder Flugzeuge haben. Daher ist es wichtig, dass Designschaffende und Entwickler diese Einschränkungen beim Entwerfen einer webbasierten AR-Umgebung berücksichtigen.
Außerdem ist es wichtig, dass die Leistung optimiert wird, um die bestmögliche Nutzererfahrung zu bieten, da die Geräte für die Nutzung im Web unterschiedlich sind. Halten Sie die Polyzahl niedrig, versuchen Sie, mit so wenig Licht wie möglich durchzukommen, rechnen Schatten nach Möglichkeit voraus und minimieren Sie Zeichenaufrufe. Für die Darstellung von Text in AR solltest du moderne (d.h. signierte Distanzfeld-basierte) Text-Renderingtechniken verwenden, damit der Text aus allen Entfernungen und Blickwinkeln klar und lesbar ist. Betrachten Sie beim Positionieren von Anmerkungen den Blick des Nutzers als weitere Eingabe und zeigen Sie Anmerkungen nur dann an, wenn sie relevant sind (d.h. auf Nähe basierende Anmerkungen, die eingeblendet werden, wenn der Nutzer auf einen Bereich von Interesse fokussiert ist).
Da diese Inhalte webbasiert sind, ist es wichtig, auch allgemeine Best Practices für das Webdesign anzuwenden. Achte darauf, dass die Website auf allen Geräten (Computer, Tablet, Smartphone, Headset usw.) eine gute Nutzererfahrung bietet. Progressive Verbesserung bedeutet auch, das Design für nicht-AR-fähige Geräte zu entwickeln (d. h. die Darstellung eines 3D-Modell-Viewers auf Nicht-AR-Geräten).
Falls Sie Interesse daran haben, eigene webbasierte AR-Erlebnisse zu entwickeln, finden Sie hier einen begleitenden Beitrag mit weiteren Informationen zu den ersten Schritten mit der Entwicklung von AR im Web. (Sie können sich auch den Quelltext der Chacmool-Demo ansehen.) Die WebXR Device API befindet sich derzeit in der Entwicklungsphase. Wir freuen uns über Feedback, damit wir dafür sorgen können, dass alle Arten von Anwendungen und Anwendungsfällen genutzt werden können. Besuchen Sie daher GitHub und beteiligen Sie sich an der Unterhaltung.