Shader 编程：三角形、矩形等多边形绘制

该原创文章首发于微信公众号：字节流动
未经作者（微信ID：Byte-Flow）允许，禁止转载

SDF 有向距离场

上节其实牵扯到 SDF 算法，因为后面涉及高级特效的时候会经常用到，这里先提前对它做个简单的介绍，先在心里有个概念。

SDF（Signed Distance Field）算法是一种用于生成、存储和渲染字形（或图形）的技术。SDF 算法能够快速而高效地计算出给定点与字形（或图形）边界之间的有符号距离，从而可以用于各种应用，如字体渲染、图像处理、形状变形等。

SDF 算法的基本原理是将字形（或图形）表示为一张包含有符号距离值的纹理。每个像素都存储了该像素距离最近的字形（或图形）轮廓的距离，并用正负号表示内部和外部。具体步骤如下：

1. 生成轮廓：将字形（或图形）转换为轮廓线，通常使用矢量图形描述，如 TrueType 字体或 SVG 图形。

2. 计算距离场：为了生成有符号距离场，需要遍历像素，并计算每个像素到最近轮廓线的距离值。可以使用一种快速的近似算法，如距离变换算法（如 Chamfer Distance Transform）或区域增长算法。

3. 构建 SDF 纹理：将每个像素的距离值存储为纹理数据。正距离值用白色表示，负距离值用黑色表示，灰色用于表示距离为零的轮廓线。

使用生成的 SDF 纹理，可以进行以下操作：<