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.

• New shaders added
• Even more shaders
• Multi-input shaders
• Sample UI and Media tabs
• Image stretch
• Tutorials
• Bug fixes and other enhancements

WaveWarper

WaveWarper applies a wavy pattern to the input.  This shader was contributed by Timmy Kokke (http://blog.timmykokke.com)

Figure 1 – Original Image.

Figure 2 – WaveWarper.

Figure 3 – Wavewarper with finer grain waves.

SketchGranite and SketchPencilStroke

These two Sketch shader apply a artistic effect, much like pencil drawings, to the input.

This shader was contributed by Ali Daneshmandi  (http://daneshmandi.spaces.live.com/)

Figure 4 – SketchGranite

Figure 5 – SketchPencilStroke

Bands

This shader divides the input into vertical bands.

This shader was contributed by Walt Ritsher (http://blog.wpfwonderland.com)

Figure 6 – Bands

If you have Shazzam installed on your computer it will attempt an update the next time you run the application.  If you don’t have the Shazzam installed you can install it from this location.

http://shazzam-tool.com/publish.htm