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.

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.

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

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

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

Choose your platform preference

There is a new addition to the Settings pane.  The code generation engine will consider your desired platform when generating the .NET classes.

Figure 1:  Target Framework setting.

As you can see from the following code examples Shazzam creates slightly different versions of the DependencyProperty registration code depending on your framework choice.  Shazzam also ignores Point3D, Vector3D, or Point4D property types when creating Silverlight classes as Silverlight 3 doesn’t support these types yet.

// Use UIPropertyMetaData for WPF

 public static readonly DependencyProperty AspectRatioProperty 

      = DependencyProperty.Register("AspectRatio", typeof(double), 

       typeof(BandedSwirlEffect), new UIPropertyMetadata(((double)(1.5)), 

       PixelShaderConstantCallback(3)));

// Use PropertyMetaData for Silverlight

public static readonly DependencyProperty AspectRatioProperty 

   = DependencyProperty.Register("AspectRatio", typeof(double), 

   typeof(BandedSwirlEffect), new PropertyMetadata(((double)(1.5)),

   PixelShaderConstantCallback(3)));

Constructor

Shazzam now generates a parameterless constructor that automatically loads the compiled pixel shader from an assembly resource.  If the name of your assembly is different from the name of your namespace, you’ll need to hand-edit the URI in the constructor."

The resource URI can be relative, taking the form "/AssemblyName;component/ShaderName.ps" – this new syntax works in both WPF and Silverlight.

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.

• HLSL Meta Tags – Controlling defaults
• Better Edit Controls
• Animation
• Better Silverlight Support

Install your own copy of the free Shazzam Pixel Shader Utility here.

Some video tutorials are available also.

Figure1 : Change Shader Settings tab.

The Edit Shader Property control

What happens when you compile your HLSL code? Each input parameter in your HLSL code is converted to a DependencyProperty in the generated C#/VB code.

/// The HLSL

/// <summary>The aspect ratio (width / height) of the input.</summary>
/// <minValue>0.5</minValue>
/// <maxValue>2</maxValue>
/// <defaultValue>1.5</defaultValue>
float AspectRatio : register(C3);

/// The C# Dependency Property

public static readonly DependencyProperty AspectRatioProperty 

   = DependencyProperty.Register("AspectRatio", typeof(double), 

   typeof(BandedSwirlEffect), new UIPropertyMetadata(((double)(1.5)), 

   PixelShaderConstantCallback(3)));
    

In turn, each DependencyProperty in your generated class is assigned an editor on the test page.  See Figure 2 for an example.

Figure 2:  AspectRatio editor.

The Min and Max textboxes on the editor set the range for the value slider.  Move the slider to set the current value for the property (AspectRatio in this example).

Animating the Property

Manually changing the slider value is useful to see what happens to the image when a particular test value is applied.  When you find a interesting version of your effect you can jot down the detail  and use it in your Silverlight/WPF application.  But sometimes you just want to play with the settings and see what happens.  That’s why there is an animation section on the edit control.  There are several buttons (exact number depends on the property type) available for controlling the animation.

Figure 3: Animation controls.

When the animation is running the value slider is replaced with a status textbox.  This way you can see the current values as the animation runs and not be distracted by the slider racing dizzily back and forth on the screen.

Figure 4:  Current animation value as text.

Multi-value Animations

Some properties like Point and 3DPoint have multiple values in each property. The editor provides more controls for editing and adds another animation button (Circular animation).

Figure 5: Multiple editors and circular animation button.

Set Default Animation Duration

The Settings pane has a number of improvements in versions 1.1.  The one you are interested in for today is the Default Animation Duration setting. This specifies the default duration for all animations.  Your default is loaded in to the test page the next time you compile the shader. You can always modify the animation duration on the test screen, the default value is only used as the initial setting.

Figure 6:  Setting pane – Default Animation Length.

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.

         float – 32-bit floating point value.

There are a number of vector types too. 

        float2 – two dimensional float vector.
        float3 – three dimensional float vector.
        float4 – four dimensional float vector.

When you need two float values stored in a type (think WPF Point and Size types) use a float2 in your HLSL.  float3 is used for types like 3DPoint and float4 is handy for storing the four color values (Alpha, Red, Green, Blue) together.

Shazzam test controls

In Shazzam 1.0 float2  and other vector values were shown in the test UI with a single textbox.

Figure 1:  Shazzam 1.0 UI

Simple but not the most intuitive interface ever to grace an application.  Plus the point values were not animatable in V1.0. In Shazzam 1.1 the test UI has been changed to support animation and updated to handle float2, float3 and float4 values in a smarter way.

Figure 2:  Shazzam 1.1 UI

There is a better use of color in the UI labeling too, which helps differentiate between labels and data.

Forcing data type

There is a new Meta Tag, the <type> tag,  available for decorating your HLSL.  This tag tells the compiler which .NET type to use for a given HLSL variable.

float can be Double or Single.

float2 can be a Point, Size or Vector.

float3 can be Point3D (not available for Silverlight).

float4 can be Point4D or Color.

Example HLSL

//--------------------------------------------------------------------------------------
// float4
//--------------------------------------------------------------------------------------

// float4 map to Color or Point4D

/// <type>Color</type>
float4 SampleColor: register(C4);

/// <type>Point4D</type>
float4 SamplePoint4D : register(C5);

Figure 3:  Shazzam 1.1 Color and Point4D

The result is that the Point4D gets four data entry controls.  You still have to enter a color value (Red, Orange, #Ff4455FF) in a textbox however.  In a future version of  Shazzam this will be replaced with a color picker.  In the meantime you can use the Color Picker in the side pane (thanks Robby).

Figure 4: Robby’s Color Picker

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.

One of my favorite new features in Shazzam 1.1 is the HLSL meta data tags.  Shazzam reads a small set of optional XML tags embedded in your HLSL and uses this meta data to inject information into your generated class.  Plus there are tags for setting default, minimum and maximum values that propagate to the shader testing screen.

Shazzam MetaTags

In order to keep the HLSL compiler happy the tags are placed in a comment line.  Use the triple-slash /// syntax to differentiate Shazzam comments from HLSL comments.

Available Tags

<class>:  The class tag specifies your desired Class name for the generated code file.

<namespace>: The namespace tag specifies your desired .NET namespace for the generated code file.

<description>: The description tag injects an XML comment above your class definition in the generated code file.

Example HLSL

//------------------------------------------------------------
// Specify a default Class name for the generated file
/// <class>DemoEffect</class>
//-------------------------------------------------------------
// Specify the default >NET namespace for generated file.
/// <namespace>Shazzam.Shaders</namespace>
//-------------------------------------------------------------
// Provide a description for this Shader
// Shazzam will generate XML comments from this description
/// <description>An effect that demonstrates the Shazzam features.</description>

Figure 1:  Generated class code.

Testing Screen MetaTags

The next set of Meta Tags is used to pass information to the Shazzam test page.   You can specify minValue, maxValue, defaultValue and summary values for each HLSL register.  The generated C# or VB class uses these value as defaults for the class properties.  Plus every time your shader.fx code is compiled the testing UI is initialized with these settings.  No more reentering values every time you compile the shader!

<summary>:  Provide a summary describing the purpose of this variable.  A summary tooltip will appear in the testing window.

<minValue>: Provide a default value for the minimum textbox.  Note that you can set the value in the text box to a lower number than the minimum.  minValue merely provides the starting value for the textbox.

<maxValue>: Provide a default value for the maximum textbox.  Note that you can set the value in the text box to a higher number than the maximum.  maxValue merely provides the starting value for the textbox.

<defaultValue>: Provide a starting value for the Value slider control.

Example HLSL

// Causes a tooltip to show in Shazzam.

/// <summary>Summarize the purpose of this variable.</summary> 

/// <minValue>-20</minValue>  // provide minimum initial value for the register.
/// <maxValue>300</maxValue>  // provide maximum initial value for the register.
/// <defaultValue>120</defaultValue> // provide default value for the register.
float  SampleFloatWithXML: register(C1);

Figure 2:  Min, Max and Default values in the Shader Settings view.

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.