WPF/Silverlight深度解决方案：(六)HLSL自定义渲染特效之完美攻略(上)

Shader Effect 中文名称为“渲染特效”或“滤镜”， WPF 中自带有 5 种位图特效及 2 种渲染特效，而 Silverlight 中仅有这 2 种渲染特效： BlurEffect ( 模糊渲染 ) 和 DropShadowEffect ( 投影渲染 ) 。由于目前 WPF/Silverlight 被应用的领域还不是很多，大多数开发者仅仅是将之作为 Winform/Webform 的替代品，那么现成的这几种渲染特效已足够应付大多数的场合需要。但是如果您打算利用 WPF/Silverlight 进行更高端的开发，例如动画制作及游戏设计，那么没有少则数十种的自定义渲染特效库是无法满足绚丽多彩的画面需求的。本节我将以 Silverlight 平台为例，向大家介绍如何制作及实现 HLSL 自定义渲染特效。

3.0 是 Silverlight 具有里程碑意义的一个版本，因为从此版本开始，您将能够通过 HLSL   高级着色器语言（ High Level Shader Language ，简称 HLSL ）为 Silverlight 中的 UIElement 对象制作自定义渲染特效，并且这些特效均为 快速而有效率地通过显卡来完成。举个简单的例子，如果您想让一个动画的系列帧图片在显示的时候去掉无用的黑色 ( 或其他某种颜色 ) 像素（这在游戏开发中再常见不过了，俗称：去背），用代码来实现则必须循环编历图片中的每个像素点，判断为黑色时修改该点为透明（或忽略所有黑色点），这无形中饶了很大一个弯子。其实我们只需创建一个简单的 HLSL 渲染特效 (HLSL Shader Effect) 就可以轻松的实现之，并且可以随意的选择附加或是移除。您此时不禁要问：这么神奇的 HLSL 渲染特效该如何制作和使用呢？嘿嘿，下面且听我慢慢道来。

1 ）架设开发环境

首先需要安装 DirectX SDK ，接下来在编辑器的选择上有很多种，例如 FX Composer 和 RenderMonkey 都很好很强大，这里我个人特别推荐安装专门为 WPF/Silverlight 开发的小而精悍的 Shazzam 作为入门级 HLSL 渲染特效编辑器。需要注意的是， Shazzam 在首次运行时需要指定 DirectX SDK 中的 fxc 文件路径，该文件存在于 DirectX SDK 安装目录 \Microsoft DirectX SDK (November 2008)\Utilities\bin\x86\ 下。

2 ）制作 HLSL 渲染特效

打开 Shazzam ，我将该编辑器分为 4 个部分：工具菜单，特效库，预览区域，代码区域：

Shazzam 本身已经自带了一些很棒的特效，大家看上图中的特效库中的 *.fx 文件即为已经包装好的特效，此时我选择了名为 Swirl( 旋涡纹 ) 的特效，然后点击菜单栏 Tools 里的 Apply Shader 或直接按 F5 看到的渲染结果即为预览区域中的图象；并且该 Swirl 渲染特效的 HLSL 代码我们可以从代码区域中的 Swirl.fx 中查看到，用过 Photoshop 的朋友都清楚很多滤镜特别是功能强大的滤镜都是带有参数的，同样的，我们在书写 HLSL 时通过定义全局变量来作为参数。那么这些参数我们可以通过代码区域中的 Change Shader Settings 进行修改，并且修改后的效果均会时时的呈现在预览区域中。

掌握了 Shazzam 编辑器的使用后，制作渲染特效就再简单不过了。如果您不熟悉如何编写 HLSL 语言，那么您可以尝试从网上查找些现成的 HLSL 渲染特效或是直接使用自带的这些特效作为起步练习。这里我以实现“灰度”特效为例为大家详细讲解一个渲染特效的整个制作和使用流程。

首先编写出“灰度”特效的 HLSL 代码：

sampler2D implicitInput : register ( s0 );

float factor : register ( c0 );

float4 main ( float2 uv : TEXCOORD ) : COLOR

{

    float4 color = tex2D ( implicitInput , uv );

     float gray = color . r * 0.3 + color . g * 0.59 + color . b * 0.11 ;

    float4 result ;

    result . r = ( color . r - gray ) * factor + gray ;

    result . g = ( color . g - gray ) * factor + gray ;

    result . b = ( color . b - gray ) * factor + gray ;

    result . a = color . a ;

     return result ;

}

然后将这段代码粘贴进代码区域后按 F5 运行，如果编译通过则预览图片将变成黑白色：

接下来我们需要将此特效保存为 *.ps 格式以供 Silverlight 使用，具体操作为点击工具菜单 Tools 里的 Compile Shader(F7) 生成 ps 文件，然后再点击 View Compile Shaders 会打开编辑器的特效库文件夹路径，此时我们刚才制作的“灰度”渲染特效将保存在此目录中，分别为 temp.fx 和 temp.ps ：

我们只需将 temp.ps 复制出来即可，并根据其效果更名为 Gray.ps 。

3 ）使用 HLSL 渲染特效

新建一个 Silverlight3 项目，在项目中添加两个文件夹分别命名为： ShaderSource 和 ShaderClass ，顾名思义 ShaderSource 用于存放 ps 文件，那么我们将 Gray.ps 添加进来，并设置其属性如下：

至此，虽然已经可以直接对 ps 文件进行使用了，但是为了能够更好的拓展延伸及规范管理，我们还必须为每个 ps 渲染特效编写一个实体驱动类，该类包含有渲染特效的所有参数 ( 关联属性 ) 定义等。非常幸运的， Shazzam 编辑器已经为我们提供了现成的代码供参考：

我们可以通过代码区域中的选项卡选择显示 C# 或 VB 的自动生成代码，然后在 ShaderClass 文件夹中新建一个名为 Gray.cs 的类，并将代码粘贴进去。此时如果无法编译通过的，则必须将之 Silverlight 化修改，因为这些自动生成的代码是针对 WPF 的 ( 例如将 UIPropertyMetadata 改为 PropertyMetadata ) 。那么修改后的 Gray.cs 完整代码如下：

using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Effects;

namespace Silverlight.Shader {

    public class Gray : ShaderEffect {

        public static DependencyProperty InputProperty = ShaderEffect .RegisterPixelShaderSamplerProperty("Input" , typeof (Gray ), 0);

 

        public static DependencyProperty FactorProperty = DependencyProperty .Register(

"Factor" , typeof (double ), typeof (Gray ), new PropertyMetadata (new double (), PixelShaderConstantCallback(0)));

 

        public Gray(PixelShader shader) {

            PixelShader = shader;

             this .UpdateShaderValue(InputProperty);

            this .UpdateShaderValue(FactorProperty);

        }

 

        public virtual System.Windows.Media.Brush Input {

            get {

                return ((System.Windows.Media.Brush )(GetValue(InputProperty)));

            }

            set {

                SetValue(InputProperty, value );

            }

        }

 

        public virtual double Factor {

            get {

                return ((double )(GetValue(FactorProperty)));

            }

            set {

                SetValue(FactorProperty, value );

            }

        }

    }

}

接下来就是在主窗体中实现此 Gray 灰度特效。以 第五节 的源码为例，我们首先需要加载 ps 文件作为像素渲染对象：

            PixelShader pixelShader = new PixelShader () {

                UriSource = new Uri (

string .Format("/Silverlight;component/ShaderSource/Gray.ps" ), UriKind .Relative)

            };

接着以 pixelShader 作为参数创建 Gray 实例，其中的 Factor 为灰度深度：

     Gray gray = new Gray (pixelShader) {

           Factor = 0

};

最后将此渲染特效赋值给精灵的特效属性：

    Spirit.Effect = gray;

    嘿嘿，完成了 ~ 呼呼，还是挺累的呢，来张截图吧：

图中的精灵在灰度模式下同样可以毫无破绽的切换装备，嘿嘿 ~ 相当的 Cool 哦，额外的，我还以同样的方法增加了浮雕、去背、卡通材质、反色等几个特效，下面是最终的在线测试 Demo ：

HLSL 渲染特效的最大优点在于它的体积非常小却能发挥大作用，稍微有些遗憾的是在目前的 Silverlight3.0 版本中，该渲染特效使用的是 CPU 而非 GPU ，这意味着目前还无法大量的对其进行使用，希望后续版本能将之放在 GPU 的处理上， Silverlight 的春天就看你了！ MS

下一节我将为您呈现更加 Cool 的 HLSL 渲染特效动画 ，敬请关注。

作者：深蓝色右手

出处：http://blog.csdn.net/alamiye010/

本系列目录及源码下载：点击进入

本文版权归作者和CSDN共有，欢迎转载。但未经作者同意必须保留此段声明，且在文章页面显著位置给出原文连接，否则保留追究法律责任的权利。