c# XNA 2D Distortion Effect

Question

I'm trying to implement a 2D distortion effect with a displacementmap, which I will create at runtime by combining images like this. Link to Displacementmap

But due to the fact that (255,255,x) is equal to no displacement, I'm not able do combine these images with existing BlendModes.

So I wanted to store information in the RGBA (for x+,y+,x-,y-) of the color, but rendering to a RenderTarget2D sets every color with Alpha = 0 to Black with Alpha = 0. Is there a better way to combine displacementmaps or a way to prevent this behavieur?

Answer 1

You can use custom shader like this

/* Variables */

float OffsetPower;

texture TextureMap; // texture 0
sampler2D textureMapSampler = sampler_state
{
    Texture = (TextureMap);
    MagFilter = Linear;
    MinFilter = Linear;
    AddressU = Clamp;
    AddressV = Clamp;
};

texture DisplacementMap; // texture 1
sampler2D displacementMapSampler = sampler_state
{
    Texture = (DisplacementMap);
    MagFilter = Linear;
    MinFilter = Linear;
    AddressU = Clamp;
    AddressV = Clamp;
};

/* Vertex shader output structures */

struct VertexShaderOutput
{
    float4 Position : position0;
    float2 TexCoord : texcoord0;
};

/* Pixel shaders */

float4 PixelShader1(VertexShaderOutput pVertexOutput) : color0
{
    float4 displacementColor = tex2D(displacementMapSampler, pVertexOutput.TexCoord);
    float offset = (displacementColor.g - displacementColor.r) * OffsetPower;

    float2 newTexCoord = float2(pVertexOutput.TexCoord.x + offset, pVertexOutput.TexCoord.y + offset);
    float4 texColor = tex2D(textureMapSampler, newTexCoord);

    return texColor;
}

/* Techniques */

technique Technique1
{
    pass Pass1
    {
        PixelShader = compile ps_2_0 PixelShader1();
    }
}

In LoadContent method:

this.textureMap = this.Content.Load<Texture2D>(@"Textures/creeper");
this.displacementMap = this.Content.Load<Texture2D>(@"Textures/displacement_map");
this.displacementEffect = this.Content.Load<Effect>(@"Effects/displacement");

In Draw method:

Rectangle destinationRectangle = new Rectangle(0, 0, this.GraphicsDevice.Viewport.Width, this.GraphicsDevice.Viewport.Height);

this.displacementEffect.Parameters["OffsetPower"].SetValue(0.5f);
this.displacementEffect.Parameters["DisplacementMap"].SetValue(this.displacementMap);

this.spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, null, null, null, this.displacementEffect);
this.spriteBatch.Draw(this.textureMap, destinationRectangle, Color.White);
this.spriteBatch.End();

Result .