De volgende dimensie, AR op het web

Auteur: Wiljan Slofstra

Virtual Reality (VR) en Augmented Reality (AR) zijn al een tijdje mogelijk met apps of met een speciale bril. Het web is daarin een tijdje achtergebleven, maar hebben nu ook hun oplossing. Verschillende besturingssystemen en browsers hebben hun eigen implementatie. Ik zal uitleggen hoe we een zo cross-browser mogelijke 3D en AR oplossing kunnen maken.

AR op iOS, Android en desktop

De belangrijkste platforms waar we mee te maken hebben bij AR zijn smartphones. Momenteel zijn Android en iOS de grootste. Naast smartphones willen we ook een oplossing voor desktop browsers. Niet in de vorm van AR, maar wel dat je het 3D model kan bekijken.

Op dit moment zijn er twee kampen in 3D models op het web.

Aan de iOS kant hebben we het USD formaat, dat in een samenwerking tussen Pixar en Apple is ontwikkeld. Dit formaat (.usdz) is ook wat in native iOS apps gebruikt wordt.

Aan de andere kant (Android en voor desktop) hebben het glTF formaat. glTF is een meer open formaat waardoor het ook geïmplementeerd is in open-source browsers. glTF kan niet native in desktop browsers worden uitgevoerd, daarvoor heeft Google de model-viewer ontwikkeld.

Het maken van een model

Er zijn verschillende software pakketten voor het werken met 3D models. We hebben Maxon's Cinema4D, Autodesk's Maya, Blender en vele anderen. Voor onze demo gebruiken we Blender. Blender heeft een standaard export functie naar glTF 2.0 en is bovendien gratis te gebruiken.

Laat ik vooropstellen dat ik nog heel veel te leren heb in Blender. Voor deze demo heb ik een heel minimalistisch model gemaakt van het gebouw waarin OrangeTalent zich huisvest. Speciaal voor de collega's die in corona tijd het kantoor al een tijdje niet gezien hebben.

Je kunt zelf gaan puzzelen met Blender om iets moois te maken. Mocht je daar nog geen behoefte aan hebben dan kun je ook mijn Blender model downloaden.

3D model van het OrangeTalent gebouw in Blender

Als je een model klaar hebt staan kun je deze exporteren in Blender.

Exporteren van model naar glTF, File > Export > glTF 2.0

Bij het exporteren heb je twee mogelijkheden: .glb of .gltf. Volgens de documentatie van onder andere de model-viewer hebben we een .gltf bestand nodig. Daarom kies je tijdens het exporteren voor het .gltf formaat.

Download het OrangeTalent gebouw .gltf bestand

Omzetten naar USDZ

Het .gltf bestand is wat je nodig hebt voor Android en desktop. Als je ook iOS wil ondersteunen heb je een .usdz bestand nodig.

Als je naar de screenshot van het exporteren hierboven kijkt, zie je ook een optie USDZ (.usdz). Dit is geen standaard exporteer optie van Blender, maar een plugin. Waar ik persoonlijk tegenaan liep, is dat de export niet altijd goed gaat. Als je met deze plugin een USDZ export maakt van het gebouw, dan zie je dat de 'vloerplaat' ineens gedraaid is. Ik heb te weinig ervaring met Blender en coördinaat systemen om hier een oplossing voor te vinden.

Mislukte USDZ Render van het OrangeTalent gebouw

De oplossing die ik heb gekozen is een stuk ingewikkelder, maar het zorgt er wel voor dat ik een goed werkend USDZ bestand krijg. Google heeft een converter gemaakt van glTF naar USD (usd_from_gltf). Als je alles geïnstalleerd hebt, kun je het volgende gebruiken:

usd_from_gltf <source.gltf> <destination.usdz>

Nu is de vraag, waarom vind ik dit een stuk ingewikkelder? Nou, het uitvoeren ervan is makkelijk, maar de installatie kreeg ik niet voor elkaar op macOS (binnen kort afzienbare tijd).

Daarom ben ik voor een oplossing gegaan met een Docker image. Het voordeel is dat het gewoon werkt en dat ik niet een hele hoop tools hoef te installeren. Als je Docker hebt kun je het zo uitvoeren:

docker run -it --rm -v $(PWD):/usr/app leon/usd-from-gltf:latest inputfile.glb outputfile.usdz

Als alles goed is gegaan krijg je een .usdz bestand. Als je werkt op een Mac, kun je het 3D model bekijken met Quick look in je Finder.

Voorbeeld van het gebouw in Quick look op macOS

Download het OrangeTalent gebouw .usdz formaat

Implementeren op het web

We hebben het al kort gehad over model-viewer. Model-viewer is een plugin van Google die het mogelijk maakt om .gltf bestanden te bekijken in de browser. De meeste simpele implementatie:

<!-- 1 -->
<model-viewer 
    class="ot-ar-building"
    alt="3D model van het OrangeTalent gebouw" 
    src="/media/web-ar/building.gltf" 
    ios-src="/media/web-ar/building-gl.usdz" 
    auto-rotate <!-- 2 -->
    camera-controls <!-- 3 -->
    ar <!-- 4 -->
/>

<!-- 5 -->
<script type="module" src="https://unpkg.com/@google/model-viewer@0.10.0/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer@0.10.0/dist/model-viewer-legacy.js"></script>
  1. We hebben een model-viewer element, dit element wordt vervangen door een render van je model.
  2. Er zijn een groot aantal opties beschikbaar op het model-viewer element, voor alle opties kun je kijken in de documentatie. auto-rotate zorgt ervoor dat ons model rustig ronddraait.
  3. camera-controls zorgt ervoor dat we kunnen slepen om het model van verschillende kanten te bekijken.
  4. ar zorgt ervoor dat het de AR modus beschikbaar wordt op apparaten die het ondersteunen.
  5. We laden de model-viewer bibliotheek van Google in. Als je een website/applicatie hebt waar je build tools zoals Webpack gebruikt, dan kun je model-viewer ook met NPM installeren en importeren in je applicatie.

Als je alles goed hebt ingesteld, krijg je zoiets:

p.s. Als je deze pagina opent op je telefoon komt er ook een knop bij om het model in augmented reality te bekijken.

AR in de Google zoekresultaten

Een 3D model kan een mooie toevoeging zijn op je site, maar ze worden nu ook getoond in de Google zoekresultaten. Zoek bijvoorbeeld eens naar 'haai' op je telefoon.

AR haai in Google zoekresultaten

Er zijn een aantal bedrijven die hun eigen AR modellen in de zoekresultaten hebben staan. Zover nu bekend moet daarvoor worden aangemeld bij het '3D and AR Early Adopters Program'. Hoogstwaarschijnlijk zal de model-viewer met een ar attribuut binnenkort automatisch worden opgepakt in Google.

Apple Quick Look Custom Actions

Als je specifiek voor iOS AR ontwikkeld, dan kun je ook gebruik maken van Custom Actions. Een Custom Action is een balk onderaan je AR ervaring. Je kunt bijvoorbeeld een bestel knop plaatsen, zodat mensen vanuit de AR modus direct kunnen bestellen.

Er zijn standaard opties voor Apple Pay die je kunt selecteren, daarvoor kan je Apple's documentatie lezen.

Een andere mogelijkheid zijn custom banners. Je kunt je eigen HTML en CSS banner maken, en vanuit je website kun je luisteren naar een klik op een knop.

Op een link kan je doormiddel van een hash aangeven welke banner gebruikt moet worden:

https://example.com/model.usdz#custom=https://example.com/custom/banner.html

Er is weinig informatie te vinden over hoe je een custom banner moet opmaken, maar we kunnen wel kijken naar Bang & Olufsen die hier gebruik van maakt. Als we op mobiel naar de Beosound 2 speaker gaan. Dan zien we een knop met de volgende HTML:

<a 
    href="https://beoecommercestoragelive.blob.core.windows.net/assets/3d-models-for-ios-ar/BeoSound_2.usdz#custom=https://beoecommercestoragelive.blob.core.windows.net/assets/3d-models-for-ios-ar/beosound_2-ql.html" 
    rel="ar"
>
    <!-- Afbeelding van de speaker -->
</a>

Je ziet een custom banner opgegeven na de #custom.

Je kunt de HTML ervan bekijken en je eigen implementatie maken.

Hoe nu verder?

Ik hoop een aardige indruk te hebben gegeven over de huidige staat van 3D en AR op het web, wat er mogelijk is en de uitdagingen die ermee gepaard gaan.

AR op web is mogelijk, maar heeft nog wel veel limieten. Zo is het bijvoorbeeld onmogelijk om iets op de muur te plaatsen. Alles gaat er nog vanuit dat dingen op de grond geplaatst worden. Daar zijn wel weer hacky oplossingen voor, maar nog geen nette oplossingen. Apple heeft de Reality Composer waar dit soort dingen mee mogelijk gemaakt kunnen worden, maar hoe doe je dat in glTF?

Alhoewel AR nog niet heel ver is, is het wel leuk om er mee te spelen. En kun je er gebruikers een leuke ervaring mee bieden.

OrangeTalent logo in AR

Ben je zelf al interessante doeleinden tegengekomen, of heb je zelf iets interessants gemaakt? Laat het ons weten!