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



我正在尝试学习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讨论/概念是平台无关的。如果可能的话,我不想包含一些大型框架或工具包来实现这一点,因为我想要更快的速度和最小的大小。

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

回到第一条,你这样做的方式实际上是非常直接的。你的纹理位于坐标(0,0)到(1,1)的单位正方形中。这称为纹理空间坐标,坐标轴分别称为U和V。所以每一个都在0到1之间,覆盖整个图像。

现在,当你创建你的对象,顶点逐顶点(通过顶点缓冲或立即),你可以发送第二组坐标,UV纹理坐标,为每个顶点。你可以用它把你的图像"切片"成几个部分。

完成特定应用程序的最简单方法是取顶点坐标,将其除以图像长度的长度,然后乘以您正在构建的小正方形的长度。当你开始旋转方块时,这显然是行不通的,但也许它会帮助你更好地想象这个过程。

注意这是完全独立于平台的,你可以对DirectX应用程序或其他应用程序使用相同的推理!

1)我想你搜索的关键字是"Texture atlas"

一些提示,但你可能会在互联网上找到更好的解释,因为我还在学习:(我使用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)我不会分割位图,因为使用纹理地图集(复数?)已经相当快了,我怀疑你会获得显著的速度增益(如果有的话)。

希望我能帮上忙!(也很抱歉,我不能直接嵌入图像,请给我代表,以便我以后可以这样做!):))

最新更新