C#+OpenGL+FreeType显示3D文字(3)

C#+OpenGL+FreeType显示3D文字(3) - 用PointSprite绘制文字

上一篇实现了把文字绘制到OpenGL窗口，但实质上只是把含有文字的贴图贴到矩形模型上。本篇我们介绍用PointSprite绘制文字，这可以只用1个点绘制文字，并确保文字始终面相窗口。用PointSprite绘制的文字，其大小范围有限，本篇提供的Demo中，Max Row Width最大只有256。现在能够绘制少量的文字，为其指定的位置的过程与为一个点指定位置的过程是相同的，所以此方式的应用范围还是比较广的。

 

基本流程

与前文相同的是仍然用GLSL+VBO+贴图来绘制。PointSprite只是Enable了一些OpenGL开关，然后把贴图贴到一个Point图元上。

您可以在此下载查看上图所示的demo。为节省空间，此demo只能显示ASCII范围内的字符。实际上它具有显示所有Unicode字符的能力。

编辑GLSL

我们只需vertex shader和fragment shader。

Vertex shader只是进行最基本的变换操作，并负责传递纹理大小。

#version 150 core

in vec3 in_Position;

uniform mat4 MVP;
uniform float pointSize;

void main(void) {
    gl_Position = MVP * vec4(in_Position, 1.0);
    gl_PointSize = pointSize;
}

Fragment shader根据纹理坐标所在位置的纹理颜色决定此位置是否显示（透明与否）。这就绘制出了一个字形。还可以顺便用一个uniform vec3 textColor指定文字颜色。

#version 150 core

out vec4 out_Color;

uniform sampler2D tex;
uniform vec3 textColor;

void main(void) {
    float transparency = texture2D(tex, gl_PointCoord).r;
    if (transparency == 0.0f)
    {
        discard;
    }
    else
    {
        out_Color = vec4(1, 1, 1, transparency) * vec4(textColor, 1.0f);
    }
}

设定VAO

模型只需一个Point。

        private void InitVAO()
        {
            GL.GenVertexArrays(1, vao);
            GL.BindVertexArray(vao[0]);

            //  Create a vertex buffer for the vertex data.
            {
                UnmanagedArray<vec3> in_Position = new UnmanagedArray<vec3>(1);
                in_Position[0] = this.position;

                uint[] ids = new uint[1];
                GL.GenBuffers(1, ids);
                GL.BindBuffer(BufferTarget.ArrayBuffer, ids[0]);
                GL.BufferData(BufferTarget.ArrayBuffer, in_Position, BufferUsage.StaticDraw);
                GL.VertexAttribPointer(attributeIndexPosition, 3, GL.GL_FLOAT, false, 0, IntPtr.Zero);
                GL.EnableVertexAttribArray(attributeIndexPosition);
            }

            //  Unbind the vertex array, we've finished specifying data for it.
            GL.BindVertexArray(0);
        }

程序生成文字贴图

要想显示任意的字符串，必须借助前文的贴图来一个字符一个字符地拼接出需要的字符串贴图并用之生成Texture。

这是从上面的图片中计算出的"bithuwei.cnblogs.com"的贴图。

由于PointSprite支持的贴图大小有限（最大256），所以计算字符串贴图的程序有点繁琐。

        /// <summary>
        /// 为指定的字符串生成贴图。
        /// </summary>
        /// <param name="fontResource"></param>
        /// <param name="content"></param>
        /// <param name="fontSize"></param>
        /// <param name="maxRowWidth"></param>
        /// <returns></returns>
        public static System.Drawing.Bitmap GenerateBitmapForString(this FontResource fontResource,
            string content, int fontSize, int maxRowWidth)
        {
            // step 1: get totalLength
            int totalLength = 0;
            {
                int glyphsLength = 0;
                for (int i = 0; i < content.Length; i++)
                {
                    char c = content[i];
                    CharacterInfo cInfo;
                    if (fontResource.CharInfoDict.TryGetValue(c, out cInfo))
                    {
                        int glyphWidth = cInfo.width;
                        glyphsLength += glyphWidth;
                    }
                    //else
                    //{ throw new Exception(string.Format("Not support for display the char [{0}]", c)); }
                }

                //glyphsLength = (glyphsLength * this.fontSize / FontResource.Instance.FontHeight);
                int interval = fontResource.FontHeight / 10; if (interval < 1) { interval = 1; }
                totalLength = glyphsLength + interval * (content.Length - 1);
            }

            // step 2: setup contentBitmap
            System.Drawing.Bitmap contentBitmap = null;
            {
                int interval = fontResource.FontHeight / 10; if (interval < 1) { interval = 1; }
                //int totalLength = glyphsLength + interval * (content.Length - 1);
                int currentTextureWidth = 0;
                int currentWidthPos = 0;
                int currentHeightPos = 0;
                if (totalLength * fontSize > maxRowWidth * fontResource.FontHeight)// 超过1行能显示的内容
                {
                    currentTextureWidth = maxRowWidth * fontResource.FontHeight / fontSize;

                    int lineCount = (totalLength - 1) / currentTextureWidth + 1;
                    // 确保整篇文字的高度在贴图中间。
                    currentHeightPos = (currentTextureWidth - fontResource.FontHeight * lineCount) / 2;
                    //- FontResource.Instance.FontHeight / 2;
                }
                else//只在一行内即可显示所有字符
                {
                    if (totalLength >= fontResource.FontHeight)
                    {
                        currentTextureWidth = totalLength;

                        // 确保整篇文字的高度在贴图中间。
                        currentHeightPos = (currentTextureWidth - fontResource.FontHeight) / 2;
                        //- FontResource.Instance.FontHeight / 2;
                    }
                    else
                    {
                        currentTextureWidth = fontResource.FontHeight;

                        currentWidthPos = (currentTextureWidth - totalLength) / 2;
                        //glyphsLength = fontResource.FontHeight;
                    }
                }

                //this.textureWidth = textureWidth * this.fontSize / FontResource.Instance.FontHeight;
                //currentWidthPosition = currentWidthPosition * this.fontSize / FontResource.Instance.FontHeight;
                //currentHeightPosition = currentHeightPosition * this.fontSize / FontResource.Instance.FontHeight;

                contentBitmap = new Bitmap(currentTextureWidth, currentTextureWidth);
                Graphics gContentBitmap = Graphics.FromImage(contentBitmap);
                Bitmap bigBitmap = fontResource.FontBitmap;
                for (int i = 0; i < content.Length; i++)
                {
                    char c = content[i];
                    CharacterInfo cInfo;
                    if (fontResource.CharInfoDict.TryGetValue(c, out cInfo))
                    {
                        if (currentWidthPos + cInfo.width > contentBitmap.Width)
                        {
                            currentWidthPos = 0;
                            currentHeightPos += fontResource.FontHeight;
                        }

                        gContentBitmap.DrawImage(bigBitmap,
                            new Rectangle(currentWidthPos, currentHeightPos, cInfo.width, fontResource.FontHeight),
                            new Rectangle(cInfo.xoffset, cInfo.yoffset, cInfo.width, fontResource.FontHeight),
                            GraphicsUnit.Pixel);

                        currentWidthPos += cInfo.width + interval;
                    }
                }
                gContentBitmap.Dispose();
                //contentBitmap.Save("PointSpriteStringElement-contentBitmap.png");
                System.Drawing.Bitmap bmp = null;
                if (totalLength * fontSize > maxRowWidth * fontResource.FontHeight)// 超过1行能显示的内容
                {
                    bmp = (System.Drawing.Bitmap)contentBitmap.GetThumbnailImage(
                        maxRowWidth, maxRowWidth, null, IntPtr.Zero);
                }
                else//只在一行内即可显示所有字符
                {
                    if (totalLength >= fontResource.FontHeight)
                    {
                        bmp = (System.Drawing.Bitmap)contentBitmap.GetThumbnailImage(
                            totalLength * fontSize / fontResource.FontHeight,
                            totalLength * fontSize / fontResource.FontHeight,
                            null, IntPtr.Zero);

                    }
                    else
                    {
                        bmp = (System.Drawing.Bitmap)contentBitmap.GetThumbnailImage(
                            fontSize, fontSize, null, IntPtr.Zero);
                    }
                }
                contentBitmap.Dispose();
                contentBitmap = bmp;
                //contentBitmap.Save("PointSpriteStringElement-contentBitmap-scaled.png");
            }

            return contentBitmap;

        }

 

缺陷

用PointSprite绘制的文字，其大小范围有限，本篇提供的Demo中，Max Row Width最大只有256。

总结

现在能够绘制少量的文字，为其指定的位置的过程与为一个点指定位置的过程是相同的，所以此方式的应用范围还是比较广的。