iOS开发学习OpenGL ES系列 -- 纹理

上一篇通过重新定义顶点坐标，我们绘制了一个立方体，表面设置为rgb颜色。在实际的开发中，很多3D模型都是非常漂亮的，那是由于有各种漂亮贴图的缘故，这一篇在前面的学习基础上，增加物体的表面贴图。使得物体看起来更加自然。

纹理是一个用来保存图像颜色元素值的OpenGL ES缓存。可以使用任何图像生成纹理缓存，使用纹理之前需要先加载图片生成纹理。然后指定纹理坐标才可以在着色器中获取相应的纹理像素点颜色了。

首先看一下纹理坐标。

纹理坐标系有一个命名为S和T的2D轴。在一个纹理中无论有多少个纹素，纹理的尺寸在S轴T轴上永远是在0.0到1.0。

在每个顶点的X、Y、Z坐标被转换成视口坐标系后，GPU会设置转换生成的三角形内的每个像素颜色。转换几何形状数据为帧缓存中的颜色像素的渲染步骤叫做点阵化，每个颜色像素叫做片元。当OpenGL ES没有使用纹理时，GPU会根据包含该片元的对象的顶点的颜色来计算每个片元的颜色。当设置了使用纹理后，GPU会根据在当前绑定的纹理缓存中的纹素来计算每个片元的颜色。

程序需要指定怎么对齐纹理和顶点，以便让GPU知道每个片元的颜色由哪些纹素决定。这个对齐叫做映射，是通过扩展每个顶点保存的数据来实现的：除来X、Y、Z坐标，每个顶点还给出了U和V坐标值。每个U坐标会映射顶点在视口中的最终位置到纹理中的沿着S轴的一个位置。V坐标映射到T轴。纹理映射到转换后的顶点

每个顶点的U和V坐标会附加到每个顶点的视口坐标系中的最终位置。

我们修改原来的顶点坐标，并扩充出U、V坐标值。

static GLfloat vertices[] = {
   
    // X轴+
    0.5,  0.5, -0.5,  1, 0, 0,  1, 1,
    0.5, -0.5, -0.5,  1, 0, 0,  1, 0,
    0.5,  0.5,  0.5,  1, 0, 0,  0, 1,
    0.5,  0.5,  0.5,  1, 0, 0,  0, 1,
    0.5, -0.5,  0.5,  1, 0, 0,  0, 0,
    0.5, -0.5, -0.5,  1, 0, 0,  1, 0,
    
    // X轴-
   -0.5,  0.5, -0.5,  1, 0, 0,  0, 1,
   -0.5, -0.5, -0.5,  1, 0, 0,  0, 0,
   -0.5, -0.5,  0.5,  1, 0, 0,  1, 0,
   -0.5, -0.5,  0.5,  1, 0, 0,  1, 0,
   -0.5,  0.5,  0.5,  1, 0, 0,  1, 1,
   -0.5,  0.5, -0.5,  1, 0, 0,  0, 1,
    
    // Y轴+
    -0.5,  0.5, -0.5,  0, 1, 0, 0, 0,
    -0.5,  0.5,  0.5,  0, 1, 0, 1, 0,
     0.5,  0.5,  0.5,  0, 1, 0, 1, 1,
     0.5,  0.5,  0.5,  0, 1, 0, 1, 1,
     0.5,  0.5, -0.5,  0, 1, 0, 0, 1,
    -0.5,  0.5, -0.5,  0, 1, 0, 0, 0,
    
    // Y轴-
    -0.5, -0.5, -0.5,  0, 1, 0, 0, 0,
    -0.5, -0.5,  0.5,  0, 1, 0, 1, 0,
     0.5, -0.5,  0.5,  0, 1, 0, 1, 1,
     0.5, -0.5,  0.5,  0, 1, 0, 1, 1,
     0.5, -0.5, -0.5,  0, 1, 0, 0, 1,
    -0.5, -0.5, -0.5,  0, 1, 0, 0, 0,
    
    // Z轴+
    -0.5,  0.5,  0.5,  0, 0, 1, 0, 1,
    -0.5, -0.5,  0.5,  0, 0, 1, 0, 0,
     0.5, -0.5,  0.5,  0, 0, 1, 1, 0,
     0.5, -0.5,  0.5,  0, 0, 1, 1, 0,
     0.5,  0.5,  0.5,  0, 0, 1, 1, 1,
    -0.5,  0.5,  0.5,  0, 0, 1, 0, 1,
    
    // Z轴-
    -0.5,  0.5, -0.5,  0, 0, 1, 0, 1,
    -0.5, -0.5, -0.5,  0, 0, 1, 0, 0,
     0.5, -0.5, -0.5,  0, 0, 1, 1, 0,
     0.5, -0.5, -0.5,  0, 0, 1, 1, 0,
     0.5,  0.5, -0.5,  0, 0, 1, 1, 1,
    -0.5,  0.5, -0.5,  0, 0, 1, 0, 1,
};

每个面上的每个三角形的每个顶点指定纹理坐标点。如下图这样：

坐标定义好之后需要发送顶点数据到着色器，所以着色器代码需要添加接受属性：

// 接受uv值
attribute vec2 uv;

// 输出到片段着色器
varying vec2 fragUV;

然后启用shader中的uv属性

GLuint uvAttribLocation = glGetAttribLocation(program, "uv");
glEnableVertexAttribArray(uvAttribLocation);

为uv指定数据读取规范：

glVertexAttribPointer(uvAttribLocation, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), NULL + 6 * sizeof(GLfloat));

指定了纹理坐标，我们还需要生成纹理并且绑定到着色器属性上，才能使用。

先看一下生成纹理，可以使用GLKit提供的生成方法：

// 读取bundle文件
NSString *textureFile = [[NSBundle mainBundle] pathForResource:@"wall" ofType:@"jpg"];
    
// 生成GLKTextureInfo对象
texture = [GLKTextureLoader textureWithContentsOfFile:textureFile options:nil error:nil];

生成纹理之后需要传递到shader中进行绑定。我们在片段着色器中添加uniform sampler2D texture,其中sampler2D是纹理参数类型。然后通过texture2D函数采样fragUV坐标下的texture像素颜色。返回值赋值给gl_FragColor：

precision highp float;

varying lowp vec2 fragUV;
uniform sampler2D texture;

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

重新定义好了fragment shader，我们回到项目中进行纹理绑定：

// 绑定纹理到GL_TEXTURE_2D
glBindTexture(GL_TEXTURE_2D, texture.name);

// 获取texture位置
GLuint textureUniformLocation = glGetUniformLocation(program, "texture");

// 将0传递给texture
glUniform1i(textureUniformLocation, 0);

OpenGL ES中可以开启8个通道，通道0是默认开启，这里我们只设置一层纹理。所以不需要再开启更多通道，直接将0传递给textureUniformLocation即可。

到这立方体的纹理已经设置好了，看下最终效果： cube.gif

补充:
大部分的OpenGL ES实现要么需要、要么受益于使用尺寸为2的幂的纹理。本例中的图片为512x512，边长均为2的n次幂，这个尺寸符合OpenGL ES的要求。一个4x64的纹理是有效的，一个128x128的纹理可以工作良好。一个1x64的纹理也可以。一个200x200的纹理要么不工作，要么根据使用的OpenGL ES版本在渲染时导致效率低下。

参考：OpenGL ES应用开发实践指南 iOS卷