欢迎光临
我的个人博客网站

[WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect

[WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect

之前在一篇文章(实现两个任天堂 Switch 的加载动画)里为了实现不同亮度的 Grid,使用了一个 LightenConverter 类,但是它只能处理 SolidColorBrush。为了可以应用在更多场合,这篇文章自己写一个 Effect 来实现相同 Lighten 的效果。

1. WPF 中的 Effect

Wpf 自带两种 Effect:BlurEffect 和 DropShadowEffect,用法如下:

<Grid.Effect>     <BlurEffect/> </Grid.Effect> 

除了 WPF 自带的这两个,还可以在 Microsoft Blend for Visual Studio 2015 里找到由 Microsoft.Expression.Effects 这个 dll 提供的一些 Effect。

[WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect

现在这个 dll 也可以在 Nuget 上找到。

2. 编写 Shader

WPF 中的 Effect 使用 HLSL(高级着色器语言)编写,如果需要自定义 Effect 可以使用 Shazzam Shader Editor, 关于这款编辑器 walterlv 有一篇如何使用的教程:

WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码 – walterlv

其实我之前也没写过,语法什么的完全不懂,可是从网上抄一抄,很快就搞明白了一些基础,最后从 Lightness.fx 这个改一改完成了我需要的 LightenEffect:

// Copyright (c) 2014 Marcus Schweda // This file is licensed under the MIT license (see LICENSE)  sampler2D input : register(s0);  float delta : register(c0);  // RGB -> HSL float4 hsl(float4 c) {     float4 c2 = c.a;     float M = max(c.r, max(c.g, c.b)),           m =  min(c.r, min(c.g, c.b));     float chroma = M - m;     // Lightness     c2[2] = (M + m) / 2;     // Hue     if (chroma != 0) {         if (M == c.r)             c2[0] = ((c.g - c.b) / chroma) % 6;         else if (M == c.g)             c2[0] = (c.b - c.r) / chroma + 2;         else             c2[0] = (c.r - c.g) / chroma + 4;         if (c2[0] < 0)             c2[0] += 6;         // Saturation         c2[1] = chroma / (1 - abs(2 * c2[2] - 1));     } else {         c2[0] = c2[1] = 0;     }     return c2; }  float4 rgb(float4 c) {     float4 c2 = c[3];     float chroma = c[1] * (1 - abs(2 * c[2] - 1));     float X = chroma * (1 - abs(c[0] % 2 - 1));          if (0 <= c[0] && c[0] < 1)         c2.rgb = float3(chroma, X, 0);     else if (1 <= c[0] && c[0] < 2)         c2.rgb = float3(X, chroma, 0);     else if (2 <= c[0] && c[0] < 3)         c2.rgb = float3(0, chroma, X);     else if (3 <= c[0] && c[0] < 4)         c2.rgb = float3(0, X, chroma);     else if (4 <= c[0] && c[0] < 5)         c2.rgb = float3(X, 0, chroma);     else if (5 <= c[0] && c[0] < 6)         c2.rgb = float3(chroma, 0, X);              c2.rgb += c[2] - chroma / 2;     return c2; }  float4 main(float2 uv : TEXCOORD) : COLOR {     float4 hcyin = hsl(tex2D(input, uv));     if( delta>0)     {      	hcyin[2] = saturate(hcyin[2] + (1-hcyin[2])* delta);     }else     {     	hcyin[2] = saturate(hcyin[2] + hcyin[2] * delta);     }          return rgb(hcyin); } 

这份代码分三部分,首先是定义的两个变量 input 和 delta,input 即输入的图像,是每个 Shader 的固定部分,不要修改它;delta 是定义来控制 LightenEffect 亮度变化率的变量。然后是两个自定义的函数,用于 rgb 和 hsl 互相转换。最后是 main 函数,这也是每个 Effect 必须包含的部分,这个函数的输入 uv 看起来是坐标,用 tex2D(input, uv) 获取 input 在 uv 的颜色,函数的返回值是处理后的 uv 所在的颜色。

在这段代码里的 main 函数还算简单,就是把当前位置的颜色转换为 hsl,然后根据 delta 调整亮度,再转换为 rgb 返回。

函数完成并运行 Apply Shader 后可以使用 Shazzam Shader Editor 的 Tryout 功能验证效果。可以看到 Delta 为 -1 即全黑,为 1 就全白。

[WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect

2. 应用 Effect

验证完这个 Shader,把生成的 C# 代码和 .ps 文件放进项目,改好命名空间,编译后就能使用(关于这部分的详细操作,请参考 walterlv 的 这篇文章)。现在来看看生成的 C# 代码:

public class LightenEffect : ShaderEffect {     public static readonly DependencyProperty InputProperty = ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(LightenEffect), 0);     public static readonly DependencyProperty DeltaProperty = DependencyProperty.Register("Delta", typeof(double), typeof(LightenEffect), new UIPropertyMetadata(((double)(0D)), PixelShaderConstantCallback(0)));     public LightenEffect()     {         PixelShader pixelShader = new PixelShader();         pixelShader.UriSource = new Uri("/WpfDesignAndAnimationLab.Effects;component/Shaders/LightenEffect.ps", UriKind.Relative);         this.PixelShader = pixelShader;          this.UpdateShaderValue(InputProperty);         this.UpdateShaderValue(DeltaProperty);     }     private Brush Input     {         get         {             return ((Brush)(this.GetValue(InputProperty)));         }         set         {             this.SetValue(InputProperty, value);         }     }     public double Delta     {         get         {             return ((double)(this.GetValue(DeltaProperty)));         }         set         {             this.SetValue(DeltaProperty, value);         }     } } 

首先是自定义的两个变量 Input 和 Delta,它们被封装成依赖属性。然后看看这句话,这句话定位产生的 .ps 文件,一定要保证位置正确:

pixelShader.UriSource = new Uri("/WpfDesignAndAnimationLab.Effects;component/Shaders/LightenEffect.ps", UriKind.Relative); 

最后使用时只需要在前面加上 Effect 的命名空间。

<Rectangle.Effect>     <effects:LightenEffect Delta=".5"/> </Rectangle.Effect> 

3. 最后

感谢 walterlv 写的文章,让我终于学会了 Shazzam Shader Editor 的用法。

4. 源码

https://github.com/DinoChan/wpf_design_and_animation_lab

赞(0) 打赏
未经允许不得转载:张拓的天空 » [WPF] 使用 Shazzam Shader Editor 编写一个 Lighten Effect
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏