Figure 1: No Shader.

Figure 2: Apply Shader.

Side-by-side comparison

In the new version I’ve added a Compare tab.  This shows the original UI and applied effect on the same screen.

Figure 3: Compare Tab, side-by-side.

In some instances you may want to see the images above-below instead of side-by-side.  Uncheck the side-by-side check box and this is what you see.

Figure 4: Compare Tab, above-below.

Watch the video

Here is a video of the compare tab in action.

Shazzam Beta, January 2012

Look for a beta in early January.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

Color Picker

Shazzam has always had a color picker.  In v1.3 it lives on the Plugin pane on the left side of the application.  That location is temporary, it was placed there in the first release due to the product schedule.  But that is not where it really belongs.  It should be on the "Tryout" tab, so that you can interactively change the color while testing the shader.

In version 1.3 the Tryout tab has a text box for color values.  You enter a color string or hexadecimal string in the textbox and Shazzam updates the color.

New Home

I’m happy to announce that the Color Picker has migrated to the Tryout tab.  Not only has it move, but it has some improvements.

You can choose colors from the dropdown and see the preview.  Here is an example using the Available colors view.

You can also use a custom color chooser as show in the following screenshot.

One of the features that I really like about Shazzam in the ability to animate the test values.  I’m not alone that feeling, I get lots of positive comments regarding the animations.

For that reason I’ve also added the color animation feature to the Tryout tab.

Here is a video showing the new features.

Shazzam v1.4 ColorPicker on Vimeo.

Shazzam Beta, January 2012

Look for a beta in Early January.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

File Output

I’ve revamped the output directory implementation to make it easier to find related shader files.    When a shader is compiled in Shazzam there are four files created.  For example, let’s say you are working with the Bands.fx file.  The fx file contains your HLSL code. When you compile the HLSL you get these four additional files.

• temp.ps
• BandsEffect.ps
• BandsEffect.cs
• BandsEffect.vb

The temp.ps file is used by Shazzam when it dynamically generates the test UI.

The BandsEffect.ps file is a copy of the temp.ps file.  This is the file that should be added to your .NET project.  Both these ps files contain the binary output from the compiler.

The *.vb and *.cs files contain the auto generated .NET classes.

Version 1.3 locations

To find these files, use the Tools/Explore Compiled Shaders menu.

In version 1.3 the files were scatter across three different folder.  That made it confusing to find your all the related files, so a change was made for version 1.4.

Version 1.4 Locations

In version 1.4 a directory is created for each compiled shader.  In our example a BandsEffect directory is created. 

Within the BandsEffect directory, you’ll find the three generated files.

Another change you may notice is that the ps file name now matches the other two filenames in the directory.  Version 1.3 used different names which was a was another unintended inconsistency.

Changes to generated .NET effect class

The final change is noticeable in the generated C#/VB classes.  The UriSource property now reflects the new ps file name.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

I’ve given a lot of thought to the future of Shazzam.   I’ve always felt that it would make a good addin for Visual Studio.  It turns out that a lot of people who use Shazzam are not using Visual Studio.  There are the designers who use Expression Blend and the gamer shops that use Shazzam for shader previewing.  That makes the idea of creating a VS addin less appealing.  And then there is Visual Studio 2012 coming.  It has a very impressive set of tools for graphics developers, including shader editors.

So what’s happening with Shazzam?   There will be a new release early in 2012.   It will continue to be a standalone product.  I have some ideas on improvements and other fixes.  For one, I want to make it more "social".  By that I mean making it easier to share shaders files with the community.

More importantly, I am writing a book on shaders for O’Reilly (details in another post).  Shazzam will play an important role in the book and it needs some improvements to help that goal.

If you have suggestions add them to the comments, or look for the new forums coming soon.

Shader Book Coming soon

HLSL and Pixel Shaders for the XAML Developer. O’Reilly Media Inc..

BTW, if you think you have a great shader send it to me (see link on sidebar).

Generative Shaders

There are a handful of generative shaders in Shazzam.  Generative shader ignore any of the underlying pixels in the source and draw their own pixels.  Take this Generative_Star.fx shader for example.  It’s drawing a four pointed star.

Figure 1 – Generative_Star.fx

Figure 2 – Generative_Star property setters.

Figure 3 – Generative_Mandelbrot.fx

Figure 4 – Generative_Bands.fx

New and interesting shaders

I continue to find and invent new pixel shaders for Shazzam. Here are  few of my new samples and some from the community.

First, a look at the original image.

Figure 5 – Original image.

The first shader I want to look at is the ApplyTextureMap.fx shader.  There is a more detailed post about this shader on this site.  ApplyTextureMap takes a second texture and morphs the pixels of the original.  A common use for this in painting programs is to apply noise or canvas texture to the image.

Fiigure 6 – Morphed image.

Glass Tiles: This shader comes from Fakhruddin Faizal.

Figure 7 – GlassTiles.fx

PaperFold:  From SilverlightShow

Figure 8 – Paperfold.fx

Circles:  This is one of mine.

Figure 9 – Circles.fx

Figure 10 – Circles1.fx

FrostedOutline: Also from Fakhruddin Faizal.

Figure 11 – FrostedOutline.fx

I really like the frosted look on this sample image.

Figure 12 – Sample

Figure 13 – Sample with FrostedOutline applied.

Microsoft shaders

While I was working on the first version of Shazzam the WPF team released sample shaders on CodePlex.   I contacted them and asked if I could include them in Shazzam and they gave me a enthusiastic ‘yes!”.  So most of those shaders wound up inside Shazzam.  Version 1.3 adds the Transition effects from Microsoft.   But I’ll show you those shaders in another post.

Version 1.3 release date:  July 14, 2010

Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

Shazzam Shader Editor 1.3 is now available on shazzam-tool.com (July 14th, 2010.

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

It seemed like such a good idea at the time.

How did Shazzam ended up with a dependency on the DirectX SDK?  You see there’s a couple ways to compile a pixel shader in DirectX.  The technique you frequently see mentioned is to use the command line utility called FXC.exe.   FXC works great but there is one tiny problem. It’s only available in the DirectX SDK. This might be a good time to mention that the current SDK is nearly 1 GB in size. Yes, that means to run Shazzam you have to download this gargantuan installer and wait 30 minutes for it to finish installing before you can even use Shazzam.

To remove the the dependency all you need to do is remove the call to FXC and find a way to invoke the DirectX DLLs directly. There are a couple techniques to accomplish this, and they all rely on making PInvoke calls.  Earlier releases of Shazzam attempted to get the correct PInvoke code but it was never quite right. Short story, we keep relying on FXC to do the job.

DirectX Ninja to the rescue

http://jmorrill.hjtcentral.com/

Jeremiah Morrill, or Jer to his friends, has a long history of working with .NET and DirectX.  He created the WPF media kit and the Laser Graffiti application.  He’s busy in the Silverlight world too, working on the SilverlightEncoder and SilverlightViewport. He’s the hero of this story because he’s the guy that wrote the new compiler code for Shazzam 1.3.

Three months ago, Jer and I  got together during the Expression Blend event at MIX10.  Over a few Irish beers we got to talking about the trouble with the SDK.  He volunteered to take a look at the problem and a couple months later he sent me the PInvoke code to make the DirectX compiler work. 

It wasn’t all a cakewalk however. Jer’s code worked great but we struggled with making the DirectX calls work and ensure that the correct DLLs were in place.  There were a number of complications which were discovered during testing but we worked them all out.

No more SDK

It’s with great pleasure that I can announce that Shazzam 1.3 is SDK free and works as soon as you install it on your computer. Time to celebrate.

• On the main stage – by  Larry Brown.

Change to Settings Pane

One side effect of this change is that you no longer need to configure the path to FXE.exe in the Shazzam settings pane. The setting has been removed.

Release date:  July 12, 2010

Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

• Remove dependency on DirectX SDK
• Write more complex shaders with the PS_3 specification
• 40 new texture maps added for multi input shaders
• New Texture picker added to Try-out tab
• Over 80 sample shaders
• 20 tutorials added
• Changes to User Interface
  • Rearrange Code and Tryout tabs
  • Remember last shader in the Shader Loader list
  • Explore Texture Maps menu item
  • New hot keys
• Better support options in help menu
• Standard Windows Installer

Now the WPF supports PS_3 shaders, this example can probably be enhanced further.  Want to take a shot at it?

Did you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool