Bij de voorbereiding op Google I/O wilden we de opwindende mogelijkheden van augmented reality (AR) op internet onder de aandacht brengen. Chacmool is een educatieve webervaringsdemo die we hebben gebouwd om te laten zien hoe gemakkelijk webgebaseerde AR gebruikers kan helpen om AR-ervaringen te ervaren. Het internet maakt AR handig en overal toegankelijk.
We hebben deze demo nu ingeschakeld op Chrome Canary op ARCore-compatibele Android-apparaten met Android O of hoger. U moet ook ARCore installeren . Dit werk is gebaseerd op een nieuw WebXR-voorstel (de WebXR Hit Test API ), dus het staat onder een vlag en is bedoeld om in Canary te blijven terwijl we het nieuwe API-voorstel testen en verfijnen met andere leden van de Immersive Web Community Group. Om toegang te krijgen tot de demo moet u in feite twee vlaggen inschakelen in chrome://flags: #webxr en #webxr-hit-test . Zodra je deze beide hebt ingeschakeld en Canary opnieuw hebt opgestart, kun je de Chacmool- demo bekijken.
De Chacmool AR-ervaring is gericht op educatie, waarbij gebruik wordt gemaakt van het meeslepende en interactieve karakter van AR om gebruikers te helpen meer te leren over oude Chacmool-sculpturen. Gebruikers kunnen een levensgroot beeld in hun realiteit plaatsen en zich verplaatsen om het beeld vanuit verschillende hoeken en afstanden te bekijken. Dankzij het meeslepende karakter van AR kunnen gebruikers vrijelijk inhoud verkennen, ontdekken en ermee spelen, net zoals ze dat in de echte wereld kunnen. Wanneer we een object in AR bekijken, in tegenstelling tot het zien op een plat 2D-scherm, kunnen we een diep begrip krijgen van waar we naar kijken, omdat we het vanuit veel verschillende hoeken en afstanden kunnen zien met behulp van een zeer intuïtief interactiemodel: rond het object lopen en fysiek dichterbij of verder weg komen. Ook worden er bij deze ervaring annotaties rechtstreeks op het beeld geplaatst. Hierdoor kunnen gebruikers direct verbinden wat er in de tekst wordt beschreven en waar die kenmerken zich op het beeld bevinden.
Deze demo werd in de loop van ongeveer een maand gebouwd, waarbij gebruik werd gemaakt van enkele componenten uit de eerste webgebaseerde AR-demo van het WebXR-team, WebAR-Artikel . Informatie over het beeldhouwwerk is afkomstig van de Google Arts & Culture- pagina en het 3D-model is geleverd door de partner van Google Arts & Culture, CyArk . Om het 3D-model klaar te maken voor het web, werd een combinatie van Meshlab en Mesh Mixer gebruikt om het model te repareren en de mesh te decimeren om de bestandsgrootte te verkleinen. Vervolgens werd Draco , een bibliotheek voor het comprimeren en decomprimeren van geometrische 3D-mazen en puntenwolken, gebruikt om de bestandsgrootte van het model terug te brengen van 44,3 megabytes naar slechts 225 kilobytes. Ten slotte wordt een webwerker gebruikt om het model op een achtergrondthread te laden, zodat de pagina interactief blijft terwijl het model wordt geladen en gedecomprimeerd, een bewerking die normaal gesproken jank veroorzaakt en voorkomt dat de pagina wordt gescrolld.
We kunnen niet genoeg benadrukken dat, sinds we ons ontwikkelden op de desktop en implementeerden op een telefoon, het gebruik van Chrome's tools voor foutopsporing op afstand om de ervaring te helpen inspecteren, een geweldige snelle iteratiecyclus tussen codewijzigingen creëert, en dat er geweldige ontwikkelaarstools in Chrome zijn voor het debuggen van fouten. en het controleren van de prestaties.
Best practices voor AR/VR-ervaringen
De meeste ontwerp- en technische richtlijnen voor het ontwerpen voor native AR-ervaringen zijn van toepassing op het maken van webgebaseerde AR-ervaringen. Als je meer wilt weten over algemene best practices, bekijk dan de AR-ontwerprichtlijnen die we onlangs hebben uitgebracht.
Met name bij het ontwerpen van webgebaseerde AR-ervaringen kun je het beste het volledige scherm gebruiken (dwz op volledig scherm gaan, vergelijkbaar met hoe videospelers op volledig scherm op mobiel werken) wanneer je AR gebruikt. Dit voorkomt dat gebruikers door de weergave scrollen of worden afgeleid door andere elementen op de webpagina. De overgang naar AR moet soepel en naadloos verlopen, waarbij het camerabeeld moet worden getoond voordat de AR-onboarding wordt ingevoerd (bijvoorbeeld het tekenen van een dradenkruis). Wat belangrijk is om op te merken over webgebaseerde AR is dat ontwikkelaars, in tegenstelling tot native, (nog) geen toegang hebben tot het cameraframe, de belichtingsschatting, ankers of vlakken. Het is dus belangrijk dat ontwerpers en ontwikkelaars deze beperkingen in gedachten houden bij het ontwerpen een webgebaseerde AR-ervaring.
Vanwege de verscheidenheid aan apparaten die voor webervaringen worden gebruikt, is het bovendien belangrijk dat de prestaties worden geoptimaliseerd om de beste gebruikerservaring te creëren. Dus: houd het polyaantal laag, probeer met zo min mogelijk licht weg te komen, bereken schaduwen indien mogelijk vooraf en minimaliseer draw-calls. Gebruik bij het weergeven van tekst in AR moderne (dwz op afstandsveld gebaseerde) tekstweergavetechnieken om ervoor te zorgen dat de tekst duidelijk en leesbaar is vanuit alle afstanden en hoeken. Beschouw bij het plaatsen van annotaties de blik van de gebruiker als een andere input en toon annotaties alleen als ze relevant zijn (dwz op nabijheid gebaseerde annotaties die verschijnen wanneer een gebruiker zich op een interessegebied concentreert).
Omdat deze inhoud webgebaseerd is, is het ten slotte belangrijk om ook de algemene beste ontwerppraktijken voor internet toe te passen. Zorg ervoor dat de site een goede ervaring biedt op alle apparaten (desktop, tablet, mobiel, headset, enz.) - het ondersteunen van progressieve verbeteringen betekent ook ontwerpen voor apparaten die niet over AR beschikken (dwz een 3D-modelviewer weergeven op niet-AR-apparaten).
Als u geïnteresseerd bent in het ontwikkelen van uw eigen webgebaseerde AR-ervaringen, hebben we hier een begeleidend bericht met meer details over hoe u zelf aan de slag kunt gaan met het bouwen van AR op internet. (Je kunt ook de broncode van de Chacmool-demo bekijken.) De WebXR Device API is actief in ontwikkeling en we willen graag feedback, zodat we ervoor kunnen zorgen dat alle soorten applicaties en gebruiksscenario's mogelijk zijn. Ga dus naar GitHub en doe mee het gesprek !