Workshop VR met Aframe

Wat is A-Frame ?

• een opensource web framework voor Virtual Reality experiences
• onderhouden door Mozilla en WebVR community
• geen kennis nodig van WebGL
• gebaseerd op html pagina's
• alle info op aframe.io

Op welke toestellen werkt dit ?

op computer

• werkt op Firefox (Mozilla), Google Chrome, Safari, ...
• enkele voorbeelden onderaan op deze pagina

op smartphones

De meeste iPhones ondersteunen dit (zeker vanuit Firefox) De High-end Android phones (afhankelijk van gyrosensor en GPU) Je kan hier een Google Cardboard voor gebruiken

Hoe ziet de code er uit ?

Zoals in HTML: elke tag die je opent, dient ook gesloten te worden

zie voorbeeld in Glitch

goed om weten

inspector in A-Frame

Vanuit een A-Frame voorbeeld kan je naar inspector mode gaan met de toetsen ctrl-alt-i Zo kan je makkelijk je VR omgeving controleren alle hoeken (of een object aanpassen en kopiëren via copy entitie in rechter bovenhoek en in je html pagina toevoegen)

verplaatsen in VR met computer

Met de toetsen WASD (qwerty) of ZQSD (azerty) kan je je door een omgeving bewegen.

Enkele voorbeelden

https://glitch.com/edit/#!/a-frame-normalmapping?path=index.html:2:0