Mult-user experiences on the internet (like 3D configurators) are well advanced since the rapid spread of online chats and social networks. Advances in Virtual Reality (VR) make the Web an immersive and interactive environment. Neal Stephenson imagined this group of shared, persistent and interconnected 3D virtual spaces and called them the metaverse – today we build them with HTML, JavaScript and A-Frame.
Given the smooth learning curve of HTML, A-Frame is the perfect choice for those who want to create virtual spaces on the web with a few lines of HTML and JavaScript. With the implementation of link traversal through browsers, we have come one step closer to teleporting from one experience to another without commuting in the real world. However, the cooperation model to facilitate the exchange of information between the inhabitants of Metaverse is still missing. WebRTC plays a key role in this exchange.
Peer-to-peer communication with WebRTC.
WebRTC is a Web API that is available in most browsers (including Safari from September this year) and enables the exchange of information without intermediaries on a peer-to-peer basis. With WebRTC it is possible to implement the necessary infrastructure to continue the experience with the integration of Metaverse.
The greatest complexity of WebRTC comes from session management, peer discovery and signaling, all of which are necessary to identify the connections between browsers. Once peer identities are established, the standard can provide end-to-end channels for sharing media and data.
The Sharedspace component.
To harness the power of WebRTC for A-Frame users, the Sharedspace component was developed. The component provides a collaboration model where participants can enter or leave a named area, share audio and status, and send JSON serializable objects to other peers.
The component does not handle the WebRTC API directly. Instead, a modified version of webrtc-swarm is used as a wrapper library. I chose it because of its simplicity, space requirements, clarity of source code, and ease of use.
You can experiment with a VR chat on Glitch or browse the project to learn more about the Sharedspace component. The repository contains extensive documentation with explanations and examples for other common use cases. The Sharedspace component is not a general networking solution for A Frame, and there is no easy way to share entities between multiple instances of an application. However, the ability to send data makes it possible to create new forms of collaboration based on this component.
Compatibility.
The Sharedspace component requires a browser with WebRTC support, i.e. any current version of the most popular mobile and desktop browsers. Chrome also requires that the page that supports WebRTC be served on HTTPS unless you are serving from localhost.
How it works?
This is the minimal HTML code you need to implement a shared space:
However, the above code always associates with a room called room-101 and the avatar representations are red balls that are not effective representations of human participants. Let`s adjust the settings to change this.
Important: To test your progress, you need at least two clients connected to the same room. When testing, you will notice that the peers are connected because the camera is reset and the application no longer allows them to move the avatar. When this happens, look for a red ball: this is the other p.
Randomly generated room names.
The Sharedspace component tries to connect to the room as soon as the A-Frame scene is finished. Once the component is connected, changing its properties has no effect. To prevent the components from connecting to the server, set the hold property to true:
Prepare a script to change the scene after loading. Insert the following script tag just before the final body tag:
Replace the comment with the following JavaScript that checks the current URL to find a room you can connect to. If no room is found, the app generates a new room and replaces the URL in the address bar so the user can invite his friends:
The most important part is the last line in which you set the name of the room and reset the Hold property to false so that the component can connect.
User-defined avatars.
The avatars component is available when you install the Sharedspace component. It manages the A-frame scene to provide each participant with an avatar representation. By default, the avatar component searches for a template tag and uses its content to instantiate the avatar.
Replace the content of the template tag with the following primitives:
Fixing Orientation.
Not knowing where the camera is pointing when you connect can be annoying. Let`s fix this. When a participant enters the room, the avatar component instantiates the avatar template and sends an avataradded event to its entity. This allows a dynamic configuration of the template.
Find the line in which you receive the room element and insert the following code directly there (before setting hold to false):
Note that avataradded does not guarantee that the avatar unit has been loaded. You should wait until the avatar is fully loaded before it is safe to change other components. The code uses the underlying Three.js API to calculate the correct alignment of the avatar.
Positional audio.
Using WebRTC to stream audio is so common that the Sharedspace component in conjunction with the Avatar component makes it very easy. Simply set the Audio porperty to true:
The next time you load the event, the browser will ask for permission to unlock your microphone.
When participants give permission, the A-frame avatar position audio is automatically managed by the avatar component. Positional audio means hat the sound is planned to the left or right according to the real position of the listener (i. e. the camera). Wearing headphones or earphones enhances this effect.
Sharing position.
You may have noticed that the avatar representing the user has a special treatment. Because his avatar “wears” the camera when you look around, the orientation is shared by the other participants. By default, avatars add some specific components to the user`s avatar.
You can use A-frame mixins to control which components are applied to the user`s avatar. Mixins are component containers and entities can out the mixin attribute on a list of mixin ids to inherit their components.
Add an a-assets tag directly after the a-scene tag with a mixin and set its ID to User:
The share component (also available after registration of sharedspace) specifies which components should be kept synchronous among other peers.
By setting the onmyself of sharedspace property to the mixin ID, you instruct avatars to add this mixin to the user`s avatar.
Send a receive messages,
The sharedspace component allows the user to send messages to other peers. You use this function to force a change to the default environment when you print the space bar.
Locate the line where you added the listener to the avataradded event and add the following code to manage the environment preset:
Finally, replace the comment with the code for receiving and sending messages:
Conclusion.
Multi-user applications are not limited to chats: other participative experiences fit the sharedspace model. Even if the proposed participation models is limited, other components can build on it to enable new interactions.
Thank you for reading.
Leave A Comment