No clicking a file menu, no waiting for a dialog to open and close.

It’s been a feature of Shazzam since version 1.0 and it’s done an splendid job up to this point.

The shader loader in version 1.4 now supports nested folders.  You point the shader loader at a folder (by clicking on the Change location link) and it provides access to the files in that folder and it’s children.

Figure 1: The Shader Loader showing the Your Folder tab

It’s a simple change, but it means less fussing with the folder dialog.

Change in Dialogs

Speaking of the folder dialog, we got rid of the atrocious "Browse for Folder dialog" and replaced it with the Windows Vista/7 file dialog.

Figure 2: Yuck.  The Browse for Folder dialog

Figure 3:  The Vista/Windows 7 dialog.

Sample Shaders in the Shader Loader

Now that Shader loader supports nested folders, the Sample Shaders and Tutorials tab have changed.  The shaders are now categorized by folder.

Learn more about shaders, get the book

HLSL and Pixel Shaders for XAML Developers

Due to a limitation in the WPF API you cannot capture a screenshot if you are targeting the PS_3 specification. In addition, you are limited to capturing the effect applied to the image in the Custom Image tab. None of the other sample images or UI are capturable.

The screenshots are stored in a folder under the Shazzam install location. Just use the Tools-Explore Screenshots menu to peruse your screenshot masterpieces.

Here’s a few examples using the new preview tab.

This feature is part of the V1.4 release.

Wouldn’t it be awesome if we could use Intellisense in Microsoft Word or other document editors.  I’d love to to be able to type Indu – Ctrl-Spacebar in Word to have it show a list of words like Industry.

- Walt Ritscher

I’ve wanted to add an auto-complete feature to Shazzam since version 1.0.   It’s a hard task, you need to create a parser that understands the programming language.

The parser needs to understand a lot about the language.  If you are in the midst of writing an if statement (within the parenthesis) do you want show the same keywords as when writing text in the middle of an XML comment line?

The code editor I’m using in Shazzam doesn’t help much either, But I managed to get a rudimentary code completion engine written for Version 1.4

Touring the Auto-complete feature

Here’s what you see when you type the word "if" in the Shazzam editor.

Figure 01: The Shazzam auto-complete for if keyword

As you can see, the popup lists all the HLSL keywords that contain the letters "if".  You can move the cursor up/down the list with the arrow keys. When a keyword is selected in the list, you get a context-sensitive help window with information about that keyword.

Autocomplete

Once the word is highlighted, press the spacebar to auto-enter the text.

This is the autocomplete I get for the if keyword.

if( ){}

More examples

Figure 02: Float2x3

Figure 03: The register keyword

Figure 04:  The lerp function

Figure 05:  The Shazzam XML tags

Bugs and other oddities

The auto-text is not perfect yet.  There are times when it munges existing text or shows keywords where you don’t expect to see them (in the middle of XML comment).  Even so, it dramatically speeds up my coding efforts.

Enjoy.

Shader Book Coming soon

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

http://shop.oreilly.com/product/0636920023869.do

V1.3

Here is a screen shot of full screen image in Version 1.3.

Note that you can see the menu and toolbar on the left side.

V1.4

Here is the full screen view in Version 1.4.

Note that the menus and toolbar are hidden. Press the Escape key to return to split screen mode.  You get the same full screen look for the code editor too.

Book Excerpt

From the upcoming HLSL and Pixel Shaders for XAML Developer book.

http://shop.oreilly.com/product/0636920023869.do

Show the image previews in full-screen mode by choosing the View-Full Screen Image menu (F9). This hides the toolbar and code windows. Use the Escape or F9 key to toggle back to split-screen mode.

Show the code window in full-screen mode by choosing the View-Full Screen Code menu (F10). This hides the toolbar and image preview windows. Use the Escape or F10 key to toggle back to split screen mode.

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