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

通过上一节的解说，大家是否已经对HLSL有了较深刻的认识和理解，HLSL的渲染不仅仅局限于静态处理，通过时时更新HLSL代码的各全局变量值同样可以实现动画形式的渲染，非常Cool对吧~。那么本节我将向大家介绍如何在Silverlight平台上实现HLSL动画渲染特效。
以BandedSwirl(螺旋波纹)渲染特效为例，我们首先要做的是按照上一节的方法将BandedSwirl.ps文件添加进项目中，同时创建一个对应的BandedSwirl.cs文件：
using System.Windows;

using System.Windows.Media;

using System.Windows.Media.Effects;

namespace Silverlight.Shader {

public class BandedSwirl : ShaderEffect {

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

public static DependencyProperty CenterProperty = DependencyProperty.Register("Center", typeof(System.Windows.Point), typeof(BandedSwirl), new PropertyMetadata(new System.Windows.Point(), PixelShaderConstantCallback(0)));

public static DependencyProperty SpiralstrengthProperty = DependencyProperty.Register("Spiralstrength", typeof(double), typeof(BandedSwirl), new PropertyMetadata(new double(), PixelShaderConstantCallback(1)));

public static DependencyProperty DistancethresholdProperty = DependencyProperty.Register("Distancethreshold", typeof(double), typeof(BandedSwirl), new PropertyMetadata(new double(), PixelShaderConstantCallback(2)));

public BandedSwirl(PixelShader shader) {

PixelShader = shader;

this.UpdateShaderValue(InputProperty);

this.UpdateShaderValue(CenterProperty);

this.UpdateShaderValue(SpiralstrengthProperty);

this.UpdateShaderValue(DistancethresholdProperty);

}

public virtual System.Windows.Media.Brush Input {

get {

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

}

set {

SetValue(InputProperty, value);

}

}

public virtual System.Windows.Point Center {

get {

return ((System.Windows.Point)(GetValue(CenterProperty)));

}

set {

SetValue(CenterProperty, value);

}

}

public virtual double Spiralstrength {

get {

return ((double)(GetValue(SpiralstrengthProperty)));

}

set {

SetValue(SpiralstrengthProperty, value);

}

}

public virtual double Distancethreshold {

get {

return ((double)(GetValue(DistancethresholdProperty)));

}

set {

SetValue(DistancethresholdProperty, value);

}

}

}

}
接下来在后台cs代码中创建渲染特效实例：
pixelShader = new PixelShader() {

UriSource = GetShaderUri("BandedSwirl.ps")

};

BandedSwirl bandedSwirl = new BandedSwirl(pixelShader) {

Center = new Point(0.5, 0.5),

Spiralstrength = 1,

Distancethreshold = 0

};

Spirit.Effect = bandedSwirl;
最后就是关键环节了，如何实现动画效果呢？大家是否有注意到BandedSwirl类中的CenterProperty、SpiralstrengthProperty、DistancethresholdProperty这三个DependencyProperty(关联属性)参数，它们分别代表该渲染特效的中心、螺旋强度和延伸阈值。由于是关联属性，所以我们可以直接使用Storyboard去实现基于它们的渐变动画，那么以动态修改Distancethreshold值为例，具体实现代码如下：

BeginShaderAnimation(bandedSwirl, 0, 1, 3, "Distancethreshold");

/// <summary>

/// 启动渲染动画

/// </summary>

private void BeginShaderAnimation(DependencyObject shader, double from, double to, double timeSpanFromSeconds, string dependencyProperty) {

if (storyboard != null) { storyboard.Stop(); }

storyboard = new Storyboard();

storyboard.RepeatBehavior = RepeatBehavior.Forever;

storyboard.AutoReverse = true;

doubleAnimation = new DoubleAnimation();

doubleAnimation.From = from;

doubleAnimation.To = to;

doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(timeSpanFromSeconds));

Storyboard.SetTarget(doubleAnimation, shader);

Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(dependencyProperty));

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

}
通过一个Storyboard故事板，我们让bandedSwirl渲染特效的Distancethreshold值在3秒时间内从改变到1，然后反序列帧执行并不断循环。至此一个基于HLSL的螺旋波纹渲染特效就制作完成啦！以同样的方法我还特意制作了波浪渲染动画、放大渲染动画、模糊缩放渲染动画、环状发散渲染动画、挤压收缩渲染动画等几个动画，都非常非常的Cool哦~下面是它们的效果截图：



在线演示Demo：

有些遗憾的是，目前的Silverlight3.0版本仅支持基于pixel(像素)的渲染，暂时还无法实现基于Vertex(顶点)的HLSL渲染，但是这些已经很大程度上能够满足我们现有的需求。基于HLSL的动画渲染特效能够通过简单的代码编写再配上合适的图片即可实现诸如光晕、雨雪、云雾、闪电、冰块等环境特效以及爆炸、激光、水晶等魔法特效，这一切一切的实现仅仅使用最大不过几十KB的存储空间。Silverlight的明天更美好！我坚信。



作者：
深蓝色右手

出处：
http://alamiye010.cnblogs.com/

本系列目录及源码下载：
点击进入(
欢迎加入WPF/Silverlight小组
WPF/Silverlight博客团队)

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

原文链接：
http://www.cnblogs.com/alamiye010/archive/2009/09/28/1576033.html