Welcome to MSDN Blogs Sign in | Join | Help

You had me at "Hello World!"

XAML, WPF, Silverlight, .NET, Office 2007, Windows code samples and other interesting things

Syndication

3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection)

In This Tutorial:

·         Template project and simple 3-step instructions to kick start WPF pixel shaders

·         Introduction to Pixel Shaders in WPF

·         Source Code for 3 pixel shaders

·         Links to 2 pixel shader sources on the web

Using Shaders in WPF: The Easy Way

Pixel shaders are a great way to enhance your WPF program in many ways. I show just few of the possibilities here and provide a good framework to start developing your own effects.

3 steps to kick start you with WPF pixel shaders:

1.      Install DirectX SDK

2.      Download and open the Shader template project from Nikola’s site: http://www.nokola.com/sources/ShaderEffectTemplate.zip

3.      Start coding your effect in MyEffect.fx

Next: Read the Beginner’s Presentation to WPF Pixel Shaders

Downloads

Prerequisites: DirectX SDK from Microsoft.com

View the Beginner’s Presentation to WPF Pixel Shaders here: http://blogs.msdn.com/nikola/attachment/8924657.ashx

Download the template project here: http://www.nokola.com/sources/ShaderEffectTemplate.zip

Download these Pixel Shader samples: Twirl UI, Blobs and Lights: http://www.nokola.com/sources/ShaderEffects.zip Note that you have to enable each effect by itself for best view J Just comment out the other 2 effects when playing at the sample.

Check out these 2 cool pixel shader tutorials:

Grayscale effect: http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html

Wave reflection effect: http://rakeshravuri.blogspot.com/2008/07/wave-reflection-shader-effect-in-wpf.html

 

 Hope you like it!

Published Thursday, September 04, 2008 9:10 AM by nikola


Attachment(s): Beginner’s WPF Pixel Shaders.pptx

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# car insurance » 3 Easy Steps to WPF Pixel Shaders. Template Project. 5 Samples - Light, Blobs, Twirl and Other! Presentation @ Thursday, September 04, 2008 12:40 PM

PingBack from http://hoursfunnywallpaper.cn/?p=4615

car insurance » 3 Easy Steps to WPF Pixel Shaders. Template Project. 5 Samples - Light, Blobs, Twirl and Other! Presentation

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Monday, September 22, 2008 9:02 AM

hi,

cant we add pixel sheders using xna libraries?

if so that would be realy grate...

uditha

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Monday, September 22, 2008 10:54 AM

Hi uditha, I found a response for your question on http://channel9.msdn.com/shows/Continuum/PixelShaderParts/ :

"XNA is not compatible with WPF just yet.  Via

reflection you can make it work, but with Vista requiring a 9Ex device for performance, you have a hard time getting 100% out of your hardware.  I have documented it on my blog. link: http://jmorrill.hjtcentral.com/Home/tabid/428/EntryID/259/Default.aspx "

nikola

# WPF Pixel Shader @ Monday, September 22, 2008 12:16 PM

Nikola Mihaylov explains what a WPF Pixel Shader really is and the code involved and making one. ...

Paul Mooney

# WPF 3.5 Sp1 - Now I'm Trying to Write Pixel Shaders :-S @ Wednesday, September 24, 2008 2:08 PM

I've been quite content up until today to say "I can't write Pixel Shaders" and "I don't know what High...

Mike Taulty's Blog

# Announcement: WPF Pixel Shader Effects Library on codeplex.. @ Saturday, October 04, 2008 6:37 PM

We just published a codeplex project with source for > 25 Pixel Shader effects and ~35 Transition

Jaime Rodriguez

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, November 23, 2008 2:50 AM

Hey... FYI your TEMPLATE PROJECT link is dead (404 error)

:(

I cant wait to get it. My shaders get an Instantate error...

a

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, November 23, 2008 10:59 AM

Thanks for the note - I fixed the template project link!

nikola

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, March 29, 2009 2:14 AM

Hi,

Thanks for this useful post.

What's important about deploying a wpf project which used pixel shader? I mean we should have DirectX on the client? Are we supposed to compile the .fx file on each client too or just we can use the generated .ps file?

Ali Daneshmandi

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, March 29, 2009 1:44 PM

Hi Ali,

For deployment you just need DirectX on the client and you can use the generated .ps file without having to recompile it.

Nikola

nikola

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Monday, March 30, 2009 5:03 AM

Hi again,

I want to create a Line Art effect but as I got vertex shader is not supported by WPF now. Is there a way to create Line Art effect by Pixel Shader? Any idea?

Thanks.

Ali Daneshmandi

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Tuesday, May 26, 2009 4:33 PM

Hi Ali,

I think you might be able to do something with edge detect filters in pixel shader only.

Check this out for the filters:

http://en.wikipedia.org/wiki/Canny_edge_detector

http://www.pages.drexel.edu/~weg22/can_tut.html

I haven't done it before, so I don't know if it would work - seems like it should though.

Sorry for the late response! I just realized I haven't been receiving blog notification for quite a while...

nikola

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, July 05, 2009 10:10 AM

Dear Nikola,

Thanks for your response. I actually find a way to create the Line Art effect by the help of http://brooknovak.wordpress.com/2008/09/16/simple-image-filters-written-as-hlsl-pixel-shaders/

post and I just placed this link here for others if they have a same issue.

Regards,

Ali

Ali Daneshmandi

# re: 3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection) @ Sunday, July 12, 2009 11:00 PM

oh my! this is so coooll!! thanks a lot Ali!

I really like the shader effects

nikola

Leave a Comment

(required) 
required 
(required) 

  
Enter Code Here: Required
Page view tracker