原文:【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

因工作原因,需要在Silverlight中使用Pixel Shader技术,这对于我来说可算是相当有难度了,首先我是个Java Web开发程序员,从来没正经地学过微软的开发语言和工具;其次,对于算法这种东西,向来有种天生的排斥,一看便头疼。不过项目逼到份上了,只能硬着头皮上,真不知道领导们是怎么想的。还是言归正传吧,记录记录自己的学习心得。

熟悉Silverlight的人都知道,SL中有一物名为Pixel Shader,江湖人称像素着色器。是Sl中可以单独操控像素的一门技术。SL3中集成了两个Shader,一为DropShadowEffect,二谓BlurEffect,可为用户产生投影与模糊的效果。此外,MS还为程序员开辟了自定义通道,程序员可以自行编写Shader文件,并通过C#封装,最终应用在SL中。而编写Shader文件则需要采用HLSL(高级着色器语言High-Level-Shader-Language),正如当年新手上路用文本文件编写JavaHelloWorld程序一样,Shader同样可以用文本文件编写,同样可以用命令行编译。本文是我工作中的一些琐碎的片段,主要针对的是开源的WPF Pixel Shader Effect Library项目中的Shader源代码进行研究和学习,从而不断的提高自己。

项目地址为:http://wpffx.codeplex.com/

其中提供了18Shader

 

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

图1 Shader列表

 

初学Shader,不知从何做起,前人有高质量的代码,何不直接取来,参详研习。这两天刚开始研究BandedSwirl.fx,做点记录:

有必要说的是逆向的解读别人的算法是一个非常痛苦的过程,只有通过特效展示结合算法文件自己去构建算法模型方可,至少这是我笨人所采用的笨办法:)

BandedSwirl直译的话应该叫做【带状螺旋】效果,初见时觉得挺震撼,觉得这种算法程序应该很长才是,没想到不过区区30行左右,可见Shader编程之精炼。先看看效果截图:

 再来瞅瞅源代码:

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

图2 带状螺旋效果图

 

 

//++++++++++++++++++++++++++++++SRC+++++++++++++++++++++++++++++
//--------------------------------------------------------------------------------------
// 全局变量,供应用程序设置,在Silverlight中动态改变这些参数便成了动画
//--------------------------------------------------------------------------------------

//定义螺旋效果的中心点,默认是(0.5,0.5),存放在常量寄存器C0里
float2 center : register(C0);
//定义螺旋效果的强度
float spiralStrength : register(C1);
//距离的阈值
float distanceThreshold : register(C2);

//定义了2D采样器,如果应用在MediaElement上的话,MediaElement的实时画面便是采样器的内容,存放在临时寄存器S0中。
sampler2D implicitInputSampler : register(S0);

//--------------------------------------------------------------------------------------
// 像素着色器
//--------------------------------------------------------------------------------------

float4 main(float2 uv : TEXCOORD) : COLOR
{
 //定义2d向由中心指向某一纹理坐标的向量
   float2 dir = uv - center;
   //求取向量的长度,l的值域为[0,√2/2]
   float l = length(dir);
   //向量除以自己的长度就是单位向量,只用于表示方向
   dir = dir/l;
   //求取向量和水平线的夹角,这里值域为[-PI/2,PI/2]
   float angle = atan2(dir.y, dir.x);
//为了进行交替的螺旋对流,避免采用类似for循环的流程控制语句,导致额外的性能耗费,需要用一个值来控制螺旋对流的循环周期,这里采用了一个名为距离阈值的参数,remainder和l的关系图为一组周期为distanceThreshold的三角波,见图3
  //值域为[0,1]
   float remainder = frac(l / distanceThreshold);
   //该参数是为了让螺旋周期内两路相反带装束过渡的更为平滑,在波形图上看就是为了让波形连续。
   float preTransitionWidth = 0.25;
   //定义一个参数,控制每个螺旋周期内的对流,每个漩涡周期内共有两路正向带状束和一路反向带装束,分别交替呈现。Fac和remainder的关系见图4
   float fac;  
   //控制对流方向的交替以及波形的连续
   if (remainder < .25)
   {
      fac = 1.0;
   }
   else if (remainder < 0.5)
   {
      fac = 1 - 8 * (remainder - preTransitionWidth);
   }
   else if (remainder < 0.75)
   {
      fac = -1.0;
   }
   else
   {
      fac = -(1 - 8 * (remainder - 0.75));
   }
   //计算基于参数【螺旋强度】的变换角度,意思就是在原来向量方向的基础上正向或者反向增大扭曲角度
   float newAng = angle + fac * spiralStrength * l;
   //按照螺旋强度计算出来的变换角度重新定义纹理坐标
   float xAmt = cos(newAng) * l;
   float yAmt = sin(newAng) * l;
     
   float2 newCoord = center + float2(xAmt, yAmt);
   //按照新的纹理坐标对原来的采样器进行纹理的渲染,得出最终的结果
   return tex2D( implicitInputSampler, newCoord );
}

//++++++++++++++++++++++++++++++SRC+++++++++++++++++++++++++++++

 

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

3 remainderL的关系图

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

4 facremainder的关系图

 

到这里也算大致搞明白这个算法的原理了,对于我来说,算是费了九牛二虎。从中也学到不少,以前自己写HLSL的时候,总喜欢用for循环来控制流程,比如要写一个百叶窗,首先想到的就是设定百叶窗的间隔,然后用1/间隔当做循环次数,每次用HLSLTester都勉强能编译过去,但是一旦到了要编译成ps_2_0ps文件时总会报错,意思是每个Shader只允许64条汇编指令,超出这个数量就编译不过去。想想若是把for循环转变成汇编语言,会产生多少指令啊,效率能不低吗!!!

好像ps_3_0没有这个限制,但是SL貌似只支持ps_2_0,所以还是精炼下自己的代码吧。

总结一下心得:

1、  Shader最好用向量,少用标量

2、  诸如fordo-while这一类的循环尽量少用

 

 

因工作原因,需要在Silverlight中使用Pixel Shader技术,这对于我来说可算是相当有难度了,首先我是个Java Web开发程序员,从来没正经地学过微软的开发语言和工具;其次,对于算法这种东西,向来有种天生的排斥,一看便头疼。不过项目逼到份上了,只能硬着头皮上,真不知道领导们是怎么想的。还是言归正传吧,记录记录自己的学习心得。

熟悉Silverlight的人都知道,SL中有一物名为Pixel Shader,江湖人称像素着色器。是Sl中可以单独操控像素的一门技术。SL3中集成了两个Shader,一为DropShadowEffect,二谓BlurEffect,可为用户产生投影与模糊的效果。此外,MS还为程序员开辟了自定义通道,程序员可以自行编写Shader文件,并通过C#封装,最终应用在SL中。而编写Shader文件则需要采用HLSL(高级着色器语言High-Level-Shader-Language),正如当年新手上路用文本文件编写JavaHelloWorld程序一样,Shader同样可以用文本文件编写,同样可以用命令行编译。本文是我工作中的一些琐碎的片段,主要针对的是开源的WPF Pixel Shader Effect Library项目中的Shader源代码进行研究和学习,从而不断的提高自己。

项目地址为:http://wpffx.codeplex.com/

其中提供了18Shader

 

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

图1 Shader列表

 

初学Shader,不知从何做起,前人有高质量的代码,何不直接取来,参详研习。这两天刚开始研究BandedSwirl.fx,做点记录:

有必要说的是逆向的解读别人的算法是一个非常痛苦的过程,只有通过特效展示结合算法文件自己去构建算法模型方可,至少这是我笨人所采用的笨办法:)

BandedSwirl直译的话应该叫做【带状螺旋】效果,初见时觉得挺震撼,觉得这种算法程序应该很长才是,没想到不过区区30行左右,可见Shader编程之精炼。先看看效果截图:

 再来瞅瞅源代码:

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

图2 带状螺旋效果图

 

 

//++++++++++++++++++++++++++++++SRC+++++++++++++++++++++++++++++
//--------------------------------------------------------------------------------------
// 全局变量,供应用程序设置,在Silverlight中动态改变这些参数便成了动画
//--------------------------------------------------------------------------------------

//定义螺旋效果的中心点,默认是(0.5,0.5),存放在常量寄存器C0里
float2 center : register(C0);
//定义螺旋效果的强度
float spiralStrength : register(C1);
//距离的阈值
float distanceThreshold : register(C2);

//定义了2D采样器,如果应用在MediaElement上的话,MediaElement的实时画面便是采样器的内容,存放在临时寄存器S0中。
sampler2D implicitInputSampler : register(S0);

//--------------------------------------------------------------------------------------
// 像素着色器
//--------------------------------------------------------------------------------------

float4 main(float2 uv : TEXCOORD) : COLOR
{
 //定义2d向由中心指向某一纹理坐标的向量
   float2 dir = uv - center;
   //求取向量的长度,l的值域为[0,√2/2]
   float l = length(dir);
   //向量除以自己的长度就是单位向量,只用于表示方向
   dir = dir/l;
   //求取向量和水平线的夹角,这里值域为[-PI/2,PI/2]
   float angle = atan2(dir.y, dir.x);
//为了进行交替的螺旋对流,避免采用类似for循环的流程控制语句,导致额外的性能耗费,需要用一个值来控制螺旋对流的循环周期,这里采用了一个名为距离阈值的参数,remainder和l的关系图为一组周期为distanceThreshold的三角波,见图3
  //值域为[0,1]
   float remainder = frac(l / distanceThreshold);
   //该参数是为了让螺旋周期内两路相反带装束过渡的更为平滑,在波形图上看就是为了让波形连续。
   float preTransitionWidth = 0.25;
   //定义一个参数,控制每个螺旋周期内的对流,每个漩涡周期内共有两路正向带状束和一路反向带装束,分别交替呈现。Fac和remainder的关系见图4
   float fac;  
   //控制对流方向的交替以及波形的连续
   if (remainder < .25)
   {
      fac = 1.0;
   }
   else if (remainder < 0.5)
   {
      fac = 1 - 8 * (remainder - preTransitionWidth);
   }
   else if (remainder < 0.75)
   {
      fac = -1.0;
   }
   else
   {
      fac = -(1 - 8 * (remainder - 0.75));
   }
   //计算基于参数【螺旋强度】的变换角度,意思就是在原来向量方向的基础上正向或者反向增大扭曲角度
   float newAng = angle + fac * spiralStrength * l;
   //按照螺旋强度计算出来的变换角度重新定义纹理坐标
   float xAmt = cos(newAng) * l;
   float yAmt = sin(newAng) * l;
     
   float2 newCoord = center + float2(xAmt, yAmt);
   //按照新的纹理坐标对原来的采样器进行纹理的渲染,得出最终的结果
   return tex2D( implicitInputSampler, newCoord );
}

//++++++++++++++++++++++++++++++SRC+++++++++++++++++++++++++++++

 

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

3 remainderL的关系图

【HLSL学习笔记】WPF Shader Effect Library算法解读之[BandedSwirl]

4 facremainder的关系图

 

到这里也算大致搞明白这个算法的原理了,对于我来说,算是费了九牛二虎。从中也学到不少,以前自己写HLSL的时候,总喜欢用for循环来控制流程,比如要写一个百叶窗,首先想到的就是设定百叶窗的间隔,然后用1/间隔当做循环次数,每次用HLSLTester都勉强能编译过去,但是一旦到了要编译成ps_2_0ps文件时总会报错,意思是每个Shader只允许64条汇编指令,超出这个数量就编译不过去。想想若是把for循环转变成汇编语言,会产生多少指令啊,效率能不低吗!!!

好像ps_3_0没有这个限制,但是SL貌似只支持ps_2_0,所以还是精炼下自己的代码吧。

总结一下心得:

1、  Shader最好用向量,少用标量

2、  诸如fordo-while这一类的循环尽量少用

 

 

分类:

技术点:

相关文章: