纹理翻转策略

在上文中我们绘制的图形是翻转的，这和我们在绘制中的坐标系与图片坐标有关，所以我们在实际的开发中需要自己对纹理绘制进行翻转操作。通常使用的方法有以下几种。

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, // 右下
 };
复制代码