Bei der Vorbereitung auf die Google I/O wollten wir die spannenden Möglichkeiten von Augmented Reality (AR) im Web hervorheben. Chacmool ist eine Web-Demo, mit der wir zeigen möchten, wie einfach webbasierte AR-Technologien Nutzern die Interaktion mit AR-Inhalten ermöglichen können. Das Web macht AR praktisch und überall zugänglich.
Wir haben diese Demo jetzt in Chrome Canary auf ARCore-kompatiblen Android-Geräten mit Android O oder höher aktiviert. Außerdem müssen Sie ARCore installieren.
Diese Funktion basiert auf einem neuen WebXR-Vorschlag (der WebXR Hit Test API). Sie ist daher als experimentell gekennzeichnet und soll in Canary bleiben, während wir den neuen API-Vorschlag mit anderen Mitgliedern der Immersive Web Community Group testen und optimieren. Um auf die Demo zugreifen zu können, müssen Sie in chrome://flags: zwei Flags aktivieren: #webxr und #webxr-hit-test. Nachdem Sie beide aktiviert und Canary neu gestartet haben, können Sie sich die Chacmool-Demo ansehen.
Das AR-Erlebnis „Chacmool“ dreht sich um Bildung. Dabei wird die immersive und interaktive Natur von AR genutzt, um Nutzern das Lernen über antike Chacmool-Skulpturen zu erleichtern. Nutzer können eine lebensgroße Statue in ihrer Realität platzieren und sich umsehen, um die Skulptur aus verschiedenen Blickwinkeln und Entfernungen zu sehen. Dank der Immersion von AR können Nutzer Inhalte frei erkunden, entdecken und damit spielen, genau wie in der realen Welt. Wenn wir ein Objekt in AR sehen, anstatt es auf einem flachen 2D-Bildschirm zu sehen, können wir uns ein genaues Bild davon machen, was wir sehen, da wir es mit einem sehr intuitiven Interaktionsmodell aus vielen verschiedenen Blickwinkeln und Entfernungen sehen können: indem wir um das Objekt herumgehen und uns ihm nähern oder von ihm entfernen. Außerdem sind in dieser Version Anmerkungen direkt auf der Skulptur platziert. So können Nutzer direkt erkennen, was im Text beschrieben wird und wo sich diese Merkmale auf der Skulptur befinden.
Diese Demo wurde in etwa einem Monat erstellt und nutzt einige der Komponenten aus der ersten webbasierten AR-Demo des WebXR-Teams, WebAR-Article. Die Informationen zur Skulptur stammen von der Google Arts & Culture-Seite. Das 3D‑Modell wurde von CyArk, einem Partner von Google Arts & Culture, 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 zu decimaten, um die Dateigröße zu verringern. Anschließend wurde Draco, eine Bibliothek zum Komprimieren und Dekomprimieren von 3D-geometrischen Meshes und Punktwolken, verwendet, um die Dateigröße des Modells von 44,3 Megabyte auf nur 225 Kilobyte zu reduzieren. Schließlich wird ein Webworker verwendet, um das Modell in einem Hintergrund-Thread zu laden, damit die Seite interaktiv bleibt, während das Modell geladen und dekomprimiert wird. Dieser Vorgang würde normalerweise zu Rucklern führen und verhindern, dass die Seite gescrollt werden kann.
Da wir die App auf dem Computer entwickelt und auf einem Smartphone bereitgestellt haben, konnten wir mit den Ferndebugging-Tools von Chrome die App schnell iterieren, wenn wir Änderungen am Code vorgenommen haben. Außerdem gibt es in Chrome hervorragende Entwicklertools zum Debuggen und zur Leistungsprüfung.
Best Practices für AR-/VR-Apps
Die meisten Design- und Entwicklungsrichtlinien für native AR-Erlebnisse gelten auch für webbasierte AR-Erlebnisse. Weitere allgemeine Best Practices finden Sie in unseren kürzlich veröffentlichten AR-Designrichtlinien.
Insbesondere bei der Entwicklung webbasierter AR-Inhalte sollten Sie den gesamten Bildschirm verwenden, also Vollbildmodus aktivieren, ähnlich wie bei Videoplayern auf Mobilgeräten. So wird verhindert, dass Nutzer durch andere Elemente auf der Webseite abgelenkt werden oder durch das Scrollen die Ansicht verlassen. Der Übergang zu AR sollte reibungslos und nahtlos erfolgen. Die Kameraansicht sollte angezeigt werden, bevor das AR-Onboarding beginnt (z. B. ein Fadenkreuz zeichnen). Bei webbasierter AR haben Entwickler im Gegensatz zu nativer AR (noch) keinen Zugriff auf den Kameraframe, die Beleuchtungsschätzung, Anker oder Ebenen. Daher sollten Designer und Entwickler diese Einschränkungen beim Entwerfen einer webbasierten AR-Umgebung berücksichtigen.
Aufgrund der Vielzahl der für die Webnutzung verwendeten Geräte ist es außerdem wichtig, die Leistung zu optimieren, um die Nutzerfreundlichkeit zu verbessern. Daher: Behalten Sie die Anzahl der Polygone niedrig, versuchen Sie, mit möglichst wenigen Lichtern auszukommen, berechnen Sie Schatten nach Möglichkeit vorab und minimieren Sie die Draw-Aufrufe. Verwenden Sie beim Darstellen von Text in AR moderne (d.h. auf signierten Entfernungsfeldern basierende) Text-Rendering-Techniken, damit der Text aus allen Entfernungen und Blickwinkeln klar und lesbar ist. Berücksichtigen Sie beim Platzieren von Anmerkungen den Blick des Nutzers als weiteren Eingabefaktor und zeigen Sie Anmerkungen nur dann an, wenn sie relevant sind. Das gilt beispielsweise für anmerkungen, die aufgrund der Nähe zum Nutzer angezeigt werden, wenn er seinen Fokus auf einen bestimmten Bereich richtet.
Da diese Inhalte webbasiert sind, sollten Sie außerdem allgemeine Best Practices für das Web anwenden. Die Website muss auf allen Geräten (Computer, Tablet, Smartphone, Headset usw.) gut funktionieren. Die Unterstützung von progressiver Verbesserung bedeutet auch, dass die Website für Geräte ohne AR-Funktionen entwickelt werden muss (z. B. eine 3D‑Modellansicht auf Geräten ohne AR-Funktionen anzeigen).
Wenn Sie eigene webbasierte AR-Inhalte entwickeln möchten, finden Sie in diesem Artikel weitere Informationen dazu, wie Sie damit beginnen können. (Sie können sich auch die Quelle der Chamcoool-Demo ansehen.) Die WebXR Device API befindet sich in aktiver Entwicklung. Wir würden uns über Feedback freuen, damit wir dafür sorgen können, dass sie alle Arten von Anwendungen und Anwendungsfälle unterstützt. Besuchen Sie uns also auf GitHub und nehmen Sie an der Unterhaltung teil.