Shazzam News

We’re getting close to a release of the next version of Shazzam.  This is the first in a number of articles describing the new features. 

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.

공도’s 실버라이트 하기 좋은날 #26 Shazzam-tool로 픽셀셰이더 이펙트 만들기

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

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

 

 

I get a lot of email regarding Shazzam.  One constant request from the community is to add multi-input shaders.  I’m happy to announce that you can now use up to three additional input samples in your shader definition.

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.

I’ve added more shaders to the sample folder bringing the total count to nearly forty Here is a quick overview.

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.

Learn more about the features available in Shazzam 1.2.

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

There are a handful of new WPF pixel shaders available in our Shazzam Pixel Shader Editor.

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