javascript - 将位图字符转换为三角形

Question

我正在尝试使用 html 画布元素将字体文件中可用的每个字符绘制到画布上。为了使这个问题尽可能简单，假设只有一个角色被绘制到画布上。从那里，我想使用 Javascript 来分析画布并创建画布的三角形区域来构成整个角色。我需要在三角形中使用它的原因是，数据可以稍后发送到 WebGL，以便可以渲染文本，并且在放大或缩小文本大小时不会丢失数据。

我正在寻找某种算法来完成这个任务，或者至少需要一些知识来让我朝着正确的方向前进。如果您认为我应该使用不同的方法，请告诉我原因，但我认为这将是提供一种以多种方式修改文本以及使创建 3d 块文本成为可能的最佳方法。

Answer 1

我建议您从关键字Polygon Triangulation开始。

使用这种方法，您可以将 n-Polygons 拆分为三角形，如下所示：

这些方法可能仅适用于具有真实（而非圆角）边缘的图形。

Answer 2

这是一篇关于如何使用着色器绘制与分辨率无关的曲线的文章

http://research.microsoft.com/en-us/um/people/cloop/loopblinn05.pdf

我的理解不是将形状分解为三角形，而是将它们分解为四边形，并在顶点中排序足够的信息以在每个四边形内绘制曲线的一部分。换句话说，当着色器绘制每个四边形时，有一个公式可以针对每个像素计算该像素是在曲线内还是在曲线外。

Answer 3

那么，您正在尝试将光栅图像转换为矢量数据吗？当放大时，这将导致看起来非常参差不齐的几何图形。由于每个像素都被视为几何图形的方形边缘部分。

你不能为你正在绘制的每个字形获得原始矢量（贝塞尔曲线）几何图形吗？

将其转换为三角形条和风扇会看起来更平滑。