Customize the Skybox

Customize the Skybox

A skybox of the application is the the "background image" of your virtual world. It encloses it at a distance of infinity, giving the scene a perception of depth.

A common use of the skybox is to efficiently render a background environment. If done correctly, the transmission between the two might be hard to spot, giving the impression of a much lager modeled scene. An example of this would be modeling a room's interior and using a skybox to display everything outside. To be clear, that does not mean it is a perfectly accurate representation of the surroundings, since everything is rendered far away. But it might help sell the illusion of looking in a "real" environment while being in a room looking outside.

Alongside providing a background, it can also provide lighting information for the whole scene. Often, a special format is used, that requires special cameras: HDRi. A good place to find free to use HDRis (and Materials and Textures) is Poly Haven. "Ready to use"-skyboxes can be found at the Unity "Asset Store" or at "Assets/ExPresS XR/Materials/Skyboxes/".

Static Skyboxes

In most cases skyboxes are just static images. Here is how to create and install one.

Creating Your Own Skybox/HDRi

If you do not find a fitting HDRi or want a very special background, one can be created with a smartphone (of lesser quality, of course). Most smartphones with somewhat recent Android/iOs versions should have a camera app that is capable of creating 360° images. You will need to take a number of pictures to cover the space, as instructed by your app. This will take some time; make sure to choose a location with few moving parts (and people) and consistent lighting, both could lead to off-putting relicts in your image.

Then simply transfer the picture to your PC and move it into your project.

Create a Skybox Material in Unity

Once the skybox image/HDRi has been obtained, move it into your Unity project. Create a new Material in Unity and change its "Shader" at the top of the Inspector from "Default" to "Skybox > Panoramic". Finally, drag your image onto the material's "Spherical (HDR)" property.

Another option would be to simply change the colors of the default skybox.
This is done by copying the material at "Assets/Material/Skybox/DefaultSkybox.mat" or creating a new Material and changing its "Shader" to "Skybox > Procedural".
This new skybox material can be modified, e.g., by changing its color or the exposure (brightness).

With the skybox material created, it now must be set as a skybox for the scene.

Attention: You may probably notice, that your skybox has a seam. It can be removed by disabling 'Generate Mipmaps' in the Inspector of your Texture and apply the changes.

Changing the Skybox of a Scene

After obtaining or creating a skybox material, it can be set by dragging it into the viewport or by:

1. Going to "Window > Rendering > Lighting > Settings".
2. Selecting "Environment" at the top of the window.
3. Assign the skybox material to "Skybox Material".
4. Modify the properties, like exposure and rotation, to your likings.

If the floor seems to be too high for your purposes, try to capture another 360-degree image while keeping your phone close to the floor.

Dynamic/Video Skyboxes

If you want to have animated skyboxes, you can either use a shader or you can use a video to be displayed.
Be aware that generic sky shaders are usually more performant, but they may not display complex surroundings.

1. Drag and drop your video clip into the Hierarchy to create a VideoPlayer.
   Alternatively, you can manually add a VideoPlayer to your scene: Right-click in the Hierarchy, select "Video > Video Player" and add the clip to the created GameObject.
2. Create a RenderTexture by right-clicking in the project explorer at your desired location and select "Create > Render Texture".
3. In the Video Player, set the "Render Mode" to "Render Texture" and set your RenderTexture as input for "Target Texture".
   Make sure to enable both "Play On Awake" and "Loop".
4. Create a Skybox-Material by right-clicking in the project explorer at your desired location and selecting "Create > Material".
5. In the Inspector of the Material, use the drop-down at the top that says "Universal Render Pipeline/Lit" to select the "Panoramic (Skybox)"-Shader (use the search).
6. Drag your RenderTexture from the project explorer onto the box on the left of the "Base Map" property of your shader.
7. Depending on your video type, select either the 180° or 360° render modes. You can, of course, then further customize your material.

EpiSpheres

The EpiSpheres are ExPresS XR's way of having non-spherical skyboxes while providing some more customization options. The system is based on being inside a large object with an inverted mesh (similar to ExPresS XR's rooms). This allows for custom shapes with their own UV Mapping but also for scaling, rotating and moving the "skybox" but does not allow for implying lighting information.

1. Add an EpiSphere via the Hierarchy, by right-clicking in the Hierarchy and selecting an option under "ExPresS XR > Presentation > EpiSphere > ..."
   ... or use your own model! Make sure it is properly epirectangular, UV-unwrapped, and its faces are inverted (or use a "MeshInverter"-Component).
2. Drag and drop your video clip in the hierarchy to create a VideoPlayer. You don't need to do this, if you selected the "EpiSphereVideo" or not planning of using a video. Alternatively, you can manually add a VideoPlayer to your scene: Right-click in the Hierarchy, select "Video > Video Player" and add the clip to the created GameObject.
3. Create a EpiSphere-Material by right-clicking in the project explorer at your desired location and select "Create > Material".
4. In the Inspector of the Material, use the Dropdown at the top that says "Universal Render Pipeline/Lit" to select the "EpiSphere (Shader Graph)"-Shader (use the search).
5. In the Video Player, set the "Render Mode" to "Material Override", selecting the EpiSphere's Renderer in the property field below.
6. You can of course then further customize your EpiSphere and its material.