Difference between revisions of "Fog tutorial"

From Valve Developer Community
Jump to: navigation, search
m
(cleanup, rewrite)
Line 2: Line 2:
 
|ru = Fog_tutorial:ru
 
|ru = Fog_tutorial:ru
 
}}
 
}}
 +
[[Image: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.
+
==Matching Fog Settings with the Skybox==
 +
[[Image: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.
  
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.
+
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.
 
 
 
 
{{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.}}
 
{{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==
 
[[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?}}
 
 
 
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]].
 
 
 
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.
 
 
 
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.
 
 
 
Now, follow the above instructions for setting fog, Match the sky_camera settings with the env_fogcontroller  settings, compile and enjoy!
 
 
 
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.
+
==Alternate Method using tools/toolsblack==
 +
[[Image: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.  
  
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?
+
==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]].
  
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.
+
Much like a regular skybox, you'll want to create six <code>UnlitGeneric</code> textures, 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.
  
 
==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]]
  

Revision as of 05:33, 4 March 2014

Русский
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:Match the fog settings in the sky_camera entity with the settings of your env_fog_controller for best results.

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.

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 textures, 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.

See also