# AR & VR
De eerste challenge, in navolging van de gelijknamige workshop, staat in het teken van de augumented- en virtuele realiteit. Vorig jaar heb ik op het Dreamhack festival in Rotterdam een eerste echte kennismaking gehad met VR. Daar was VR Arcade aanwezig die mensen op een afgebakende ruimte games liet spelen.
Daarvoor heb ik weleens geëxperimenteerd met een kartonnen Google Cardboard maar dat was niet levensecht te noemen. Voor deze challenge maak ik een interactieve ervaring dat gebruik maakt van VR en/of AR.
# Research
Om inspiratie te krijgen heb ik gezocht naar interessante projecten die gebruik maken van VR en/of AR.
# VR Arcade
Rond 2016 kwamen Wilco Vos, Sander Bos en Sebastiaan de Jonge op het idee om een VR Arcade hal te ontwikkelen. Dat idee is waarheid geworden en het bedrijf heeft nu drie locaties in Nederland (Amsterdam, Delft en Helmond) waar het mensen laat rondlopen om op zombies te schieten. Doormiddel van 24 tot 40 bewegingscamera's worden de bewegingen van spelers bijgehouden, zodat zij in teamverband elkaar kunnen zien en niet tegen elkaar opbosten. Deelnemers dragen een MSI VR Backpack computer met verwisselbare batterijen om de VR-headset aan te sturen.
Ondanks dat deze game na een tijdje redelijk beperkt lijkt vind ik dit project één van de meest inspirerende van Nederlandse bodem. Ik vind het knap dat er in een vrij korte tijd zo'n realistische ervaring uit is gekomen. Het is bizar om helemaal opgezogen te worden in een virtuele wereld.
# Dunkirk VR
Bij de introductie van de film Dunkirk in 2017 hoorde natuurlijk een trailer. Naast videotrailers werd ook een VR ervaring uitgebracht. In opdracht van Warner Bros. Pictures heeft het bedrijf Practical Magic de experience ontwikkeld. Practical Magic is een Amerikaans bedrijf dat zich specialiseert in televisie, VR en andere media.
Het gebruiken van VR vond ik voor deze film heel erg toepasselijk. In de film werd al gebruik gemaakt van verschillende perspectieven waarop gebeurtenissen zich afspeelden. Nu met VR is het mogelijk álle perspectieven te zien wat erg effectief is. Daarnaast is het verhaal emotioneel geladen en dat wordt benadrukt wanneer je niet kunt wegkijken van de beelden, maar deze juist overal om je heen zijn.
# Beat Saber
Met meer dan 6,6k recensies op het Playstation netwerk is Beat Saber een van de populairste VR games. De game staat in het teken van het raken van blokken op het ritme van muziek en is speelbaar op onder andere PlayStation VR, Oculus Quest en Windows VR headsets. Het ontwikkelteam dat bestaat uit slechts een ontwikkelaar, een componist en iemand die de marketing regelde, heeft met de game maarliefst 12 prijzen gewonnen in 2 jaar, waaronder The Game Awards 2019.
Ik heb deze game gekozen als bron van inspiratie omdat dit voor mij de eerste interactie was met VR dat geheel vlekkeloos en vloeibaar verliep. Het beeld haperde niet, bewegingen waren vloeiend en de navigatie door het spel was intuïtief.
# Tinkering
# Poster IXD
Vorig jaar heb ik voor het vak Interaction Design (IxD) een A0 poster moeten maken over een onderwerp dat binnen dat vak gegeven was. Om bij het vak aan te sluiten wat betreft interactie leek het mij leuk om met AR-tracking aan de slag te gaan, iets wat ik wel kende maar nooit zelf had gebruikt. Zo kwam ik bij het framework A-Frame waarin ik een hifi prototype van mijn idee kon uitwerken. Zoals in onderstaand filmpje is te zien, worden de 4 informatieboxen digitaal gerenderd zodra ze in beeld zijn. Vervolgens zijn de boxen aanklikbaar en kan er vervolgens per onderwerp meer informatie vergaard worden.
De website is hier te vinden maar speciale AR-markers zijn nodig om het te laten werken.
# Three.js
In de workshops werd A-Frame als framework gebruikt om een VR-experience te ontwikkelen. De documentatie beschreef dat het gebaseerd is op een ander framework genaamd Three.js. Daarom besloot ik mij daar ook in te verdiepen. Wat met Three.js kan lijkt veel overeen te komen met wat A-Frame doet, maar dan in puur JavaScript en wat meer vrijheid.
In het volgende voorbeeld heb ik een draaiende tekst met wolken waarbij de tekst aan te passen is.
De demo is ook hier te vinden (typen om tekst aan te passen).
# Babylon.js
Net als A-Frame is Babylon een framework voor het renderen van 3D objecten en het weergeven van VR. Babylon is niet gebaseerd op het Three.js framework en gebruikt ook enkel JavaScript om scènes te creëren. Met het framework zijn al enkele games gemaakt, daar waar A-Frame nog redelijk ongebruikt is.
Als voorbeeld heb ik een tekst geprojecteerd dat weerspiegelt op het water.
Of bekijk mijn demo hier
# Design & Build
Het eindproduct wilde ik graag net als Beat Saber geluid laten maken doormiddel van interactie. Toevallig kwam ik een week voor deze challenge het volgende geval tegen:
Als pianist was ik onder de indruk en ik vroeg mij af of dat virtueel nagebootst kon worden. Ik ben begonnen met een webcam plate in A-Frame want ik wilde dat je de omgeving nog zou kunnen zien terwijl je speelt. Daarna heb ik een deel van het klavier als witte- en zwarte boxen gepositioneerd. Ten slotte heb ik met Handtrack.js ervoor gezorgd dat wanneer de hand binnen de x-coordinaten van een bepaalde box valt, het bijbehorende geluid afspeelt. In het volgende hoofdstuk is een demo te vinden.
# Showcase
Of probeer de demo
# Reflect
# Vision
Ik ben heel erg benieuwd naar hoe virtual reality ingezet kan worden als praktische oplossing. Tot nu is het vooral populair in de entertainment hoek voor games en andere plezierige ervaringen. Toch is er ook vanuit de zakelijke kant potentieel zoals fabrieken die assemblage instructies in VR ontwikkelen. Vooral van AR denk ik dat dat steeds vaker ingezet zal worden om mensen beter te kunnen begeleiden in hun taken. Echter verwacht ik niet dat iedereen een kolossale VR-bril in huis zal halen. Dat zou echt handzamer moeten zoals Google Glass.
# Product
Wat betreft augumented reality was het eigenlijk mijn idee om vingers individueel te herkennen, maar dat is niet gelukt. Handtracking kende ik al langer dus heb ik dat gebruikt. Ik hoop heel erg dat de technologieën nog verder uitgewerkt worden zodat ze preciezer en daardoor realistischer overkomen.
Het eindproduct van deze challenge viel mij wat tegen met wat ik eigenlijk had willen maken. Natuurlijk had het klavier circulair moeten lopen, maar wegens tijdgebrek heb ik dat opgegeven. Ruimtelijk inzicht is niet mijn sterkste punt en dat hielp dan ook niet met het bouwen van dit product.
# Technology
Om eerlijk te zijn had ik de technische mogelijkheden van VR en vooral AR overschat. Vorig jaar had ik al wat geëxperimenteerd met A-Frame, maar dit blijkt dan ook een van de weinige WebVR frameworks te zijn, dat terwijl de WebVR api al vier jaar bestaat. Ook de bestaande VR-toepassingen zijn beperkt en niet altijd even realistisch. Het ontwikkelen in 3D blijf ik maar lastig vinden door mijn gebrek aan ruimtelijk inzicht, de twee assen waarmee CSS voornamelijk werkt kunnen al uitdagend genoeg zijn.