Teaching VR through the Web

This post documents my personal experience with teaching WebVR - Web based Virtual Reality within a module on Internet Programming. In this case, based on the wonderful A-Frame (https://aframe.io) and exploring it with MSc Computing students.

The three insights: 

• It is great fun (which I did expect) to teach;
• It is nowhere near as hard as I thought it was going to be when I first started;
• Students seem to enjoy it

1. The approach
I needed a way of doing it that doesn't require a lot of setting up and can be done on a variety of machines. The approach used was using A-Frame (https://aframe.io) inside Thimble (https://thimble.mozilla.org ). Thimble was selected because it is an online editor,  simple to use, it is free and you see the preview immediately. One restriction to bear in mind is that the filesizes of images and videos have to be small though.

2. How easy is it?
You can treat it as if was HTML, after you have added the script file shown in bold.

    
   

The video below shows setting up and adding a box to the scene.



This next video takes this a little further by adding rotation to an object.

 

In this video below, mapping an image to an object and changing camera position is looked at.

 



3. Adding video
Actual in some ways it as easy to add video as adding an image, at it's simplest adding src="" with either the URL or relative filename in the speech marks can be used for both images and video. Alternatively using  combination with again the filename or URL between speech marks adds a block and pastes the video on top. The video below shows a worked example of these two approaches

 

4. 360 degree video.
A-Frame allows 360 degree to be incorporated into the scene using the  tag. The video below shows a worked example of this. The video below shows another worked example.

 

5. 3D objects and Assets
We can also add 3D models that others have developed into our scene. In the video below a Penguin, defined externally using .obj for the model and .mtl for the material, is loaded into the scene.

 



6. Overview
Teaching this was fun, and lends itself to a problem-focused approach. Small projects are set up and worked through but the visual nature I believe encourages experimentation. The students were very quickly able to develop their own small projects and were experimenting with a range of objects.

One interesting feature I found when looking around for supporting materials is there is a very limited range of books on A-Frame and WebVR but some fantastic resources online including the best place to start: https://aframe.io/docs/0.7.0/introduction/ 


All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon