Unity|Unity中SmoothStep介绍和应用: 溶解特效优化 unity|游戏引擎|Shader

Unity中SmoothStep介绍和应用: 溶解特效优化上一篇文章使用RampTex来给溶解特效附加了一个差强人意的边缘颜色变化, 这一篇文章我们来做进一步优化, 并对相应的原理做一些简单的分析.
今天主要的内容如下:

差值函数介绍: smoothstep
使用差值函数来改善溶解特效
实现方案的进一步优化

老规矩, 先来看看最终效果:

文章图片

差值函数介绍: smoothstep
【Unity|Unity中SmoothStep介绍和应用: 溶解特效优化】smoothstep(edge_low, edge_up, x)函数:

[edge_low, edge_up]是指定的一个差值范围
x是任意实数
函数结果是:
- if x < edge_low; return 0.
- if x > edge_up; return 1.
- 如果x处于edge_low和edge_up之间, 则返回x在[0, 1]范围内的映射值
  - 比如指定范围是[0, 10], x=5, 我们我们将其映射到[0, 1]之后, 对应的映射值为0.5
  - 比如指定范围是[0, 100], x=5, 我们我们将其映射到[0, 1]之后, 对应的映射值为0.05
  - 实质上是将[edge_low, edge_up]映射到[0, 1], 然后找到x在[0, 1]中的映射值
  - 注意这里说明使用的是线性映射, 而smoothstep使用的不是线性映射, 而是线性映射之后使用曲线来光滑过后的结果, 这个结果和线性映射差别不大, 我们可以简单的使用线性映射来理解
x处于范围之内的函数的映射为:
- 线性映射函数为: k 1 = ( x ? a ) ( b ? a ) { a < = x < = b } k_{1}=\dfrac{(x-a)}{(b-a)}\{a<=x<=b\} k1?=(b?a)(x?a)?{a<=x<=b}
- 先进行线性映射, 获得x的映射值 k 1 k_1 k1?
- 然后使用曲线来光滑这个值:k = 3 k 1 2 ? 2 k 1 3 { a < x < b } k=3k_{1}^{2}-2k_{1}^{3}\{a

代码实现如下:

float smoothstep (float edge0, float edge1, float x) { if (x < edge0) return 0; if (x > edge1) return 1; // 线性映射 x = (x - edge0) / (edge1 - edge0); // 光滑 return x * x * (3 - 2 * x); }

文章图片

上图展示的就是使用smoothstep函数作的图, 其中指定的范围是[a=1, b=a+1=2], 可以看到:

当x <= 1时, 函数值为0
当x >= 2时, 函数值为1
当1 < x < 2时, 函数值为被缩放到了[0, 1]之间
- 蓝色的线条是线性映射
- 红色的线条是线性映射之后使用曲线作平滑后的结果
- 总体上来说两者差别不大

使用差值来改善方案
我们这次不设定有多少圈层, 完全根据RampTex的渐变层级来, RampTex有多少层, 我们的边缘就有多少层.
也就是说, 我们需要将RampTex映射到溶解边缘那一小块区域, 就像我们上篇文章指定的0~0.12范围.
再简单说, 就是要将RampTex画到这个0~0.12范围内.
这里的实现我们使用0~0.1.
使用数学的说法, 就是要将处于[0, 1]这个范围内的噪声纹理值, 映射到边缘的[0, 0.1]之内, 结合上面介绍的差值函数, 我们的目标是:

// x=dissolveCol.r, {0<=x<=1} smoothsetp(0, 0.1, x)

当然, 这里的[0, 0.1]并不是溶解边缘.
在之前的文章中, 我们介绍过, dissolveCol.r < _DissolveThreshold就是溶解像素, 那么从dissolveCol.r == _DissolveThreshold开始的像素就是溶解边缘的像素, 至于说到底要多大的范围, 就需要我们自己指定, 比如这里的值为0.1.
所以我们的调用需要优化为:

// x=dissolveCol.r, 采样自噪声纹理, {0<=x<=1} // a=_DissolveThreshold, b=_DissolveThreshold+0.1 // 其中a为发生溶解的下界, b为溶解像素边缘宽度 y = smoothsetp(a, b, x)

上面调用的意思是:
我们需要将溶解值x, 通过差值函数处理过后得到新的采样坐标y, 通过y在RampTex上采样颜色后附加到对象的原色上:

x < a : 此像素发生溶解, 抛弃, 不用理会
x > b: 此时函数返回1, 在RampTex上采样到黑色, 因为黑色值为0, 相当于最后这个像素保持原色
a < x < b: 此时函数返回经过线性映射和光滑处理后的新的处于[0, 1]之间的映射值
- 这里要注意的是: 由于x本身就处于[0, 1]之间, 经过处理的结果y依然处理[0, 1]之间, 所以及其容易造成误解, 需要好好体会
- 这里的条件都没有涉及到=的部分, 因为在shader中处理边界, 一个像素的差异不大, 而且可能会有性能差异

经过这个小小的处理后, 我们就可以在边缘位置的指定宽度像素内, 完整的画出RampTex代表的颜色.
实现方案的进一步优化
你以为这样就完了? 天真…
因为RampTex实质上是一个一维纹理, 所以我们的第一个优化就是, 更换其采样器, 这样可以提高一定的性能:

sampler _RampTex; fixed4 rampColor = tex1D(_RampTex, smoothstep(_DissolveThreshold, _DissolveThreshold + 0.1, dissolveCol.r));

第二个优化其实在上面已经提到了, 我们在差值时, 使用了smoothstep函数, 这个函数会先进行线性映射, 然后再进行曲线圆滑, 而曲线圆滑之后的结果和线性映射的结果其实差别不大, 但是却多了一个曲线计算, 所以我们在要求不是特别高的情况下, 只使用线性映射的结果即可.
首先我们要介绍一下函数: saturate.
saturate(x)函数的作用是:

当x <= 0时, 函数值为0
当x >= 1时, 函数值为1
当0 < x < 1时, 返回x

然后实现线性映射和使用saturate:

// k = (x - a) / (b - a); k = (dissolveCol.r - _DissolveThreshold) / (_DissolveThreshold + 0.1 - _DissolveThreshold); fixed4 rampColor = tex1D(_RampTex, saturate(k));

好啦, 至此我们的溶解特效算是介绍完了.
下面是完整的代码:

Shader "Dissolve" { Properties { [NoScaleOffset]_MainTex ("Texture", 2D) = "white" {}_DissolveTex("DissolveTex", 2D) = "white" {} _DissolveThreshold("DissolveThreshold", Range(0, 1)) = 0_RampTex("RampTex", 2D) = "" {} } SubShader { Tags { "RenderType"="Opaque" } LOD 100Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag#include "UnityCG.cginc"struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; sampler2D _DissolveTex; float4 _DissolveTex_ST; fixed _DissolveThreshold; sampler _RampTex; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); // o.uv.xy = TRANSFORM_TEX(v.uv, _MainTex); o.uv.xy = v.uv; o.uv.zw = TRANSFORM_TEX(v.uv, _DissolveTex); return o; }fixed4 frag (v2f i) : SV_Target { fixed4 dissolveCol = tex2D(_DissolveTex, i.uv.zw); // 从噪声纹理采样颜色, 如果该值[小于阈值]则丢弃本片段 // 比如阈值为0.1, 则在噪声纹理上采样的所有像素r值小于0.1的片段都会被丢弃 // 即噪声纹理上偏黑的颜色(->0)首先开始溶解, 偏白的颜色(->1)最后溶解 clip(dissolveCol.r - _DissolveThreshold); // fixed4 rampColor = tex1D(_RampTex, smoothstep(_DissolveThreshold, _DissolveThreshold + 0.1, dissolveCol.r)); // k = (x-a)/(b-a); // k = (dissolveCol.r - _DissolveThreshold) / (_DissolveThreshold + 0.1 - _DissolveThreshold) fixed4 rampColor = tex1D(_RampTex, saturate((dissolveCol.r - _DissolveThreshold) * 10)); fixed4 col = tex2D(_MainTex, i.uv.xy); col += rampColor; return col; } ENDCG } } }

总结
经过三篇文章的介绍, 我们算是完全认识了Unity中的溶解特效是如何制作和优化的过程.
在整个过程中, 我们不止了解到了溶解特效本身的原理, 还通过这个特效, 接触到了在Shader中比较常见的噪声纹理和渐变纹理, 并使用这两个工具来对溶解特效进行了比较好的优化.
同时我们还分析了Shader中常用的smoothstep函数和saturate函数, 总之就是收获满满.
好了, 今天的内容就是这些, 希望对大家有所帮助.