全部专题

图形描边和图片描边有什么区别?距离场、Alpha 和 Sobel 各用在哪

描边对应三种不同输入:SDF 用距离接近零的区域画线;精灵图片先向外扩张 Alpha 遮罩,再减去原遮罩;照片边缘检测则测量亮度变化。用 Sobel 提取叶片轮廓时,内部叶脉也会被检测出来。

先固定问题

“描边”可以指三种不同输入。距离场描边取 |d| 接近零的位置;透明图片描边扩张 alpha 遮罩再减去原遮罩;照片提边则计算亮度梯度。给叶子剪影加外圈时使用 Sobel,会连叶脉一起提出来。

关键代码

float sdfStroke=1.0-smoothstep(width,width+aa,abs(d));
float outerAlpha=max(neighborMaxAlpha-originalAlpha,0.0);
float photoEdge=length(vec2(sobelX,sobelY));

按顺序验证

分别打开等宽 SDF、透明叶片和 Sobel 示例。先说明输入是什么,再判断边缘应该跟随形状边界、透明度还是颜色变化。

适用范围和常见错误

邻域扩张并不是精确欧氏距离,较粗描边需要更多方向或距离变换。Sobel 的宽度也不能直接当作几何描边宽度。

继续实验

参考

官方文档

运行相关示例