How to Make an Interactive VR Whiteboard for Virtual Meetings

The COVID-19 pandemic has urged the world to study and work from home in a matter of days. The tendency to remote collaboration and distance education has long been observed. Though these unprecedented times has acted as a catalyst for the immediate changes. Phone and video calls became not enough for such a long outbreak.

Read more: Turn Big Challenges Into Meaningful Change in the Post-COVID Era

Learn which key metrics take into account when adapting to changes

Virtual reality in its turn offers the ability to feel like people are in the same space together. It helps to identify each other emotions, reactions, intents without the need to travel which saves time, money, and environment state. Moreover, participants can share, study, and work together in real-time. For example, they can import 3D objects or custom environments, collaborate via an interactive whiteboard (or interactive blackboard), revisit simulations, etc. VR completely removes distractions and makes people really focused on what they do.

Sure, there is also a number of widespread myths about VR. Among them is that high-quality VR is expensive. However, with the introduction of a popular standalone VR headset Oculus Quest, the entry into VR became much more affordable.

All the above applies both to business meetings and education purposes. One of the core elements of these processes is digital interactive whiteboards that help people to work together by drawing their ideas, assumptions, conclusions, etc.

Interactive whiteboards for business make it easy to conduct brainstorming sessions, scrum meetings, presentations, and so on. VR interactive whiteboards for education make the learning process easier and students study much faster by practicing in a focused environment

So let us uncover the technical side of creating such an important part of virtual meetings held in a VR conference room – interactive whiteboard!

From the technical perspective, the interactive whiteboard has 2 features:

1. It displays the pixels, so we can use a plane with texture.
2. It reacts to collisions with marker, or pointer raycasts, etc., therefore, it should have a collider.

So, to create a simple VR whiteboard, it’s enough to make a plane with a texture and a collider. When the marker or pointer raycast collides with the whiteboard, the texture pixels in the radius around the collision position are updated.

This setup would work for a single-player whiteboard. However, the challenge is how to allow multiple users to draw on a single whiteboard simultaneously over the network.

The simplest and most straightforward way would be to use the collisions of synchronized avatars in a single room on the same device with the whiteboard in the same scene. However, there are some limitations to this approach:

If everyone leaves the room, the drawings on the whiteboard are not saved. They need to be uploaded to an online server or storage which takes time. And when users leave, they’ll need to wait for that upload to complete. In the case of internet problems, the drawing can be lost.

Each connected device has its own representation of the room. Some things like network lag and small differences in avatar and movement positions due to numbers rounding can influence the resulting image on the whiteboard. So the image can look different on different devices, although they’re connected to the same room.

The solution here is to handle the VR whiteboard drawing on the server. This will ensure that:

1. The drawing can be saved even after everyone exits the room. No need to wait for saving before exiting. No need to save the whiteboard manually.
2. There’s a single place where a ‘true’ drawing lives. It’s always possible to update local whiteboards on each of the connected devices to the server state and ensure that the drawing looks the same on all the devices. It’s also possible to leave the room and reconnect – and the actual whiteboard state will be loaded from the server.

So our choice is to use a server. This way, the clients send commands to the server, like “draw with tool T in position (X, Y) and radius R”. Then the server stores the list of commands (for history and Undo operations) and a resulting image.

The commands from clients to the server are rather small so the server receives them pretty fast.

Still, there’s some lag. To reduce the consequences of it, it’s a good practice to add also the timestamp to operations and perform them in order of their timestamps.

The other situation is with a response from the server to the client. The result of drawing is a ready image. However, sending images over the network every frame in realtime is almost impossible. That’s too much data. So, to achieve acceptable performance and traffic consumption, we’ll be using a different solution – the authoritative server model with predictions.

The authoritative server with predictions is a networking architecture and concept that’s widely used in real-time multiplayer first-person shooter games. It allows us to achieve the most lag-free real-time experience in multiplayer games/applications, compared to the other options.

This approach resolves the problem of lag that occurs when data is transferred to the server first, and then back to the client. The idea is that the client doesn’t receive the result (or state) from the server. Instead, it gets the commands of all the players/users, with their timestamps.

The client should be able to perform the application logic absolutely the same as the server (we’re going to use the same library with the whiteboard logic and share it between client and server). So the client rolls the time back, performs the actions of other users in the past (according to their timestamps), and applies the result it achieves. Since the same logic is used on client and server – the same result is achieved on both, with minimum data transferred over the network and with no lag.

There are also some other challenges. For example, in Unity Texture2D implementation completes the updates pretty slowly, which kills performance.

We have experience dealing with that problem. So the possible solutions we found are:

1. Use of the small textures. Make the whiteboard of many small textures instead of a single large one. Small textures are updated faster.
2. Replacement of Unity Texture2D implementation. Instead of it, use the native plugin and either DirectX or OpenGL to update the texture.

These simple actions make updates faster, therefore, keeping the overall performance on a high level.

Read also: What’s New in Unity3D 2020 and How It Can Boost Businesses

Discover 7 core Unity 3D features that simplify the development process

The estimations of interactive whiteboard development usually vary from one VR development company to another and depend on many factors. Among such are:

• the development team structure;
• development tech stack;
• technical expertise;
• the complexity of the whiteboard functionality.

Usually, the overall cost of whiteboard development depends on the estimation in working hours necessary for the execution and the development rate. The geographic location of developers along with the level of their technology proficiency impacts the rate they charge per hour. It varies from $25 to $150.

At Visartech we’ve calculated the rough estimation of the VR whiteboard development and are ready to show it here.

Let’s start with the multiplayer whiteboard drawing in VR!

Also it really important to implement the chalk menu with various options. The table below shows what goes into this process.

Across the globe, the average VR development rate is around $50 per hour. So we’ll use it in our calculations.

So how much does it cost to build an interactive whiteboard in virtual reality?

In order to create a multiplayer whiteboard in virtual reality, you would need from 192 to 297 hours. It will cost you from $9,600 to $14,850. Additional tools like chalk menu and other options will cost from $2,100 to $4,200.

In total, the VR whiteboard development cost may take from $11,700 to $19,050. The task can be completed within one or two months.

What is the structure of a development team that can create a VR whiteboard?

We’ve calculated the above-specified estimation taking into account the following development team structure:

• Project Manager
• Unity Lead
• Unity Developer
• .NET Lead
• .NET Developer
• DevOps
• QA

Sure, every project is unique and requires a certain approach while implementing the most suitable feature set. That was a rough estimation of the interactive whiteboard development.

If you want to go deeper and receive a detailed estimation specifically for your digital project, don’t hesitate to leave a request!

Making a multiplayer whiteboard is a non-trivial task with many challenges. However, with vast experience in VR app development, including the resolution of many similar tasks, it is possible to find the solution for each of the challenges.

This Unity whiteboard technical concept lays the foundation for a whole new way of digital interaction. It helps end consumers to collaborate within brainstorming, presentation, education, or even implementing the design thinking methods as in a real workspace or learning hub. People can perform their work duties feeling connected with each other and completely focused on the task at hand.

Want to create the best virtual workspace? Let us design your own whiteboard along with all the required features for most productive business meetings and learning sessions!