Pixel Shader Effect in WPF

WPF 는 엘리먼트들에게 다양한 효과를 주기 위해서 BitmapEffect 와  Effect 클래스에서 파생된 BlurEffect, DropShadowEffect, ShaderEffect 를 사용할 수 있습니다.

 

이번 포스트에서는 ShaderEffect 클래스를 상속받아 사용자 정의 픽셀 셰이더를 만드는 방법과 영상의 알파 채널을 제거하는 간단한 샘플을 만들어 보겠습니다.

 

- Shader Effects BuildTask and Templates 설치

 

1. http://wpf.codeplex.com/releases/view/14962 에서 Shader Effects BuildTask and Templates.zip 을 다운로드 받습니다.

2. 압축을 풀고 ShaderBuildTaskSetup.msi 를 설치합니다.

3.  readme.txt 파일 내용대로 Templates 폴더를 Visual Studio 가 설치된 폴더의 Templates에 덮어 씌웁니다. ( VS 2012 )

4. 다음 그림과 같이 WPF Shader Effect Library 프로젝트 템플릿이 추가된 것을 확인합니다.

 

 

5. WPF Shader Effect Library 프로젝트 템플릿으로 프로젝트를 생성하면 다음과 같은 기본 아이템들이 자동으로 추가 됩니다.

 

 

Effect1.fx 는 픽셀 셰이더의 내용을 구현하는 파일이고 Effect1.cs 파일에서 사용할 수 있는 클래스로 매핑 시켜주는 내용을 작성합니다.

EffectLibrary.cs 는 헬퍼 메소드를 포함하고 있습니다.

 

실제적으로는 .fx 파일을 컴파일한 .ps 파일을 사용하게 됩니다.

 

 

그럼으로 .fx 파일은 빌드 속성을 항상 Effect 로 지정해주어야 합니다.

 

.ps 파일을 생성하는 다른 방법으로는

DirectX SDK 를 설치하고 fxc.exe 를 통해서 직접 만들어서 사용할 수도 있습니다.

 

fxc /T ps_2_0 /E main /Fo<name or HLSL file>.ps <name of HLSL file>.fx

fxc /T ps_2_0 /E main /Foeffect1.ps Effect1.fx

 

 

- Sample ( Alpha Channel Video )

 

[ ColorKeyAlphaEffect.fx ]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

sampler2D input : register(s0); float threshold : register(c1);   float4 main(float2 uv : TEXCOORD) : COLOR {    float4 color = tex2D( input, uv );         if( color.r + color.g + color.b < threshold )    {       color.rgba = 0;    }     return color; }

 

[ ColorKeyAlphaEffect.cs ]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

public class ColorKeyAlphaEffect : ShaderEffect     {         #region Variable           private static PixelShader _pixelShader = new PixelShader();           #endregion           #region Property           #region Input           public static readonly DependencyProperty InputProperty =             ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(ColorKeyAlphaEffect), 0);           public Brush Input         {             get { return (Brush)this.GetValue(InputProperty); }             set { this.SetValue(InputProperty, value); }         }           #endregion           #region Threshold           public static readonly DependencyProperty ThresholdProperty =             DependencyProperty.Register("Threshold", typeof(double), typeof(ColorKeyAlphaEffect), new UIPropertyMetadata(0.3d, PixelShaderConstantCallback(1)));           public double Threshold         {             get { return (double)this.GetValue(ThresholdProperty); }             set { this.SetValue(ThresholdProperty, value); }         }           #endregion           #endregion           #region Constructor           static ColorKeyAlphaEffect()         {             _pixelShader.UriSource = Global.MakePackUri("Shader/ColorKeyAlphaEffect.ps");         }           public ColorKeyAlphaEffect()         {             this.PixelShader = _pixelShader;               UpdateShaderValue(InputProperty);             UpdateShaderValue(ThresholdProperty);         }           #endregion     }

 

 

 

[ Image ]                                                                            [ Video ]

 

[ Result ]

Reference

http://www.codeproject.com/Articles/71617/Getting-Started-with-Shader-Effects-in-WPF

https://www.safaribooksonline.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

http://blogs.msdn.com/b/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx 

http://blogs.msdn.com/b/jaimer/archive/2008/10/03/announcement-wpf-shader-effects-library-on-codeplex.aspx

https://onedrive.live.com/view.aspx?cid=123EC1ED6C72A14A&resid=123ec1ed6c72a14a%21171&app=Word

 

TransparencyEffect.zip