Producten in 3D op je website integreren
home > Nieuws en updates > webAR: Augmented Reality op je website

WebAR: Augmented Reality voor websites

17 September gaat de boeken in als de dag waarin WebAR (/webXR) wereldwijd beschikbaar is gemaakt. Door het verschijnen van de publieke versie van iOS12 is het namelijk erg gemakkelijk geworden om 3D objecten in je browser door je camera te tonen, in ieder geval voor iOS (Apple). WebAR is dus een term die gebruikt wordt om Augmented Reality via je website te laten zien.

WebAR biedt toegang tot webbased Augmented Reality via de webbrowser met behulp van een combinatie van technologieën waaronder WebRTC, WebGL, WebVR en de moderne middelen.

Waarom AR op je website

Augmented reality zal een waardevolle aanvulling zijn op veel bestaande webpagina’s. Het kan bijvoorbeeld mensen helpen om beter te leren en potentiële kopers in staat stellen om objecten in hun huis te visualiseren tijdens het winkelen.

Met webAR kunnen gebruikers een levensgrote weergave van een object in 3D plaatsen alsof het in de werkelijkheid staat. Eenmaal geplaatst, blijft de afbeelding op het geselecteerde oppervlak. Ook verschijnt het object in werkelijke verhoudingen tot de omgeving. De gebruiker kan er omheen en bewegen, of dichterbij of verder weg. Dit geeft kijkers een beter inzicht in het object dan dat mogelijk is met een tweedimensionaal beeld zoals een afbeelding of video.

ArtiShock biedt oplossingen voor webAR
WebAR / webxr zorgt dat je zonder app Augmented Reality op je eigen website kunt integreren. Ideaal voor webshops: producten in 3D bij de klant in huis.
Lees hier meer
AR kan dus ook op je website en een app is niet nodig, mits je het eenvoudig wilt houden. Er zijn vele browsers die deze vorm van AR-visualisatie ondersteunen.

Je ziet hieronder een simpel 3D model. Als je op mobiel bent tik je op het AR logo rechtsboven om de Augmented Reality te bekijken.

WebAR op je mobiel proberen?

webar qrcodeJe zit nu op desktop. Wil je deze 3D in AR bekijken? Ga dan naar deze pagina op je smartphone of scan de QR-code voor een directe link. Tik op je mobiel op het AR logo’tje rechts bovenin om de AR te activeren.

Welke webbrowsers ondersteunen webAR?

Vele browsers ondersteunen de mogelijkheid om AR te tonen, zowel op iOS (Apple) met bijvoorbeeld AR Quick Look als voor Android met  Model viewer. Hieronder enkele browsers die webAR ondersteunen qua visualisatie.

Apple Safari

(desktop & mobile)

Google Chrome

(desktop & mobile)

Microsoft Edge

(desktop, mobile, & HMD)

Mozilla Firefox

(desktop en mobiel)

Samsung Internet

(mobiel)

Bruikbaarheid van WebAR

Nu digitale marketing en sociale media doelgericht en kosteneffectief worden, lijken de meer traditionele marketingmethoden aan de kant te worden geschoven. Vooral gedrukte reclame heeft moeten inleveren kan WebAR met haar interactieve dimensie aan dprintmedia weer waarde toevoegen. WebAR kan zorgen voor gepersonaliseerde en interactieve “echte” ervaringen.

Conversie van AR en online media

Omdat de gebruiker WebAR op zijn telefoon via een browser kan ervaren zonder een app te hoeven installeren, zal het veel gemakkelijker zijn om de gebruiker te converteren. Door een call-to-action te introduceren tijdens de WebAR-ervaring kunnen we het gebruikers gemakkelijker maken om zich met een merk te identificeren omdat het als een echte ervaring wordt opgeslagen (emotie). Niet alleen icm print media maar ook op E-commerse zullen we een sterke toename van WebAR gaan zien.

WebAR Frameworks

ArtiShock kan natuurlijk assisteren om web gebaseerde Augmented Reality te realiseren. Er zijn er diverse frameworks om webAR realiseren.

AR js

Het AR.js project maakt open-source AR, gratis, platformonafhankelijk en zonder installatie op elk modern apparaat mogelijk.

AR toolkit

ARToolKit is gebaseerd op de open source ARToolKit-tracking bibliotheek, JSARToolKit gebruikt WebGL & Three.js om 3D-modellen weer te geven over echte objecten.

Aframe

A-Frame is een open-source webframework voor het bouwen van virtual reality (VR) -ervaringen. Het wordt onderhouden door ontwikkelaars van Supermedium (Diego Marcos, Kevin Ngo) en Google (Don McCurdy). A-Frame is een systeemsysteem voor entiteitscomponenten voor Three.js waar ontwikkelaars 3D- en WebVR-scènes kunnen maken met HTML. HTML biedt een vertrouwd ontwerptool voor webontwikkelaars en ontwerpers en bevat een populair patroon voor game-ontwikkeling dat wordt gebruikt door motoren zoals Unity.

Awe js

Awe.js biedt een paar extra AR-ervaringen, zoals augmented reality-marker tracking en locatiegebaseerde AR. Het maakt gebruik van WebRTC, WebGL en getUserMedia device API om een AR-ervaring in de browser te produceren.

Three.ar.js

Three.ar.js is een helper three.js-bibliotheek voor het bouwen van AR-webervaringen die worden uitgevoerd in WebARonARKit en WebARonARCore. WebARonARKit en WebARonARCore zijn experimentele apps voor iOS en Android waarmee ontwikkelaars Augmented Reality (AR) -ervaringen kunnen creëren met behulp van webtechnologieën.

x3dom

X3DOM is een open-source framework en runtime voor 3D-graphics op het web. Het beoogt te voldoen aan de huidige HTML5-specificatie voor declaratieve 3D-inhoud en maakt het mogelijk X3D-elementen op te nemen als onderdeel van een HTML5 DOM-structuur.

ARgon

Of het nu wordt gebruikt om een nieuwe AR-toepassing te maken of een AR-weergave aan een bestaande webtoepassing toe te voegen, het argon.js-framework biedt een aantal abstracties en hulpprogramma’s voor het toevoegen van een AR-weergave aan webtoepassingen op een platform- en technologie-onafhankelijke manier.

QR code en Call-to-action met WebAR en print advertenties

Een belangrijk onderdeel van het gebruik van WebAR met gedrukte advertenties is om de gebruiker met zo min mogelijk moeite op de juiste webpagina te krijgen. Wij geloven dat de beste manier om dit te bereiken is door QR-codes te gebruiken. Gebruikers weten wat je met een QR-code kan doen en hoe maar niemand heeft een QR-codelezer app op hun telefoon geïnstalleerd en biedt de Chrome-app  ook een QR-codelezer die toegankelijk is via 3D Touch.. Bij iOS zit tegenwoordig zit de QR-scan functie gewoon in de camara van de smartphone of tablet (vanaf OS 11).

Nb. Qtag (het tegenwoordige MediaFusion) die de QR-code in Nederland introduceerde biedt nog steeds een geïntegreerde QR-code oplossing waarbij de conversie i.c.m. online Augmented Reality gemeten kan worden.

Beperkingen van WebAR

Het realtime weergeven van gedetailleerde 3D-objecten met 60 FPS is rekenkundig een opgave voor je moebiel. Hoewel er een steeds betere integratie is met onze mobiele apparaten en de browser is het niet altijd 100% mogelijk om de GPU (extra grafische processor in je smartphone) te gebruiken voor hardwareversnelling. Gelukkig wordt dit de komende tijd steeds minder een probleem, aangezien mobiele GPU’s steeds meer standaard worden.

Tools om WebAR maken

ArtiShock kan  assisteren om web gebaseerde Augmented Reality te maken. Er zijn er diverse platformen die een soort plug&play aanbieden voor webAR.

8th Wall

8th Wall Web is volledig gebouwd met behulp van standaarden conform  JavaScript en WebGL en is een volledige implementatie van de SLAM-motor (Simultaneous Localization and Mapping) van 8th Wall. Helemaal geoptimaliseerd voor realtime AR op mobiele browsers.

Augmania

Het Augmania-platform ondersteunt media van video’s en 3D-objecten tot games en afbeeldingen. Ervaringen kunnen direct worden gedeeld via elk kanaal en u hebt altijd de controle met realtime toegang tot analyses.

Awe js

Awe.js biedt een paar extra AR-ervaringen, zoals augmented reality-marker tracking en locatiegebaseerde AR. Het maakt gebruik van WebRTC, WebGL en getUserMedia device API om een AR-ervaring in de browser te produceren.

Toekomst van webAR

De toekomst van webAR / webXR ziet naar onze mening rooskleurig uit. Vanwege de brede ondersteuning door mobiele browsers zijn er zeer weinig belemmeringen die bedrijven verhinderen WebAR in hun advertentiestrategie in prinmedia of online toe te passen.

Omdat WebAR per definitie in de browser werkt, kunnen we het eenvoudig integreren met bestaande technologieën zoals AJAX / Sockets en sociale media API’s voor een interactieve ervaring. We zijn erg enthousiast om te zien welke oplossingen we voor u kunnen creëren met behulp van deze nieuwe variant van het toepassen van WebAR.