Font System in klayge

Document directory

• Core algorithms

Introduction to the font System in klayge

As we all know, font display is a functional component involved by all game engines. Klayge implements this function by storing and displaying information in the form of a dot matrix. However, the font displayed by klayge Supports high-quality resizing to some extent, which combines the advantages of vector graphs.

Previous work

There are many types of font systems, which can be divided into two categories: dot matrix and vector.

The dot matrix font system stores each word as a fixed-size bitmap. Common sizes include 16x16 and 32x32. Each glyph is represented by a set of two-dimensional pixel information. This text display method is widely used in earlier computer systems (such as DOS operating systems without graphic interfaces. Common pure dot matrix fonts include BDF, PCF, fnt, HbF, and other formats [6]. The advantage of dot matrix font is that it has a simple and fast display mode and is not limited by hardware. However, its disadvantage is also prominent, that is, it is relatively difficult to achieve high-quality resizing, the specific dot matrix font can only be clearly displayed under the corresponding font size. Otherwise, the displayed font can only be distorted by force amplification, resulting in a mosaic-style sawtooth edge. Therefore, in order to meet various display requirements, many fonts need to be pre-stored in multiple sets according to the model size, so that the space occupied by the fonts increases rapidly with the precision requirements. If a font of the proper size is not found, the display quality will be greatly affected.

In the vector font system, each glyph represents a set of outlines described by a mathematical curve. It contains key points on the glyph boundary, derivative information of the line, and so on. When the font is displayed, the rendering engine reads its mathematical vectors and performs some mathematical operations to render the text. The interior of the word is filled with a grating. Vector Fonts mainly include type1, TrueType, and Other types [6]. The advantage of vector font is that it has a small storage space and can be scaled infinitely without deformation. The disadvantage is that the display system is complex and requires many operations to display vector resources, so the speed is slow, it is not applicable to some hardware.

With the development of hardware, Ray et al. proposed a new vector storage method [5]. It divides a vector graph into multiple regions, each of which is represented by a polynomial. By placing the polynomial coefficient in the texture, the vector texture can be well calculated in pixel shader. This method solves the rendering of vector graphics on the GPU, but involves complicated shader and cannot be applied to hardware with low configuration.

Methods In klayge

Klayge's font system is designed to provide a fast, easy-to-implement, and support for high-quality font resizing. At the same time, it should not occupy too much memory and is suitable for dx7 and later hardware. To achieve this goal, we chose the "scalable dot matrix font" line.

Through the analysis of dot matrix fonts, we can find that the root cause of dot matrix fonts cannot be scaled down is that each element in the dot matrix represents the Coverage Information of sub-pixel [2], indicates the number of areas covered by the element in the outline of the word. For example, if an element is 0.5, it indicates that the area contains 50% characters. Such a Coverage Information is non-linear and cannot be obtained through linear interpolation. Therefore, forcing it to be scaled down (linear interpolation) will produce artifact such as sertices and disconnections. If you stop using Coverage Information and use linear distance as the content stored by elements, you can overcome the trouble of contraction to a certain extent. Therefore, we store Signed Distance field instead of traditional coverage.

Core algorithms

After analysis, the font system font should be expressed as signed distance field information. To do this, you need to take the following four steps.

Step 1: generate a large bitmap

In kfontgen, this step uses FreeType [3] to read the vector font and render a grayscale image of 4096x4096. As shown in (for the convenience of this article, it has been reduced to 512x512, the same below ):

Figure 1.Use FreeType to read the grayscale image generated by the TrueType vector font

Step 2: Contour search

The grayscale image generated by FreeType is rasterized, that is, the outline and interior of the word are filled. We only care about the outline, so in this step, we need to extract its outline, that is, to satisfy

1. The value of this element is not 0.
2. The eight adjacent elements of this element have 0

Elements of the two conditions. The outline element is marked as 1, and the others are marked as 0. The outline shown in the following figure can be extracted:

Figure 2.Extracting outlines from grayscale images

Step 3: Get distance Field

In general, the target font size is much smaller than 4096x4096. Therefore, we need to perform discrete sampling on the large bitmap obtained in the previous step to obtain the dot matrix of the target font size. By default, the target font size generated by kfontgen is 32x32. That is to say, starting from (64, 64), the X and Y directions collect a point at intervals of 128. Calculate the closest distance from these sampling points to the contour respectively, and a 32x32 distance field is obtained. At the same time, when sampling, you can determine whether a sample point is in the word based on the grayscale image obtained in step 1. If the sample point is in the word, the distance is a positive number; otherwise, the distance is a negative number. Then we can obtain the desired Signed Distance field.

Step 4: Quantization

Each element of distance field obtained in the previous step is a float data and needs to be converted into eight bits for each element to reduce space usage and accelerate rendering. The final result after quantification is a small bitmap:

Figure 3.Quantified Signed Distance field bitmap

Implementation Details

Although the principles of these four steps are simple, the practical speed can be achieved only after in-depth Optimization in actual implementation.

Binarization grayscale Map

The grayscale image obtained by Step 1 is saved as a byte, with each element in one byte. In fact, all we need is a 0, 1 binary information, indicating whether an element is in the word. Therefore, we need to perform a binarization operation on it, which not only saves space, but also accelerates the subsequent steps. For each element in a grayscale image, take its highest bit to generate the aforementioned binarization bitmap. Note: Although FreeType can directly generate a monochrome image, the results generated in this way are many sertices and cannot meet the high quality requirements.

Sse2's pmovmskb command accelerates binarization

Sse2 provides the pmovmskb command to extract the highest bits of 16 bytes at a time and put them in an unsigned short. This improves the binarization speed by several times. [4]

And XOR can accelerate contour search

Once a bit is used to represent an element, the contour can be searched through bitwise operations. According to the outline conditions proposed above, if the following expression:

Center & (center ^ (center & up & down & left & right ))

If the value is not 0, the element is on the contour; otherwise, the element is not on the contour. Center indicates the elements to be checked. Up, down, left, and right indicate the upper, lower, and left Adjacent Elements of the element. Here, sse2 can further accelerate and XOR. [4]

KD-tree is used to accelerate Nearest Neighbor Search

The contour extraction result can be viewed as a point set. each point in the set is on the contour. The essence of distance field calculation is to calculate the shortest distance from the sample point to the point set. This operation can be accelerated by using KD-tree [1]. Build a point set into a KD-tree, and then query the KD-tree using the coordinates of each sampling point to obtain the closest contour point. Calculate the distance between them to obtain the shortest distance from the sample point to the contour.

With these optimizations, the speed on the Pentium core2 2.3 GHz, 4 GB DDR2-800 machine can be 55 words/second.

Results and Comparison

From the recovery results, the 32x32 Signed Distance field can be restored to a 16x16 to 512x512 dot matrix with good results. The edge is smooth without obvious serrations. In contrast, the 32x32 dot matrix is directly scaled in linear mode, and the quality of X is greatly reduced.

Resolution	Method based on signed distance Field	Scale down a dot matrix directly
16x16
32x32
64x64
128x128
256x256
512x512

Other advantages of distance field-based Fonts

1. You can adjust the scale to change the stroke width without overhead during runtime:

Scale	20	100	500
Recovery result

2. You can easily append the pixels at a certain distance to a specific color:

3. Add soft shadow to the text

Summary and development

The distance field-based font can achieve better rendering performance when the storage structure is the same as that of the dot matrix font, especially for high-quality resizing. Since vector-related computing is moved to the pre-calculation part, its real-time rendering process is the same as that of the general dot matrix, which is far simpler than directly rendering the vector font.

This method establishes a bridge between vector and dot matrix, which can be easily extended to the storage and rendering of General vector images. Any vector image can be converted into Signed Distance field and rendered using the preceding algorithm. To support color vector graphs, you can save the color in the RGB channel and the distance in Channel. In addition, you can also use the 16-bit or 32-bit format per channel, or a large distance field to achieve higher precision.

When rendering distance field, you can also use the Marching Cubes algorithm [8] (to be precise, its simplified 2D version marching squares [7]). create a triangle mesh for a vector image. In this way, instead of processing the dot matrix, rendering the generated triangle mesh, you can use other effects based on triangle rendering.

References

[1] Bentley, J. L.Multidimen1_binary search trees used for Associative searching. In:Commun. ACM 18, 9 (Sep. 1975), 509-517.

[2] Chris Green,Improved alpha-tested magnification for vector textures and special effects, GDC 2008

[3] FreeType. A free, high-quality, and portable font engine. http://freetype.sourceforge.net /.

[4] intel,Intel 64 & IA-32 ubuntures software developer's manuals. Http://www.intel.com/products/processor/manuals.

[5] Ray, N., neiger, T., Cavin, X., and Levy, B. 2005.Vector texture maps on the GPU. InTechnical Report ALICE-TR-05-003.

[6] Wikipedia,Computer font. Http://en.wikipedia.org/wiki/Computer_font.

[7] Wikipedia,Marching squares. Http://en.wikipedia.org/wiki/Marching_squares.

[8] William E. Lorenz, Harvey E. Cline:Marching Cubes: a high resolution 3D Surface Construction Algorithm.In:Computer Graphics, Vol. 21, Nr. 4, July 1987