Fog tutorial: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
(Rewrite Template:Lang to Template:LanguageBar. This action was performed by a bot.)
 
(14 intermediate revisions by 10 users not shown)
Line 1: Line 1:
{{otherlang2
{{LanguageBar|Fog tutorial}}
|ru = Fog_tutorial:ru
[[File:Fogtute01.jpg|thumb|150px|right|Note how the fog doesn't impact the skybox]]
}}


==Fog with skyboxes==
When you have fog in your map, you will most likely run into the problem that, while the geometry and models get affected by the fog, the [[Skybox (2D)|skybox]] will not. You have several ways of fixing this.


[[Image:Fogtute01.jpg|thumb|300px|right|The most common problem with fog is that the [[env_fog_controller]] does not affect the skybox and will come out looking like this.]]
{{tip|Match the fog settings in the [[sky_camera]] entity with the settings of your [[env_fog_controller]] for best results.}}


When you have fog in your map, you will most likely run into the problem that, while the geometry and models get affected by the fog, the [[Skybox (2D)|skybox]] will not.
==Fog basics==
Add an {{Ent|env_fog_controller}} point entity to your level. For basic fog, you need to set the '''Fog Enable''' to "Yes", change the '''Primary Fog Color''' to the color of the fog you want.  


You can either use settings which have been used in other [[HL2]] levels before or make your own skybox material. The latter version gives you not only a lot more control over the fog but does also improve performance.
Set the '''Fog Start''' and '''Fog End''' values to a distance in world units for how far away the fog will render. The Fog Start distance is how far away the fog will appear from the player, and '''Fog End''' is the distance the fog will appear totally opaque.


'''Fog Blend''', '''Primary Fog Color''' and '''Secondary Fog Color''' allow you to change the color of the fog depending on the direction that the player is facing.


{{note|The [[3D Skybox]] has its own fog settings in the [[sky_camera]] entity. Match those with the settings of your [[env_fog_controller]] for best results.}}
Set the primary fog color to red, the secondary color to blue, and keep the fog direction as {{Code|style=1|1 0 0}} (i.e. East aka Right aka 0 degrees). In-game, the player will see red fog when they look east, blue fog when they look west, and purple fog if they look north or south.
{{tip|{{l4d2}} There is a Fog Panel in Left 4 Dead 2 that allows in-game manipulation of fog parameters. It is loaded via console command <code>fogui</code>.}}
<br style="clear:both">


==Quick fix==
'''Far Z clip plane''' – this setting is used for optimizing your map. Anything beyond this distance (in world units) will not be rendered. It is recommended to keep this number higher than your '''Fog End''' value.
[[Image:Fogtute02.jpg|thumb|300px|right|An example of a successful fog, due to the fog color matching the 2D skybox.]]For a quick fix these settings will work fine. However, you are limited to one color-setting and it will not look good if you are using the far z-clip plane function of the [[env_fog_controller]].


{{todo|This is only a 'quick fix' if the skybox <code>sky_day02_10</code> is being used. How were the fog colors below found?}}
==Matching Fog Settings with the Skybox==
[[File:Fogtute02.jpg|thumb|150px|right|This fog looks good because it matches the skybox]]
For good looking fog, you'll need to match the fog colors with the skybox colors. You can always fall back on the settings Valve used in their official maps.


First, you have to use <code>sky_day02_10</code> as your [[Skybox (2D)#Changing the displayed skybox|skybox]] texture (if you look at it, it actually is foggy on the texture which is why it works). For a list of skies, see [[Sky List]].
For our example, we'll be using <code>sky_day02_10</code>. If you're using this skybox, your [[env_fog_controller]] settings would need to be set like this.
 
Then, your [[env_fog_controller]] should be something like this:


Primary fog color: <code>176 192 202</code><br/>
Primary fog color: <code>176 192 202</code><br/>
Secondary fog color: <code>206 216 222</code>
Secondary fog color: <code>206 216 222</code>


These are the exact settings used in the bridge crossing part of [[Highway 17]] in [[HL2]].
The settings above were used for the bridge section of [[Highway 17]].
<br style="clear:both">
 
Another very, basic and quick fix for night maps is to use a color darker than the skybox for fog. While it looks only slightly better, it won't look as fantastic.
 
==Using your 3-D skybox to make realistic fog==
[[Image:3-D Sky Fog Example.jpg|thumb|300px|right|How using brushes in your 3-D skybox can create a realistic fog illusion]]
One method to give a realistic fog in skybox is very simple.


First you need a 3-D skybox. any size will do, the larger, the better, as larger boxes will remove the chance of corners being seen.
==Alternate Method using tools/toolsblack==
[[File:3-D Sky Fog Example.jpg|thumb|150px|right|Using tools/toolsblack can be more effective at achieving proper fog]]
Alternatively, you can change the skybox brushes to the [[Tool texture|tools/toolsblack]] texture. The sky will no longer be visible, allowing your fog settings to color the sky.
{{note|Since toolsblack won't cast sun/moonlight, it may be preferable to use a skybox such as {{mono|black}}, {{mono|blacksky}}, or {{mono|sky_black}} or create a custom UnlitGeneric skybox with all sides pointing to {{mono|vgui/black}} if none of those are available.}}


Inside your 3-D skybox, line the walls with a thin brush, Use the material tools/toolblack. Now, Select the brushes inside and turn them into func_brush, in the settings, disable receiving shadows and casting shadows. You can set solidity but that's user preference.
==Creating a Custom Skybox Texture==
Understanding the creation of 2D skyboxes is important. A more in-depth tutorial on creating one is available [[2D_skybox#Creating_a_Custom_2D_Skybox_Texture|here]].


Now, follow the above instructions for setting fog, Match the sky_camera settings with the env_fogcontroller  settings, compile and enjoy!
Much like a regular skybox, you'll want to create six <code>[[UnlitGeneric]]</code> materials, each named corresponding to their direction. Leave off the [[$nofog]] parameter, however. This allows the fog to overdraw the skybox, without the need for it blending in.
 
{{important|The [[Sky (shader)|Sky]] shader will always ignore fog. UnlitGeneric must be used if the fog should render over the skybox.}}
Your skybox will now be colored as the brightest color you set the fog, there will be no visible skybox texture, but this method brings a more realistic look for a foggy environment.
 
==Create custom skybox==
 
We're simply creating a skybox that uses the <code>primary fog color</code>. While a normal skybox has 6 [[VTF|texture files]] with each 1024x1024 pixel, we only need one with a much smaller size, thus reducing the cached texture size.
 
First off, create a [[VTF|.vtf]] with the color of your fog. Ideally, save it into the skybox folder (located here: .../materials/skybox). Remember its name, for this tutorial I'll asume it is called ''sky_fog_tex''.
 
Now create the six [[VMT|.vmt]]'s needed for a skybox. If you want to call your skybox ''sky_fog'', these are:
<pre>sky_fogbk.vmt
sky_fogdn.vmt
sky_fogft.vmt
sky_foglf.vmt
sky_fogrt.vmt
sky_fogup.vmt</pre>
 
These have all the same content:
<pre> "UnlitGeneric"
{
"$baseTexture" "skybox/sky_fog"
}</pre>
 
We are not using <code>"$nofog" 1</code> like skyboxes usually do.
 
If you are using this skybox and only the <code>primary fog color</code> in the [[env_fog_controller]] is enabled, the fogged geometry and models have the same color as the skybox. '''ToDo:''' How does one disable the secondary fog color?
 
However, if you are using the <code>secondary fog color</code> as well, you have to make sure that the distance between player and skybox is always bigger than the <code>fogend</code>. Remember that we didn't use <code>"$nofog" 1</code>, means the fog is drawn onto the skybox. However, this is only done in a sufficient way when the skybox is completely overdrawn - just like the geometry. You can use a [[3D Skybox]] for this purpose.


==See also==
==See also==
* Example HL2 vmf project with [http://type3studios.com/downloads/tutorials/SdkNutsTutorials/wiseEscape.zip blended 3D skybox fog]
* [[Dust, Fog, & Smoke]]
* [[Dust, Fog, & Smoke]]


[[Category:Level Design]]
[[Category:Level Design]]
[[Category:Level Design Tutorials]]
[[Category:Tutorials]]
[[Category:Tutorials]]
[[Category:Abstract Mapping]]
[[Category:Abstract Mapping]]
[[Category:Fog]]
<!-- Merged from Fog Basics -->
[[Category:Level Design FAQ]]
[[Category:Tutorials]]

Latest revision as of 17:52, 18 July 2025

English (en)Русский (ru)中文 (zh)Translate (Translate)
Note how the fog doesn't impact the skybox

When you have fog in your map, you will most likely run into the problem that, while the geometry and models get affected by the fog, the skybox will not. You have several ways of fixing this.

Tip.pngTip:Match the fog settings in the sky_camera entity with the settings of your env_fog_controller for best results.

Fog basics

Add an env_fog_controller point entity to your level. For basic fog, you need to set the Fog Enable to "Yes", change the Primary Fog Color to the color of the fog you want.

Set the Fog Start and Fog End values to a distance in world units for how far away the fog will render. The Fog Start distance is how far away the fog will appear from the player, and Fog End is the distance the fog will appear totally opaque.

Fog Blend, Primary Fog Color and Secondary Fog Color allow you to change the color of the fog depending on the direction that the player is facing.

Set the primary fog color to red, the secondary color to blue, and keep the fog direction as 1 0 0 (i.e. East aka Right aka 0 degrees). In-game, the player will see red fog when they look east, blue fog when they look west, and purple fog if they look north or south.

Far Z clip plane – this setting is used for optimizing your map. Anything beyond this distance (in world units) will not be rendered. It is recommended to keep this number higher than your Fog End value.

Matching Fog Settings with the Skybox

This fog looks good because it matches the skybox

For good looking fog, you'll need to match the fog colors with the skybox colors. You can always fall back on the settings Valve used in their official maps.

For our example, we'll be using sky_day02_10. If you're using this skybox, your env_fog_controller settings would need to be set like this.

Primary fog color: 176 192 202
Secondary fog color: 206 216 222

The settings above were used for the bridge section of Highway 17.

Alternate Method using tools/toolsblack

Using tools/toolsblack can be more effective at achieving proper fog

Alternatively, you can change the skybox brushes to the tools/toolsblack texture. The sky will no longer be visible, allowing your fog settings to color the sky.

Note.pngNote:Since toolsblack won't cast sun/moonlight, it may be preferable to use a skybox such as black, blacksky, or sky_black or create a custom UnlitGeneric skybox with all sides pointing to vgui/black if none of those are available.

Creating a Custom Skybox Texture

Understanding the creation of 2D skyboxes is important. A more in-depth tutorial on creating one is available here.

Much like a regular skybox, you'll want to create six UnlitGeneric materials, each named corresponding to their direction. Leave off the $nofog parameter, however. This allows the fog to overdraw the skybox, without the need for it blending in.

Icon-Important.pngImportant:The Sky shader will always ignore fog. UnlitGeneric must be used if the fog should render over the skybox.

See also

Retrieved from "https://developer.valvesoftware.com/w/index.php?title=Fog_tutorial&oldid=485504"