上篇介绍到如何使用GLSL加载纹理，加载完成后会发现纹理是颠倒的状态。下面我们就会介绍出现颠倒问题的原因和几种解决方案。
纹理颠倒的原因
出现颠倒问题的根本原因是纹理坐标的原点和屏幕原点不一致造成。屏幕的坐标原点（0,0）在左上角，而纹理的坐标原点(0,0)在左下角。
解决方案
1. 使用矩阵翻转
-(void)rotateTextureImage
{
//注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
//1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
GLuint scale = glGetUniformLocation(self.myPrograme, "scaleMatrix");
//2.获取渲旋转的弧度
float radians = 180 * 3.14159f / 180.0f;
//3.求得弧度对于的sin\cos值
float s = sin(radians);
float c = cos(radians);
//4.因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
/*
参考Z轴旋转矩阵
*/
GLfloat zRotation[16] = {
c,s,0,0,
-s,c,0,0,
0,0,1,0,
0,0,0,1
};
GLfloat scaleMatrix[16] = {
-1,0,0,0,
0,1,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);
glUniformMatrix4fv(scale, 1, GL_FALSE, scaleMatrix);
}
- vertexShader代码
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
uniform mat4 scaleMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = rotateMatrix * scaleMatrix * position;
gl_Position = vPos;
}
- vertexShader 中GLSL代码（另一种）不使用scaleMatrix
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
uniform mat4 rotateMatrix;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = rotateMatrix * position;
vPos *= vec4(-1, 1, 1, 1);
gl_Position = vPos;
}
2. 纹理读取时，翻转绘图上下文
- 在图片加载纹理方法中
//4.创建上下文
/*
参数1：data,指向要渲染的绘制图像的内存地址
参数2：width,bitmap的宽度，单位为像素
参数3：height,bitmap的高度，单位为像素
参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
参数6：CGColorSpaceRef,colorSpace,bitmap上使用的颜色空间
参数7：bitmapInfo,- 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);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);//向x,平移0,向y平移rect.size.height
CGContextScaleCTM(spriteContext, 1.0, -1.0); //x,缩放1.0，y,缩放-1.0
//6.使用默认方式绘制
CGContextDrawImage(spriteContext, rect, spriteImage);
- 关键代码
CGContextTranslateCTM(spriteContext, 0, rect.size.height);//向x,平移0,向y平移rect.size.height
CGContextScaleCTM(spriteContext, 1.0, -1.0); //x,缩放1.0，y,缩放-1.0
3. 翻转verTexShader代码中gl_Position
- 方法一
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos *= vec4(1, -1, 1, 1);
gl_Position = vPos;
}
- 方法二
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
gl_Position = vec4(position.x, - position.y,1,1);
}
4.改变vertexShader中纹理坐标
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0 -textCoordinate.y);
gl_Position = position;
}
5.改变fragShader中纹理坐标
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0 -varyTextCoord.y));
}
6.修改每个顶点的纹理坐标(顶点与纹理映射关系)
//6.设置顶点、纹理坐标
//前3个是顶点坐标，后2个是纹理坐标
//修改前的
GLfloat attrArr[] =
{
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,//1,1
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,//0,0
-0.5f, -0.5f, -1.0f, 0.0f, 0.0f,//0,1
0.5f, 0.5f, -1.0f, 1.0f, 1.0f,//1,0
-0.5f, 0.5f, -1.0f, 0.0f, 1.0f,//0,0
0.5f, -0.5f, -1.0f, 1.0f, 0.0f,//1,1
};
//修改后
GLfloat attrArr[] =
{
0.5f, -0.5f, -1.0f, 1.0f, 1.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 0.0f,
-0.5f, -0.5f, -1.0f, 0.0f, 1.0f,
0.5f, 0.5f, -1.0f, 1.0f, 0.0f,
-0.5f, 0.5f, -1.0f, 0.0f, 0.0f,
0.5f, -0.5f, -1.0f, 1.0f, 1.0f,
};
以上六种方案，都可以解决纹理颠倒的问题。
