Getting Started Tutorial


Skyboxes and Skyspheres


5 minutes

Posted on: March 6, 2018

Learn Sumerian
Skyboxes and Skyspheres

Tags

environment
skybox
skyspheres

In this tutorial you will learn about:

Skyboxes and skyspheres

In a previous tutorial, we covered the basics of the Environment and briefly described the use of a Skybox and a Skysphere. In this tutorial we will do some exercises to see how Skybox and a Skysphere function in a scene and how they differ from one another.

You’ll learn about:

  • Environment
  • Skyboxes
  • Skysphere

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Step 1: Create a New Scene

  1. From the Dashboard, create a new Empty Scene and name it “Skybox/Sphere”. This scene will only have a camera. You will see a blank canvas with a grey background.

  2. In the Entities panel, click the top-level, or root entity.

    Note: This will always be the name of your scene, which in our case is Skybox/Sphere.

  3. Navigate to the Inspector panel, and then expand the Environment component.

  4. Expand the Skybox property.

Step 2: Adding a Skybox

We start by adding the Skybox, which acts as an infinitely large box covering your scene. Skyboxes have an horizontal cross input format, a six sided drop input for complete 360 degree coverage.

  1. Choose the + button to add a new Skybox.

  2. Choose the edit button (pencil icon) to edit a new Skybox.

A Skybox can be described as an infinitely large virtual box that can be seen only from the inside. On this box, you can project any texture or image.

At the bottom of the Inspector panel you can now see six squares, known as a cube map. Each side corresponds to a side of the Skybox in the canvas.

  1. You can take any image of your choice and drop it on each of the six inputs that complete a full Skybox. Once you do, you’ll notice that image on all sides of your view in the canvas.

  2. Your Skybox property should look like the following (but with your image in the cube map)

Now you have this image, a “blue print” of the Sumerian View Room scene template, on all six sides of your scene.

Step 3: Adding a Skysphere

If you’ve ever used the Default Lighting scene template, you might have noticed it has a blue sky. This is actually a Skysphere prebuilt for that template.

There is a drop-down menu within the Skybox property named Shape. Right now it’s set to Box, but there is another option: Sphere.

Note: Skysphere images and textures need to be 360-degree equirectangular images.

For this tutorial, we’ll use images available in the asset library. However, we also recommend using the Wikimedia Commons for more options.

  1. Choose Import Assets, above the canvas.

  2. The asset library populates with assets you can use. Find and add the “Skysphere Pack” asset.