Building the J-Fall VR app

Peter Hendriks

Hoe begin je met met VR/AR als Java developer

 

Virtual Reality en Augmented Reality zijn alternatieve user interface technieken, die radicaal beter kunnen zijn dan wat met de traditionele “rechthoek” schermen mogelijk is. Beide technieken bestaan al een tijdje, maar waren tot nu toe vooral hele dure en/of hele specifieke apparaten. De technologie is sinds afgelopen jaar nu ook voor de “gewone” consument beschikbaar: wat betekent dat VR/AR nu in rap tempo goedkoper én beter wordt. Dit biedt grote nieuwe kansen voor VR- en AR-oplossingen. Interessant dus als Java ontwikkelaar om te leren hoe je deze applicaties kunt maken.

 

VR en AR: verschillend, maar vergelijkbaar

 

Virtual Reality en Augmented Reality zijn heel verschillend in de oplossing die de technologie aanbiedt. Virtual Reality is bedoeld om je het gevoel te geven dat je in een andere, virtuele wereld bent. Augmented Reality is juist bedoeld om in de echte wereld nieuwe dingen toe te voegen. Waarom worden beide technieken nu vaak tegelijk genoemd?

 

Dit komt omdat beide technieken dezelfde behoefte hebben naar 3D. Dat geldt voor vrijwel alles: het tonen van elementen, navigatie, gebruikersinvoer, geluid, het nabootsen van natuurwetten (“physics”) enz. Het voordeel hiervan is dat VR en AR voor een groot deel dezelfde basis hebben: de overstap naar 3D.

 

De verwachting is ook dat VR en AR uiteindelijk met hetzelfde device mogelijk is. Dat gaat echter nog wel enkele jaren duren: op dit moment zijn VR-brillen pas net écht goed genoeg voor alleen VR, en kampen de prototype AR-brillen, zoals de HoloLens, nog met flinke beperkingen in prijs, accuduur en prestaties. Voorlopig zullen de meeste AR-oplossingen zich daarom op de “Cardboard AR” platforms storten: ARKit[i] van Apple en ARCore [ii]van Google. Hiermee wordt een standaard smartphone omgetoverd tot een (beperkt) AR device. Een mooie manier om te leren en te experimenteren zonder grote investeringen.

 

Getting started

 

Als Java developer starten met VR/AR is een flinke stap, maar gelukkig kun je veel kennis en kunde mee nemen. Qua back-end, build tools, ontwikkelproces, deployment, analytics, monitoring etc. is een VR/AR front-end vrijwel hetzelfde als een “normale” 2D web applicatie of mobile app. Het is daardoor relatief gemakkelijk om als Java developer een “full stack VR/AR developer” te worden waar je zowel de voor- als achterkant kunt developen.

 

Web of Native

 

Qua ontwikkeltools en frameworks is op dit moment de eerste grote keuze of je aan de gang gaat met Web oplossingen of je richt op een “native” deployment van een mobile of desktop app.

Voor AR is op dit moment de WebAR standaard in ontwikkeling, maar nog niet te gebruiken: de enige oplossing is dus de “native” route.

Voor VR is er de WebVR[iii] standaard. Deze wordt momenteel als eerste versie ondersteund voor veel devices en platformen. WebVR kent nu echter nogal wat functionele beperkingen en veel performance uitdagingen. Performance is zeer belangrijk in VR: je kunt namelijk de gebruiker letterlijk misselijk maken met een haperende applicatie omdat dit bewegingsziekte veroorzaakt (ook bekend als “wagenziek” of “zeeziek”). Om deze problemen op te lossen is WebVR “2.0” aangekondigd, die in de loop van volgend jaar uitgerold zal worden.

Voor de “native” deployment geldt momenteel dat je hier de beste performance krijgt, en als eerste de diepe integratie met nieuwe features van VR/AR devices. Zoals met mobile zullen we voorlopig zien dat alle hoge-kwaliteit apps om deze reden native zullen blijven. Hier hoort natuurlijk de hoofdpijn voor developers bij die we al gewend waren van de “gewone” native apps: onder andere het uitrollen van updates, meer compatibiliteitsissues en een hogere instap voor gebruikers.

 

Tools en Frameworks

Ondanks de aanwezigheid van veel tools, worden veel 2D interfaces nog volledig met de hand geprogrammeerd. Zelf bijvoorbeeld je HTML schrijven is voor veel schermgebaseerde applicaties nog wel te doen: vaak wordt veel tekst getoond, en dit ziet er in code heel vergelijkbaar uit.

Deze aanpak is voor VR/AR-applicaties niet te doen. 3D coördinaten, licht, texture-mapping en animaties met de hand programmeren is monnikenwerk. Je zult direct gebruik willen maken van zogenaamde “assets” die in modelleertools zoals Blender zijn gemaakt, zonder alles zelf te programmeren. Er zijn ook steeds meer asset verzamelingen te vinden: zoals SketchFab, Poly van Google, of de Unity Asset Store.

Ook het werken met lichtmapping (vooraf berekenen van lichteffecten), animatie blending, physics simulaties en speciale effecten zul je bij voorkeur niet zelf willen programmeren. Het is ontzettend veel werk, en vaak zul je je snel even willen uitproberen wat wel en niet werkt. Daarom hebben tools en frameworks waarbij deze mogelijkheden al standaard aanwezig zijn een flinke voorkeur.

 

Game engines

Voor veel developers die ook computerspellen spelen zal bovenstaande lijst bekend voorkomen. Computergames zijn al jaren vooral 3D en hiervoor zijn zogenaamde “game engines” ontwikkeld als herbruikbare tools en frameworks. Inmiddels is de game industrie de grootste entertainmentindustrie ter wereld, met miljoenen game developers en grote investeringen zijn deze engines zeer professioneel. De beste VR en AR-ontwikkeltools zijn daarom hier te vinden.

 

Unity3D

Op dit moment zijn Unity3D[iv] en Unreal[v] marktleiders in de game engine markt. Het zijn allebei prima producten, maar Unity3D is simpeler om te leren, heeft een eenvoudiger licentiemodel voor bedrijven, en is gemakkelijker om op te pakken voor de Java developer. Vandaar dat we hier mee aan de gang gaan voor de J-Fall VR app.

Zowel Unity3D als Unreal hebben aangekondigd de Web standaarden voor VR en AR te ondersteunen als deze verder ontwikkeld zijn. Op dit moment ondersteunen ze voor VR/AR echter alleen native deployments.

Starten met Unity3D

Als Java developer zul je in het begin waarschijnlijk de meeste moeite hebben met de Unity3D vensters en tools. Aangezien Unity3D veel meer een tool-first focus ten opzichte van een code-first focus zul je niet meteen code gaan typen. De Unity3D scene editor is een krachtige tool, maar je zult eerst de nodige termen en achtergrond nodig hebben om de logica te snappen en je goed thuis te voelen in de tool.

Ik kan aanbevelen om eerst met de standaard tutorials[vi] van Unity3D te beginnen, in plaats van meteen aan een VR/AR app te gaan ontwikkelen. Deze introductie leert je met simpele situaties om te gaan, zoals doosjes en balletjes, die je helpen om de basis te begrijpen.

Als je na de standaard tutorials wat meer de smaak te pakken hebt gekregen, is het Udacity VR Developer Nanodegree[vii] programma een goede verdieping om snel onder begeleiding te leren een VR app te maken. Met deze online cursus krijg je goede begeleiding van ervaren VR developers van onder andere Google. De volgende cursusronde start 18 december.

 

Over de J-Fall VR app

De J-Fall VR app is een Google Cardboard VR app voor Android en iOS. Iedereen met een redelijk moderne smartphone en een Cardboard houder kan de app gebruiken. De app is gratis te vinden op de Google Play Store en Apple iTunes[viii].

In de app zit je in een virtuele bioscoop, en kun je previews van de J-Fall sessies beleven. Hiermee krijg je een betere indruk dan alleen tekst: het is een leuk voorproefje van iedere sessie. Nu de J-Fall al voorbij is, kun je in de app nog steeds zoeken voor een leuke sessie om terug te kijken op YouTube.

Een open source versie van de J-Fall VR app is hier te vinden[ix]. Deze bevat niet de bioscoop: dit is een aangekochte asset die niet open source is. Verder zit er alles in, en het is een leuk voorbeeld om eens door te nemen hoe een VR app in Unity er uit ziet.

 

Van idee naar prototype

Voor de J-Fall VR app hebben we veel leuke ideeën verzameld en verkend. Voor sommige ideeen was het heel lastig om de juiste content te verzamelen, was het technisch heel moeilijk, of simpelweg te veel werk voor het budget (de regenachtige zondagen). Ook voor de sessie previews waren we afhankelijk van door sprekers aangeleverde content op het succes van de app. Nogmaals bedankt aan alle sprekers voor jullie bijdrage!

 

Om te bekijken hoe de sessie preview voelt hebben we enkele slides en videobeelden van afgelopen jaren gecombineerd. Dit in een zogenaamde “gray box” prototype leverde al de eerste enthousiaste reacties op. Een gray box prototype is een ruwe simpele opzet met alleen simpele objecten die verder nog niet opgemaakt zijn met kleuren of licht (het zijn letterlijk grijze dozen). Dit prototype gaf ook belangrijke input voor welke informatie we wel of niet goed konden laten zien en hoe lang een sessie preview maximaal mocht duren voordat het niet meer leuk was. Ook konden we de user interface hier al in testen.

 

Content verzamelen

Met hulp van de NLJUG organisatie hebben we de content verzameld. Hier hadden we ongeveer een maand voor: de sprekers voor J-Fall worden namelijk in september geselecteerd, en de app moest namelijk half oktober al af zijn, omdat ik op vakantie ging.

Iedere spreker wist de content in een ander formaat aan te leveren: MP4, Powerpoints met embedded media, iPhone MOV bestanden, YouTube enz. Die content moest eerst transcodeerd worden naar de gewenste formaten, resoluties en framerates. Alhoewel Unity3D hier zelf ook enkele opties voor heeft om dit tijdens het builden te doen, kost dit veel tijd en is het aan te bevelen om zo veel mogelijk te pre-processen.

 

Ontwikkelen en performance tunen

De J-Fall VR app gebruikt diverse standaard componenten van Unity3D en de Google Cardboard SDK, bijvoorbeeld voor het tonen van video, afspelen van geluid en het kijken naar user interface elementen.

Tijdens de ontwikkeling was het zoeken of we de video’s zouden streamen, of zouden embedden als onderdeel van de app. De video’s kosten smartphone-geheugen en maken de installatietijd langer, maar het streamen leek te risicovol aangezien we verwachtten dat veel gebruikers de app pas tijdens de conferentie zouden gebruiken, op het traditioneel overbelaste wifi.

De applicatie soepel over laten schakelen van de ene presentatie naar de andere, zonder alles in het geheugen vast te houden, vereiste wat extra development. Daarnaast is de hele app zo strak mogelijk getuned: het tonen van de bioscoop en video met hoge kwaliteit slides is namelijk een stevige belasting voor de smartphone. Er wordt daarom zo veel mogelijk gebruikt gemaakt van “baking”, het vooraf uitrekenen van belichting en occlusion culling informatie. Ook wordt static batching toegepast om zo min mogelijk draw calls te hoeven gebruiken.

 

Testen en de laatste loodjes

Vooral op iOS bleken video’s een probleem. In Unity3D 2017.1 bleek een issue met H264 encoded video aanwezig te zijn op iOS als een bepaalde resolutie/lengte overschreden werd. Dat maakte dat veel spreker video’s niet werken tenzij ze op VP8 (een andere encodering) werden afgespeeld. Aangezien op Apple devices alleen het H264 formaat met hardware versnelling wordt afgespeeld was dit een enorme extra belasting voor de iPhone. Hierdoor misten we regelmatig frames en stotterde het geluid. Door in iOS de resolutie van video te verlagen werd VP8 weer werkbaar. Gelukkig kwam een nieuwe versie van Unity3D met de oplossing op tijd uit voor de J-Fall, waardoor we ook op iOS goede kwaliteit videos konden leveren.

Op Android is een limiet aanwezig van 100mb voor de APK. Hierboven moet gebruik gemaakt worden van een zogenaamd ORB bestand ter invulling. Helaas heeft die aanpak een aantal bekende issues en beperkingen die het lastig maakten voor de J-Fall VR app. We konden gelukkig met wat extra compressie van de slides onder deze limiet blijven.

 

Toekomst

De toekomst voor VR en AR ziet er rooskleurig uit. Microsoft heeft zojuist de nieuwe Windows VR devices gelanceerd, en Oculus komt begin 2018 met de Oculus Go, de eerste goedkope all-in-one VR-oplossing. Apple heeft net ARKit uitgerold met de laatste iOS update, waar Android dit in de loop van volgend jaar zal doen. Ook zijn er mooie aankondigingen voor nieuwe toonaangevende apps en verbeteringen in ontwikkeltools.

De J-Fall VR-app doet het prima volgens de statistieken. We hebben veel enthousiaste reacties gehad en hebben weer leuke ideeën voor een vervolg volgend jaar!

 

[i] Apple ARKit: https://developer.apple.com/arkit/

[ii] Google ARCore: https://developers.google.com/ar/

[iii] WebVR: https://webvr.info/

[iv] Unity3D: https://unity3d.com/

[v] Unreal: https://www.unrealengine.com/

[vi] Unity3D tutorials: https://unity3d.com/learn/tutorials

[vii] Udacity VR Developer Nanodegree: https://www.udacity.com/course/vr-developer-nanodegree–nd017

[viii] J-Fall VR app: http://jfall.nl/j-fall-apps/j-fall-vr-app/

[ix] Github J-Fall VR app: https://github.com/mindloops/jfallvr