# Cubemap Skyboxes

**URL:** <https://forum.defold.com/t/cubemap-skyboxes/83259>\
**Category:** The Defoldmine\
**Created:** [September 24, 2026, 2:42pm UTC](https://forum.defold.com/t/cubemap-skyboxes/83259 "2026-09-24T14:42:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pawel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pawel/32/24623_2.png) [@Pawel](https://forum.defold.com/u/Pawel)\
**Post date:** [September 24, 2026, 2:42pm UTC](https://forum.defold.com/t/cubemap-skyboxes/83259/1 "2026-09-24T14:42:33Z")

</div>

# Skyboxes and cubemaps in Defold

When working with 3D games, sooner or later you will probably want something more interesting than a plain background color. This is where **skyboxes** can become helpful.

## What is a skybox? 🏞

A **skybox** is a simple technique used to simulate sky or far surroundings in 3D games. When you look around in such a game you see a part of it.

To achieve it, imagine you are with the camera inside a huge cube or a sphere. The inside should show the sky, clouds, mountains, a distant city, outer space, or whatever environment surrounds your level. Therefore the viewer is simply surrounded by a texture covering the full 360 degrees.

Because the skybox is treated as being infinitely far away, when you move inside with the camera, it does not make those distant mountains or clouds suddenly get closer. You can look around in every direction, yet the environment remains on the horizon.

This makes skyboxes a very cheap way of giving a 3D scene a convincing surrounding environment.

## What is a cubemap? 🗺

The texture usually used for a skybox is called a **cubemap**.

A cubemap consists of **six square images** , corresponding to the six faces of a cube:

- right and left
- top and bottom
- front and back

You can imagine taking a cube, cutting it open and unfolding it, like in this example from the FreeStylized cubemap:

 ![cubemap_layout](https://forum-defold-uploads.b-cdn.net/original/3X/b/f/bfec4158ff67f28358afb03c773c88171d934268.png)

Together, those six images describe everything visible around one point in 3D space. Instead of looking up a color using normal 2D UV coordinates, a shader samples the cubemap using a **3D direction**. Looking up samples the top face, looking right samples the right face, and so on. Defold defines a cubemap in the same way: six textures mapped onto the sides of a cube.

Cubemaps are useful for more than just skies. They can also be used for things such as environment reflections.

## Cubemaps in Defold 🧊

Defold has a dedicated `.cubemap` resource where the six textures are assigned to:

**Right, Left, Top, Bottom, Front and Back.**

 ![image](https://forum-defold-uploads.b-cdn.net/original/3X/b/7/b7582a7ca5333743d3afe86e3e99f98595c8992f.jpeg)

Once the six images are assigned, Defold treats them as a **single** cubemap texture which can be used from a shader through a `samplerCube`. This is really important for optimizing rendering.

## Where can I get skybox textures? 🔗

There are plenty of cubemap resources online. One useful source is [FreeStylized](https://freestylized.com/all-skybox/?utm_source=forum.defold.com&utm_medium=article&utm_campaign=defold), which has a large collection of stylized skies, including sunny, cloudy, night, anime-inspired and other environments. Many are available as cubemap textures as well as 360-degree images.

There is one small trap when using their cubemap downloads with Defold.

The mapping diagram supplied with the textures uses a different orientation, than we need in Defold:

| FreeStylized | Defold |
| --- | --- |
| px.png | Right |
| nx.png | Left |
| py.png | Top |
| ny.png | Bottom |
| pz.png | Front |
| nz.png | Back |

Simply Right is switched with Front, and Left with Back (or X with Z). so refer to this map instead:

 ![cubemap_defold_freestylized](https://forum-defold-uploads.b-cdn.net/original/3X/1/8/183663d4a24015050a9ad2b3f4fff8f6545ebe2d.png)

If your sky looks strangely rotated or the seams do not connect correctly, this is the first thing to check.

## Rendering the skybox 🏙

Creating the `.cubemap` resource gives you the texture, but it does not automatically put a sky into your scene. You still need to render it.

The easiest starting point is Defold’s official [Skybox example](https://defold.com/examples/model/skybox/). You can download it, replace its cubemap with your own six textures, and experiment from there.

The example renders geometry around the camera with a special material. Its fragment shader contains a `samplerCube` and simply samples the cubemap using the viewing direction:

```glsl
uniform samplerCube cubemap;

void main()
{
    gl_FragColor = texture(cubemap, var_texcoord0);
}

```

The vertex shader also forces the skybox to the far depth plane, so normal 3D models remain in front of it. The original vertex position is passed to the fragment shader and becomes the direction used to sample the cubemap. That’s it!

---

<div class="post-metadata">

**Author:** ![selimanac](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/selimanac/32/6397_2.png) [@selimanac](https://forum.defold.com/u/selimanac)\
**Post date:** [September 24, 2026, 3:09pm UTC](https://forum.defold.com/t/cubemap-skyboxes/83259/2 "2026-09-24T15:09:23Z")

</div>

A few online tools I use to convert/export them, which might be useful:

- [Panorama to Cubemap](https://jaxry.github.io/panorama-to-cubemap/)
- [Panorama to Cubemap Converter in Browser](https://www.panoton.de/tools/cubemap-converter/)
- [HDRI to CubeMap](https://matheowis.github.io/HDRI-to-CubeMap/)

---

<div class="post-metadata">

**Author:** ![ackle](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/a/13edae/32.png) [@ackle](https://forum.defold.com/u/ackle)\
**Post date:** [September 24, 2026, 3:36pm UTC](https://forum.defold.com/t/cubemap-skyboxes/83259/3 "2026-09-24T15:36:45Z")

</div>

It’s also useful to zero out the translation part of the worldview matrix so that the camera can move around the scene, and the skybox will still surround it without needing to be moved as well.