WebVR Collaboration Tutorial with A-Frame

@Brian Kim, 2023

Final Product

47bdfba66451fc1ebc20aac3e8427331.mp4

Overview

networked-aframe is a Javascript project designed to allow A-Frame projects run online multiplayer settings. This allows for a variety of collaborative elements to be included into WebVR projects built on A-Frame.

For this tutorial, I will be demonstrating how to run a multiplayer room on Glitch. This is the recommended approach, as Glitch is widely used for testing and hosting A-Frame projects. In addition, even though there is support for hosting a multiplayer setup on Heroku or AWS, Glitch is far more efficient and simple.

In this tutorial, I will show how to set up a basic Glitch project using networked-aframe. I will also provide instructions on how to create support for VR headsets, as networked-aframe was originally designed for use with browsers.

Steps

1. Go to this link. It will take you to an existing Glitch project that incorporates networked-aframe, and it can be remixed to include our own A-Frame objects.

2. At the top of the window, click on the "Remix" button. Assuming that you have already made a Glitch account, this will open a new Glitch project under your control, with the same code as the previous library, including support for networked-aframe.

3. Open the live site for your new, remixed project on a computer. If you open multiple tabs and jump between them, you should be able to see the blobs representing other users moving around. However, if you try to open the link in on your headset, you will not be able to move around.

4. If you open the index.html file in the folder 'public', you should be able to find the following region of code:

Add the following lines of code:

<a-entity oculus-touch-controls="hand: left" ></a-entity>

<a-entity

oculus-touch-controls="hand: right"

id="right-controller"

oculus-thumbstick-controls>

</a-entity>

and change the "id" to "rig".

Next, scroll up to the <head> region and add:

5. At this point, you should be able to have multiple users in a single Glitch room at the same time, with the same setting.

Future Expansions

Despite a lot of testing, I was not able to get the avatar to move with the VR controls in the screens of other users. This included attaching objects to the controllers, looking for headset support for A-Frame, using teleportation, and trying to manually reimplement object movement in teleportation. Some of the test code is here.

Successfully implementing moving avatars would significantly improve the collaborative experience.