Unity中SmoothStep介绍和应用: 溶解特效优化

上一篇文章使用RampTex来给溶解特效附加了一个差强人意的边缘颜色变化, 这一篇文章我们来做进一步优化, 并对相应的原理做一些简单的分析.

今天主要的内容如下:

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

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

差值函数介绍: 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=\frac{(x-a)}{(b-a)}\{a<=x<=b\}$
  • 先进行线性映射, 获得x的映射值$k_1$
  • 然后使用曲线来光滑这个值: $k=3k_1^2-2k_1^3\{a<x<b\}$

代码实现如下:

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 100

		Pass
		{
			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函数, 总之就是收获满满.

好了, 今天的内容就是这些, 希望对大家有所帮助.