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

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

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

上一篇得到了字形贴图及其位置字典（可导出为XML）。本篇就利用此贴图和位置字典，把文字绘制到OpenGL窗口。

基本流程

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

有了贴图，绘制文字和绘制普通纹理的过程是一样的。我们需要用glTexImage2D设定纹理，然后用GLSL+VBO设置一个长方形，把纹理的某个字形所占据的位置贴到长方形上，就可以绘制一个字符。连续设置多个长方形，就可以显示字符串了。

当然，用legacy opengl里的glVertex和glTexCoord来设置长方形和贴图也可以，不过本文推荐用modern opengl的GLSL+VBO的方式来实现。

 

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

 

编辑GLSL

我们只需vertex shader和fragment shader。

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

#version 120

attribute vec3 in_Position;
attribute vec2 in_TexCoord;
varying vec2 texcoord;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

void main(void) {
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(in_Position, 1);
  texcoord = in_TexCoord;
}

 

Fragment shader根据纹理坐标所在位置的纹理颜色决定此位置是否显示（透明与否）。这就绘制出了一个字形。 

#version 120

varying vec2 texcoord;
uniform sampler2D tex;
uniform vec4 color;

void main(void) {
  gl_FragColor = vec4(1, 1, 1, texture2D(tex, texcoord).r) * color;
}

设定VAO

每个字符的宽度是不同的，所以每个长方形都要据此调整宽度。下面是根据字符串生成VAO/VBO的片段。

        private void InitVAO(string value)
        {
            if (value == null) { value = string.Empty; }

            this.mode = PrimitiveModes.Quads;
            this.vertexCount = 4 * value.Length;

            //  Create a vertex buffer for the vertex data.
            UnmanagedArray<vec3> in_Position = new UnmanagedArray<vec3>(this.vertexCount);
            UnmanagedArray<vec2> in_TexCoord = new UnmanagedArray<vec2>(this.vertexCount);
            Bitmap bigBitmap = this.ttfTexture.BigBitmap;
            vec3[] tmpPositions = new vec3[this.vertexCount];
            float totalLength = 0;
            for (int i = 0; i < value.Length; i++)
            {
                char c = value[i];
                CharacterInfo cInfo;
                if (this.ttfTexture.CharInfoDict.TryGetValue(c, out cInfo))
                {
                    float glyphWidth = (float)cInfo.width / (float)this.ttfTexture.FontHeight;
                    if (i == 0)
                    {
                        tmpPositions[i * 4 + 0] = new vec3(0, 0, 0);
                        tmpPositions[i * 4 + 1] = new vec3(glyphWidth, 0, 0);
                        tmpPositions[i * 4 + 2] = new vec3(glyphWidth, 1, 0);
                        tmpPositions[i * 4 + 3] = new vec3(0, 1, 0);
                    }
                    else
                    {
                        tmpPositions[i * 4 + 0] = tmpPositions[i * 4 + 0 - 4 + 1];
                        tmpPositions[i * 4 + 1] = tmpPositions[i * 4 + 0] + new vec3(glyphWidth, 0, 0);
                        tmpPositions[i * 4 + 3] = tmpPositions[i * 4 + 3 - 4 - 1];
                        tmpPositions[i * 4 + 2] = tmpPositions[i * 4 + 3] + new vec3(glyphWidth, 0, 0);
                    }
                    totalLength += glyphWidth;
                }

            }
            for (int i = 0; i < value.Length; i++)
            {
                char c = value[i];
                CharacterInfo cInfo;
                float x1 = 0;
                float x2 = 1;
                float y1 = 0;
                float y2 = 1;
                if (this.ttfTexture.CharInfoDict.TryGetValue(c, out cInfo))
                {
                    x1 = (float)cInfo.xoffset / (float)bigBitmap.Width;
                    x2 = (float)(cInfo.xoffset + cInfo.width) / (float)bigBitmap.Width;
                    y1 = (float)cInfo.yoffset / (float)bigBitmap.Height;
                    y2 = (float)(cInfo.yoffset + this.ttfTexture.FontHeight) / (float)bigBitmap.Height;
                }

                in_Position[i * 4 + 0] = tmpPositions[i * 4 + 0] - new vec3(totalLength / 2, 0, 0);
                in_Position[i * 4 + 1] = tmpPositions[i * 4 + 1] - new vec3(totalLength / 2, 0, 0);
                in_Position[i * 4 + 2] = tmpPositions[i * 4 + 2] - new vec3(totalLength / 2, 0, 0);
                in_Position[i * 4 + 3] = tmpPositions[i * 4 + 3] - new vec3(totalLength / 2, 0, 0);

                in_TexCoord[i * 4 + 0] = new vec2(x1, y2);
                in_TexCoord[i * 4 + 1] = new vec2(x2, y2);
                in_TexCoord[i * 4 + 2] = new vec2(x2, y1);
                in_TexCoord[i * 4 + 3] = new vec2(x1, y1);
            }

            GL.GenVertexArrays(1, vao);
            GL.BindVertexArray(vao[0]);

            GL.GenBuffers(2, vbo);

            uint in_PositionLocation = shaderProgram.GetAttributeLocation(strin_Position);
            GL.BindBuffer(BufferTarget.ArrayBuffer, vbo[0]);
            GL.BufferData(BufferTarget.ArrayBuffer, in_Position, BufferUsage.StaticDraw);
            GL.VertexAttribPointer(in_PositionLocation, 3, GL.GL_FLOAT, false, 0, IntPtr.Zero);
            GL.EnableVertexAttribArray(in_PositionLocation);

            uint in_TexCoordLocation = shaderProgram.GetAttributeLocation(strin_TexCoord);
            GL.BindBuffer(BufferTarget.ArrayBuffer, vbo[1]);
            GL.BufferData(BufferTarget.ArrayBuffer, in_TexCoord, BufferUsage.StaticDraw);
            GL.VertexAttribPointer(in_TexCoordLocation, 2, GL.GL_FLOAT, false, 0, IntPtr.Zero);
            GL.EnableVertexAttribArray(in_TexCoordLocation);

            GL.BindVertexArray(0);

            in_Position.Dispose();
            in_TexCoord.Dispose();
        }

 

其它 

在上一篇，我们通过TTF文件得到了贴图文件及其位置信息（XML文件）。此时其实不再需要借助freetype就可以直接使用这些贴图了。

另外，本文所给的demo已经包含了perspective和ortho两种透视的camera功能，固定在窗口左下角显示坐标系的功能，感兴趣的话通过反编译即可得到。

 

总结

现在能够绘制文字了，但是换行之类的高级功能还没有实现。这已经不熟悉opengl的研究范围，而是更高层的功能了，所以暂时不再深入考虑。

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