XNA Shader Programming

Tutorial 13 – Alpha mapping

Welcome to another tutorial in the XNA Shader Programming series. Today we are going to look at a simple, but important shader: The Alpha map!

The Alpha map is very usefull when you want to render a 3D object where some parts are transparent and other parts are solid. This could be a window with some cracks on it, making the cracks solid and the rest transparent! There are many other places you can use alpha maps, like thin/thick ice, skin, flowers, insect wings, and wherever you want to mix solid and transparent part!

Executable + Source can be downloaded from the end of the tutorial

 

• Color Map
• Alpha Map

Let us start by adding these to the shader:
texture ColorMap;
sampler ColorMapSampler = sampler_state
{
   Texture = <ColorMap>;
   MinFilter = Linear;
   MagFilter = Linear;
   MipFilter = Linear;  
   AddressU  = Mirror;
   AddressV  = Mirror;
};

texture AlphaMap;
sampler AlphaMapSampler = sampler_state
{
   Texture = <AlphaMap>;
   MinFilter = Linear;
   MagFilter = Linear;
   MipFilter = Linear;  
   AddressU  = Mirror;
   AddressV  = Mirror;
};

Now we got our textures. Then we need to set the alpha channel of the color we return to the value stored in the Alpha map. This is done in the Pixel Shader:
Color = (Ai*Ac*Color)+(Color*Di*Dd);
Color.a = tex2D(AlphaMapSampler, Tex).r;
 
return Color;

Here we calculate the diffuse color as we usually do, and put it in color.
After this, we go in to the Colors .a component, that is the Colors alpha channel, and set it to the value stored in the alpha map. All color-channels in the alpha map are the same( because its a grayscale texture ), so it does not matter if you use the r,g or b channel. I’m just using the .r channel in this example.

Our technique for todays lesson looks like this:
technique DiffuseShader
{
 pass P0
 {
  AlphaBlendEnable = True;
  SrcBlend = SrcAlpha;
  DestBlend = InvSrcAlpha;
  
  Sampler[0] = (ColorMapSampler);
  Sampler[1] = (AlphaMapSampler); 
  
  VertexShader = compile vs_2_0 VertexShader();
  PixelShader = compile ps_2_0 PixelShader();
 }
}

As you can see, we set AlphaBlendEnable to true, and use det SrcAlpha/InvSrcAlpha as the blending function. This means that we use the alphachannel to make things transparent.

Using the shader
Nothing new on how to use the shader. We just got to remember to pass the color and alpha textures to the shader.

I have also added an overlay texture named m_Overlay. This is used to render the overlay in front of the whole screen, using the alpha values found in a .PNG file. These alpha values can be set by using Photoshop or many other picture editor programs.

spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.SaveState);
{
 spriteBatch.Draw(m_Overlay, new Rectangle(0, 0, 800, 600), Color.White);
}
spriteBatch.End();

NOTE:
You might have noticed that I have not used effect.commitChanges(); in this code. If you are rendering many objects using this shader, you should add this code in the pass.Begin() part so the changed will get affected in the current pass, and not in the next pass. This should be done if you set any shader paramteres inside the pass.

YouTube – XNA Shader programming, Tutorial 13 – Alpha mapping