TTP Map Tutorial: Sky & Light
In this part of the tutorial we will
- add a skybox,
- add sunlight,
- add a halo effect for the sunlight,
- adjust the shadows of the puzzle area.
Skybox / Cube background
To add a skybox we need a Cube background:
- 1. Switch to the EntityList panel (Alt+3) and double-click on 'Cube background'. A Cube background is added to the map in the position of the view focus.
- 2. Switch to the Tools panel Q and position the Cube background at world spawn (0, 0, 0). The volume of the Cube background is 64m x 64m x 64m which is why our floor model fits perfectly into the Cube background range.
- 3. Switch to the Entity panel (Alt+1) and set 'Texture' at the top with resource control to
Screenshot of Cube background.
These are all required settings for the skybox. We will have to move the skybox away from the puzzle area later because otherwise it is rendered in the foreground. Go ahead and test what it looks like, you can see the box edges in simulation. But before we move the Cube background to a different position it is advisable to position our sun.
As you can see in the screenshot, the background texture features a sun at the back of the top side. If the sun shined from this position we would get little shadows because the sun would shine along the walls of the puzzle area. So let's turn the background a bit so that the sun shines a bit from the side:
- 5. Switch to the Tools panel and edit the 'H' value to 40.
Sunlight / DistantLight
To add a sunlight we need a Distant light with the right direction. A Distant light is a light source that projects light through the entire world in the specified direction and causes shadows within a cubic range.
- 1. Switch to the EntityList panel (Alt+3) and find the 'Distant light'.
- 2. Click/hold on that entry and drag it to the position where the sun is in the Cube background (see screenshot).
- 3. Once the position is reached let go of . This adds a Distant light at the selected position.
Don't worry that the rest of the map goes black. This is just because the Distant light is not pointing the right direction yet.
Adjusting sunlight direction
Now that the Distant light is in the right position it's easy to orientate it appropriately:
- 1. Make sure (only) the Distant light is selected.
- 2. Switch to 'View from Selection' by pressing Y (QWERTZ: Z). The view is changed to position and orientation of the Distant light. Every change of the view origin will be translated to the Distant light.
- 3. Press Esc to enter fly mode and move your mouse so that the center of the puzzle area is located at the center of the viewport. This changes the orientation of the Distant light so that it points at the puzzle area. Do NOT use W, A, S, D because that would change the position of the Distant light.
- 4. Press Esc to leave fly mode and press Y (QWERTZ: Z) to leave 'View from Selection'.
Adjusting sunlight color
Personally, I find the white sunlight gives the map a bleak look. So I adjust it to make it a bit shiny:
- 1. Make sure (only) the Distant light is selected.
- 2. Switch to the Entity panel (Alt+1 if necessary.
- 3. Expand the 'Color' property and set
- r to 2.1,
- g to 1.9,
- b to 1.3.
As mentioned before, Distant light has a shadow effect within a cubic range. If you want to see this range you need to activate 'Selection ranges' in the second dropdown menu in the top left corner of the viewport. For purposes of this tutorial, changing the range is not required. For reference, you can find position and orientation data of the Distant light at the end of this page.
We now have correct sunlight and shadows in our map but the shadows are pitch black. We will adjust that in a moment. First, it is time to move the Cube background to a different position. That can be any position far away from any other part of the map. In this tutorial, the Cube background is positioned at (0, -1000, 0) with the Tools panel.
If you test the map now, you will have a proper sky with clouds and sunlight. What's missing are the halos when looking at the sun.
Halo / Flare
To add a halo effect we need a Flare entity with approriate settings added to the Cube background:
- 1. Adjust your view to the Cube background. Since this entity is moved away from the main map area, a quick way to do this is by
- a. pressing N to bring up the world entity list,
- b. typing 'cube' to highlight the Cube background entity in the list,
- c. pressing ↵ Enter to select the entity, and
- d. pressing A to align view with the Cube background.
- 2. Press ⇧ Shift+F5 to switch to bottom perspective and position the sun depiction of the Cube background somewhere in the viewport so that you can easily drag the flare entity there.
- 3. Switch to the EntiyList panel (Alt+3) and find 'Flare'.
- 4. Click/hold on that entity and drag the mouse to the center of the sunlight in the viewport. Once there, let go of .
- 5. Switch to the Entity panel (Alt+1) and set 'Flare' at the top with the resource control to
This is all you need to do to add sun halos. If you want you can try other halo resources from the above mentioned folder.
Shadows / LightmapOven
So finally it is time to take care of those pitch black shadows that the Distant light creates. That is due to missing ambient light, for now we only have light pointing from the Distant Light.
The best way to add realistic ambient light is to bake global illumination (GI) solution lightmaps. There are three basic steps involved in this process:
- 1. For every model that is supposed to participate in the GI solution, make sure it has a Shadow map.
- 2. Add a Lightmap Oven shader modifier with proper settings to each model that is supposed to participate in the GI solution.
- 3. Bake the GI solution into lightmaps.
Shadow maps are UV maps of a model's mesh. Most of the standard architecture of the The Talos Principle (in our case wall tiles, columns and entrance) are provided with such Shadow maps. The fence models do not have Shadow maps but they do not need to be part of the GI solution. For that we can use a probe light which will be added at a later stage.
That leaves us with the floor model that we created. Since its mesh does not have a Shadow map, we need to create one:
- 1. Select (only) the floor model.
- 2. Press E to switch to the mesh editor.
- 3. Press ~ (QWERTZ: ^) to cancel any selection.
- 4. At the bottom right corner of the viewport, select the buttons and . VM stands for Vertex Map, and T stands for Texture.
- 5. In the dropdown menu on the right of these buttons select 'Actions' → 'Create new vertex map...'. This will open the Mapping tool.
- 6. In the Mapping tool
- select the 'Atlas' tab at the bottom,
- type 'Shadow' in the 'Target UVMap' field at the top,
- set 'Supposed texture size' to 64, and
- click .
- 6. Press E to switch back to the world editor.
This is the basic process to create a Shadow map for any mesh. Now all models that are supposed to participate in GI solution have a Shadow map.
Lightmap Oven Shader Modifier
We will add Lightmap Oven shader modifiers to all relevant models in one procedure:
- 1. Select three Simple models:
- floor model
- one wall tile model, and
- entrance model.
- 2. Press Ctrl+E to select all clones by name. All architecture models except the fences are now selected.
- 3. Switch to the Entity panel Alt+1.
- 4. Expand the 'Shader modifiers' property.
- 5. Click the yellow plus sign to open a dropdown menu with available shader modifiers.
- 6. Select 'CLightmapOvenShaderModifier'.
- 7. Press ⇧ Shift+L to open the Define lightmap size Dialog.
- 8. Click the button .
That's it for the Lightmap Oven shader modifier. If you click on some of the models you will see that the values for 'Size U' and 'Size V' in the Lightmap Oven settings of the models are adjusted to the size of the models.
To bake GI simply press Alt+G and clickin the dialog that opens. The duration of baking depends on the power of your pc but for a simple map like in this tutrial it should not take longer than a couple of seconds.
Now you can test the lighting of the level in simulation. If you notice strange looking shadow areas on some of the models, you can do the following to adjust it:
- 1. Press ⇧ Shift+L to open the define lightmap size dialog.
- 2. Edit the 'Meters covered by one luxel' to a smaller value, e.g. 0.5.
- 3. Click and bake the GI solution again.
This increases the lightmap size, thereby providing more lightmap space for difficult lighting situations in the map. But beware: bigger lightmap sizes also mean longer GI baking duration!
Position and Orientation Data
Here are position and orientation data of all Simple models added in this article:
|Inner Puzzle Architecture: Walls & Fences|