C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图

C#+OpenGL+FreeType显示3D文字(1) - 从TTF文件导出字形贴图

+BIT祝威+悄悄在此留下版了个权的信息说：

最近需要用OpenGL绘制文字，这是个很费时费力的事。一般的思路就是解析TTF文件从而得到字形的贴图，然后通过OpenGL绘制贴图的方式显示文字。

本篇记录了解析TTF文件并把所有字形安排到一张大贴图上的过程。

使用FreeType

想从零开始解析TTF文件是一个比较大的工程，所以目前就借助FreeType。FreeType是一个开源的跨平台的TTF文件解析器。当然，它还支持解析OpenType等格式的文件。

+BIT祝威+悄悄在此留下版了个权的信息说：

预备工作

找一个TTF文件

你可以从C:\Windows\Fonts里找到很多TTF文件，我就不提供了。TTF文件里包含了文字的字形。比如下面这两个就是本篇开头的两张贴图展示的TTF：

下载FreeType源码

你可以在Github上搜索到FreeType项目，也可以到别的什么地方下载某个版本的FreeType。比如我下载的是2.6版。

源码下载解压后如上图所示。

下载CMake

我想用visual studio打开并编译它，但它没有sln工程文件。所以我们先要用CMake来自动生成一个freetype.sln文件。CMake你可以自行百度找到，由于博客园提供的空间有限，我这里也不保留CMake的安装包了。

安装完CMake后桌面上会有这样一个图标。这就是CMake。

 

+BIT祝威+悄悄在此留下版了个权的信息说：

创建FreeType.sln

有了CMake，就可以创建freetype.sln了。

打开CMake，按下图所示指定所需的参数，即可生成freetype.sln。

 

下面这一步指定Visual Studio。

 

看到"Generating Done"就说明成功了。

 

打开文件夹，可以看到出现了freetype.sln。

 

编译生成freetype.dll

有了freetype.sln，用visual studio打开，即可编译生成freetype.lib。但我们需要的是DLL，怎么办？按照下述步骤即可实现。

修改宏定义

找到ftoption.h文件，如下图所示，添加两个宏定义。

#define FT_EXPORT(x) __declspec(dllexport) x
#define FT_BASE(x) __declspec(dllexport) x

修改项目配置

如下图所示，在freetype属性页，把配置类型和目标文件扩展名改为.dll。

生成freetype.DLL

现在重新编译项目，就会生成freetype.dll了。

+BIT祝威+悄悄在此留下版了个权的信息说：

C#调用FreeType.dll

效果图

拿到了freetype.dll，下一步就是在C#里调用它。本篇期望用它得到的效果图已经贴到本文开头，这里再贴一下：

字形(Glyph)信息

英文单词Glyph的意思是"字形；图象字符；纵沟纹"。这就是字形。

一个字形有3个重要的信息:宽度、高度、基线高度。

如上图所示，从f到k，这是6个字形。

每个字形都用红色矩形围了起来。这些红色的矩形高度对每个字形都是相同的，只有宽度不同。

每个字形还用黄色矩形围了起来，这些黄矩形的宽度、高度就是字形的宽度、高度。

图中还有一个蓝色的矩形，它的上边沿与红色矩形是重合的（为了方便看，我没有画重合），它的下边沿就是"基线"。对于字母"g"，它有一部分在基线上方，一部分在基线下方，在基线上方那部分的高度就称为"基线高度"。

所以，基线高度就是一个字形的黄色矩形框上边沿到蓝色矩形框下边沿的距离。有了这个基线高度，各个字形才能整齐地排列到贴图上。

如果没有基线高度的概念，你看的到贴图就会是这个样子：

与上面的效果图对比一下，你就知道它们的区别了。

封装freetype.dll

有了上面的基础，就可以开始干活了。首先要封装一些freetype相关的类型。这一步比较枯燥且冗长，我把核心类型放在这里，不想看直接跳过即可。

    public abstract class FreeTypeObjectBase<T> : IDisposable where T : class
    {
        /// <summary>
        /// 指针
        /// </summary>
        public IntPtr pointer;

        /// <summary>
        /// 对象
        /// </summary>
        public T obj;

        public override string ToString()
        {
            return string.Format("{0}: [{1}]", this.pointer, this.obj);
        }

        #region IDisposable Members

        /// <summary>
        /// Internal variable which checks if Dispose has already been called
        /// </summary>
        private Boolean disposed;

        /// <summary>
        /// Releases unmanaged and - optionally - managed resources
        /// </summary>
        /// <param name="disposing"><c>true</c> to release both managed and unmanaged resources; <c>false</c> to release only unmanaged resources.</param>
        private void Dispose(Boolean disposing)
        {
            if (disposed)
            {
                return;
            }

            if (disposing)
            {
                //TODO: Managed cleanup code here, while managed refs still valid
            }
            //TODO: Unmanaged cleanup code here
            ReleaseResource();
            this.pointer = IntPtr.Zero;
            this.obj = null;

            disposed = true;
        }

        /// <summary>
        /// Unmanaged cleanup code here
        /// </summary>
        protected abstract void ReleaseResource();

        /// <summary>
        /// Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources.
        /// </summary>
        public void Dispose()
        {
            // Call the private Dispose(bool) helper and indicate 
            // that we are explicitly disposing
            this.Dispose(true);

            // Tell the garbage collector that the object doesn't require any
            // cleanup when collected since Dispose was called explicitly.
            GC.SuppressFinalize(this);
        }

        #endregion

    }

    /// <summary>
    /// FreeType库
    /// </summary>
    public class FreeTypeLibrary : FreeTypeObjectBase<FT_Library>
    {
        /// <summary>
        /// 初始化FreeType库
        /// </summary>
        public FreeTypeLibrary()
        {
            int ret = FreeTypeAPI.FT_Init_FreeType(out this.pointer);
            if (ret != 0) { throw new Exception("Could not init freetype library!"); }

            this.obj = (FT_Library)Marshal.PtrToStructure(this.pointer, typeof(FT_Library));
            //lib = Marshal.PtrToStructure<Library>(libptr);
        }

        protected override void ReleaseResource()
        {
            FreeTypeAPI.FT_Done_FreeType(this.pointer);
        }

    }

    /// <summary>
    /// 初始化字体库
    /// </summary>
    public class FreeTypeFace : FreeTypeObjectBase<FT_Face>
    {

        /// <summary>
        /// 初始化字体库
        /// </summary>
        /// <param name="library"></param>
        /// <param name="fontFullname"></param>
        /// <param name="size"></param>
        public FreeTypeFace(FreeTypeLibrary library, string fontFullname)//, int size)
        {
            int retb = FreeTypeAPI.FT_New_Face(library.pointer, fontFullname, 0, out pointer);
            if (retb != 0) { throw new Exception("Could not open font"); }

            this.obj = (FT_Face)Marshal.PtrToStructure(pointer, typeof(FT_Face));

        }

        /// <summary>
        /// Unmanaged cleanup code here
        /// </summary>
        protected override void ReleaseResource()
        {
            FreeTypeAPI.FT_Done_Face(this.pointer);
        }

    }
 
    /// <summary>
    /// 把字形转换为纹理
    /// </summary>
    public class FreeTypeBitmapGlyph : FreeTypeObjectBase<FT_BitmapGlyph>
    {
        /// <summary>
        /// char 
        /// </summary>
        public char glyphChar;
        public GlyphRec glyphRec;

        /// <summary>
        /// 把字形转换为纹理    
        /// </summary>
        /// <param name="face"></param>
        /// <param name="c"></param>
        public FreeTypeBitmapGlyph(FreeTypeFace face, char c, int size)
        {
            // Freetype measures the font size in 1/64th of pixels for accuracy 
            // so we need to request characters in size*64
            // 设置字符大小？
            FreeTypeAPI.FT_Set_Char_Size(face.pointer, size << 6, size << 6, 96, 96);

            // Provide a reasonably accurate estimate for expected pixel sizes
            // when we later on create the bitmaps for the font
            // 设置像素大小？
            FreeTypeAPI.FT_Set_Pixel_Sizes(face.pointer, size, size);

            // We first convert the number index to a character index
            // 根据字符获取其编号
            int index = FreeTypeAPI.FT_Get_Char_Index(face.pointer, Convert.ToChar(c));

            // Here we load the actual glyph for the character
            // 加载此字符的字形
            int ret = FreeTypeAPI.FT_Load_Glyph(face.pointer, index, FT_LOAD_TYPES.FT_LOAD_DEFAULT);
            if (ret != 0) { throw new Exception(string.Format("Could not load character '{0}'", Convert.ToChar(c))); }
            
            int retb = FreeTypeAPI.FT_Get_Glyph(face.obj.glyphrec, out this.pointer);
            if (retb != 0) return;
            glyphRec = (GlyphRec)Marshal.PtrToStructure(face.obj.glyphrec, typeof(GlyphRec));

            FreeTypeAPI.FT_Glyph_To_Bitmap(out this.pointer, FT_RENDER_MODES.FT_RENDER_MODE_NORMAL, 0, 1);
            this.obj = (FT_BitmapGlyph)Marshal.PtrToStructure(this.pointer, typeof(FT_BitmapGlyph));
        }

        protected override void ReleaseResource()
        {
            //throw new NotImplementedException();
        }
    }

 

使用freetype时，首先要初始化库

            // 初始化FreeType库：创建FreeType库指针
            FreeTypeLibrary library = new FreeTypeLibrary();

            // 初始化字体库
            FreeTypeFace face = new FreeTypeFace(library, this.fontFullname);

 

之后需要获取一个字形时，就

                char c = '&';
                int fontHeight = 48;
                FreeTypeBitmapGlyph glyph = new FreeTypeBitmapGlyph(face, c, fontHeight);

glyph里包含了字形的宽度、高度和用byte表示的灰度图。

字形集->贴图

得到glyph就可以生成整个贴图了，代码如下。

    /// <summary>
    /// 用一个纹理绘制ASCII表上所有可见字符（具有指定的高度和字体）
    /// </summary>
    public class ModernSingleTextureFont
    {
        private string fontFullname;
        private char firstChar;
        private char lastChar;
        private int maxWidth;
        private int fontHeight;
        private int textureWidth;
        private int textureHeight;
        Dictionary<char, CharacterInfo> charInfoDict = new Dictionary<char, CharacterInfo>();

        /// <summary>
        /// 用一个纹理绘制ASCII表上所有可见字符（具有指定的高度和字体）
        /// </summary>
        /// <param name="fontFullname"></param>
        /// <param name="fontHeight">此值越大，绘制文字的清晰度越高，但占用的纹理资源就越多。</param>
        /// <param name="firstChar"></param>
        /// <param name="lastChar"></param>
        /// <param name="maxWidth">生成的纹理的最大宽度。</param>
        public ModernSingleTextureFont(string fontFullname, int fontHeight, char firstChar, char lastChar, int maxWidth)
        {
            this.fontFullname = fontFullname;
            this.fontHeight = fontHeight;
            this.firstChar = firstChar;
            this.lastChar = lastChar;
            this.maxWidth = maxWidth;
        }

        public System.Drawing.Bitmap GetBitmap()
        {
            // 初始化FreeType库：创建FreeType库指针
            FreeTypeLibrary library = new FreeTypeLibrary();

            // 初始化字体库
            FreeTypeFace face = new FreeTypeFace(library, this.fontFullname);

            GetTextureBlueprint(face, this.fontHeight, this.maxWidth, out this.textureWidth, out this.textureHeight);

            System.Drawing.Bitmap bigBitmap = GetBigBitmap(face, this.maxWidth, this.textureWidth, this.textureHeight);

            face.Dispose();
            library.Dispose();

            return bigBitmap;
        }

        private System.Drawing.Bitmap GetBigBitmap(FreeTypeFace face, int maxTextureWidth, int widthOfTexture, int heightOfTexture)
        {
            System.Drawing.Bitmap bigBitmap = new System.Drawing.Bitmap(widthOfTexture, heightOfTexture);
            Graphics graphics = Graphics.FromImage(bigBitmap);

            //for (int i = (int)this.firstChar; i <= (int)this.lastChar; i++)
            for (char c = this.firstChar; c <= this.lastChar; c++)
            {
                //char c = Convert.ToChar(i);
                FreeTypeBitmapGlyph glyph = new FreeTypeBitmapGlyph(face, c, this.fontHeight);
                bool zeroSize = (glyph.obj.bitmap.rows == 0 && glyph.obj.bitmap.width == 0);
                bool zeroBuffer = glyph.obj.bitmap.buffer == IntPtr.Zero;
                if (zeroSize && (!zeroBuffer)) { throw new Exception(); }
                if ((!zeroSize) && zeroBuffer) { throw new Exception(); }

                if (!zeroSize)
                {
                    int size = glyph.obj.bitmap.width * glyph.obj.bitmap.rows;
                    byte[] byteBitmap = new byte[size];
                    Marshal.Copy(glyph.obj.bitmap.buffer, byteBitmap, 0, byteBitmap.Length);
                    CharacterInfo cInfo;
                    if (this.charInfoDict.TryGetValue(c, out cInfo))
                    {
                        if (cInfo.width > 0)
                        {
                            System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(cInfo.width, cInfo.height);
                            for (int tmpRow = 0; tmpRow < cInfo.height; ++tmpRow)
                            {
                                for (int tmpWidth = 0; tmpWidth < cInfo.width; ++tmpWidth)
                                {
                                    byte color = byteBitmap[tmpRow * cInfo.width + tmpWidth];
                                    bitmap.SetPixel(tmpWidth, tmpRow, Color.FromArgb(color, color, color));
                                }
                            }

                            int baseLine = this.fontHeight / 4 * 3;
                            graphics.DrawImage(bitmap, cInfo.xoffset,
                                cInfo.yoffset + baseLine - glyph.obj.top);
                        }
                    }
                    else
                    { throw new Exception(string.Format("Not support for display the char [{0}]", c)); }
                }

            }

            graphics.Dispose();

            return bigBitmap;
        }

        private void GetTextureBlueprint(FreeTypeFace face, int fontHeight, int maxTextureWidth, out int widthOfTexture, out int heightOfTexture)
        {
            widthOfTexture = 0;
            heightOfTexture = this.fontHeight;

            int glyphX = 0;
            int glyphY = 0;

            for (int i = (int)this.firstChar; i <= (int)this.lastChar; i++)
            {
                char c = Convert.ToChar(i);
                FreeTypeBitmapGlyph glyph = new FreeTypeBitmapGlyph(face, c, fontHeight);
                bool zeroSize = (glyph.obj.bitmap.rows == 0 && glyph.obj.bitmap.width == 0);
                bool zeroBuffer = glyph.obj.bitmap.buffer == IntPtr.Zero;
                if (zeroSize && (!zeroBuffer)) { throw new Exception(); }
                if ((!zeroSize) && zeroBuffer) { throw new Exception(); }
                if (zeroSize) { continue; }

                int glyphWidth = glyph.obj.bitmap.width;
                int glyphHeight = glyph.obj.bitmap.rows;

                if (glyphX + glyphWidth + 1 > maxTextureWidth)
                {
                    heightOfTexture += this.fontHeight;

                    glyphX = 0;
                    glyphY = heightOfTexture - this.fontHeight;

                    CharacterInfo cInfo = new CharacterInfo();
                    cInfo.xoffset = glyphX; cInfo.yoffset = glyphY;
                    cInfo.width = glyphWidth; cInfo.height = glyphHeight;
                    this.charInfoDict.Add(c, cInfo);
                }
                else
                {
                    widthOfTexture = Math.Max(widthOfTexture, glyphX + glyphWidth + 1);

                    CharacterInfo cInfo = new CharacterInfo();
                    cInfo.xoffset = glyphX; cInfo.yoffset = glyphY;
                    cInfo.width = glyphWidth; cInfo.height = glyphHeight;
                    this.charInfoDict.Add(c, cInfo);
                }

                glyphX += glyphWidth + 1;
            }

        }

    }

开源TTF2Bmps下载

根据本篇记录的内容，我写了TTF2Bmps这个程序，可以将任何一个TTF文件解析为BMP图片。你可以在此下载。

2015-08-08

TTF2Bmps现在能够获取所有unicode字符的字形，对输入方式也做了改进。新版的下载地址在此。

下面展示了获取某些中文字符的情形。

 

下面展示了获取所有unicode字符的情形。由于整个unicode字符太多，所以只显示了一部分。

 

改进了UI，可以一次指定多个TTF文件，开始计算后有进度条展示进度。下图展示的是生成多个TTF文件的汉字部分贴图。此版下载地址在这里。

 

2015-08-10

改进了UI，可以详细显示进度。可以生成贴图对应的Xml文件（包含贴图每个字形的位置信息）。贴图增加红色虚线标识各行的界限。可选择生成各个字形及其位置信息的列表（多个PNG）。此版下载地址在这里。

 

2015-08-12

特殊处理空格、tab。调整UI。修复若干bug。

 

 

+BIT祝威+悄悄在此留下版了个权的信息说：

总结

有了贴图，下一步就可以用OpenGL绘制文字了。下回再叙。