r o n n y r o o k

Interaction Design voor Virtual Reality

Van februari tot juli 2017 heb ik op de Hogeschool van Amsterdam de minor Virtual Reality gevolgd. Binnen deze minor heb ik veel onderzoek gedaan naar het duidelijk overbrengen van een verhaal, interactie en visuele vormgeving binnen VR voor de rest van het team, en met name de programmeur. Schetsen, 2D prototyping tools, WebVR en direct prototypen in Unity.

In mijn zoektocht naar de juiste tools ben ik veel hindernissen tegengekomen. Omdat de VR techniek opkomend is zijn er niet veel officiele en goed gedocumenteerde tools voor te vinden. De trial and error werkwijze was daarom geen uitzondering tijdens de minor. Onderstaand mijn bevindingen. Hierin heb ik geprobeerd alleen de nuttige tools en informatie op te nemen.

Schetsen

Een groot verschil tussen interactie op het web en in een VR wereld is - natuurlijk - de beschikbare ruimte. Om een verhaal over te brengen kun je storyboards gebruiken. Ook voor VR kun je storyboard maken (bron: 1).

Storyboards template voor Virtual Reality
Storyboards template voor Virtual Reality

Een belangrijk aspect van VR zit vewerkt in deze template, namelijk de content zones. Waar in de 360 ruimte moeten elementen geplaatst worden zonder dat het oncomfortabel aanvoelt? Of in ons geval ook erg belangrijk, waar is het binnen het bereik van de Leap Motion?

It tends to take 15 years for a technology to really get good. Where innovation and competition have given it good features, it is simple enough for late adopters and the nuisances and kinks that weren’t expected had worked out. - Mike Alger

In 'VR Interface Design Pre-Visualisation Methods' (bron: 2) doorloopt Mike Alger - schrijver van het 'Visual Design for VR' manifesto en momenteel VR designer bij Google - veel theorie en best practices. De meeste interactie methode worden behandeld; de laser-pointer, teleportatie, UI menu's etc. en ook worden alle content zones (in onderstaande afbeelding links) worden uitgelegt. Rechts in de afbeelding is te zien hoe deze zones samenwerken met de Leap Motion waardoor een 'Touch zone' ontstaat.

Content zones in VR en Leap Motion bereik
Content zones in VR en Leap Motion bereik

Een probleem met schetsen voor VR is dat het 2D blijft. Gelukkig is onderstaande template ontwikkeld om dit probleem te tackelen. Met deze grid (bron: 3) kunnen schetsen in de diepte worden gemaakt. Door gebruik te maken van bijv. GoPro VR Player (bron: 4) - of een andere player die 360 footage ondersteund - kan deze afbeelding op een sphere worden getoond om een indruk van de omgeving te kunnen geven.

360 grid template in GoPro VR Player
360 grid template in GoPro VR Player

Prototyping

Binnen web zijn we bekend met prototyping tools. Denk hierbij aan Principle, Kite, InVision etc. Het aan elkaar linken van schermen kan een goede indruk geven over de werking van een applicatie voor zowel developers als gebruiker, ideaal om bijv. snel te kunenn testen. Een andere - erg bekende en veel gewaardeerde - 2D tool is Framer (bron: 5).

Framer is a powerful 2D prototyping tool, and with the VR module you can use it for 360˙ too. If your intent is to convey layers and interactivity, this is probably your best bet.

Framer is een prototyping tool waarmee je zowel een visuele interface kunt gebruiken als code (CoffeeScript) kunt schrijven. Deze combinatie maakt het een erg krachtige en flexibele tool. Voor Framer is een VR Component (bron: 6) gemaakt waarmee deze 2D tool veranderd naar een 3D tool! Er zal een 360-cube asset nodig zijn om een achtergrond te mappen op de sphere. Dit kan gemakkelijk gegenereerd worden vanuit elke panorama foto (bron: 7).

Framer's sphere concept
Framer's cube mapping en sphere concept

Vervolgens kun je - net als met 2D prototyping - elementen op de scene plaatsen door coördinaten mee te geven. Deze elementen kun je laten interacteren met de bekende events.

WebVR

Door mijn achtergrond als front-end developer heb ik genoeg Javascript ervaring om ook in WebVR te duiken. WebVR is een experimentele browser functie die door het Aframe (bron: 8) framework wordt aangestuurd. Als je bekend bent met Javascript zal de stap naar Aframe niet heel groot zijn, het gebruikt veel dezelfde principes en de Aframe functies zijn goed gedocumenteerd en makkelijk aan te leren.

Met Aframe kunnen de objecten bestanden (Maya, Blender etc.) die voor Unity gebruikt worden ook worden geimporteerd voor Web. Ook kun je werken met texturen en lichtbronnen, net zoals in Unity. Mocht jou concept het ondersteunen kun je gebruik maken van controls om door de wereld heen te lopen en kun je interactie toevoegen. Binnen WebVR ben je in principe beperkt tot gazing als interactie methode, maar met de ontwikkeling van bijv. de Google Daydream (die geleverd wordt met een controller) lijken de mogelijkheden zich uit te breiden met een neck- en arm model (bron: 9).

WebVR omgeving met geimporteerde modellen
WebVR omgeving met geimporteerde modellen

Unity

De laatste prototype manier de we nog niet behandeld hebben is om direct in Unity te werken. Dit zorgt er voor dat je een paar stappen kunt overslaan en daarmee sneller het eindresultaat kunt bereiken. Een nadeel van deze aanpak is dat de programmeur(s) hun werk wellicht moeten weggooien. Zorg er daarom voor dat een minimale versie maakt in Unity en deze zo snel mogelijk test en de feedback verwerkt.

Move to Unity as soon as possible! - Rob Jagnow

In de talk Lessons learned from VR prototyping (bron: 10) geeft Rob Jagnow - VR developer bij Google - uit ontzettend veel nuttige tips en best practices over het snel prototypen van een virtuele wereld.

Conclusie

In mijn zoektocht naar ontwerpen voor VR kwam ik er achter gekomen dat het zeker geen obstakel-vrije weg is. Doordat het een relatief jonge technologie is zijn er nog niet veel toegewijde tools voor. Extensie's zoals het eerder genoemde VR Component van Framer zijn een stap in de goede richting, maar ook voor dergelijke tools zijn nog veel vebeteringen in te beelden waarmee het zou kunnen dienen als volwaardige VR tool.

De in het eerste hoofdstuk benoemde schets templates zijn wel erg nuttig om te gebruiken en snel ruimtelijke ideeën op papier te krijgen. Door de template waarmee je op een 360 grid kunt tekenen kun je een goede indruk aan de rest van je team geven over de plaatsing van elementen in de daarvoor betreffende content zones.

Referentie bronnen

Overige bronnen