使用GL_TRIANGLE_STRIP绘制四边形图

Question

我试图在OpenGL中使用LWJGL从包含所有字符的纹理图集中绘制一个字符串。

现在我为每个char添加三个顶点到网格，这将由

呈现

GL11.glDrawArrays(GL11.GL_TRIANGLE_STRIP, 0, text.getModel().getRawModel().getVertexCount());

例如，我要渲染字符串＆＃34; Thomas＆＃34;，结束时如下（添加偏移以更好地查看问题）：

正如你所看到的，有一个奇怪的＆＃34; quad＆＃34;每个炭之间我不知道为什么:-( 我认为我每个字符都添加了很多顶点，但我不知道要做得更好......

顶点（2D）：

-0.3333333, 0.5875, 
-0.24800003, 0.5875, 
-0.3333333, 0.25, 
-0.24800003, 0.25, 

-0.11466664, 0.5875, 
-0.029333353, 0.5875, 
-0.11466664, 0.25, 
-0.029333353, 0.25, 

0.10399997, 0.5875, 
0.18933332, 0.5875, 
0.10399997, 0.25, 
0.18933332, 0.25, 

0.32266665, 0.5875, 
0.408, 0.5875, 
0.32266665, 0.25, 
0.408, 0.25, 

0.5413333, 0.5875, 
0.62666667, 0.5875, 
0.5413333, 0.25, 
0.62666667, 0.25, 

0.76, 0.5875, 
0.84533334, 0.5875, 
0.76, 0.25, 
0.84533334, 0.25,

纹理坐标（2D）：

0.23318386, 1.0, 
0.23766816, 1.0, 
0.23318386, 0.0, 
0.23766816, 0.0, 

0.32286996, 1.0, 
0.32735425, 1.0, 
0.32286996, 0.0, 
0.32735425, 0.0, 

0.3542601, 1.0, 
0.35874438, 1.0, 
0.3542601, 0.0, 
0.35874438, 0.0, 

0.34529147, 1.0, 
0.3497758, 1.0, 
0.34529147, 0.0, 
0.3497758, 0.0, 

0.29147983, 1.0, 
0.29596412, 1.0, 
0.29147983, 0.0, 
0.29596412, 0.0, 

0.3721973, 1.0, 
0.37668163, 1.0, 
0.3721973, 0.0, 
0.37668163, 0.0 

Answer 1

看看你如何布置顶点，看起来var unique = _.uniqWith(first, _.isEqual); var result = unique.filter((item) => { if (item.x) return true; var sameA = unique.filter((i) => i.a === item.a); return sameA.length === 1; }); 不起作用。让我们用数字0到24标记顶点。三角形条形拓扑将绘制三角形，如下所示：

$(".answer").html(buttonValues[randomNumber]);

你可能想要的是：

GL_TRIANGLE_STRIP

这可以使用draw triangle 0 1 2 draw triangle 1 2 3 draw triangle 2 3 4 ... draw triangle 20 21 22 draw triangle 21 22 23 拓扑并使用索引缓冲区来完成：

draw triangle 0 1 2
draw triangle 1 2 3

draw triangle 4 5 6
draw triangle 5 6 7

draw triangle 8 9 10
draw triangle 9 10 11

...
...

draw triangle 20 21 22
draw triangle 21 22 23

Answer 2

如果要使用TRIANGLE_STRIP渲染不相交的原型，则需要在不相交的prims之间包含退化（零区域）三角形。您可以通过重复要使其不相交的顶点来执行此操作：

-0.3333333, 0.5875, 
-0.24800003, 0.5875, 
-0.3333333, 0.25,  // real triangle
-0.24800003, 0.25, // real triangle
-0.24800003, 0.25, // ignored degenerate triangle

-0.11466664, 0.5875,  // ignored degenerate triangle
-0.11466664, 0.5875,  // ignored degenerate triangle
-0.029333353, 0.5875, // ignored degenerate triangle
-0.11466664, 0.25,    // real triangle
-0.029333353, 0.25,   // real triangle
-0.029333353, 0.25,   // ignored degenerate triangle
...

Degenrate prims被优化得足以让你无视它们。

但是请注意，渲染不相交的四边形基本上没有任何优势，因为只使用TRIANGLES总共只保存两个顶点，而不管四边形的数量。

当不相交的跳跃＆＃39;不太常见，例如三条带优化的网格。