SteamVR/Environments/Fog Tutorial

Adding Fog to your Environments

These miniature Pyros look menacing in the foggy environment.

Source2 introduces a new fog entity called env_gradient_fog, this entity can be utilized to create different types of fog effects. It’s a pretty fancy system allowing dense ground-hugging fog with super-subtle changes in colour or density. To see an example of this entity in action and used effectively, take a look at the main SteamVR Home map. In this tutorial we will teach you how to author fog textures and add fog to your pre existing maps as well as a detailed breakdown of this entities workings.

Tip:This tutorial assumes you already know the basics of using hammer and have already created a map in which you wish to add fog. For a beginners introduction to level design and the Source2 tools click here.

Tip:Old habits die hard and Source1 veterans may be inclined to try older fog entities such as env_fog_controller, however these are not supported in SteamVR Home.

Bug: Deleting an env_gradient_fog entity from your map after lighting has been baked and the map has been built, will result in the renderer believing there is still fog and rendering the classic pink error texture in place of the fog texture.  [todo tested in ?]

Env_Gradient_Fog Texture Guidelines

The env_gradient_fog entity is primarily controlled by a gradient texture, this textures dimensions should be equal to a power of 2 and the texture should also contain an alpha channel. Suggested Image formats are png psd or tga.
At first glance authouring gradient fog textures may seem like a complicated and daunting process, but really once you come to understand how they work it's a pretty straightforward affair.

• 

  Example env_gradient_fog setup showing opaque fog.

• 

  Example env_gradient_fog setup showing varying fog opacity.

The Color of your Fog

Example RGB channels from a env_gradient_fog texture.

The color in the RGB channels of your texture dictate the distribution of fog color over distance, This is controlled by specifying a start and end distance of the fog in the env_gradient fog entity, the start and end distance are specified in world units. The texture is read from left to right, and mapped from your start distance to your end distance, A good way to understand this is to visualize your fog texture being stretched from the start value to the end value. This is an extremely versatile system that allows for subtle or drastic changes in your fog’s color to match the artistic needs of your level. Changing fog color over distance can be used as an effective tool to illustrate the depth of your scene and add atmosphere.

Tip: While it is advised to use smooth gradients to illustrate color, this is not enforced, try experimenting with sharper fall offs to create alien like fog systems and otherworldly effects.

Whilst left to right controls color over distance, up and down controls the color over height allowing you to create fog that has the illusion of variable properties as you ascend through it.

Thickness, Opacity or Density of your Fog

Example Alpha channel from a env_gradient_fog texture.

Currently we have covered how to create a texture that changes the color of your fog, but you're probably wondering how to change the opacity or “thickness” of your fog. Well it's as easy as authoring the color except fog opacity is stored in the alpha channel of your texture and not in the RGB channels. Left to right indicates the fog opacity over distance, and up and down fog opacity over height. black represents 0 (fully transparent), and white represents 1 (fully opaque), creating a gradient between the two allows you to have gradual changes in the fogs opacity. It's worth noting that distance fog can never be outrun, although it is mapped to world units, it is mapped relative to your eye position, 0 0 0 being your eye position and thus you can never leave the fog as you would be able to in a volumetric solution. Conversely height fog is static and is mapped to the world rather than the players eye position, this means you can climb out or move above the layer of fog. This is particularly useful if you want low hanging fog in specific areas.

Tip: More trivia than a tip, but in previous versions of Source2, gradient fog textures were authored slightly differently and did not incorporate height fog into the texture. As of SteamVR Home this has changed to incorporate both height and distance fog into a single texture.

Bug: The texture “materials/effects/example_gradient_fog.vtex” was created before the change to the gradient fog system that allowed for height fog to be incorporated into the texture, and as such only provides an example of distance fog.  [todo tested in ?]

Creating a VTEX

Once you have created your texture make sure you save it to your addons content folder, we suggest saving it to “materials/effects/”, this is not essential but it's a good idea for organization purposes. Next you must create a vtex to point to your newly created texture, a vtex is Source2s texture definition format. This is a requirement for Source2’s resource compiler, the tool that takes raw textures and converts them into the engine’s optimized compiled format. A Vtex is a dme format text file that is essentially a description for the resource compiler, telling it how to you would like your texture to be processed. Click here to find an example vtex file that is setup to be used with a fog texture. Save your vtex in the same location as your gradient fog texture, when running Source2 will automatically detect this file and compile your texture.

Placing an env_gradient_fog entity in your map

Selecting the env_gradient_fog entity.

Follow these instructions to setup the fog entity in your map

• In Hammer select the entity tool located on the left panel or Shift-E.
• In the Tool properties panel change the entity class to env_gradient_fog.
• Left click in your scene to place this entity.
• Now return to the selection tool Shift-S and select your newly created fog entity.
• In the Object Properties panel on the right, assign start and end distances for both your distance and height fog.
• Whilst in the Object Properties panel make sure to also assign your newly authored gradient fog texture.

Changes to this entity will update in real time in hammer’s 3D viewports. You should now have everything required to have fog appear in your level, build your map and take a look at what your fog looks like in VR and marvel at its foggy splendor.

Example Material’s

To help you get to grips with this system we have included an example fog texture and also a basic map to demonstrate an example setup of the env_gradient_fog entity.

Tip: The example content is only a basic example designed to help you get started, your advised to spend time crafting level specific fog textures for your own maps.

Credit and thanks to Adam Foster (CargoCult) for originally explaining this entities functionality here on the SteamVR Home discussion boards.