前言
这几天摸够了，随便写点。这个东西是几个月前研究的，虽然项目最后应该用不上，但是挺有意思的，拿出来写一下。
SDF全称Signed Distance Field，中文一般翻译为有向距离场。听起来很高端，其实原理理解了的话还好，下面我会以我的理解尽可能清晰的解释一下这个东西是怎么回事。
如果贴图不表示颜色而是距离？
开局一张图，先渲染两个字看看：
两个字都使用了各自下方的贴图，贴图分辨率都为32x32，右边是常规的贴图着色方式，而左边则使用SDF的方式进行着色。
- 可以看到右边常规的贴图方式，因为原始分辨率太小，放大渲染后产生了明显的模糊失真。
- 而左边的SDF用了一张看起来“模糊”的贴图，却渲染出了锐利清晰的字样。
原因就在于SDF采用的贴图，其记录的信息并不是颜色，而是距离。像素上的每个点都记录了这个点到字样边缘的距离，存储在贴图的Alpha通道中。
着色器对贴图进行采样并放大时，会进行插值。对于一般贴图，即是对颜色进行插值，信息的缺失就会造成纹理的模糊失真。而对距离插值则不一样，即使贴图只提供了有限的信息，但我们可以保证插值后的结果依然正确。比如在0和1之间取中间值，得出0.5，以距离而言其结果是完全正确的！
个人认为SDF可以看作一种矢量的渲染方式。它也有局限性，只能针对图案纹样一类的图片进行处理，即边缘明晰的单色图样。
那么SDF能做什么呢
字体渲染
现在被整合到Unity中的TextMeshPro文字渲染插件也是基于SDF实现的。在字体渲染上使用SDF可以很方便的实现描边，外发光等效果。（UGUI中Text的Outline是使用“偏移”实现的，严格意义上根本就不算描边，宽度一大就会穿帮）
不过这个方案用于中文项目时还是有一些问题。因为这个方案需要事先对字符生成SDF图，如果只是英文还好，字母加字符也就几十的数量，但是中文字符就多了去了。一般做法是只对常用字进行生成，大约6500字，坏处就是做文案时就没法用到一些生僻字，而且对包体和内存占用依然有影响。
形变动画
其实一开始也是因为这个需求才接触到SDF的。
如果对两张普通贴图进行lerp你能获得一个交叉叠化的效果，而对于两张SDF贴图进行lerp，就可以获得一个形变动画的效果了！
Ray-Marching
SDF也可以在3D维度中使用，配合Ray-Marching来渲染模型，还可以方便的实现软阴影等特性。不过这块我就没继续了解了，感兴趣的可以自己搜一下，相关文章还是挺多的。
代码
包含两部分，首先是将普通贴图转化为SDF图的代码：
public static void GenerateSDF(Texture2D source, Texture2D destination, int serchDistance)
{
int sourceWidth = source.width;
int sourceHeight = source.height;
int targetWidth = destination.width;
int targetHeight = destination.height;
pixels = new Pixel[sourceWidth, sourceHeight];
targetPixels = new Pixel[targetWidth, targetHeight];
Debug.Log("sourceWidth" + sourceWidth);
Debug.Log("sourceHeight" + sourceHeight);
int x, y;
Color targetColor = Color.white;
for (y = 0; y < sourceWidth; y++)
{
for (x = 0; x < sourceHeight; x++)
{
pixels[x, y] = new Pixel();
if (source.GetPixel(x, y) == targetColor)
pixels[x, y].isIn = true;
else
pixels[x, y].isIn = false;
}
}
int gapX = sourceWidth / targetWidth;
int gapY = sourceHeight / targetHeight;
int MAX_SEARCH_DIST = serchDistance;
int minx, maxx, miny, maxy;
float max_distance = -MAX_SEARCH_DIST;
float min_distance = MAX_SEARCH_DIST;
for (x = 0; x < targetWidth; x++)
{
for (y = 0; y < targetHeight; y++)
{
targetPixels[x, y] = new Pixel();
int sourceX = x * gapX;
int sourceY = y * gapY;
int min = MAX_SEARCH_DIST;
minx = sourceX - MAX_SEARCH_DIST;
if (minx < 0)
{
minx = 0;
}
miny = sourceY - MAX_SEARCH_DIST;
if (miny < 0)
{
miny = 0;
}
maxx = sourceX + MAX_SEARCH_DIST;
if (maxx > (int)sourceWidth)
{
maxx = sourceWidth;
}
maxy = sourceY + MAX_SEARCH_DIST;
if (maxy > (int)sourceHeight)
{
maxy = sourceHeight;
}
int dx, dy, iy, ix, distance;
bool sourceIsInside = pixels[sourceX, sourceY].isIn;
if (sourceIsInside)
{
for (iy = miny; iy < maxy; iy++)
{
dy = iy - sourceY;
dy *= dy;
for (ix = minx; ix < maxx; ix++)
{
bool targetIsInside = pixels[ix, iy].isIn;
if (targetIsInside)
{
continue;
}
dx = ix - sourceX;
distance = (int)Mathf.Sqrt(dx * dx + dy);
if (distance < min)
{
min = distance;
}
}
}
if (min > max_distance)
{
max_distance = min;
}
targetPixels[x, y].distance = min;
}
else
{
for (iy = miny; iy < maxy; iy++)
{
dy = iy - sourceY;
dy *= dy;
for (ix = minx; ix < maxx; ix++)
{
bool targetIsInside = pixels[ix, iy].isIn;
if (!targetIsInside)
{
continue;
}
dx = ix - sourceX;
distance = (int)Mathf.Sqrt(dx * dx + dy);
if (distance < min)
{
min = distance;
}
}
}
if (-min < min_distance)
{
min_distance = -min;
}
targetPixels[x, y].distance = -min;
}
}
}
//EXPORT texture
float clampDist = max_distance - min_distance;
for (x = 0; x < targetWidth; x++)
{
for (y = 0; y < targetHeight; y++)
{
targetPixels[x, y].distance -= min_distance;
float value = targetPixels[x, y].distance / clampDist;
destination.SetPixel(x, y, new Color(1, 1, 1, value));
}
}
}
然后是渲染SDF贴图的着色器代码：
Shader "Custom/SDF_Base"
{
Properties
{
_MainTex ("Texture", 2D) = "black" {}
_DistanceMark ("Distance Mark", Range(0,1)) = 0.5
_SmoothDelta ("Smooth Delta", Range(0,0.02)) = 0.5
}
SubShader
{
Tags { "RenderType"="Opaque" }
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
struct appdata
{
float4 vertex : POSITION;
float2 uv : TEXCOORD0;
};
struct v2f
{
float2 uv : TEXCOORD0;
float4 vertex : SV_POSITION;
};
sampler2D _MainTex;
float4 _MainTex_ST;
float _SmoothDelta;
float _DistanceMark;
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.uv = TRANSFORM_TEX(v.uv, _MainTex);
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed4 col;
fixed4 sdf = tex2D(_MainTex, i.uv);
float distance = sdf.a;
col.a = smoothstep(_DistanceMark - _SmoothDelta, _DistanceMark + _SmoothDelta, distance); // do some anti-aliasing
col.rgb = lerp(fixed3(0,0,0), fixed3(1,1,1), col.a);
return col;
}
ENDCG
}
}
}
