Guide to Using THETA Images With Unity Background Skybox


#1

In order to help developers use THETA images in their projects, @jcasman and I have been working on a demonstration of THETA images in Unity Skybox. This video tutorial covers the steps.

We’ve prepared four scenes. Each scene only takes a few minutes to build. It would be better if @jcasman had supplied me with images of scenery without people. It’s better if the scene is taken outside. For example night sky, mountain view, canyon, agricultural field, city landscape.

This is the original scene taken outdoor in front of a museum by my daughter.


This is a scene of San Francisco in front of the Oppkey global headquarters. Is that right, @jcasman?


This is a scene taken from a museum.


This is scene taken at a bar where one of the staff looks like a giant.


Unity is free. You can download it from here.

The Unity project file is here. (151MB download)


#2

Installing Unity and Navigating a Project

If you want to experiment with Unity and have no experience.

Installation

Download and install Unity

Download project files

Unzip project folder. It is called Pusheen World

Open Downloaded Project

Open project folder in Unity

Go to the Project panel and select Scenes

Double click on one of the Scenes

In this example, I am using art_museum

Navigation in Unity

In the top Scene view, click and hold the right mouse button.

Use the mouse to move the camera. Mouse the WASD keys to move the player.


#3

Importing THETA Images Into Unity

Drag the THETA image into the Images folder of Unity.

Click on the THETA image in Unity. Go to the Texture Type in the Inspector.

Select Cubemap

Click Apply to transform into Cubemap texture.

Create a new Material in the Materials folder.

Select the new material.

In the Inspector for the material, select Shader -> Skybox -> Cubemap

Drag the material onto the sky in your scene.

Here are two additional examples using THETA images.


#4

Build and Export to Web

Test the web export experience.

Click on the link below in Firefox or Safari (not Chrome). Navigate with arrow or WASD keys plus your mouse.

https://codetricity.github.io/theta360aurora/


Select WebGL as the Platform.

Open the index.html file in Firefox. You can also upload it to a web server. In my demo, I used GitHub Pages.


This is the original image before importing it into Unity.


#5

Cool how the color of the sky image reflects some on the objects below. In this case the green of the auroras. That’s automatic? You didn’t actively do that, correct?


#6

Correct. There’s a light source inside of Unity. (the light is virtual). It reflects off the sky. Unity handles the shadows and lighting automatically. The shadows and lighting change as the player walks around the scene.

It’s all automatic. It only takes a few minutes to create a scene. Right now, I didn’t link together multiple scenes, but it’s easy to change the skybox image (the background) when the character moves around.

I think this could be useful to quickly build thousands of scenes from places all over the world and allow the in-game character to shift between places quickly.

This is the bare minimum needed to see an image in Unity. I haven’t looked into changing the perspective of the skybox with player movement. For example, zooming in on the image as the player gets closer or lowering the image when the player jumps.

The images seem usable as a background mockup or a background for a virtual tour where the main point of interest is something else in the foreground.

Give it a try!


#7

If you want to use Chrome with WebGL, you must enable WebGL Draft Extensions. This is not enabled by default.

To enable, got to chrome://flags and then search for WebGL. I tested it with UnityGL and it works with the THETA media and Unity applications.


#8

how can i combine 360 images with 3d mdoels?


#9

how can i combine 360 images with 3d models like terrain?


#10

In these examples, the 360 image is used for the skybox, the “sky” of your scene. You can drop a terrain on the floor of your scene. In these examples, the bird and dog are 3D models, I imported into the scene.

Follow this video below and try and drag some assets onto the plane. Have fun!