Building A 360 VR Tour

We all live near cool places with cool stories right? And sometimes those stories are very physically connected. The history of that lamp on that table isn’t as meaningful in a book, but it’s also maybe not something that everyone on every tour cares about. Enter virtual reality touring.

I’m gonna start of with the warning that the source code for this one isn’t available since I built it on company time, but I’ll give an overview of the basics I went through. Also if you use the Google Cardboard plugin in Unity it’s super easy.

We basically only need two things to make ourselves a little VR tour, (other than time and a little computational elbow grease) A 360 image(s) and a viewer. I picked up a Samsung Gear 360 (gen 1) for about $80 and a decent cardboard-like viewer from 5 Below but you could take a photosphere with the Google camera app and use a literal cardboard viewer (a lot of booths give them away at trade shows). There’s definitely better stitching from the Gear 360 and it’s even more noticeable in VR, but the Photosphere is definitely ‘good enough’ for a DIY project.

Google Photosphere
Gear 360

Now we need to display it. If you wanted to you could just stick in on an outside in sphere, center it over the camera and your done. But that’s not super performance friendly and we want to be able to draw some floating UI over this. So we need a skybox shader. Here’s one straight from Unity https://github.com/Unity-Technologies/SkyboxPanoramicShader

Skybox shader

At this point you have something functional that will impress a lot of people, but only took you a few hours to make, but we can do a little better right? One of the bigger limitations on phones is the max texture size is usually limited to 4k. Even a basic 360 panorama is at least 8k wide (and obviously better camera, moar pixels). *womp womp* If you’re used to video game development you’ve probably been wondering why were using a sky sphere instead of a skybox from the very beginning and you’re 100% right. I found this website that converts panoramas to cubemaps, a couple of the sides came out backwards, but it still took less time to fix than writing my own >.> https://jaxry.github.io/panorama-to-cubemap/

So we go from this, to this:

 

This basically quadruples the width of panorama we can cram into a mobile device (which more pixels than the Gear 360 provides) but it is extremely hard to stream video to a cube-mapped skybox since that would be 6 video streams. (Why yes, yes you can have a video for a skybox with a little render texture magic.) If you’re doing video you’ll probably just have to deal with less pixels until phones get better.

Finally I threw into some UI plugging my bud Tom and his awesome coworking space. You should check them out!

This app is a great icebreaker and a way for people to get to know you and the world you live in. Take a tour of our office at the Factory and get to know us!

Download APK

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s