AR-portal: Fra app til webapp
Statped utvikler læremidler som gjør læring mer tilgjengelig for barn og unge med spesialpedagogiske behov. Flere av deres fysiske læremidler benytter AR-teknologi (augmented reality) for å spille av tegnspråkvideoer og vise annet pedagogisk innhold. Tidligere var disse løsningene bundet til proprietære apper som tidvis var teknisk ustabile og vanskelig å vedlikeholde.
For å løse dette har vi utviklet en webbasert AR-portal som erstatter behovet for separate apper. Nå kan brukerne enkelt skanne AR-markører direkte i nettleseren – uten nedlastinger eller plattformbegrensninger. Løsningen er gratis å bruke, krever ingen innlogging og gir Statped full kontroll over innhold og vedlikehold.
Med denne nye løsningen har vi gjort AR-opplevelsen mer stabil, fleksibel og inkluderende for alle som bruker de tegnspråklige læremidlene.
Jakten på riktig AR-motor
For å bruke AR i nettleseren er WebGL og WebAPI for kameratilgang nødvendige. En felles webstandard, WebXR, er under utvikling, men er enn så lenge ikke fullt implementert i alle nettlesere.
Å bygge en AR-motor fra bunnen av lå utenfor prosjektets omfang, så vi undersøkte ulike JavaScript-baserte løsninger. Mange motorer har begrenset støtte for flere markører eller svak ytelse over tid.
Etter grundig testing valgte vi MindAR. Den støttet store sett med markører, leverte god ytelse via webworkers og hadde en fleksibel struktur for markørfiler. Likevel manglet enkelte funksjoner vi trengte. Derfor utvidet vi motoren med skreddersydd kode og utviklet en optimalisert build tilpasset prosjektet.
Tracking av innhold i 3D vs. popups
MindAR har innebygd støtte for A-Frame, som fungerer som et templatelag over three.js. Dette gjør det mulig å plassere 3D-elementer i kameraets synsfelt.
Med HTML-template-strukturen i A-Frame kunne vi enkelt lage flere moduser for hvordan en markørtreff skulle håndteres. Vi utviklet derfor tre moduser:
Video i 3D-rommet, der videoen ligger på markørens plassering.
Fullskjermvideo der innholdet i videoen er viktigere enn plasseringen i 3D-rommet
Popup med bilde/video og tekst for ekstra informasjon.
Denne fleksibiliteten gjør det enklere for Statped å tilpasse prosjektene etter egne behov.
Appopplevelse i nettleseren (PWA)
Siden vi skal erstatte en eksisterende applikasjon var det viktig for oss å gi muligheten til å legge AR-portalen som en snarvei på hjem-skjermen, slik at oppstart av AR-scanning gjøres «på samme måte som før».
Løsningen på det er en PWA (Progressive Web App) – en webapplikasjon som åpnes i en egen nettleser uten adressefelt og standard knapper. Dette gir den et app-lignende utseende og følelse, uten at man må utvikle native kode. Med web-API-er kan man oppnå nesten samme funksjonalitet som en tradisjonell app.
I tillegg kan webworkers brukes til å cache kode, siderespons, bilder og annet innhold, noe som gir raskere oppstart og bedre ytelse.
Til Valhall!
Et av læremidlene, tegneserieheftet Valhall, fikk ekstra oppmerksomhet og tilpasning. Dette er en tegneserie med over 50 sider og i overkant av 300 AR-markører. Dette er et volum som overgår kapasiteten til webbaserte AR-motorer, spesielt dersom den skal fungere på en mobiltelefon. Løsningen ble å dele opp tegneserien og samle markørene sidevis. Dette reduserte antallet til 9–10 markører per side, noe motoren håndterte godt.
Når brukeren skanner siste rute på en side laster vi inn neste sett med markører, i bakgrunnen. Dette gjør navigasjonen sømløs – brukeren trenger bare å skanne som normalt – uten å måtte tenke på å bytte til neste side i AR-appen.
Dette bidrar også til en vesentlig raskere oppstartstid for skanning.
Vil du se hvordan det funker?
Gå til ar.statped.no og finn Valhall. Test løsningen på bildet under. Eller scan QR-koden på bildet. Funker kun hvis du har to skjermer, så klart.
Sørg for at du er på «Intro» eller side 11, og pek mobilen på én og én rute.
