Feed on
Posts
Comments

Another new feature coming in Version 1.4 is the compare tab.  This feature is has been a common request from the Shazzam user community.  In version 1.3 you can toggle the view between shader view and original UI view by choosing the Apply Shader and Remove Shader menu items.

image

Figure 1: No Shader.

 

image

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.

image

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.

image

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..

Changes for Shazzam v.1.4

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.

image

image

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.

image

 

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

image

 

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..

The changes have started for the next version of Shazzam.

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.

image

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

image

Version 1.3 locations

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

image

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. 

image

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

image

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.

image


 

Shader Book Coming soon

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

The last release of Shazzam (version 1.3) was in July of 2010.  Version 1.3 had a lot of good updates and has been well received in the community.  I’ve been very happy with the outcome and the current version is very stable.

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..

The list of sample shaders included in Shazzam Shader Editor continues to grow.   Thanks to our growing community of users we continue to get shader submissions.  Ten of the shaders in this release were contributed by you.  Thank you!

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.

image

Figure 1 – Generative_Star.fx

image

Figure 2 – Generative_Star property setters.

image

Figure 3 – Generative_Mandelbrot.fx

image

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.

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.

image

Fiigure 6 – Morphed image.

Glass Tiles: This shader comes from Fakhruddin Faizal.

image

Figure 7 – GlassTiles.fx

PaperFold:  From SilverlightShow

image

Figure 8 – Paperfold.fx

Circles:  This is one of mine.

image

Figure 9 – Circles.fx

image

Figure 10 – Circles1.fx

FrostedOutline: Also from Fakhruddin Faizal.

image

Figure 11 – FrostedOutline.fx

I really like the frosted look on this sample image.

image

Figure 12 – Sample

image

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

Version 1.3 Shipped

Cue the trumpets, play the fanfare.

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

.NET pixel shaders support up to 4 input textures.  In the jargon of GPU shaders, a texture is the input (image, Silverlight Ui, etc) that is sampled before returning the new pixel color value.

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.

image

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.

image

Figure 2 – Texture1

image

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.

image

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.

image

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. 

image

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

image

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

 

image

Figure 9. – GlassBlocks applied, strength= 2.5.

image

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.

image

image

image

image

image

image

image

image

 

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

  • 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.

image

 

Release date:  July 12, 2010


Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

Learn more about the features available in Shazzam 1.3.

Shazzam 1.3 is shipping next week, on July 12th, 2010.    Here’s a taste of the new Generative_Mandelbrot.fx.  This effect doesn’t use any of the pixels from the original source, hence the name Generative.  It uses the Mandelbrot  fractal algorithm, but it is not very recursive.  The animation is running in the Shazzam interface.

 

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

Older Posts »