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 ]

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 ]

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