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

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

• 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

Built on .NET 4.0

The latest version of .NET shipped in April.    There is one key feature in WPF that we had to include in Shazzam 1.3.  

The PixelShader class now accepts Pixel Shader 3.0 shaders when your hardware supports them. Important: There is no software rendering for PS 3.0. For example, you won’t see PS 3.0 Effects over Remote Desktop, when printing, in RenderTargetBitmap, etc… – WPF3D Team Blog

Yes, you can now target Pixel Shader 3 in your shader!

What do I get with the Pixel Shader 3. specification?

For starters, you get a lot more instructions in your HLSL.  What this means to you is that you can write more lines of HLSL before getting the dreaded “Instructions Limit Exceeded” compile error.  Here’s a list of the differences between the two specs.  Not all these feature may be support in WPF.  We are still learning more about the WPF coverage.

Read more at http://msdn.microsoft.com/en-us/library/bb219846(VS.85).aspx 

New Settings for compiler

The Settings Pane has changed to accommodate this change.   When choosing the target framework you can pick WPF PS3, WPF PS2 or Silverlight.

Bad news for the Silverlight developers though.  You don’t get to move to Pixel shader 3 yet.  

Ship date: Shazzam 1.3  will be out by mid June.

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

That’s Korean for ‘Shazzam-tool making pixel shader effects’.

Shazzam continues to appear on developer desktops around the world.  Now our Korean fans have a video detailing how to use Shazzam.

 

왠지 오랫만에 기술적인 내용으로 돌아온 느낌이네요.

픽셀셰이더 이펙트는 아마 10회차에서 익스프레션 스튜디오 카페의 거북사마님이 잘 소개해 주셨는데요,

그 때는 기본으로 내장된 이펙트와 공개되어 있는 이펙트를 사용하는 방법만 알아봤었죠.

이번 시간에는 Shazzam-tool을 활용하여 직접 픽셀셰이더 이펙트를 만드는 방법을 알아볼게요.

픽셀셰이더 이펙트를 만드려면 먼저 HLSL(High Level Shader Language)라는 언어를 사용하여 픽셀셰이더 소스코드를 작성하고,

DirectX SDK에 들어 있는 셰이더 이펙트 컴파일러인 fxc.exe로 소스코드를 컴파일하여 ps파일을 얻은 후,

실버라이트 프로젝트에 리소스로 포함하고 그것을 사용하는 셰이더 이펙트 클래스를 만들어주면 돼요.

 

 

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.