在上文中我们绘制的图形是翻转的,这和我们在绘制中的坐标系与图片坐标有关,所以我们在实际的开发中需要自己对纹理绘制进行翻转操作。通常使用的方法有以下几种。
1、旋转矩阵翻转图形,不翻转纹理。
在操作使用,我们向我们的顶点着色器传入一个旋转矩阵,让图形顶点坐标旋转180度,纹理保持原状。
// 顶点着色器代码实现
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
{
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
获取渲旋转的弧度
float radians = 180 * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
GLfloat zRotation[16] = {
c,-s,0,0,
s,c,0,0,
0,0,1,0,
0,0,0,1
};
glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
2、解压图片时,将图片源文件翻转
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, rect, spriteImage);
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextDrawImage(spriteContext, rect, spriteImage);
3、修改片元着色器纹理坐标
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0- varyTextCoord.y));
}
4、修改顶点着色器纹理坐标
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
5、直接在外界顶点数组修改纹理对应关系
// 原顶点与纹理坐标关系
GLfloat vertexData[] = {
1, -0.5, 0.0f, 1.0f, 0.0f, //右下
1, 0.5, -0.0f, 1.0f, 1.0f, //右上
-1, 0.5, 0.0f, 0.0f, 1.0f, //左上
1, -0.5, 0.0f, 1.0f, 0.0f, //右下
-1, 0.5, 0.0f, 0.0f, 1.0f, //左上
-1, -0.5, 0.0f, 0.0f, 0.0f, //左下
};
// 修改后顶点与纹理坐标关系
GLfloat attrArr[] =
{
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, //右下
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, // 左下
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, // 右上
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, // 左上
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, // 右下
};