(翻译)基于矢量纹理的GPU文字渲染

题目：GPU text rendering with vector textures 原文链接：GPU text rendering with vector textures · Will Dobbie (wdobbie.com)

This post presents a new method for high quality text rendering using the GPU. Unlike existing methods it provides antialiased pixel accurate results at all scales with no runtime CPU cost.

本文介绍了一种使用GPU实现高质量文字渲染的新方法。与现有的其他方法不同，该方法可以在任意缩放比例下保持抗锯齿，而且没有运行时CPU成本。

点击查看WebGL demo

背景

传统文字渲染技术有一系列问题，如锯齿感强、模糊、耗内存。

Font atlases(字体纹理集)

The standard way of rendering text with the GPU is to use a font atlas. Each glyph is rendered on the CPU and packed into a texture. Here’s an example from freetype-gl:

使用GPU绘制文字的常规方法是使用字体纹理集（Font atlases，字体精灵图）。每个Font都在CPU上渲染，并打包到纹理当中，以下即是一个来自FreeType-gl的例子：

Packed font atlas. Source: freetype-gl. - 打包的字体纹理，源码查看_freetype-gl

The drawback with atlases is that you can’t store every glyph at every possible size or you’ll run out of memory. As you zoom in the glyphs will start to get blurry due to interpolation.

纹理集的缺点是无法在每个尺寸下存储每个字，否则你将会非常消耗内存。而且，随着缩放，由于插值的原因，字变得越来越模糊。

Signed distance fields(符号距离场)

One solution to this is to store the glyphs as a signed distance field. This became popular after a 2007 paper by Chris Green of Valve Software. Using this technique you can get fonts with crisp edges no matter how far you zoom in. The drawback is that sharp corners become rounded. To prevent this you’ll need to keep storing higher resolution signed distance fields for each glyph, the same problem we had before.

另一个解决方案是，将字形(glyphs)存储为符号距离场（SDF）。这种技术在《2007 paper by Chris Green of Valve Software 》之后流形起来。使用这种技术，无论你缩放多少倍，都可以得到具有清晰边界的字体。缺点是尖锐的角变得圆润。为了避免这种情况，需要为每个字形保留更高分辨率的SDF，但也非常消耗内存。

Artifacts from low resolution signed distance field. Source: Wolfire Games Blog.

来自低分辨率符号距离场的Artifacts（尖锐的角变圆润）。来源： Wolfire Games Blog

vector textures(矢量纹理)

The previous two techniques were based on taking the original glyph description, which is a list of bezier curves, and using the CPU to produce an image of it that can be consumed by the GPU. What if we let the GPU render from the original vector data?

上文介绍的两种方式有一个共同点，它们都是获取文字的轮廓（一系列的贝塞尔曲线），并在CPU中生成纹理图，最后将纹理图发送到GPU，在GPU上渲染。如果我们让GPU直接基于文字边框（原始的矢量数据）进行渲染，会怎么样呢？

32 bezier curves forming the letter H.

字母H由32条贝塞尔曲线组成。

GPUs like to calculate lots of pixels in parallel and we want to reduce the amount of work required for each pixel. We can chop up each glyph into a grid and in each cell store just the bezier curves that intersect it. If we do that for all the glyphs used in a sample pdf we get an atlas that looks like this:

GPU喜欢并行计算大量像素，我们希望减少每个像素所需的工作量。因此，我们可以将每个字形划分成网格，并在每个单元格中仅存储相交的贝塞尔曲线。如果我们对《a sample pdf》中涉及到的字都这么做，就能获得如下纹理集：

Vector atlas for 377 glyphs.

此矢量纹理集包含了377个字形。

Despite looking like a download error, this image is an atlas where the top part has a bunch of tiny grids, one for each glyph. To avoid repetition, each grid cell stores just the indices of the bezier curves that intersect it. Bezier curves are described by three control points each: a start point, an end point and an off-curve point1. The bottom half of the image stores the control points for all beziers in all glyphs2. All we need to do now is write a shader that reads the bezier curve control points from the atlas and determines what color the pixel should be.

尽管这个图看起来怪怪的，但这个图像是一个图集，其中顶部有一堆小网格，每个字形一个网格。为避免重复，每个网格单元格存储与其相交的贝塞尔曲线的索引。贝塞尔曲线由三个控制点描述：起点、终点和曲线外点。图像的下半部分存储所有字形中，所有贝塞尔的控制点。我们现在需要做的就是编写一个着色器，从图集中读取贝塞尔曲线控制点并确定像素应该是什么颜色。

A bezier curve shader(贝塞尔曲线着色器)

Our shader will run for every pixel we need to output. Its goal is to figure out what fraction of the pixel is covered by the glyph and assign this to the pixel alpha value3. If the glyph only partially covers the pixel we will output an alpha value somewhere between 0 and 1 — this is what gives us smooth antialiasing.

每个像素都会运行一次这个着色器。这个着色器的目标是计算出每个像素被字体覆盖的百分比，并将这个百分比赋值为像素的alpha值（3）。这就是我们实现平滑抗锯齿的原理。

1. 如果像素完全在字体内部，则alpha=1
2. 如果像素只被覆盖了部分，则将计算一个数值，此数值在(0, 1)阈值内，并赋值给alpha
3. 如果像素完全在字体外部，则alpha=0

We can treat each pixel as a circular window over some part of the glyph. We want to calculate the area of the part of the circle that is covered by the glyph.

我们可以将每个像素简化为圆形窗口。我们只需计算这个圆被字体覆盖的面积即可。

The desired result at 16 by 16 pixels.

我们期望的结果是一个16x16的像素。

Treating the pixel window as a circle4, our task is to compute the area of the shape formed by the circle boundary and any bezier curves passing through it. It’s possible to compute this exactly using Green’s theorem, but we’d need to clip our curves to the window and make sure we have a closed loop. It all gets a bit tricky to implement in a shader, especially if we want to use an arbitrary window function for better quality5. However if we reduce the problem to one dimension it becomes a lot more tractable.

将一个像素简化为一个圆（4），我们的任务即是计算文字轮廓（贝塞尔曲线）在圆中的面积。使用Green’s theorem即可精确地计算出这一点。

Two curves passing through a pixel window. The area of the shaded region can be approximated by looking at its intersections with a ray passing from left to right. Source: MS Paint.

两条曲线通过一个像素窗口。阴影区域的面积可以通过观察它与从左到右射线的交点来近似。来源：MS Paint

The idea is to take a ray passing from left to right. We can find all the intersections of this ray with all the bezier curves6. Each time the ray enters the glyph we add the distance between the intersection and the right side of the window. Each time the ray exits the glyph we subtract the distance to the right side of the window7. This gives us the total length of the line that is inside the glyph, and will work for any number of intersections or bezier curves.

定义一条从左到右的射线。可以计算这条射线与所有贝塞尔曲线的所有交点

1. 每次射线进入轮廓时，则加上交点与像素窗口右侧的距离
2. 每次射线离开轮廓时，则减去交点与像素窗口右侧的距离

计算完成后，即是字形内，线的总长度。这适用于任意数量的贝塞尔曲线。

More samples for more accuracy()

The result may be inaccurate if our horizontal ray intersects the bezier curves at a glancing angle. We can compensate for this by sampling several angles and averaging the results8. This gives a robust approximation of the 2D integral9.

如果我们的水平射线以一个掠射角(glancing angle)与贝塞尔曲线相交，结果可能是不准确的。我们可以通过对几个角度进行采样并求平均值来弥补这一点。这给出了二维积分的一个稳健近似。

Underestimation of covered area due to a curve intersecting the horizontal ray at a glancing angle. The shaded area is close to half the pixel but the estimate from this horizontal ray is much lower.

由于曲线以掠射角(glancing angle)与水平射线相交而低估了覆盖面积。阴影区域接近像素的一半，但这条水平射线的估计要低得多。

Increasing accuracy by sampling at several angles.

通过在多个角度采样来提高精度。

In practice only a few samples gives a high quality result. To see why supersampling helps we can make the pixel window very large:

在实践中，只需少量样本就能得到高质量的结果。为了了解为什么超采样有帮助，我们可以让像素窗口非常大:

Why supersampling is needed. Clockwise from top left: 2, 4, 8, 16 samples. The integration window here is larger than it should be to make the errors more visible. The error is less noticeable when the window is only one pixel — the demo uses four samples.

为什么需要超采样？顺时针从左上开始：2、4、8、16个样本。这里的图片比较大，以便使错误更明显。如果一个图片只有一个像素时，错误就不明显了。