WebVR Collaboration Tutorial

By Jakobi Haskell

Finished Product: 

Here is a tutorial for making a collaborative VR website using A-frame for webXR ability and  the socket.io JS library for multiplayer ability.

Socket.io uses websockets, a bidirectional communication framework, to send messages between client and server. In this tutorial, we

will use web sockets for each client to send a message to the server with their positional data, and the server will broadcast that message out to all the other clients, which will create representations of them in A-Frame (which in our case our cones). 

To start, you will need:

1. A web server

2. A TLS-certified domain

3. A code editor

4. A github account

If you don't know how to create a webserver and certified domain, follow the tutorial linked here.

Steps

1. The first step is to clone both the client and server repo somewhere accessible on your web server. Then, open both of them in a text editor of your choice. 

2. Once you have both repos in your text editor, open the wsmulti-server repo and copy the contents of the .env_sample file into a new .env file. On unix-based machines you can do this with cp .env_sample .env 

3. Change the env variables in .env to the ones that correspond to your server. 

   1. Note: the key and certificate paths are the paths to the TLS certificate on your server's OS. 

4. Repeat steps 2-3 with wsmulti-client repo. If you are using a web server like NGINX or Apache, make sure that their front-end files point to the client folder.

5. Open the wsmulti-server repo and run nodemon server.js. This ensures that the server file is running and constantly and gets updated when changes are made to the repo.

6. Go to the url of your website. You should see a 3D interface and a VR button in the bottom right. When other people connect to your website in VR mode, you should see cones that map to their controllers position. You have now set up a collaborative webVR environment.