Workshop finished! If you participated check out the PostWorkshopNotes.


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,output missing cube,output animation,output light off,output interaction,output templates,output 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)
  • load and use a 360 image <a-sky> (tip: search for equirectangular on Flickr)
  • 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

If you have finished all that honestly come talk to me you are just way too fast for this workshop, let's have a drink instead. Still, to get a deeper understanding of 3D have a look at Coursera Interactive 3D Graphics CS291, that should take you days at least ;)