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

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.

http://blog.shazzam-tool.com/index.php/community/

How are you using Shazzam?

I’m amazed at the applications that are being created with pixel shaders.  Shazzam plays a small part in the development lifetime of some of these projects.

Do you have your own project that you are proud to show off? Did you use Shazzam to generate your shaders?

Submit your Project and I’ll add it to the community page.

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파일을 얻은 후,

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