获取示例代码
纹理通常来说就是一张图片，我们为每一个顶点指定纹理坐标，然后就可以在Shader中获取相应的纹理像素点颜色了。
纹理坐标
首先解释一下什么是纹理坐标。把一张图的左上角定为0，0点，长宽都定义为1，剩余四个点的坐标就会如下图所示。这样就构成了纹理坐标系统。
一般使用uv来表示纹理坐标，uv是一个二维向量(u,v)，u和v的取值从0到1。我在代码中为每个顶点数据增加了2个GLFloat来表示uv的值。下面是X轴上平面的的代码。
- (void)drawXPlanes {
static GLfloat triangleData[] = {
// X轴0.5处的平面
0.5, -0.5, 0.5f, 1, 0, 0, 0, 0,
0.5, -0.5f, -0.5f, 1, 0, 0, 0, 1,
0.5, 0.5f, -0.5f, 1, 0, 0, 1, 1,
0.5, 0.5, -0.5f, 1, 0, 0, 1, 1,
0.5, 0.5f, 0.5f, 1, 0, 0, 1, 0,
0.5, -0.5f, 0.5f, 1, 0, 0, 0, 0,
// X轴-0.5处的平面
-0.5, -0.5, 0.5f, -1, 0, 0, 0, 0,
-0.5, -0.5f, -0.5f, -1, 0, 0, 0, 1,
-0.5, 0.5f, -0.5f, -1, 0, 0, 1, 1,
-0.5, 0.5, -0.5f, -1, 0, 0, 1, 1,
-0.5, 0.5f, 0.5f, -1, 0, 0, 1, 0,
-0.5, -0.5f, 0.5f, -1, 0, 0, 0, 0,
};
[self bindAttribs:triangleData];
glDrawArrays(GL_TRIANGLES, 0, 12);
}
我们分析一下X轴0.5处的平面的顶点数据。
0.5, -0.5, 0.5, 1, 0, 0, 0, 0,
0.5, -0.5, -0.5, 1, 0, 0, 0, 1,
0.5, 0.5, -0.5, 1, 0, 0, 1, 1,
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, 0,
第一个三角形uv和顶点对应关系如下。
0.5, -0.5, 0.5点对应的uv是0, 0，
0.5, -0.5, -0.5点对应的uv是0, 1，
0.5, 0.5, -0.5点对应的uv是1, 1。
第二个三角形uv和顶点对应关系如下。
0.5, 0.5, -0.5点对应的uv是1, 1，
0.5, 0.5, 0.5点对应的uv是1, 0，
0.5, -0.5, 0.5点对应的uv是0, 0。
这两个三角形的uv分别对应纹理的两个三角部分，合在一起刚好是完整的纹理。
在3D建模中，这种顶点和
uv的映射关系是要通过建模工具去完成的，只有为每个顶点配置了合适的uv，才能让贴图按照你想要的方式显示出来。
然后增加绑定uv属性的代码。
- (void)bindAttribs:(GLfloat *)triangleData {
// 启用Shader中的两个属性
// attribute vec4 position;
// attribute vec4 color;
GLuint positionAttribLocation = glGetAttribLocation(self.shaderProgram, "position");
glEnableVertexAttribArray(positionAttribLocation);
GLuint colorAttribLocation = glGetAttribLocation(self.shaderProgram, "normal");
glEnableVertexAttribArray(colorAttribLocation);
GLuint uvAttribLocation = glGetAttribLocation(self.shaderProgram, "uv");
glEnableVertexAttribArray(uvAttribLocation);
// 为shader中的position和color赋值
// glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
// indx: 上面Get到的Location
// size: 有几个类型为type的数据，比如位置有x,y,z三个GLfloat元素，值就为3
// type: 一般就是数组里元素数据的类型
// normalized: 暂时用不上
// stride: 每一个点包含几个byte，本例中就是6个GLfloat，x,y,z,r,g,b
// ptr: 数据开始的指针，位置就是从头开始，颜色则跳过3个GLFloat的大小
glVertexAttribPointer(positionAttribLocation, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (char *)triangleData);
glVertexAttribPointer(colorAttribLocation, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (char *)triangleData + 3 * sizeof(GLfloat));
glVertexAttribPointer(uvAttribLocation, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(GLfloat), (char *)triangleData + 6 * sizeof(GLfloat));
}
将顶点数据最后两个GLFloat绑定到Shader的uv属性上。
生成纹理
我们有了坐标，那么纹理数据怎么获取呢？GLKit提供了非常便捷的方式为我们生成纹理。
- (void)genTexture {
NSString *textureFile = [[NSBundle mainBundle] pathForResource:@"texture" ofType:@"jpg"];
NSError *error;
self.diffuseTexture = [GLKTextureLoader textureWithContentsOfFile:textureFile options:nil error:&error];
}
diffuseTexture是GLKTextureInfo类型的，它的属性name将会被用来和OpenGL系统进行交互。
@property (strong, nonatomic) GLKTextureInfo *diffuseTexture;
绑定和使用纹理
有了纹理，接下来就要把它传递给Shader，前面我们已经把每个顶点的纹理坐标传递给了Vertex Shader。在Vertex Shader中新增了属性attribute vec2 uv;，以及varying vec2 fragUV;。Vertex Shader做的事情就是把uv直接传递给Fragment Shader，让它去处理。
attribute vec4 position;
attribute vec3 normal;
attribute vec2 uv;
uniform float elapsedTime;
uniform mat4 projectionMatrix;
uniform mat4 cameraMatrix;
uniform mat4 modelMatrix;
varying vec3 fragNormal;
varying vec2 fragUV;
void main(void) {
mat4 mvp = projectionMatrix * cameraMatrix * modelMatrix;
fragNormal = normal;
fragUV = uv;
gl_Position = mvp * position;
}
Fragment Shader中增加了uniform sampler2D diffuseMap;，sampler2D是纹理的参数类型。然后将diffuseMap在纹理坐标fragUV上的像素颜色作为基本色vec4 materialColor = texture2D(diffuseMap, fragUV);。texture2D函数用来采样纹理在某个uv坐标下的颜色，返回值类型是vec4。
precision highp float;
varying vec3 fragNormal;
varying vec2 fragUV;
uniform float elapsedTime;
uniform vec3 lightDirection;
uniform mat4 normalMatrix;
uniform sampler2D diffuseMap;
void main(void) {
vec3 normalizedLightDirection = normalize(-lightDirection);
vec3 transformedNormal = normalize((normalMatrix * vec4(fragNormal, 1.0)).xyz);
float diffuseStrength = dot(normalizedLightDirection, transformedNormal);
diffuseStrength = clamp(diffuseStrength, 0.0, 1.0);
vec3 diffuse = vec3(diffuseStrength);
vec3 ambient = vec3(0.3);
vec4 finalLightStrength = vec4(ambient + diffuse, 1.0);
vec4 materialColor = texture2D(diffuseMap, fragUV);
gl_FragColor = finalLightStrength * materialColor;
}
回到OC代码。将我们生成的纹理绑定到uniform diffuseMap上。
// 绑定纹理
GLuint diffuseMapUniformLocation = glGetUniformLocation(self.shaderProgram, "diffuseMap");
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, self.diffuseTexture.name);
glUniform1i(diffuseMapUniformLocation, 0);
绑定纹理的流程是：
- 激活纹理的某个通道
glActiveTexture(GL_TEXTURE0);,OpenGL ES中最多可以激活8个通道。通道0是默认激活的，所以本例中这一句也可以不写。 - 绑定生成的纹理到
GL_TEXTURE_2D，glBindTexture(GL_TEXTURE_2D, self.diffuseTexture.name);，注意这里是绑定到GL_TEXTURE_2D而不是GL_TEXTURE0。 - 将0传递给
uniformdiffuseMap,如果激活的是GL_TEXTURE1就传递1，以此类推。
到此，纹理的基本使用方法就介绍完了，效果如下。
补充：使用OpenGL函数生成纹理
除了使用GLKit生成纹理之外，还可以直接使用OpenGL生成纹理。
- 首先将图片的数据以RGBA的形式导出。
- 使用
glGenTextures生成纹理，这里生成的纹理就相当于上面说到的self.diffuseTexture.name。 - 使用
glBindTexture绑定纹理到GL_TEXTURE_2D。 - 使用
glTexImage2D写图片数据，我们的图片数据已经统一导出成RGBA格式了，所以颜色格式参数使用GL_RGBA。每个颜色组件参数使用GL_UNSIGNED_BYTE，就是说R，G，B，A每个数据各占一个字节的大小。 - 使用
glTexParameteri设置采样方式和重复方式，每个方式具体的效果大家可以自行修改例子观察一下。重复方式主要用于uv超出0到1的场景。 -
glBindTexture(GL_TEXTURE_2D, 0);是为了清空GL_TEXTURE_2D绑定的数据，可以把GL_TEXTURE_2D理解为一个工作台，你处理完了你的事情需要把工作台清理干净。
- (void)genTextureWithGLCommands {
UIImage *img = [UIImage imageNamed:@"texture.jpg"];
// 将图片数据以RGBA的格式导出到textureData中
CGImageRef imageRef = [img CGImage];
size_t width = CGImageGetWidth(imageRef);
size_t height = CGImageGetHeight(imageRef);
GLubyte *textureData = (GLubyte *)malloc(width * height * 4);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
NSUInteger bytesPerPixel = 4;
NSUInteger bytesPerRow = bytesPerPixel * width;
NSUInteger bitsPerComponent = 8;
CGContextRef context = CGBitmapContextCreate(textureData, width, height,
bitsPerComponent, bytesPerRow, colorSpace,
kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
CGColorSpaceRelease(colorSpace);
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef);
CGContextRelease(context);
// 生成纹理
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (GLsizei)width, (GLsizei)height, 0, GL_RGBA, GL_UNSIGNED_BYTE, textureData);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glBindTexture(GL_TEXTURE_2D, 0);
self.diffuseTextureWithGLCommands = texture;
}
注意，作为纹理的图片的尺寸最好是2的n次方，比如1024，512。一方面提高性能，另一方面不是所有的3D图形处理系统都支持非2的n次方尺寸的纹理。
纹理坐标系的补充
本文的纹理坐标系是使用GLKTextureLoader加载纹理得出的默认坐标系，如果你想要在竖直方向翻转坐标系，可以使用可选项GLKTextureLoaderOriginBottomLeft，将它设置为YES生成纹理。这样(0,0)点就是在左下角，(1，1) 点在右上角。代码如下 。
self.diffuseTexture = [GLKTextureLoader textureWithContentsOfFile:textureFile options:@{GLKTextureLoaderOriginBottomLeft: @(YES)} error:&error];
这里感谢@史前图腾同学的提醒。
关于genTextureWithGLCommands方法生成出来的纹理坐标系
如果你使用gl系列方法自己生成纹理，默认纹理坐标应该是(0,0)点在左下角，(1，1) 点在右上角，但是CGContextDrawImage方法会把图片上下颠倒，所以genTextureWithGLCommands生成出来的纹理坐标系恰好和GLKTextureLoader生成出来的保持了一致。
