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 

 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, );
   texcoord = in_TexCoord;
 }

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

 #version 

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

 void main(void) {
   gl_FragColor = vec4(, , , 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 =  * 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 = ;
             for (int i = ; 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 == )
                     {
                         tmpPositions[i *  + ] = new vec3(, , );
                         tmpPositions[i *  + ] = new vec3(glyphWidth, , );
                         tmpPositions[i *  + ] = new vec3(glyphWidth, , );
                         tmpPositions[i *  + ] = new vec3(, , );
                     }
                     else
                     {
                         tmpPositions[i *  + ] = tmpPositions[i *  +  -  + ];
                         tmpPositions[i *  + ] = tmpPositions[i *  + ] + new vec3(glyphWidth, , );
                         tmpPositions[i *  + ] = tmpPositions[i *  +  -  - ];
                         tmpPositions[i *  + ] = tmpPositions[i *  + ] + new vec3(glyphWidth, , );
                     }
                     totalLength += glyphWidth;
                 }

             }
             for (int i = ; i < value.Length; i++)
             {
                 char c = value[i];
                 CharacterInfo cInfo;
                 float x1 = ;
                 float x2 = ;
                 float y1 = ;
                 float y2 = ;
                 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 *  + ] = tmpPositions[i *  + ] - new vec3(totalLength / , , );
                 in_Position[i *  + ] = tmpPositions[i *  + ] - new vec3(totalLength / , , );
                 in_Position[i *  + ] = tmpPositions[i *  + ] - new vec3(totalLength / , , );
                 in_Position[i *  + ] = tmpPositions[i *  + ] - new vec3(totalLength / , , );

                 in_TexCoord[i *  + ] = new vec2(x1, y2);
                 in_TexCoord[i *  + ] = new vec2(x2, y2);
                 in_TexCoord[i *  + ] = new vec2(x2, y1);
                 in_TexCoord[i *  + ] = new vec2(x1, y1);
             }

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

             GL.GenBuffers(, vbo);

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

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

             GL.BindVertexArray();

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

根据字符串生成VAO/VBO

其它

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

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

总结

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

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