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.
[...] Multi-input shaders [...]