Question

我正在尝试学习OpenGL，这有点令人生畏。为了开始，我试图用它来创建2D图像的一些效果。基本上，我想拍摄一张图像（比如1000px×1000px）并将其分成一个大小相等的网格（比如一个10乘10格），然后单独操纵这些方块（比如转一个方形黑色，翻转另一个，制作屏幕上的另一个“摔倒”等）。我已经关注了一些基本的在线说明（http://blog.jayway.com/2010/12/30/opengl-es-tutorial-for-android-%E2%80%93-part-vi-textures/）如何将纹理映射到一个简单的正方形，但我遇到了将纹理映射到更复杂的多个正方形排列的问题。

1）给定2x2（和更大尺寸）的正方形网格，如何在整个网格上映射单个纹理/图像？也就是说，OpenGL期望（以及以什么顺序）使这个工作的纹理坐标是什么？我似乎无法理解如何在更大的多边形结构上找出“UV”坐标的顺序。

2）由于我最终将变换，旋转等网格的每个单独的正方形，最好是创建网格的每个正方形并单独划分纹理/位图并将每个图像应用于每个广场分开？如果是这样，你对如何有效地将位图分成几部分有任何建议吗？

任何和所有帮助，链接，建议等将不胜感激。我在一个假定支持OpenGL ES 2的Android应用程序中这样做，但我认为大多数OpenGL讨论/概念都是平台无关的。如果可能的话，我不想包含一些大型框架或工具包，因为我需要很多速度和最小尺寸。

Answer 1

从更重要的回复＃2开始，你真的不想做比你绝对需要更多的纹理切换。他们是一个疯狂的性能损失。

回到＃1，你这样做的方式实际上非常简单。您的纹理位于坐标（0,0）到（1,1）的单位平方中。这称为纹理空间坐标，轴分别称为U和V.所以每个都在0到1之间，覆盖整个图像。

现在，当您创建对象时，按顶点（通过顶点缓冲区或立即）创建对象，您可以为每个顶点发送第二组坐标，即UV纹理坐标。您可以使用它将图像“切片”成部分。

执行特定应用程序的最简单方法是获取顶点坐标，将其除以图像长度的长度，然后乘以您正在构建的小方块的长度。一旦你开始旋转你的方块，这显然不会起作用，但也许它可以帮助你更好地可视化过程。

请注意这是完全独立于平台的，您可以对DirectX应用程序使用相同的推理或其他任何原因！

Answer 2

1）我认为您搜索的关键字是“纹理图集”。

一些提示，但你可能会在互联网上找到更好的解释，因为我还在学习:(我使用的是OpenGl 2.1，而且使用的是GLSL 1.2，所以ymmv）顶点着色器有这样的东西：

uniform mat4 projectionMatrix;  
uniform mat4 viewMatrix;  
uniform mat4 modelMatrix;  

attribute vec3 position;
attribute vec2 texcoord;

varying vec2 vertTexCoord;

void main()
{ 
  vertTexCoord = texcoord;
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0f);
}

在你的片段着色器中，你可以这样做：

uniform sampler2D texture;
varying vec2 vertTexCoord;

void main()
{
   gl_FragColor = texture2D(texture, vertTexCoord);
}

然后，例如，如果你想要一个2x2的正方形网格（纹理分为4个部分），你会得到像这样的顶点; （假设正方形是1个单位宽和高）（uv = texcoord，vertex = position）
square1
而右的下一个方格看起来像这样：
square2

有必要记住，虽然顶点坐标可以超过1且低于0，但纹理坐标不能（始终在0和1之间）。

2）我不会分割位图，因为使用纹理图集（复数？）已经非常快了，我怀疑你会获得显着的速度增益（如果有的话）。

我希望我能帮忙！（也很抱歉，我无法直接嵌入图片，请给我代表。所以我将来可以做！：））

如何使用OpenGL将纹理应用于正方形网格

2 个答案: