We use cookies to enhance your experience, analyze site traffic, and personalize content. By clicking “Accept All”, you agree to our use of cookies.

Cookie Preferences

Manage your cookie settings. You can enable or disable different types of cookies below. For more details, see our Privacy Policy.

Background Effect

This tutorial shows multiple ways to display a background in Wonderland Engine:

3D Background 

Sky 

Sky rendering has been there since the early games. It gives a sense of depth and virtually increases the size of the world to the player’s eye.

There are many techniques to render sky:

  • Atmosphere rendering
  • Cubemap image (also called “Skybox”)
  • Equirectangular image

Currently, Wonderland Engine only supports the latter.

Equirectangular image 

An equirectangular image is obtained by projecting a 360 degree image onto a flat surface. It has an aspect ratio of 2:1, so the width is twice as large as the height.

Below is an example of what an equirectangular looks like:

Background Effect

Let’s see how we can create a sky in Wonderland Engine!

Import 

First, import your equirectangular image: drag’n’drop the file from a folder into the editor’s Assets Browser, then drag’n’drop the image from there into the Scene view to create a texture for it.

If you don’t have an equirectangular image, find some free options in the resources list below.

Material 

Create a material to render the sky texture:

  • Go to Views > Resources
  • Select the Materials tab
  • On the upper right, click Create
  • Double-click the name to rename it (optional)
  • Select Sky in the dropdown in the pipeline column

You will end up with a resources list that looks like that:

Background Effect

Render Settings 

We can now link the sky material to the sky renderer:

  • Go to Views > Project Settings
  • Scroll to Rendering and open the section
  • Scroll to Sky and click on enabled
  • Assign the sky material to the material dropdown
  • Set the texture property to the sky texture

Background Effect

Gradient 

Besides using a texture, you can also use two and four color-stop gradients.

Update the Sky pipeline and toggle on the GRADIENT or GRADIENT_4_STOPS features.

Once the pipeline is updated, edit the sky material colorStop properties:

Background Effect

2D Background 

Wonderland Engine also supports 2-dimensional background images and gradients.

To use it, change the shader property of the Sky pipeline to Background to render in 2D.

In 2D, the textures / gradients will be displayed identically no matter where the camera is looking at:

Background Effect
Background Effect

Resources 

Here is a non-exhaustive list of websites with free equirectangular images: