INTRODUCTION

After experimenting with creating a 3D interactive space on the web using ThreeJS, our team became curious about how people from different parts of the world could join in and interact within this virtual environment.

To make this happen, we needed a way for send and receive data between multiple users in realtime. So, we decided to research about Socket.IO for sharing data in real time and WebRTC for video streaming. Our quest also involved figuring out how to seamlessly integrate these technologies into the ThreeJS web framework.

We’ve built a virtual online office inspired by our real company workspace. Here, users can not only see each other's characters but also chat instantly, share emojis, wave hello, and even have video calls. Come along as we explore how these simple and powerful technologies are changing the way we connect and work together in the online world.

Please check our demo at: udl-3d-web-multiplayer.onrender.com/

KEY FEATURES

This webpage contains almost essential features that foster seamless communication and collaboration for the team. Below are some key features:

Furniture Arrangement

Take control of your virtual space by arranging furniture to suit your preferences. Whether you prefer an open-plan layout or a more segmented workspace, our platform allows you to move desks, chairs, and other elements with ease. This flexibility ensures that your virtual office mirrors the organization and flow that best suits your work style.

Video conferencing

Real-time, face-to-face interactions where multiple individuals can call, see each other through webcams in real-time, and hear each other's voices.

Instant messaging

Facilitate quick back-and-front communication with a built-in chat system.

Other interactions

You can move around like in a real office, interacting with your team through actions and emotions.

TECHNOLOGY WE HAVE USED

ThreeJs and React ThreeJs Fiber

In the previous article, we've introduced ThreeJs and React-Three-Fiber. They are libraries that allow us to create and render 3D graphics in a web browser. If you want detailed information, please refer to the link.

Socket.IO

For real-time interaction, we opt for socket.io, an event-driven library that enables seamless, bi-directional communication between web clients and servers.

By using this, We can synchronize data between multiple people when they access our web. For instance, a player's position changes are instantly reflected for all other players, allowing synchronized viewing of movements in real-time. Additionally, we can employ this for messaging, emojis, sending animation actions, and even synchronizing room arrangements.

Socket.IO uses WebSocket, an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server, for transport data when possible. Socket.IO hides the complexities of WebSockets and other low-level protocols, providing a simpler API for sending and receiving data.

Socket.IO makes the room management easier to manage multiple users in the same virtual space by creating "rooms" where users can join and interact.

Simple flow when synchronizing moves using socket.IO

WebRTC

We want to go beyond just sending simple data, we want to video call each other. Constructing such a system from the ground up using Socket.io proves to be overly complicated. Therefore, it's a better idea to use a prebuilt library built specifically for video streaming. So we decided to use WebRTC, a browser-based technology for real-time communication, allowing video chat and file sharing without additional plugins.

WebRTC, peer connection

WebRTC allows secure, direct communication between peers, making video calls of high quality with minimal delay. This means that virtual meetings in the Virtual Office not only look good but also feel like real-life interaction.

However, WebRTC uses peer connection between 2 devices, which means we can only connect 2 people to perform a video chat, unlike the socket server where a lot of users can join together. So the question here is: how can we create virtual meetings among many members in an office? That’s multiple peer connections. To connect everyone in a meeting, we create a peer connection for each pair in the group. The figure below shows how it works:

WebRTC, multiple peers connection

Don't hesitate, let's try our video conferencing feature to experience that awesome technology. Our focus on innovation ensures that your virtual workspace stays up-to-date with the latest technology. Join us on this journey toward a more connected, collaborative, and productive future.

CONCLUSION

In conclusion, our exploration into the integration of Socket.IO and WebRTC within Three.js has illuminated the vast potential for real-time interactivity in web applications. We've witnessed the seamless communication between users, transcending geographical boundaries and fostering engaging experiences.

Through the utilization of Socket.io and WebRTC, our virtual office transcends being a mere display of a room; it has evolved into a space where individuals can connect and interact with each other. This opens the door to limitless potential ideas, ranging from the development of a Metaverse to virtual offices and online games.

Reference

https://threejs.org/

https://github.com/pmndrs/react-three-fiber

https://socket.io/

https://webrtc.org/

Vitalify Asia Blog

Sharing & Recording Screens in 3D Virtual Offices

Realtime Multiplayer Worlds with ThreeJS & WebRTC