On a recent project for w.phenomblue.com" target="_blank">work, we needed to create a away to transition between different environments in a Silverlight site. Along with that, there was a vignette effect that would be applied in each environment to add a little something to each one. To accomplish this, we decided the best way to go would be using a pixel shader to create the clean transition and an effect that won't bog down the site. Since I'm still not completely familiar with the HLSL that goes into creating pixel shaders, I found this blog post by René Schulte that used a similar effect to make a very cool old movie style that could be applied to a media element. In other words, he did all the hard work and I was able to pull from his example to help create the effect we used :).
First things first, here is a live demo of the effect in action:
*Note: Images used here are from digital blasphemy who creates some very cool desktop wallpapers that you should definitely check out.
Shade the Pixels
The first part of creating the effect that we will in turn use to create our transition is the effect itself which looks something like this:
sampler2D input : register(s0);
/// Change the radius of the effect
/// 0
/// 10
/// 0
float VignetteRadius : register(C0);
float4 main(float2 uv : TEXCOORD) : COLOR {
float4 color = tex2D( input , uv.xy);
// Calc distance to center
float2 dist = 0.5 - uv;
// Vignette effect
color.rgb *= (0.4 + (-VignetteRadius * 0.04) - dot(dist, dist)) * 2.8;
return color;
}
The first thing we do is to get the distance we are from the center, then we take our Vignette Radius variable that we defined and do a little math. The inverse of the vignette radius is what will allow us to create the transition animation as I'll show below.
Create the Animation
Once this effect was created and tested in Shazzam, which I think is the best tool out there for creating pixel shader effects for WPF and Silverlight, we will use the class generated to add our effect to the images and add in the animation. To do this, we will import the namespace into our XAML and then apply the effect:
xmlns:shaders="clr-namespace:VignetteTransition.Shaders"
Now that we have the effect added to the image, we just need to create a simple double animation to change the radius of our effect and show/hide the current image:
and voila! We have a simple but clean transition animation that can be used. The demo above uses two images and just swaps their visibility and then reverses the effect to show how it can be used between two different environments. To see the full source of the demo, the code is available for download below. Happy coding!
VignetteTransition.zip (13.62 mb)