One common effect used in shaders it to alter the look of the main image by using a second texture as a bump map.

Multi-Shader support

Shazzam has supported multi-input shaders since version 1.2  I’m pleased to announce that version 1.3 contains some useful sample shader that mix 2 to 4 textures for interesting effects.

For this article I’m going to use the new ApplyTextureMap.fx shader.

Figure 1 – Load ApplyTextureMap with Shader loader.

This shader expects two inputs:

/// <class>ApplyTextureMap</class>

sampler2D Texture1 : register(s0);
sampler2D TextureMap : register(s2);

Applying and adjusting the TextureMap

When Shazzam loads the shader the first time it picks the Cactus.jpg file as the ‘TextureMap’ image. 

Here are the two images I will use for this demo.

Figure 2 – Texture1

Figure 3 – TextureMap (the default Cactus image).

Press F5 to compile the shader, then choose the cactus image. You will see the original image morphed with the cactus.

Figure 4 – Morphed image.

Choose different Texture

Next, I will swap out the default TextureMap.

Click the Tryout (adjust settings) tab in Shazzam.  Then click the ‘Choose Texture button.

Figure 6 – Change Texture.

Now I can choose from a list of included shaders,  If you’d rather use your own image file, click the Open File… button instead.

This is the UI the pops up. 

Figure 7. -  Texture chooser.

If you hover over an item in the list you will see an enlarged version of the thumbnail.  I’m choosing the glassblocks_medium texture.

Results

Figure 8. – GlassBlocks applied, strength= .3.

Figure 9. – GlassBlocks applied, strength= 2.5.

Figure 10 – Whirlpool applied.

Included Texture Maps

There are over forty texture map files included in Shazzam 1.3!  Note that most of the included textures include full color spectrum.  By providing images that contain a full range of colors, you get a more affective mix of the pixels values in the final output.

Version 1.3 release date:  July 14, 2010

Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

Figure 1.  the new Image Stretch menu.

Examples of each of the Image Stretch modes.

Figure 2: Original Image

In the following screenshots the work area is deliberately sized to a narrow width in order to show the differences in the stretch modes.

Figure 3: Image Stretch None.

Figure 4: Image Stretch Fill.

Figure 5: Image Stretch Uniform

Figure 6: Image Stretch UniformToFill

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.