獲取示例代碼
紋理通常來說就是一張圖片，我們為每一個頂點指定紋理坐標，然后就可以在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生成出來的保持了一致。
