In the mood of getting everything sketchy these days :), I’ve put together a pixel Shader which converts any visual element into a sketchy look.

For instance, elements that would normally look like this

withouthatching

Will now look like this

withhatching

Hatching Effect is a simple multi-texture sampler that takes the luminance level of the implicit input and uses thresholds to determine which tone texture to use.  The Pixel Shader use three texture inputs: LightToneTexture, MiddleToneTexture and DarkToneTextur and select either one of them based on the luminance level.

The thresholds can be customized in Blend V3 when the effect is selected from the object tree.

Threshold control allow you to increase or decrease the dominance of a given tone texture. For instance, the image below, the background contains too many hatching.   By tweaking the thresholds, we can achieve better results.

hatchingdefault

hatchingtweaked

You can also supply your own tone texture to the shader. For instance, if you want to create a “thermal look” to you comps, you can assign a blue image brush to DarkToneTexture, yellow image brush to MiddleToneTexture and red image brush to the LightToneTexture. The screen shot below shows how the image would look like.

customhatching

To install the  Effect Pixel Shader on your machine, simply download the Msi from the link below and double click to install.

Hatching Effect Setup file

Next time you boot up Blend 3, the effect should automatically show up in your asset tools under the “Effect” category. If you click on the Effect category, HatchingEffect will show up in the list (see image below).  To apply the Hatching effect to an element, either drag the effect on top of the element in the artboard, or drag the effect on top of the element in the object tree.

hatchingdrag

The source codes for the shader can be downloaded from the link below

Hatching Effect Source Codes

On my next post, I’ll talk more about the process of authoring Shaders project that compiles one shader cs file for both WPF and Silverlight and then building the setup and deployment project so that the effect gets registered properly into Blend V3’s asset tool.

Stay tuned.

-Charles