How to create a diagonal HLSL transition shader

Question

I am trying to adapt the code from a couple of the HLSL shaders in the WPF Pixel Shader Effects Library on Codeplex to create a pixel shader which creates a diagonal transition from Texture1 to Texture2 by sliding Texture2 across Texture1 as if it were overlaying (i.e. Texture1 remain "stationary" while Texture2 gradually replaces Texture1) from the upper left-hand corner.

I am struggling to properly understand the "uv" notation and how to manipulate it to achieve my goal.

So far I have tried

float Progress : register(C0);

sampler2D Texture1 : register(s0);
sampler2D Texture2 : register(s1);

struct VS_OUTPUT
{
    float4 Position  : POSITION;
    float4 Color     : COlOR;
    float2 UV        : TEXCOORD;
};

float4 SampleWithBorder(float4 border, sampler2D tex, float2 uv)
{
    if (any(saturate(uv) - uv))
{
    return border;
}
else
{
    return tex2D(tex, uv);
}
}

float4 SlideDiagonal(float2 uv,float progress)
{
  uv += progress;

  float4 c1 = SampleWithBorder(float4(0,0,0,0), Texture2, uv);

  if(c1.a <=0)
  {
        return tex2D(Texture1, uv);
  }

  return c1;
}

//--------------------------------------------------------------------------------------
// Pixel Shader
//--------------------------------------------------------------------------------------
float4 main(VS_OUTPUT input) : COlOR
{
  return SlideDiagonal(input.UV, Progress/100);
}

and also

float Progress : register(C0);

sampler2D Texture1 : register(s1);
sampler2D Texture2 : register(s0);


float4 SampleWithBorder(float4 border, sampler2D tex, float2 uv)
{
if (any(saturate(uv) - uv))
{
    return border;
}
else
{
    return tex2D(tex, uv);
}
}

float4 Shrink(float2 uv,float progress)
{
float speed = 200;
float2 center = float2(0.001, 0.001);
float2 toUV = uv - center;
float distanceFromCenter = length(toUV);
float2 normToUV = toUV / distanceFromCenter;

float2 newUV = center + normToUV * (distanceFromCenter *(progress*speed+1));

float4 c1 = SampleWithBorder(float4(0,0,0,0), Texture2, newUV); 

if(c1.a <= 0)
{
    return tex2D(Texture1, uv);
}

return c1;

}

//--------------------------------------------------------------------------------------
// Pixel Shader
//--------------------------------------------------------------------------------------
float4 main(float2 uv : TEXCOORD) : COlOR
{
return Shrink(uv, Progress/100);
}

but in both cases the "slide" operates in reverse, reducing the amount of visible Texture2 as progress increases to 1 and, in the case of the former, Texture1 is not displayed at all.

I have come back to the problem a couple of times over Christmas to no avail and now I think I am suffering a "wood for the trees" problem.

If anyone knows the solution to this particular problem it would be greatly appreciated.

And in the spirit of "teaching a man to fish" if there was any information out there to help me understand how to manipulate "uv" that would also be great.

Many thanks in advance for your help regards Ian Carson

Answer 1

The texture coordinates (uv) specify where to look into the texture. With the line

uv += progress;

you shift the texture coordinate depending on the progress. If it is zero, the original coordinates are used (and the entire Texture2 is shown). By increasing progress, you go more and more to the bottom right corner of Texture2 and draw it at the original position. This lets the texture slide towards the top left corner. So if you want it the other way around, try:

uv += 1 - progress;