Workshop finished! If you participated check out the PostWorkshopNotes.

Goal

The goal for the workshop is to get your hands dirty in order to grasp the key concepts.

It's not to

~~ponder about the theoretical future of VR~~
~~build the next Doom (good luck in few hours!)~~
~~test some VR equipment~~
~~enjoy a nice demo~~

The goal is to discover concepts that help you to build a bigger virtual reality project as you go along. Please when you have a great idea for a project do take notes the go back to the missions, it will make the whole process even more exciting.

Part 0 - make sure you get the right environment.

Can you see the amazing yellow VRLab logo turning? If you only see a black rectangle make sure to get webGL working in your browser!

Ideally also check in your mobile phone so that you can easily check your progress in VR!

Part 1 - let's get started!

Please follow the links in each mission to move on to the next one!

missing cube
animation
light off
interaction
templates
component

Start with Mission 0

Mission 0 will focus only on adding an object, once you have done that make sure to follow the link to the next similar looking mission in the code itself. Don't be shy it's easy!

Part 2 - Going way deeper

STOP Do not do part 2 before you finish part 1, if not I will personally kick you out of the room, I'm kind of serious!

I understand the risk and wish to proceed further, seriously

Ok ... you have been warned.

Please note that once you have finished everything up to the last mission including writing your own component you are ready for part 2! Note that part 2 isn't relying so far on any existing code so you will have to fork your clearest piece of existing code and re-use it.

load and use your own image <a-image> (tip: use the crossorigin attribute and a CORS compatible upload service cf FAQ)
- image boilerplate code
load and use a 360 image <a-sky> (tip: search for equirectangular on Flickr)
- 360 image boilerplate code
once you get overloaded with assets check mixin and <a-assets>
once you get tired of moving entities one buy one learn to bundle them using a parent <a-entity>
write another component using registerComponent()
re-use an existing component e.g. text component
re-use your DOM mastery using another DOM based library e.g. D3.js cf FAQ
- if you are familiar with React, Angular or Meteor feel free to use those instead
- check scene.hasLoaded to avoid problems with getAttribute()/setAttribute() on large scenes
- explore the potential of querySelectorAll() even without a framework
generate and catch your own events using emit('myEvent') with <a-animation begin='myEvent'>
make and use your own shader using registerShader() and doc

Part 3 - Aframe, Three.js the basis of Aframe

Once you have finished part 2 part 3 is...

make sure to know what is a custom element e.g. <a-entity> to remove all veil of mystery
better understand how Aframe works under the hood using SecondWorkshopQuest

Part 4 - WebGL the basis of Three.js