Last week I was speaking with Michael Kordahi (aka DelicateGenius) from Microsoft Sydney and he asked me about whether it was possible to get the smooth Anti-Alising that you can get from proper Green Screen work that comes out of After Effects/Premiere/FCP etc.

An interesting question I thought.

The Problem
At the time of writing this, the video formats aren’t supporting Alpha channels in Silverlight. There is a Basic Color Key pixel shader, but it’s a little simplistic and requires that the color being “Key’d” to be the same as the background color of the image being pasted on. In other words, Alpha is either at 100% or 0%.

Flash does have this gradiented Alpha channel stored in the media files, but, I’m not really that excited by flash.

SO! How can we do this? Is it possible? Damn right!

The Solution in Theory
In the movie world we create the image and also a MATTE, a Matte is a black/white/grey scale copy of the video footage we want to SuperImpose. This Matte, in the old days (Star Wars), was used to allow light through the film (the white area) and only expose that part. Then the film was run through again with the other elements and other MATTE’s. This was achieved using an Optical Projector, George Lucas and his team built their own. Amazing eh?

The output from the video editing software

Even though we’re all using computers now, this same MATTE picture can be used to define the Alpha channel for each pixel, enter the HLSL Pixel Shader that is supported in Silverlight.

A Question
This is all well and good, but how do you synchronise the two videos to be in perfect time? I’m glad you asked. You don’t have to.

One of the other passions I have is 3D, stereoscopic film, where the video signals are placed side by side. If you’ve seen some 3D TV, they do this already.

So we put the image on the Left, and the Matte on the right. Send that Video Brush into the Pixel Shader and let it do it’s magic and output a perfectly generated Alpha Channel.

What you’re going to learn is how to create this Pixel Shader from scratch and see how the Pixel Shader functions and how to create your own. In part 2 we’ll import this into our Silverlight project, wire it all up and come up with something world class.

So, let’s do something cool…..

Part Two can be found HERE

Here is the code from the example

// The texture is loaded into this Register as Texture1Sampler
sampler2D Texture1Sampler : register(S0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
//Double the screen Width
float2 currentPixelPosition = uv;

//Multiply the x position to stretch the first half of the screen across to fill the entire screen
currentPixelPosition.x = currentPixelPosition.x * 0.5;

//Grab the current pixel value for the current Pixel Position, referencing the texture
float4 currentPixel = tex2D( Texture1Sampler, currentPixelPosition );

//Check to ensure Alpha is only for first half of screen
float checkX = uv.x * 2;

//check to make sure we don't try and grab the alpha value beyond the screen
if (checkX <= 2.0) {
//Get alpha values from the second half of the screen
float2 alphaPixelPosition = uv;
alphaPixelPosition.x = currentPixelPosition.x + 0.5;
float4 alphaValue = tex2D( Texture1Sampler, alphaPixelPosition );

//Get the red channel to convert to Alpha value, could change to blue/
float value = alphaValue.r;

//Assign the value to the alpha channel
currentPixel.a = value;

//Assign that value as a multiplier to the RGB channels
currentPixel.r = currentPixel.r * value;
currentPixel.g = currentPixel.g * value;
currentPixel.b = currentPixel.b * value;
}
return currentPixel;
}