Feed on
Posts
Comments

.NET pixel shaders support up to 4 input textures.  In the jargon of GPU shaders, a texture is the input (image, Silverlight Ui, etc) that is sampled before returning the new pixel color value.

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.

image

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.

image

Figure 2 – Texture1

image

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.

image

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.

image

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. 

image

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

image

Figure 8. – GlassBlocks applied, strength= .3.

 

image

Figure 9. – GlassBlocks applied, strength= 2.5.

image

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.

image

image

image

image

image

image

image

image

 

Version 1.3 release date:  July 14, 2010


Do you know about the Shazzam twitter feed?

http://twitter.com/shazzamtool

2 Responses to “Morphing Images with Texture Map Pixel Shader”

  1. [...] 40 new texture maps added for multi input shaders [...]

  2. [...] 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 [...]