CSharpGL(15)用GLSL渲染2种类型的文字
2016-08-13
由于CSharpGL一直在更新，现在这个教程已经不适用最新的代码了。CSharpGL源码中包含10多个独立的Demo，更适合入门参考。
为了尽可能提升渲染效率，CSharpGL是面向Shader的，因此稍有难度。
下载
这个示例是CSharpGL的一部分，CSharpGL已在GitHub开源，欢迎对OpenGL有兴趣的同学加入（https://github.com/bitzhuwei/CSharpGL）
血条
玩家头顶的血条、名字随着玩家在3D世界移动，但始终朝向摄像机，且在屏幕上的大小不变。
始终朝向camera
如何使模型始终朝向camera？
对模型进行坐标变换，使模型的顶点坐标从物体坐标系变换到世界坐标系再到屏幕坐标系。这过程需要三个矩阵。
1 gl_Position = projectionMatrix * viewMatrix * modelMatrix * position;
其中经过viewMatrix后，模型就变换到了世界坐标空间里。那么，只需调整viewMatrix（去掉旋转变换），就不会改变模型的朝向了。
在4x4矩阵中，旋转变换由左上角的3x3矩阵实现。所以，只要把viewMatrix的3x3矩阵变为单位矩阵即可。
1 mat4 translateView = mat4(1.0f);//单位矩阵
2
3 for (int t = 0; t < 3; t++) 4 { translateView[t].w = viewMatrix[t].w; } 5
6 translateView[3] = viewMatrix[3]; 7
8 gl_Position = projectionMatrix * translateView * (modelMatrix * position);
当然，也可以在C#里直接计算translateView。
1 private mat4 AlwaysFaceCamera(mat4 viewMatrix) 2 { 3 mat4 result = mat4.identity(); 4 for (int i = 0; i < 3; i++) 5 { 6 vec4 v = result[i]; 7 v.w = viewMatrix[i].w; 8 result[i] = v; 9 } 10 result[3] = viewMatrix[3]; 11
12 return result; 13 }
在屏幕上的大小不变
上面解决了始终朝向camera的问题。但是此时的血条仍会在远离camera时和其他模型一样缩小。我希望血条大小保持不变。
虽然还不能完全说明原理，不过还是做出来了。只需将血条的modelMatrix设置为下面值即可。
1 /// <summary>
2 ///
3 /// </summary>
4 /// <param name="length">camera的Position和Target之间的距离</param>
5 /// <param name="height">血条高度</param>
6 /// <returns></returns>
7 private mat4 AlwaysSameSize(float length, float height) 8 { 9 mat4 result = glm.translate(glm.scale(mat4.identity(), 10 new vec3(length, length, 1)), 11 new vec3(0, height / length, 0)); 12
13 return result; 14 }
大体原理是：血条模型本身必须是中心对称的；摄像机远离其Target时，应该放大血条（glm.scale()）；之后向上移动一段距离，这段距离与摄像机到Target的距离是减函数关系（我就认为是成反比，具体原因我说不清）。这样才可能保持其大小不变。经过试验，上述AlwaysSameSize()方法是正确的。
demo
您可以在下图的例子中观察血条类型的模型是如何实现的。此demo顺便加上了后面要介绍的血条型文字（teapot）和UI文字（Hello Label!）。
字符串模型
渲染文字的基本思想很简单：字符都是贴图，贴到Quad上就行了。
贴图
所以要准备好贴图。这一步我已经在（http://www.cnblogs.com/bitzhuwei/p/generate-bitmap-from-ttf.html）详细叙述过了。
模型
文字模型是在同一平面内的若干个Quad。所以定义其模型如下。
1 /// <summary>
2 /// 用于渲染一段文字 3 /// </summary>
4 public class StringModel : IModel 5 { 6 public sampler2D glyphTexture { get; set; } 7 public GlyphPosition[] positions { get; set; } 8 public GlyphColor[] colors { get; set; } 9 public GlyphTexCoord[] texCoords { get; set; } 10
11 public Objects.VertexBuffers.BufferRenderer GetPositionBufferRenderer(string varNameInShader) 12 { 13 using (var buffer = new PositionBuffer(varNameInShader)) 14 { 15 buffer.Alloc(positions.Length); 16 unsafe
17 { 18 var array = (GlyphPosition*)buffer.FirstElement(); 19 for (int i = 0; i < positions.Length; i++) 20 { 21 array[i] = positions[i]; 22 } 23 } 24
25 return buffer.GetRenderer(); 26 } 27 } 28
29 public Objects.VertexBuffers.BufferRenderer GetColorBufferRenderer(string varNameInShader) 30 { 31 using (var buffer = new ColorBuffer(varNameInShader)) 32 { 33 buffer.Alloc(colors.Length); 34 unsafe
35 { 36 var array = (GlyphColor*)buffer.FirstElement(); 37 for (int i = 0; i < colors.Length; i++) 38 { 39 array[i] = colors[i]; 40 } 41 } 42
43 return buffer.GetRenderer(); 44 } 45 } 46
47 public Objects.VertexBuffers.BufferRenderer GetTexCoordBufferRenderer(string varNameInShader) 48 { 49 using (var buffer = new TexCoordBuffer(varNameInShader)) 50 { 51 buffer.Alloc(texCoords.Length); 52 unsafe
53 { 54 var array = (GlyphTexCoord*)buffer.FirstElement(); 55 for (int i = 0; i < texCoords.Length; i++) 56 { 57 array[i] = texCoords[i]; 58 } 59 } 60
61 return buffer.GetRenderer(); 62 } 63 } 64
65 public Objects.VertexBuffers.BufferRenderer GetNormalBufferRenderer(string varNameInShader) 66 { 67 return null; 68 } 69
70 public Objects.VertexBuffers.BufferRenderer GetIndexes() 71 { 72 using (var buffer = new ZeroIndexBuffer(DrawMode.Quads, 0, this.positions.Length * 4)) 73 { 74 return buffer.GetRenderer(); 75 } 76 } 77
78 public struct GlyphPosition 79 { 80 public vec2 leftUp; 81 public vec2 leftDown; 82 public vec2 rightUp; 83 public vec2 rightDown; 84
85 public GlyphPosition( 86 vec2 leftUp, 87 vec2 leftDown, 88 vec2 rightUp, 89 vec2 rightDown) 90 { 91 this.leftUp = leftUp; 92 this.leftDown = leftDown; 93 this.rightUp = rightUp; 94 this.rightDown = rightDown; 95 } 96 } 97
98 public struct GlyphColor 99 { 100 public vec4 leftUp; 101 public vec4 leftDown; 102 public vec4 rightUp; 103 public vec4 rightDown; 104
105 public GlyphColor( 106 vec4 leftUp, 107 vec4 leftDown, 108 vec4 rightUp, 109 vec4 rightDown) 110 { 111 this.leftUp = leftUp; 112 this.leftDown = leftDown; 113 this.rightUp = rightUp; 114 this.rightDown = rightDown; 115 } 116 } 117
118 public struct GlyphTexCoord 119 { 120 public vec2 leftUp; 121 public vec2 leftDown; 122 public vec2 rightUp; 123 public vec2 rightDown; 124
125 public GlyphTexCoord( 126 vec2 leftUp, 127 vec2 leftDown, 128 vec2 rightUp, 129 vec2 rightDown) 130 { 131 this.leftUp = leftUp; 132 this.leftDown = leftDown; 133 this.rightUp = rightUp; 134 this.rightDown = rightDown; 135 } 136 } 137
138 class PositionBuffer : PropertyBuffer<GlyphPosition>
139 { 140 public PositionBuffer(string varNameInShader) 141 : base(varNameInShader, 2, GL.GL_FLOAT, BufferUsage.StaticDraw) 142 { } 143 } 144 class ColorBuffer : PropertyBuffer<GlyphColor>
145 { 146 public ColorBuffer(string varNameInShader) 147 : base(varNameInShader, 4, GL.GL_FLOAT, BufferUsage.StaticDraw) 148 { } 149 } 150
151 class TexCoordBuffer : PropertyBuffer<GlyphTexCoord>
152 { 153 public TexCoordBuffer(string varNameInShader) 154 : base(varNameInShader, 2, GL.GL_FLOAT, BufferUsage.StaticDraw) 155 { } 156 } 157 }
Shader
vertex shader如下。
1 #version 150 core 2
3 in vec2 position; 4 in vec4 color; 5 out vec4 passColor; 6 in vec2 texCoord; 7 out vec2 passTexCoord; 8 uniform mat4 mvp; 9
10 void main(void) 11 { 12 gl_Position = mvp * vec4(position, 0.0f, 1.0f); 13 passColor = color; 14 passTexCoord = texCoord; 15 }
fragment shader如下。
1 #version 150 core 2
3 in vec4 passColor; 4 in vec2 passTexCoord; 5 uniform sampler2D glyphTexture; 6 out vec4 outputColor; 7
8 void main(void) 9 { 10 float transparency = texture(glyphTexture, passTexCoord).r; 11 if (transparency == 0.0f) 12 { 13 discard; 14 } 15 else
16 { 17 outputColor = vec4(1, 1, 1, transparency) * passColor; 18 } 19 }
根据字符串创建模型
给定一个字符串，我们可以计算出相应的模型。
1 public static class DummyStringModelFactory 2 { 3 /// <summary>
4 /// 简单地生成一行文字。 5 /// </summary>
6 /// <param name="content"></param>
7 /// <returns></returns>
8 public static StringModel GetModel(this string content) 9 { 10 StringModel model = new StringModel(); 11
12 var glyphPositions = new StringModel.GlyphPosition[content.Length]; 13 FontResource fontResource = CSharpGL.GlyphTextures.FontResource.Default; 14 var glyphTexCoords = new StringModel.GlyphTexCoord[content.Length]; 15 //fontResource.GenerateBitmapForString(content, 10, 10000);
16 int currentWidth = 0; int currentHeight = 0; 17 /*
18 * 0 3 4 6 8 11 12 15 19 * ------- ------- ------- ------- 20 * | | | | | | | | 21 * | | | | | | | | 22 * | | | | | | | | 23 * ------- ------- ------- ------- 24 * 1 2 5 6 9 10 13 14 25 */
26 for (int i = 0; i < content.Length; i++) 27 { 28 char ch = content[i]; 29 CharacterInfo info = fontResource.CharInfoDict[ch]; 30 glyphPositions[i] = new StringModel.GlyphPosition( 31 new GLM.vec2(currentWidth, currentHeight + fontResource.FontHeight), 32 new GLM.vec2(currentWidth, currentHeight), 33 new GLM.vec2(currentWidth + info.width, currentHeight), 34 new GLM.vec2(currentWidth + info.width, currentHeight + fontResource.FontHeight)); 35 const int shrimp = 2; 36 glyphTexCoords[i] = new StringModel.GlyphTexCoord( 37 new GLM.vec2((float)(info.xoffset + shrimp) / (float)fontResource.FontBitmap.Width, (float)(currentHeight) / (float)fontResource.FontBitmap.Height), 38 new GLM.vec2((float)(info.xoffset + shrimp) / (float)fontResource.FontBitmap.Width, (float)(currentHeight + fontResource.FontHeight) / (float)fontResource.FontBitmap.Height), 39 new GLM.vec2((float)(info.xoffset - shrimp + info.width) / (float)fontResource.FontBitmap.Width, (float)(currentHeight + fontResource.FontHeight) / (float)fontResource.FontBitmap.Height), 40 new GLM.vec2((float)(info.xoffset - shrimp + info.width) / (float)fontResource.FontBitmap.Width, (float)(currentHeight) / (float)fontResource.FontBitmap.Height) 41 ); 42 currentWidth += info.width + 10; 43 } 44 // move to center
45 for (int i = 0; i < content.Length; i++) 46 { 47 StringModel.GlyphPosition position = glyphPositions[i]; 48
49 position.leftUp.x -= currentWidth / 2; 50 position.leftDown.x -= currentWidth / 2; 51 position.rightUp.x -= currentWidth / 2; 52 position.rightDown.x -= currentWidth / 2; 53 position.leftUp.y -= (currentHeight + fontResource.FontHeight) / 2; 54 position.leftDown.y -= (currentHeight + fontResource.FontHeight) / 2; 55 position.rightUp.y -= (currentHeight + fontResource.FontHeight) / 2; 56 position.rightDown.y -= (currentHeight + fontResource.FontHeight) / 2; 57
58 position.leftUp.x /= (currentHeight + fontResource.FontHeight); 59 position.leftDown.x /= (currentHeight + fontResource.FontHeight); 60 position.rightUp.x /= (currentHeight + fontResource.FontHeight); 61 position.rightDown.x /= (currentHeight + fontResource.FontHeight); 62 position.leftUp.y /= (currentHeight + fontResource.FontHeight); 63 position.leftDown.y /= (currentHeight + fontResource.FontHeight); 64 position.rightUp.y /= (currentHeight + fontResource.FontHeight); 65 position.rightDown.y /= (currentHeight + fontResource.FontHeight); 66 glyphPositions[i] = position; 67 } 68
69 var glyphColors = new StringModel.GlyphColor[content.Length]; 70 for (int i = 0; i < glyphColors.Length; i++) 71 { 72 glyphColors[i] = new StringModel.GlyphColor( 73 new GLM.vec4(0, 0, 0, 1), 74 new GLM.vec4(0, 0, 0, 1), 75 new GLM.vec4(0, 0, 0, 1), 76 new GLM.vec4(0, 0, 0, 1) 77 ); 78 } 79
80 model.positions = glyphPositions; 81 model.texCoords = glyphTexCoords; 82 model.colors = glyphColors; 83 model.glyphTexture = FontTextureManager.Instance.GetTexture2D(fontResource.FontBitmap); 84
85 return model; 86 } 87 }
标签(Label)
在OpenGL场景中，像Winform里的标签(Label)一样的控件如何实现？如何在UI空间内渲染大量文字？
我之前实现过的"标签"是用point sprite做的，其大小范围有限，最多到256x256个像素。当时不用GLSL+VBO，是因为那会还不知道如何使模型始终朝向camera。
现在在StringModel的基础上，只需借助IUILayout机制即可实现opengl里的标签控件。
1 public class DummyLabel : RendererBase, IUILayout 2 { 3 public StringRenderer renderer; 4
5 /// <summary>
6 ///
7 /// </summary>
8 /// <param name="param">the edges of the viewport to which a SimpleUIRect is bound and determines how it is resized with its parent. 9 /// <para>something like AnchorStyles.Left | AnchorStyles.Bottom.</para></param>
10 /// <param name="content"></param>
11 public DummyLabel(IUILayoutParam param, string content) 12 { 13 this.renderer = new StringRenderer(content.GetModel()); 14
15 IUILayout layout = this; 16 layout.Param = param; 17 } 18
19 protected override void DisposeUnmanagedResources() 20 { 21 this.renderer.Dispose(); 22 } 23
24 #region IUILayout
25
26 public IUILayoutParam Param { get; set; } 27
28 #endregion IUILayout
29
30 protected override void DoInitialize() 31 { 32 this.renderer.Initialize(); 33 } 34
35 protected override void DoRender(RenderEventArgs e) 36 { 37 mat4 projectionMatrix, viewMatrix, modelMatrix; 38 { 39 IUILayout element = this as IUILayout; 40 element.GetMatrix(out projectionMatrix, out viewMatrix, out modelMatrix, null); 41 } 42 this.renderer.mvp = projectionMatrix * viewMatrix * modelMatrix; 43
44 this.renderer.Render(e); 45
46 } 47 }
总结
本文还没有彻底解决血条型文字"在屏幕上大小不变"的问题。