Generic XNA - SM3 Fog

So here is the SM3 (Shader Model 3) HLSL fog. Now this is taken pretty much 99% from Leaf's example, but thought I would comment on how easy this technique is to put into your existing shaders.

I also found that adding this to a shader pushes the operation count up a fair bit, the limit in SM2 is 64 operations per shader, so 128 in all, 64 in the Vertex Shader and another 64 in the Pixel Shader. So What I did was put the fog code into a second pass so giving me another 64x64 operation slots to play with.



So here are the shaders:

This first shader is the one used for the buildings you see in the shots, it is a single pass and a simple texture shader.

ShaderFog.fx

float4x4 World : World;
float4x4 WorldViewProject : WorldViewProjection;
float3 EyePosition : CameraPosition;
texture thisTexture;
float3  LightPos  = (0,-1,0);

float4 ambient = {0.25, 0.25, 0.25, 1.0};
float4 diffuse = {1.0, 1.0, 1.0, 1.0};
float4 specularColor = {0.2, 0.2, 0.2, 1.0};
float shininess = 40;

float fogNear = 10;
float fogFar = 100;
float fogAltitudeScale = 10;
float fogThinning = 100;
float4 fogColor = {0.5, 0.5, 0.5, 1.0};

sampler TextureSampler = sampler_state
{
   Texture = <thisTexture>;
};

struct VS_INPUT
{
   float4 Position : POSITION0;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : NORMAL0;
};

struct VS_OUTPUT
{
   float4 Position : POSITION;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : TEXCOORD1;    
   float3 WorldPos : TEXCOORD2;
};
struct PS_INPUT
{
   float4 Position : TEXCOORD4;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : TEXCOORD1;    
   float3 WorldPos : TEXCOORD2;
};

float4 blinn2(
       float3 N,
       float3 L,
       float3 V,
       uniform float4 diffuseColor,
       uniform float4 specularColor,
       uniform float shininess)
{
   float3 H = normalize(V+L);
   float4 lighting = lit(dot(L,N), dot(H,N), shininess);
   return diffuseColor*lighting.y + specularColor*lighting.z;
}


VS_OUTPUT Transform(VS_INPUT Input)
{
   VS_OUTPUT Output;

   Output.WorldPos = mul(Input.Position,World);
   Output.Position = mul(Input.Position, WorldViewProject);
   Output.Texcoord = Input.Texcoord;
   Output.Normal = mul(Input.Normal,World);

   return Output;
}

float4 Texture(PS_INPUT Input) : COLOR0
{
   float4 colorMap = tex2D(TextureSampler, Input.Texcoord.xy) * 1.5;
   float3 N = normalize(Input.Normal);
   float3 V = normalize(EyePosition - Input.WorldPos);
   float3 L = normalize(LightPos - Input.WorldPos);
   
   float4 C = ambient*colorMap;
   
   C += blinn2(N, L, V, colorMap * diffuse, specularColor * colorMap.a, shininess);
   float d = length(Input.WorldPos - EyePosition);
   float l = saturate((d - fogNear) / (fogFar - fogNear) / clamp(Input.Position.y / fogAltitudeScale + 1, 1, fogThinning));
   return lerp(C, fogColor, l);    
};

technique TransformTexture
{
   pass P0
   {
       VertexShader = compile vs_1_1 Transform();
       PixelShader  = compile ps_2_0 Texture();
   }
}

This is the shader I use for the floor tile, again this is a single pass. Just a variation on the theam really.

Floor.fx

float4x4 World : World;
float4x4 WorldViewProject : WorldViewProjection;
float3 EyePosition : CameraPosition;
texture thisTexture;
float3  LightPos  = (0,-1,0);

float4 ambient = {0.25, 0.25, 0.25, 1.0};
float4 diffuse = {1.0, 1.0, 1.0, 1.0};
float4 specularColor = {0.2, 0.2, 0.2, 1.0};
float shininess = 0;

float fogNear = 10;
float fogFar = 100;
float fogAltitudeScale = 10;
float fogThinning = 100;
float4 fogColor = {0.5, 0.5, 0.5, 1.0};

sampler TextureSampler = sampler_state
{
   Texture = <thisTexture>;
};

struct VS_INPUT
{
   float4 Position : POSITION0;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : NORMAL0;
};

struct VS_OUTPUT
{
   float4 Position : POSITION;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : TEXCOORD1;    
   float3 WorldPos : TEXCOORD2;
};
struct PS_INPUT
{
   float4 Position : TEXCOORD4;
   float2 Texcoord : TEXCOORD0;
   float3 Normal : TEXCOORD1;    
   float3 WorldPos : TEXCOORD2;
};

float4 blinn2(
       float3 N,
       float3 L,
       float3 V,
       uniform float4 diffuseColor,
       uniform float4 specularColor,
       uniform float shininess)
{
   float3 H = normalize(V+L);
   float4 lighting = lit(dot(L,N), dot(H,N), shininess);
   return diffuseColor*lighting.y + specularColor*lighting.z;
}


VS_OUTPUT Transform(VS_INPUT Input)
{
   VS_OUTPUT Output;

   Output.WorldPos = mul(Input.Position,World);
   Output.Position = mul(Input.Position, WorldViewProject);
   Output.Texcoord = Input.Texcoord * 500;
   Output.Normal = mul(Input.Normal,World);

   return Output;
}

float4 Texture(PS_INPUT Input) : COLOR0
{
   float4 colorMap = tex2D(TextureSampler, Input.Texcoord.xy);
   float3 N = normalize(Input.Normal);
   float3 V = normalize(EyePosition - Input.WorldPos);
   float3 L = normalize(LightPos - Input.WorldPos);
   
   float4 C = ambient*colorMap;
   
   C += blinn2(N, L, V, colorMap * diffuse, specularColor * colorMap.a, shininess);
   float d = length(Input.WorldPos - EyePosition);
   float l = saturate((d - fogNear) / (fogFar - fogNear) / clamp(Input.Position.y / fogAltitudeScale + 1, 1, fogThinning));
   return lerp(C, fogColor, l);
};

technique TransformTexture
{
   pass P0
   {
       VertexShader = compile vs_1_1 Transform();
       PixelShader  = compile ps_2_0 Texture();
   }
}

And finaly this is the shader used for the sky box, now, you may think, why is he using a sky box when he has such dense fog? Well it is here as an example and this is where I have put the fog calcs into the second pass so you can see how to do it (or rather how I did it)

/////////////////////////////////////////////////////////////
//                                                            //
//    Writen by C.Humphrey                                    //
//    26/07/2007                                                //
//                                                            //
//                                                            //
//    Shader used to render a cube map to an inverted box        //
//    mesh.                                                    //
//                                                            //
// 17/08/2006 Multi pass fog aded.                            //
//                                                            //
//////////////////////////////////////////////////////////////

Texture surfaceTexture;
samplerCUBE TextureSampler = sampler_state
{
   texture = <surfaceTexture> ;
   magfilter = LINEAR;
   minfilter = LINEAR;
   mipfilter = LINEAR;
   AddressU = Mirror;
   AddressV = Mirror;
};

float4x4 World : World;
float4x4 View : View;
float4x4 Projection : Projection;

float3 EyePosition : CameraPosition;

float4 ambient = {0.25, 0.25, 0.25, 1.0};
float4 diffuse = {1.0, 1.0, 1.0, 1.0};
float4 specularColor = {0.2, 0.2, 0.2, 1.0};
float shininess = 10;

float fogNear = 500;
float fogFar = 1000;
float fogAltitudeScale = 0;
float fogThinning = 1;
float4 fogColor = {0.5, 0.5, 0.5, 1.0};

float4 c;

struct VS_INPUT
{
   float4 Position    : POSITION0;
   float3 Normal : NORMAL0;    
};

struct VS_OUTPUT
{
   float4 Position    : POSITION0;
   float3 ViewDirection : TEXCOORD2;
   float3 Normal : TEXCOORD0;
   float4 WorldPos : TEXCOORD1;
};

float4 CubeMapLookup(float3 CubeTexcoord)
{    
   return texCUBE(TextureSampler, CubeTexcoord);
}

VS_OUTPUT Transform(VS_INPUT Input)
{
   float4x4 WorldViewProjection = mul(mul(World, View), Projection);
   float3 ObjectPosition = mul(Input.Position, World);
   
   VS_OUTPUT Output;
   Output.Position    = mul(Input.Position, WorldViewProjection);    
   
   Output.ViewDirection = EyePosition - ObjectPosition;    
   
   Output.WorldPos = mul(Input.Position,World);
   Output.Normal = mul(Input.Normal,World);
   
   return Output;
}

float4 blinn2(
       float3 N,
       float3 L,
       float3 V,
       uniform float4 diffuseColor,
       uniform float4 specularColor,
       uniform float shininess)
{
   float3 H = normalize(V+L);
   float4 lighting = lit(dot(L,N), dot(H,N), shininess);
   return diffuseColor*lighting.y + specularColor*lighting.z;
}

struct PS_INPUT
{    
   float3 ViewDirection : TEXCOORD2;
   float3 Normal : TEXCOORD0;
   float3 WorldPos : TEXCOORD1;
   float4 Position : TEXCOORD3;
};

float4 BasicShader(PS_INPUT Input) : COLOR0
{    
   float3 ViewDirection = normalize(Input.ViewDirection);        
   float4 C = CubeMapLookup(-ViewDirection);
 
   c = C;
   return C;
}
float4 Fog(PS_INPUT Input) : COLOR0
{
   float3 ViewDirection = normalize(Input.ViewDirection);        
   
   float3 N = normalize(Input.Normal);
   float3 V = normalize(EyePosition - Input.WorldPos);
   float3 L = normalize(Input.WorldPos);
   L = normalize(Input.WorldPos);
   
   float4 C = c;
 
   C += blinn2(N, L, V, C * diffuse, specularColor * C.a, shininess);
   float d = fogFar-(fogFar/35);
   float l = saturate((d - fogNear) / (fogFar - fogNear) / clamp(Input.Position.y / fogAltitudeScale + 1, 1, fogThinning));
   return lerp(C, fogColor, l);
}

technique BasicShader
{
   pass P0
   {
       VertexShader = compile vs_2_0 Transform();
       PixelShader  = compile ps_2_0 BasicShader();
   }
   pass P1
   {
       AlphaBlendEnable    = true;
       SrcBlend = SrcAlpha;
       DestBlend = InvSrcAlpha;
       PixelShader  = compile ps_2_0 Fog();
   }
}

Controls
Mouse rotates camera
Arrow Keys translate camera
Esc to exit.

GenericExampleShaderFog.zip

Thanks to Leaf for his example on the XNA UK User Group Without it I would not know how to do it...

Source Example 6 - Fog SM 1.1 to 2

This example shows the use of shader model 1.1 - 2 methodology for fog by using the render states.

Controls
Mouse to rotate camera.
Arrow Keys to translate camera.
F1 Switch Fog On.
F2 Switch Fog Off.

RC3DEFogSample1.zip

Shader Fog

Have found out how to do fog in the shader so this means that you can now have fog in your XBox 360 games as well as your Windows based games.

As usual it is a matter of adding the right semantic and setting the correct renderstate in the shader.

So, the code.

Shader Model 1.1 - 2
In your Shader's vertex return structure, add the following

float Fog : FOG;

In your vertex shader set the fog you require:

Output.Fog = 1.0f - ( length( Input.Position - EyePosition) / 50.0f);

Note: This is an example you can generate this how ever you need to.

Now all you have to do is set the render state for fog, so in the top of your pass add this

FOGENABLE = (3);
FOGCOLOR = (float4(.5,.5,.5,1));

Where 3 is Linear fog and float4(.5,.5,.5,1) would be the color gray.

Shader Model 3
To get fog working on SM 3 and/or the XBox 360 is a little different

Remove ALL state settings in the technique.

Swap the FOG simantic for a TEXCOORD.

As the FOGCOLOR state has been removed, you need to
   calulate this in the shader per vertex lerp between the
   calculated color and the fog color based on the FOG
   TEXCOORD

For Example:

Out.Color = lerp(g_FogColor, color * ((In.Diffuse * g_MaterialDiffuseColor) * diffuse + g_MaterialAmbientColor), In.Fog);

Thanks to Leaf at XNA UK User Group and Jon Watte for your help with this I am sure this will help many others in there XNA development. Jon's shader also has the ability to specify the height of the fog and so giving a much richer fog effect, nice...

If you have any interest in the discussions we had then take a look here or the comments on this post.

Leaf has also put up an example of Jon's shader in action and you can find that here.

Engine Design - Fog

I thought I would post this class first as it is relatively simple to implement and can be put into any XNA engine and is not specific to the HM Engine.

Right, the effect of this class can be seen in the earlier post I gave for fog. So without further a do, here is the class:

   public sealed class Fog
   {
       public static Color FogColor;
       public static bool FogEnable;
       public static float FogStart;
       public static float FogEnd;
       public static FogMode FogTableMode;

       public static void Draw(GraphicsDevice myDevice,GameTime gameTime)
       {
           if (myDevice.RenderState.FogEnable != FogEnable)
               myDevice.RenderState.FogEnable = FogEnable;

           if (FogEnable)
           {                
               if(myDevice.RenderState.FogColor != FogColor)
                   myDevice.RenderState.FogColor = FogColor;
               if(myDevice.RenderState.FogStart  != FogStart)
                   myDevice.RenderState.FogStart = FogStart;
               if(myDevice.RenderState.FogEnd != FogEnd)
                   myDevice.RenderState.FogEnd = FogEnd;
               if(myDevice.RenderState.FogTableMode != FogTableMode)
                   myDevice.RenderState.FogTableMode = FogTableMode;
           }
       }
   }

So all you have to do is populate the Fog class static properties with the required values and in your assemblies Draw method call the static Draw method, like this:

       protected override void Draw(GameTime gameTime)
       {
           graphics.GraphicsDevice.Clear(Color.Black);
           Fog.FogEnable = true;
           Fog.FogColor = Color.WhiteSmoke;
           Fog.FogStart = 95f;
           Fog.FogEnd = .999f;            
           Fog.FogTableMode = FogMode.Linear;

           // Your drawing stuff here...

           Fog.Draw(graphics.GraphicsDevice, gameTime);

           // Possibly more code here...

           base.Draw(gameTime);
       }

And with that you can have a nice fog effect in your engine.

New Engine Component - Fog

Well, have been a little busy over the last few weeks, but have managed to get some time to have a play with XNA and have added Fog to my engine.

I thought I would post a screen shot of it or two in action, I have posted my method on the HM forum and will go into more detail here once I have finished documenting my engine.

Here is the link to the forum FOG Alas, if you are not a member of the Hazy Mind forum you will not be able to view it, but it costs you nothing to register.

Starting at the top of a mountain:




Moving down the mountain through the fog:







Get to the waters edge:




Then look back up the mountain:




So that's fog in XNA (Windows Only I am afraid) this also shows a bit of the terrain and water object, all yet to be documented here, if I ever get the time...