De brug tussen augmented reality en het web

13 september 2018 Inzichten / De brug tussen augmented reality en het web

Tech giganten zoals Microsoft, Apple en Google hebben het al begrepen. Augmented reality opent heel wat deuren en zorgt voor een nieuwe, innovatieve manier om de offline wereld digitaal te verrijken. IKEA laat je toe meubels een virtueel plaatsje te geven in je huis en Pokémon Go bewees dat AR een plaats heeft in de gaming industrie. Geprikkeld door de vele mogelijkheden zijn we tijdens de Wijs Hackathon op zoek gegaan naar hoe wij AR kunnen inzetten voor onze klanten.

Virtual, augmented of mixed?

Virtual reality is vast geen onbekende term meer voor jou. Bij VR wordt een volledige digitale wereld gesimuleerd door je zintuigen - en dan vooral je zicht - te manipuleren. Je zet een VR bril op en je waant je in een andere wereld. Het is door dat gevoel van onderdompeling in een andere realiteit dat VR al snel gebruikt werd om games te ontwikkelen.

Augmented reality is anders. Het zorgt voor een mix van digitale assets en de wereld rondom jou. Waar je bij VR volledig afgescheiden bent van de werkelijkheid, ben je je bij AR nog bewust van je omgeving. Een andere, belangrijke wijze waarop augmented reality zich onderscheidt van virtual reality, is de toegankelijkheid. Om VR te beleven, moet je een (voorlopig) vrij lijvige, dure bril op je hoofd gaan zetten. Iets waar je nu niet meteen het huis mee verlaat. Dit staat in schril contrast met AR dat je - mede door de focus op AR van Apple en Google - kan ervaren met je smartphone.

Mixed reality is dan weer augmented reality dat afgestemd wordt op je omgeving. Terwijl augmented reality meer ‘zweeft’ over je omgeving, krijgen digitale elementen hier een logische plaats toegewezen. Denk aan een digitale tas koffie op een echte tafel. Om dit te bereiken, wordt je omgeving gescand en alle objecten digitaal in kaart gebracht. De bekendste mixed reality bril is Microsoft’s Hololens.

Web-based augmented reality

Tijdens de Hackathon was de keuze voor AR met de smartphone evident. Iedereen heeft zijn gsm tenslotte altijd op zak. Om vandaag AR op je smartphone mogelijk te maken, moet je een app installeren. Apps installeren is en blijft een drempel. Uit onderzoek blijkt dat onze tijd op de smartphone verdeeld wordt over gemiddeld 5 apps. Daarbij vullen sociale media apps zoals Facebook en Instagram het grootste deel van die tijd in. Stel jezelf maar eens de vraag hoeveel keer jij een nieuwe app installeert... Nee, we willen de gebruiker niet vragen nóg een app te installeren. Zeker nu we meer en meer impulsaankopen doen. Snel even een app installeren voor de aankoop, is dan het laatste waaraan we denken.

AR.js

De enige, logische oplossing was om gebruik te maken van een app dat op iedere smartphone staat: de webbrowser. In onze zoektocht naar de gepaste technologie vonden we een web-based AR project dat reeds enkele jaren in ontwikkeling is: AR.js. AR.js is een javascript bibliotheek dat AR via de browser mogelijk maakt. AR.js werkt ontzettend snel, zelfs op oudere smartphones. Het is open-source en gratis te gebruiken door iedereen.

AR.js maakt gebruik van marker based augmented reality. Dat betekent dat de AR webapplicatie een voorgedefinieerde afbeelding (of marker) gebruikt voor de oriëntatie en positie van de camera ten opzichte van de digital AR componenten. De markers zijn qua stijl te vergelijken met een QR-code. Het zijn doorgaans eenvoudige, 2-dimensionale afbeeldingen die makkelijk herkenbaar en traceerbaar zijn door de AR applicatie.

De enige, logische oplossing was om gebruik te maken van een app die op iedere smartphone staat: de webbrowser.

A-Frame

A-Frame is een framework om VR applicaties te bouwen. Het staat op de schouders van three.js, dat toelaat 3D objecten te bouwen in javascript en te tonen op het web. Met A-Frame is heel veel mogelijk, maar voor ons betekende het vooral dat we met HTML-attributen 3D objecten konden bouwen. A-Frame bezit namelijk enkele core componenten waarmee we makkelijk eenvoudig geometrische objecten kunnen maken en animeren. Zo konden wij ons focussen op het behalen van ons vooropgestelde resultaat, en niet op de technische complexiteit dat 3D objecten op het web met zich meebrengen.

<a-scene>
    <a-box position="0 0.5 -3" rotation="0 45 0" color="#ff3738"></a-box>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#182cc5"></a-plane>
</a-scene>

Shop the look 2.0

Eén van onze hoofddoelen was een échte AR use case uitwerken voor een klant van Wijs. We wilden niet alleen het concept en de mogelijkheden van AR overbrengen, maar we wilden ook kunnen aantonen wat het kan betekenen voor Wijs. We gingen op zoek naar een retail klant die zowel online als offline aanwezig is en kwamen al snel uit bij Terre Bleue. Terre Bleue heeft naast een online webshop namelijk ook vele filialen in België.

Op elk kledingstuk plaatsten we een unieke marker. Het patroon van elke marker is ook bekend in onze AR webapplicatie. Zo weten we welke 3D objecten (en dus welke informatie) we bij welk kledingstuk moeten tonen.

Zowel online als offline vind je bij Terre Bleue het “shop the look” concept. Dat concept laat een klant toe een volledig samengestelde outfit te kopen in de webshop. Offline vertaalt zich dit in alle kledingstukken van een aangeklede paspop kopen. Op de webshop vind je over ieder kledingstuk van die outfit meer informatie, zoals een uitgebreide omschrijving, meer foto’s én zelfs een filmpje. Die informatie is niet te zien op een paspop in de winkel, en daar wilden wij verandering in brengen.

Op elk kledingstuk plaatsten we een unieke marker. Het patroon van elke marker is ook bekend in onze AR webapplicatie. Zo weten we welke 3D objecten (en dus welke informatie) we bij welk kledingstuk moeten tonen.

Ontwikkelen voor AR betekent voor een web developer ook ontwikkelen in een extra dimensie. De z-as maakt z’n plotse intrede. Elementen hebben een diepte en moeten in die extra dimensie ook correct gepositioneerd worden. Wat voor een 3D-artiest dagelijkse kost is, bleek voor ons een onverwachte uitdaging.

We gingen nog een stapje verder en zorgden ervoor dat je elk kledingstuk in een virtueel winkelmandje kan steken. Waarom? Misschien heb je liever je kledij thuis geleverd. Of is het gewoonweg lang aanschuiven aan de kassa. Of je staat voor een gesloten deur, maar de paspop in het etalageraam heeft dat perfecte kleedje aan. Met AR voeg je het product toe aan je winkelmandje en betaal je in de webshop. Met zo’n concept kunnen we dromen van een winkel zonder kassa, zonder verkoper en zonder voorraad. Het was een soort a-ha moment, waarbij we een evidente samensmelting tussen onze AR applicatie en de webshop zagen. De bestaande webshop toegankelijk maken via augmented reality bleek plots realiteit.

Met zo’n concept kunnen we dromen van een winkel zonder kassa, zonder verkoper en zonder voorraad. Het was een soort a-ha moment, waarbij we een evidente samensmelting tussen onze AR applicatie en de webshop zagen.

Show me the money

Zit je voor je computer en heb je je smartphone bij de hand, dan kun je het resultaat zelf testen.

  1. Surf naar ar.wijs.be
  2. Richt je camera op onderstaande marker

Augment yourself

Niet alle ideeën zijn haalbaar tijdens een Hackathon. Voor we in de richting van "shop the look” zaten, speelden we met het idee om kledingstukken virtueel te passen. Volgens dat idee zou je jezelf filmen in een spiegel, waarbij de kleren op je lichaam geprojecteerd worden. Een prototype hiervan maken tijdens de Hackathon bleek al snel een brug te ver. We beslisten om later op dit concept verder te werken. Maar de gedachte om een 3D model van onszelf in AR te zien, bleef spoken in ons hoofd.

We trokken naar Polygon 3D, een bedrijf gespecialiseerd in 3D visualisatie, AR en VR. Zij beschikken over een zelfgebouwde 3D scanner. De scanner neemt met 117 Raspberry Pi’s evenveel foto's van jou uit alle mogelijke hoeken. Daarna worden nogmaals 117 foto’s genomen, maar ditmaal wordt er een soort raster (of mesh) op het lichaam geprojecteerd. Dit raster zal ervoor zorgen dat de software die later aan de hand van de foto’s een 3D model genereert, je lichaam beter kan differentiëren van de achtergrond.

Wij gebruikten PhotoScanPro om ons 3D model te genereren. Een 3D model op zich is wat statisch, dus hadden we dat graag ook geanimeerd. Om niet zelf ons model te moeten voorzien van een skelet voor animatie (rigging heet dat), gebruikten we Adobe’s “Mixamo” platform. Daar konden we ons model uploaden, laten ‘riggen’ en we konden er kiezen uit honderden animaties. Na wat finetuning van het animerende model in Blender waren we klaar om dit in onze AR webapplicatie te integreren.

We onderzochten wat het beste formaat is om 3D te tonen op het web. We kwamen er tijdens die zoektocht achter dat Facebook al een tijdje 3D posts ondersteunt door 3D objecten te uploaden in glTF formaat. Dat formaat bleek na enkele tests ook goed te werken in onze AR omgeving. glTF zorgt voor een kleine bestandsgrootte terwijl het ons toelaat het model te laten animeren.

We geloven sterk dat AR via de browser snel zal evolueren. Google is momenteel volop een experimentele AR API aan het ontwikkelen dat de ARCore technologie mogelijk maakt in de browser. En dit zonder marker.

What’s to come?

Met de verdere ontwikkeling van Apple’s ARKit en Google’s ARCore zijn wij nieuwsgierig naar welke AR toepassingen de toekomst zal brengen. Ook buiten retail zijn tal van toepassingen mogelijk in professionele context. Op welke manieren zal AR zich een weg banen in sectoren als geneeskunde en industrieel onderhoud? En wat zal mogelijk zijn met de AR bril dat Leap Motion momenteel ontwikkelt?

We geloven sterk dat AR via de browser snel zal evolueren. Google is momenteel volop een experimentele AR API aan het ontwikkelen dat de ARCore technologie mogelijk maakt in de browser. En dit zonder marker. Daar kunnen wij, als web developers, alleen maar enthousiast van worden. Wij volgen de evolutie alleszins op de voet op.

We willen in het bijzonder Stijn Stragier van Polygon 3D bedanken voor de 3D scan.

Ook zin om zo’n geweldig project uit te werken tijdens onze volgende Hackathon?

Solliciteer nu

Koen Vinken
PHP Developer

Stijn Spanhove
PHP Developer

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!