How to create a diagonal HLSL transition shader - wpf

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;

Answer 2

A big thank you to Nico for creating a clearing in the trees! His answer gave me the change of perspective I need to solve this problem. #Nico - Upvote for you, thanks mate.
For completeness I have included the final result from my Shazzam tinkerings which allows for a diagonal slide from any of the 4 corners using a float input called (imaginatively) "Corner". In production the float would be replaced by an int driven from an enumeration of possible corners - TopLeft, TopRight, BottomRight, BottomLeft. The order in the code is as shown represented by 1, 2, 3 & 4.
Here's the shader:
/// <summary>Modifies the Progress value.</summary>
/// <minValue>0</minValue>
/// <maxValue>100</maxValue>
/// <defaultValue>0</defaultValue>
float Progress : register(C0);
/// <summary>Modifies the Corner value.</summary>
/// <minValue>1</minValue>
/// <maxValue>1</maxValue>
/// <defaultValue>1</defaultValue>
float Corner : register(C1);
sampler2D Texture1 : register(s0);
sampler2D Texture2 : register(s1);
float4 SampleWithBorder(float4 border, sampler2D tex, float2 uv, float corner)
{
if (any(saturate(uv) - uv))
{
return border;
}
else
{
float2 rev = uv;
//Swap y position again to counteract the inversion caused by
//needing to get to get to corners BottomLeft and TopRight
if(corner >=2 && corner < 3 || corner>=4
{
rev.y = 1 - rev.y;
}
return tex2D(tex, rev);
}
}
float4 SlideDiagonal(float2 uv, float progress, float corner)
{
float2 rev = uv;
//Swap y position to get to corners BottomLeft and TopRight
if(corner >=2 && corner < 3 || corner>=4)
{
rev.y = 1 - rev.y;
}
float2 newUV;
//TopLeft
if(corner >= 1 && corner < 2)
{
newUV = rev + (1- progress);
}
//TopRight
if(corner >= 2 && corner < 3)
{
newUV = rev - (1- progress);
}
//BottomRight
if(corner >= 3 && corner < 4)
{
newUV = rev - (1- progress);
}
//BottomLeft
if(corner >= 4)
{
newUV = rev + (1- progress);
}
float4 c1 = SampleWithBorder(float4(0,0,0,0), Texture2, newUV, corner);
if(c1.a <=0)
{
return tex2D(Texture1, uv);
}
return c1;
}
//--------------------------------------------------------------------------------------
// Pixel Shader
//--------------------------------------------------------------------------------------
float4 main(float2 input : TEXCOORD) : COlOR
{
return SlideDiagonal(input, Progress/100, Corner);
}