Web-based Virtual Reality Environments

Web-based Virtual Reality Environments

This course will teach you how to build, by hand, virtual-, mixed-, and augmented-reality (XR) environments that run on a web-browser.

We will use a high-level framework called A-Frame, which hides away various implementation details of using WebXR, allowing us to focus on what are the essential features of the XR environment we want to create. A-Frame uses the standard web languages of HTML and JavaScript but we will focus on the language features (mostly on HTML) that are essential for building A-Frame scenes -- we will not delve into HTML or CSS details for building standard websites.

The course is structured in four parts:

  1. The first part deals with getting our tools up and running: knowing how to use Glitch to host our code, knowing how this course's chapters are structured, knowing the basics of HTML, and knowing how to run our environment in a desktop, smartphone, or VR equipment.

  2. The second part deals with the basics of A-Frame: building a scene, adding primitivs objects, textures, knowing what components are, and building basic 360º photo environments.

  3. The third part deals with intermediate level A-Frame: lighting, interactions, 3D models, animations, sound, and some additional useful external components.

  4. The fourth part deals with more advanced functions: locomotion, physics, augmented reality, and building our own custom components.

Have fun!


Notice anything wrong? Have a doubt?

Copyright © 2024 Jorge C. S. Cardoso jorgecardoso@ieee.org