Virtual Reality Environments - Students' Projects

aframe; virtual reality; usj 21 Jun 2018

I organized and taught a course on Virtual Reality Environments for the Master of Design program of the Faculty of Creative Industries, University of Saint Joseph, Macau.

The course was organized around the A-Frame Virtual Reality framework.

Being web-based, A-Frame is an excellent framework to created Virtual Reality environments. The resulting environments run on any browser, and platform, making it easy to share and view the worlds. It supports desktop, mobile, and VR platforms (such as Oculus Rift, or HTC Vive) and controllers.

The Course

The course materials are available online in the Glitch platform at https://aframe-usj.glitch.me/index.html. This course was not just about the technical aspects of A-Frame, but that was a major part of it.

We practiced things like different primitives provided by A-Frame, lighting, text, environments, inclusion of external 3D models, interactions, animation, portals, and sound!

Students were asked to incorporate what they learned in a personal project. Together, we created a virtual environment composed of several mini-worlds connected by portals. This is available at https://vre-2018.glitch.me. The main entrance was a 360º photo world of the classroom with all the students (and teacher). From this world, we can reach each of the student’s worlds which are themselves composed of a 360º photo world and a 3D world.

Here are some of the best projects that students created during this course:

Alvira and Peggy created an imaginary shelf world, inspired in a grocery store. They produced some 3D objects in Magica Voxel and used A-Frame primitives beatifully to create the shelves, a glass of milk, cookie boxes, etc. They also used a particle system with custom textures.

Jason and Victoria imagined what could be behind a toilet! :P They created an imaginary world where creatures live beyond the toilet pipes. Beautiful use of A-Frame primitives and of the Ocean component.

Maggie and Manyee created a prototype of an interactive VR world for teaching children about objects’ shapes. They combined external 3D objects with A-Frame’s primitives and lots of interactions and particle systems to create a visually rich environment.

There were lots of other good projects that you can see here:

Conclusion

Putting together this course represented a lot of effort but also an opportunity to learn more about A-Frame. A-Frame is still a young project, with various bugs that creep out every now and then. There are also a lot of external components made by various developers in the A-Frame community. These externals add a lot of power to the framework but, like the framework, they are not all very polished or consistent among them. Be prepared to do some debugging!

Teaching this course was a lot of fun. I had a bunch of great students, that (tried) pushing the limits of A-Frame to create their dream worlds. It was an intensive course, for design students, so we kept out of programming our own components. We kept out of JavaScript entirely! Still, the results were excellent and revealed a lot of creativity. It also revealed how good A-Frame is for teaching VR to students without a programming background.