Building Virtual Office in Unity

One fine morning. My boss told me, hey, let’s make a 3D replica of our office. It was before Metaverse. We didn’t know it’s gonna blow up this big, we just thought it’d be cool to make something like this.

As a junior Level Designer and 3D artist (We didn’t have a big team back then either), I needed to plan what I have to do. Small we may be, we always like doing structured work. I made my checklist and started working step by step.

So, needed assets as reference

Collecting photos and videos for reference is the next step in the virtual office environment development process. So, first and foremost, I began gathering references. I photographed and videotaped our office, as well as took the basic dimensions of each room. I used an app called ARPlan 3D to take the rough measurement of each room. It wasn’t 100% accurate but it was credible.

As soon as I had the necessary references I got to work. I blocked out the whole office in Unity. Then I started modeling out the walls, floors, and props in Blender. After that was finished, I imported everything over to Unity, lit the scene, added a few interaction points, and prepared a demo scene for my boss to see.

Here are the results from the first iteration

We need WebGL

After I showed the initial demo. My boss was like. Hmm… we need to have this on the browser. Since most people won’t have beefy hardware and most people would just want to see the demo without downloading. Smart as it may sound, it wasn’t easy for me. Because Porting to WebGL was a huge pain.

Poly Count

When I was designing the desktop application, I was more focused on making it look good. I didn’t push myself too much to lower the poly-count as it didn’t give much of an edge. But that’s an entirely different discussion when we are talking about browser-based applications. They need to be optimized. They need to be optimized VERY well. It’s also time-consuming to make a model low poly from high-poly.

Real-time lighting

Real-time lights look great and are easier to implement. But they were expensive. Taxing on the hardware. For a desktop application, it’s probably okay but for a browser application, it is not. My entire scene was based on real-time light. For WebGL, I had to think of something else. Something that wasn’t as taxing. Baked light was the solution. To be honest baked light looks much more realistic for cases like this. The only pain is it takes a very long time to bake the lights. Also, it increases the build size.

Build size

The desktop application was around 200–300MB. It’s probably an acceptable size. But for the web, we need something less than 50 MB. Imagine turning a 300MB application into 30–40 MB.

Post Processing

Post Processing is something we do to make things look good. Let’s not get into the too details, instead, let’s show you some examples with and without Post Processing. And this was something that wasn’t fully functional on the WebGL at the time.

To know more about post-processing you can head over to this link.

As a result, we had to reconsider our strategy. The balance between graphic performance and real-time simulation is the most important issue to consider.

We set right to work repairing everything that needed to be fixed to run on WebGL now that we’d recognized our issues.

Performance boost on the web

The system’s most significant criteria were that it be extremely light, with average consumer computers as our primary objective. So, we couldn’t go overboard with the graphics, but we also needed to provide something that satisfied a basic quality. As a result, we decided to create the 3D components with a few essential considerations in mind.

1. All 3D models will have an extremely low polygon count
2. The texture size cannot exceed 512x512 pixels
3. The lightmap and reflection must be baked
4. In WebGL, occlusion culling is required
5. Make each room a separate scene so that it can load and reload as needed during runtime

We saw a significant performance gain on the web after completing the second iteration.

We lost some quality but compared to the performance boost it was acceptable. The download size was down to 25MB.

Difference between VR and WebGL before and after?

The VR version has a real-time reflection whereas the WebGL version has a low-quality baked reflection.

VR has high-quality real-time lighting. In WebGL, there is also no bloom effect whereas WebGL provides low-quality baked lighting.

There is no ambient occlusion, poor reflection, and low bounce light.

No Ambient Occlusion or good tone mapping in the WebGL version.

The floor had a good reflection, later we added a floor mat to save on performance.

Conclusion

This was a terrific opportunity for me to learn a lot of new things and be a part of the Virtual Office Tour. If you want to make a WebGL virtual tour, I believe the information I provided will assist you in developing a strategy for your system. If you want to experience it yourself, here is the WebGL demo.