从图片加载纹理
首先要介绍如何从图片加载纹理
- (GLuint)setupTexture:(NSString *)fileName {
//1、将 UIImage 转换为 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
//判断图片是否获取成功
if (!spriteImage) {
NSLog(@"Failed to load image %@", fileName);
exit(1);
}
//2、读取图片的大小，宽和高
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
//3.获取图片字节数 宽*高*4（RGBA）
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
//4.创建上下文
/*
参数1：data,指向要渲染的绘制图像的内存地址
参数2：width,bitmap的宽度，单位为像素
参数3：height,bitmap的高度，单位为像素
参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
参数6：colorSpace,bitmap上使用的颜色空间 kCGImageAlphaPremultipliedLast：RGBA
*/
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
//5、在CGContextRef上--> 将图片绘制出来
/*
CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
CGContextDrawImage
参数1：绘图上下文
参数2：rect坐标
参数3：绘制的图片
*/
CGRect rect = CGRectMake(0, 0, width, height);
//6.使用默认方式绘制
CGContextDrawImage(spriteContext, rect, spriteImage);
//7、画图完毕就释放上下文
CGContextRelease(spriteContext);
//8、绑定纹理到默认的纹理ID（
glBindTexture(GL_TEXTURE_2D, 0);
//9.设置纹理属性
/*
参数1：纹理维度
参数2：线性过滤、为s,t坐标设置模式
参数3：wrapMode,环绕模式
*/
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);
float fw = width, fh = height;
//10.载入纹理2D数据
/*
参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
参数2：加载的层次，一般设置为0
参数3：纹理的颜色值GL_RGBA
参数4：宽
参数5：高
参数6：border，边界宽度
参数7：format
参数8：type
参数9：纹理数据
*/
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
//11.释放spriteData
free(spriteData);
return 0;
}
然后便会显示以下画面
问题就在于CGContextDrawImage使用的是Core Graphics框架，坐标系与UIKit 不一样，UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角，所以简单地使用CGContextDrawImage便会导致图片翻转，下面介绍5种解决方案。
方案一：顶点着色器使用旋转矩阵
- 首先顶点着色器代码中添加旋转矩阵：
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix; //旋转矩阵
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = vPos * rotateMatrix; //顶点乘以旋转矩阵便能翻转纹理
gl_Position = vPos;
}
- 然后在客户端代码中传入实际的旋转矩阵
- (void)rotateTextureImage {
//注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
//1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
//2.获取渲旋转的弧度
float radians = 180 * 3.14159f / 180.0f;
//3.求得弧度对于的sin\cos值
float s = sin(radians);
float c = cos(radians);
//4.在OpenGL ES用的是列向量
/*
参考Z轴旋转矩阵
*/
GLfloat zRotation[16] = {
c,-s,0,0,
s,c,0,0,
0,0,1,0,
0,0,0,1
};
//5.设置旋转矩阵
/*
glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
location : 对于shader 中的ID
count : 个数
transpose : 转置
value : 指针
*/
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
方案二：从图片加载纹理时改变纹理
从图片加载纹理的代码放在上面了，只需要将其中的CGContextDrawImage改为以下代码即可：
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextDrawImage(spriteContext, rect, spriteImage);
方案三：片元着色器改变纹理坐标
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y)); //(1-纵坐标)便可以翻转纹理
}
但是每个像素都会执行一次片元着色器，虽然对GPU来说可能也只是一件小事，但是由此可以衍生出性能更好的方案四。
方案四：顶点着色器改变纹理坐标
以上面的图片举例，只需要绘制2个三角形，总共6个顶点，所以顶点着色器只需要执行6次，而片元着色器需要执行n次（n=像素数量），大大节省了执行次数。
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x, 1.0-textCoordinate.y);
gl_Position = position;
}
方案五：直接改变输入的纹理坐标
这个方案是最无脑最直接的，首先看下正常的输入顶点纹理坐标
//前3个是顶点坐标，后2个是纹理坐标
GLfloat attrArr[] =
{
1, -0.6f, -1.0f, 1.0f, 0.0f,
-1, 0.6f, -1.0f, 0.0f, 1.0f,
-1, -0.6f, -1.0f, 0.0f, 0.0f,
1, 0.6f, -1.0f, 1.0f, 1.0f,
-1, 0.6f, -1.0f, 0.0f, 1.0f,
1, -0.6f, -1.0f, 1.0f, 0.0f,
};
接下来是处理过后翻转成正常图片的输入顶点纹理坐标：
GLfloat attrArr[] =
{
1, -0.6f, -1.0f, 1.0f, 1.0f,
-1, 0.6f, -1.0f, 0.0f, 0.0f,
-1, -0.6f, -1.0f, 0.0f, 1.0f,
1, 0.6f, -1.0f, 1.0f, 0.0f,
-1, 0.6f, -1.0f, 0.0f, 0.0f,
1, -0.6f, -1.0f, 1.0f, 1.0f,
};
