Shazzam News

I get a lot of email regarding Shazzam.  One constant request from the community is to add multi-input shaders.  I’m happy to announce that you can now use up to three additional input samples in your shader definition.

First Look

I’ll start by looking at a simple example.  I’m using the MultiInput_MergeImages.fx sample included in Shazzam 1.2.

First, a little review. All shaders in Shazzam have a least one input sample.  This is typically written like this.

// this is the main input texture for the shader
sampler2D input : register(s0);

To add another input to your shader (in HLSL) you have to create a variable and load it into one of the four GPU ‘S’ registers. Since there are only four registers, that is the limit for the number of samples you can use in your shader.

In the following code snippet I am loading the second sample into register s1.

// this is the main input texture for the shader
sampler2D input : register(s0);

// this is an additional texture
// note that textures use the S registers
sampler2D Texture1 : register(s1);

Here are the two inputs that I will use for this example.

Figure 1 – Primary sample.

Figure 2 – 2nd sample.

Once we have second sample we can do any of the normal HLSL tricks. On top of the usual tricks you can also combine the pixels, from both samples, in interesting ways. This first example will merge the two images.

float Ratio : register(C0);
float4 main(float2 uv : TEXCOORD) : COLOR
{ 

 float4 inputTex = tex2D(input, uv);
 float4 otherTex = tex2D(Texture1, uv); 
 return ((inputTex * Ratio) + (otherTex * (1 - Ratio))); // mix the two images
}

Here are the results.

Figure 3 – Merged images.

Changes in UI

Now that Shazzam supports multiple inputs the testing interface had to be changed to accommodate selecting other images. When Shazzam detects additional sample input, like this sample HLSL,

sampler2D Texture3 :register(s2);

it automatically adds the ‘OpenImage control’ to the ‘Change shader settings ‘ tab.

Figure 4 – the new change Image controls

Getting fancier

I’ve recorded a video to show the new interface.  This video uses a ripple effect to morph between the two sources.

The Catalyst

I had help with this feature from Nikola Mihaylov, better known as Nokola at nokola.com.  His site is a terrific Silverlight resource.  I suggest you take a look at his work over there.

Figure 5 – Nokola Shock Game

Nikola and I started corresponding a few months ago while he was working on his new Silverlight application (EasyPainter).  He had a number of questions about Shazzam and many helpful suggestions regarding improvements in the Shazzam  interface. As a result, Nikola contributed some code to the project that enables multi-input shaders. I am grateful for his contribution, he is the catalyst that caused multi-input to be added to Shazzam.

As a side note, be sure and check out his easy painter application. It’s an excellent representation of what can be done in Silverlight 3.

http://nokola.com/EasyPainter/

Figure 6 – Easy Painter

Future additions

I’ve added a few sample multi-input  shaders to Shazzam.  I have more samples available from Microsoft.   Those will be added to a future release as soon as they are Shazzam-alized*.

* Shazzam-alized:  Cleaned up, commented and provided with useful default values.

Contribute your shaders

Do you have ultra hip shader you are proud to show off? There are many shaders in Shazzam that were contributed by the community. Now that you can create multi-input shaders I’d like to see what you come up with.

Submit your HLSL and see if it ends up in the next release of Shazzam.

I’ve added more shaders to the sample folder bringing the total count to nearly forty Here is a quick overview.

ParametricEdgeDetection

We’ve got more contributions from the community.  Rene Schulte (http://kodierer.blogspot.com) sent over a few of his latest creations.

Figure 1 – Original Image.

Figure 2 – ParametricEdgeDetection

Rene has posted a nice post regarding his ParametricEdgeDetection shader.

For Silverlight 3 I’ve implemented an edge detection post processing effect. It’s a parametric pixel shader, which performs a common image processing technique called convolution.

TransparentAlternatingPixels

This is another shader contributed by Rene. Read his blog post for information.

Figure 3- TransparentAlternatingPixels

OldMovie

This is the last contribution from Rene.  This shader makes it easy to simulate an old film, complete with scratches, noise and flickering projector light.  Once again Rene has a post explaining more.

Figure 4 – OldMovie shader applied to wmv file

Tiler

The Tiler effect duplicates your sample across rows and columns.  You get a result similar to the TileBrush in WPF.

From A.Boschin

Figure 5 – Tiler brush with 3 row and 3 columns

Splinter

This is one of my sample effects.  The idea for it came to me earler this week while testing the latest version of Shazzam.  

Multi Input Shaders

We’ve finally added multi-input support to Shazaam. Multi-input support has been in the top 5 feature requests for a long time and it finally is here. Look for another post soon about this popular item.   Props to nokola for providing the code that got this feature launched.

Oh, and if you have a pixel shader you want to share with the community just drop me a line and I’ll get it added to the project.

Learn more about the features available in Shazzam 1.2.

• New shaders added
• Even more shaders
• Multi-input shaders
• Sample UI and Media tabs
• Image stretch
• Tutorials
• Bug fixes and other enhancements

There are a handful of new WPF pixel shaders available in our Shazzam Pixel Shader Editor.

WaveWarper

WaveWarper applies a wavy pattern to the input.  This shader was contributed by Timmy Kokke (http://blog.timmykokke.com)

Figure 1 – Original Image.

Figure 2 – WaveWarper.

Figure 3 – Wavewarper with finer grain waves.

SketchGranite and SketchPencilStroke

These two Sketch shader apply a artistic effect, much like pencil drawings, to the input.

This shader was contributed by Ali Daneshmandi  (http://daneshmandi.spaces.live.com/)

Figure 4 – SketchGranite

Figure 5 – SketchPencilStroke

Bands

This shader divides the input into vertical bands.

This shader was contributed by Walt Ritsher (http://blog.wpfwonderland.com)

Figure 6 – Bands

I’ve uploaded the newest version of Shazzam to the Shazzam-Tool.com servers. The version number for this release is a minor change (1.2.0.21).  but are many interesting updates in the product.  Look for more blog posts on this site for details regarding the new features.

If you have Shazzam installed on your computer it will attempt an update the next time you run the application.  If you don’t have the Shazzam installed you can install it from this location.

http://shazzam-tool.com/publish.htm