Freeish Time: Cube joins the Metaverse

Time for the latest and greatest to come out of Freeish Time! Just to refresh your memory, “Freeish Time” is the opportunity for our Cubes to focus on their passion projects outside of their work commitments. They have an entire week to identify a problem, build and create a solution, then present it to the rest of the team during our Friday Happy Half Hour meeting.

This has become an integral part of 3 Sided Cube. The encouragement and time to work purely on whatever their heart desires, all while getting a little reprieve from the hustle and bustle from the normal workload is a welcomed treat. Whether they opt to go the “innovation” or “education” route, that invaluable time to focus purely on whatever it is that intrigues them is pretty rad.

The sky’s the limit when it comes to Freeish Time. We got to sit down with Kevin, our RIDICULOUSLY talented Web Team Lead, to chat about his exciting innovation bringing 3 Sided Cube into the Metaverse…

To get this to work we were missing an important part of the export from MagicaVoxel. This was a PNG that contained colour information that could be applied to a material. A material is a Unity object that has detail about how the a model is coloured (it also includes various properties like how shiny the model should be). Importing this PNG then building a material out of it and then applying it to the office model gives us what we need.

And voila! We have colour…

The next step was to add some First Person Controls, this being, so the user can move around the model with the keyboard and mouse.

Here’s a good tutorial I followed on the process:

In short, I created what is called a “Rig” that includes a body and camera – the camera essentially being the user’s eyes.

The body and camera listen to the mouse and keyboard inputs and move accordingly:

• W – Forwards
• A – Left
• S – Backwards
• D – Right
• Mouse move – look in the direction of travel

At this point I was wondering why the colours didn’t look right. The textures and lighting looked different from the rendered model in MagicaVoxel. This is because this information is not compatible with Unity.

It has to be replicated within Unity.

Adding lighting was an easy addition here. To achieve this I applied a technique called emissive lighting. Where light is not a direct spotlight but essentially a glow.

This tutorial was great in teaching me how to apply that:

Unfortunately I couldn’t adjust separate parts of the model as they were all one object. One learning I got from this was that the model must be broken down, for instance, the glass doors should be a separate object that I can then make semi transparent! This will be a great thing to explore in the next iteration of this project!

Throwing the movement and lighting together gave me this…

Part 2.

The tech

The next step in my VR adventure was to create what is called a “XR” rig.

XR is an umbrella term that includes the following types of applications:

• Virtual Reality (VR): The application simulates a completely different environment around the user.
• Mixed Reality (MR): The application combines its own environment with the user’s real-world environment and allows them to interact with each other.
• Augmented Reality (AR): The application layers content over a digital view of the real world.

The great news was that Unity has been working hard to make it easy for developers to work with XR, (You can checkout some of the documentation here); They have built an entire framework around it with plenty of tools and implementations of different VR kits to make it as universal as possible.

The VR headset we chose to develop with was the HTC Vive Focus 3. It’s an impressive bit of kit with some impressive stats. 

Stats aside I did have a few issues getting the XR toolkit and Unity to communicate with the Vive headset (it would seem that the favourite choice amongst developers are the Oculus headsets)

Eventually, after doing some research I figured out that I had to install some extra plugins with Unity to get the Vive to communicate with the XR toolkit.

Putting the two together

The XR toolkit really does a lot of the heavy lifting here (once I got the headset working with it) – the toolkit essentially maps the inputs from the headset into a set of universal inputs and outputs (much like how previously the letter “W” was mapped to going forwards)

The XR toolkit allowed me to apply what’s called “Continuous movement” to my existing “Rig” by letting the user move around with the joystick and looking around with the headset.