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
Will now look like this
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 allows 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.
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 screenshot below shows how the image would look like.
To install the Effect Pixel Shader on your machine, simply download the Msi from the link below and double click to install.
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.
The source codes for the shader can be downloaded from the link below
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.