Blending Modes in WPF using ShaderEffect's

With the RTM of .NET 3.5 SP1 , we can now create hardware accelerated layer blending effects in WPF like those available in Image Editing tools & Photoshop & GIMP

some of the common blending modes are

Darken, Darker Colors preferred.
darken

sampler2D input : register(s0);
sampler2D tex1 : register(s1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

if (Color.r>clr1.r) Color.r=clr1.r;
if (Color.g>clr1.g) Color.g=clr1.g;
if (Color.b>clr1.b) Color.b=clr1.b;

return Color;
}
Lighten, Lighter Colors preferred.
Lighten

sampler2D input : register(s0);
sampler2D tex1 : register(s1);


float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

if (Color.r<clr1.r) Color.r=clr1.r;
if (Color.g<clr1.g) Color.g=clr1.g;
if (Color.b<clr1.b) Color.b=clr1.b;

return Color;
}
Difference, Simple Arithmetic difference on color components.
Difference

sampler2D input : register(s0);
sampler2D tex1 : register(s1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

Color.r=clr1.r - Color.r;
Color.g=clr1.g - Color.g;
Color.b=clr1.b - Color.b;

return Color;
}
Multiply, Simple Arithmetic Multiplication on color components.
Multiply

sampler2D input : register(s0);
sampler2D tex1 : register(s1);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

Color.r=clr1.r * Color.r;
Color.g=clr1.g * Color.g;
Color.b=clr1.b * Color.b;

return Color;
}
NegationDifference, opposite or negative of difference
NegationDifference

sampler2D input : register(s0);
sampler2D tex1 : register(s1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

Color.r=1-(1-clr1.r - Color.r);
Color.g=1-(1-clr1.g - Color.g);
Color.b=1-(1-clr1.b - Color.b);

return Color;
}
Overlay Hardlight, Combination of Multiply for darer colors and NegationDifference for Lighter colors.
overlayHard

sampler2D input : register(s0);
sampler2D tex1 : register(s1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);
if (Color.r<0.5)
Color.r=clr1.r * Color.r;
else
Color.r=1-((1-Color.r)*(1-clr1.r));

if (Color.g<0.5)
Color.g=clr1.g * Color.g;
else
Color.g=1-((1-Color.g)*(1-clr1.g));

if (Color.b<0.5)
Color.b=clr1.b * Color.b;
else
Color.b=1-((1-Color.b)*(1-clr1.b));

return Color;
}
Overlay SoftLight, Variation on Overlay for Lighter colors.
overlaysoft

sampler2D input : register(s0);
sampler2D tex1 : register(s1);
float4 main(float2 uv : TEXCOORD) : COLOR
{
float c=0;
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);
c=clr1.r * Color.r;
Color.r=c+Color.r*(1-((1-Color.r)*(1-clr1.r)-c));

c=clr1.g * Color.g;
Color.g=c+Color.g*(1-((1-Color.g)*(1-clr1.g)-c));

c=clr1.b * Color.b;
Color.b=c+Color.b*(1-((1-Color.b)*(1-clr1.b)-c));

return Color;
}
Exclusion
Exclusion

sampler2D input : register(s0);
sampler2D tex1 : register(s1);

float4 main(float2 uv : TEXCOORD) : COLOR
{
float4 clr1;
clr1= tex2D(tex1, uv.xy);

float4 Color;
Color= tex2D( input , uv.xy);

Color.r+=clr1.r-clr1.r * Color.r;
Color.g+=clr1.g-clr1.g * Color.g;
Color.b+=clr1.b-clr1.b * Color.b;

return Color;
}


Download ShaderPad and play with these effects..


kick it on DotNetKicks.com

Comments

Anonymous said…
Looks very good indeed. Are these available to Silverlight 2 as well? I can't find it documented anywhere.
August 13, 2008 at 4:54 PM
rravuri said…
Jon,
Unfortunately Silverlight 2 still doesnt support ShaderEffect', I read on the web that Flash & Java Fx (applets) will support it, so we may see it in the next version.
August 13, 2008 at 7:46 PM
Post a Comment

Popular posts from this blog

Wave Reflection Shader Effect in WPF

Image
WPF 3.5 SP1 (Beta) introduces the ability to apply Pixel Shader effects to any UIElement, these will executed by GPU by compatible cards. Greg Schechter's blog is an excellent place to start learning about these features. Shader Effects have long been used in rendering pipeline, to create great special effects. And nowadays are used by almost every game engine to enhance the visual aspects of the game play. Another good tutorial and Check out the HLSLTester code , it is helpful in creating new effects here . I have used the Shader code from this page and added some dynamic properties to create the following effect. Download the full code for this demo from here . Download the compiled effect .
Read more

Getting the Required FPS in Silverlight

Image
One the first code for any game will be setup a game loop. Here are some of the posts on how to achieve this in Silverlight applications: Creating a Game Loop - Silverlight Games 101 Tip of the Day #5: Timers and the Main Game Loop - Mike Snows Silverlight Blog Silverlight-Speed Loop You can see that there are two ways, one using the DispatchTimer and one using Storyboard. However I found that " The DispatcherTimer is a lower resolution timer than the timer behind the Storyboard class, which causes loss in fidelity. Additionally, the Storyboard execution is more stable across the different supported OSs and Browsers. I'll put together a sample to show the comparision. " as stated in post Procedural Animation in Silverlight 2 | Adam Kinney, Continuum Explorer So for my game I started using the empty storyboard method. But then I noticed that I getting only 60-62 FPS (frames per second) even when doing zero computations. This was causing some edge conditions manifest in col...
Read more