在OpenGL ES中将不规则形状或其他多边形(漫画,精灵)映射到三角形

Question

我不明白显示精灵映射到OpenGL三角形的概念.

如果OpenGL ES只绘制三角形和点,那么如何显示/绘制非三角形？

为什么映射到三角形的形状不会失真？

解释:

在我看来,将一个马里奥的精灵映射到一个三角形会产生一个扭曲或裁剪的马里奥.在这种情况下,头部会被挤压或看不见.

Answer 1

如果我正确理解了这个问题:你只需将方块分成两个三角形,然后使用纹理坐标相应地划分纹理.如果你做得对,你就会在屏幕上画出1:1的纹理,好像它是一个精灵.(当然你也可以选择旋转和伸展等等.)

0     1  <-- If your square is divided up like this, say, set texcoord
+-----+      for point 0 to be the top left of the sprite; for point 3, the
|\    |      bottom right of the sprite; and correspondingly, for points
| \   |      1 and 2.
|  \  |
|   \ |
|    \|
+-----+
2     3

事实证明,你不会像你期望的那样得到一个压扁的精灵.我想你正在想象从我上面的图片中绘制三角形0-3-2,比如说,以明显的方式绘制,并将顶部扫描线无限挤压到一个点(点0)？但实际上这不会发生,因为点0只有一个纹理坐标,所以(如果第2和第3点被适当地映射),你将只得到精灵的截断部分.

(也就是说,你可以将相同的texcoord分配给两个点,或者让纹理跨越自己,并以错误的方式弄错 - 仍然有足够的空间制造混乱,不要担心.)

这可以在OpenGL编程指南中解释,虽然我学习了这些东西已经多年了,所以我不确定如果你遇到困难会有多大帮助:http://glprogramming.com/red/chapter09.html

Answer 2

很简单，纹理不会扭曲，因为您只会选择三个纹理坐标 - 每个顶点一个。您必须使用上面概述的两个三角形，并“剪裁”纹理的不同部分。

请原谅我在这里以及本文的其余部分对 ASCII 艺术的可怕使用：

  Polygon     Texture        ADB        ACD
  A-----C  |  x-----x  |  x        |  x-----x
  |\    |  |  | ___ |  |  |        |    ___ |
  | \   |  |  |<o.o>|  |  |<o      |     .o>|
  |  \  |  |  | ### |  |  | ##     |      # |
  |   \ |  |  | -|- |  |  | -|-    |        |
  |    \|  |  | / \ |  |  | / \    |        |
  B-----D  |  x-----x  |  x-----x  |        x

你会制作两个三角形 - ADB 和 ACD。点 A 映射到纹理的左上角，B 映射到左下角，C 映射到右上角，D 映射到右下角。如果只映射一个三角形或另一个三角形，则只能得到一半的精灵（或纹理，对于更复杂的形状）。这同样适用于更大或更复杂的多边形。纹理可以是一个统一的部分，但每个顶点的纹理坐标必须以与几何本身相同的方式对其进行切片。

更复杂的例子，一个六边形：

   a   b
    ___
   /   \
f /  .  \ c
  \  g  /
   \___/
  e     d

如果您添加“G”的中点并将其切成六个三角形（ABG、BCG、CDG 等），则必须确保您使用的任何纹理都按坐标进行切片以匹配。如果您只是使用GL_TRIANGLES，这无关紧要，因为最简单的方法是将纹理保留为六边形，但是一旦您开始绘制条带或扇形，如果您不密切跟踪，您就可以翻转、倾斜或复制由于绘制顺序，哪个顶点映射到纹理的哪个部分。

顺便说一句，如果您只关心 2D 屏幕对齐的四边形 - 这通常是精灵的用途 - 使用iPhone 上可用的OES_Draw_Texture扩展，并在获得显着速度提升的同时为自己节省大量心痛。

int rect[4] = {0, 0, 64, 64}; 
glBindTexture(GL_TEXTURE_2D, texMario); 
glTexParameteriv(GL_TEXTURE_2D, GL_TEXTURE_CROP_RECT_OES, rect); 
glDrawTexiOES(playerX, playerY, spriteZ, width, height); 

该rect定义你要剪断出来的纹理坐标（以像素为单位，所以这将是一个64×64的Sprite），然后到实际通话glDrawTexiOES扑通一声它的权利与它的上PlayerX的和playerY左下角的屏幕视图。

天哪，即使我在这里也有“tl;dr”的感觉。我为此道歉。