OpenGL ES之纹理翻转解决策略

原因分析

• 在前面的文章：OpenGL ES之Swift使用GLSL语言渲染图片的显示和OpenGL ES之GLSL渲染图片显示的整体流程中，我们都对图片纹理做了翻转的处理，不做处理，最后看到的图片显示将是一张倒着的图片。
• 为什么会出现这种情况呢？这是因为OpenGL要求y轴0.0坐标是在图片的底部的（屏幕左上角），但是图片的y轴0.0坐标通常在顶部（屏幕左下角）：我们可以改变顶点数据的纹理坐标，翻转y值（用1减去y坐标），也可以编辑顶点着色器来自动翻转y坐标，替换TexCoord的值为TexCoord = vec2(texCoord.x, 1.0f - texCoord.y);。

解决策略

一、旋转矩阵来翻转图形，不翻转纹理

• 在顶点着色器 shaderv.vsh 中，我们传进了一个旋转矩阵 rotateMatrix，因为矩阵传进来就不会再修改了，所以我们用 uniform 来修饰，4行4列的矩阵 mat4。然后用顶点坐标 vPos 乘以这个 rotateMatrix 旋转矩阵，让每一个顶点都应用旋转变化；
• 让图形顶点坐标旋转180°，而纹理保持原状；
• vPos * rotateMatrix，顺序不能反过来，因为顶点是1行4列，旋转矩阵是4行4列；
• 在设顶点坐标的时候：

	//  rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    // 获取渲旋转的弧度，度数转弧度
    float radians = 180 * 3.14159f / 180.0f;
    // 求得弧度对于的 sin 和 cos 值
    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, 0, 0, 1.0
    };
    
    /* 设置旋转矩阵
     * glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     * location : 对于shader 中的ID
     * count : 个数
     * transpose : 是否需要转置
     * value : 指针
     */
   glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);

• 在shaderv.vsh 中修改：

	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;
	}

二、在解压图片时，将图片源文件翻转

• 对图片进行平移缩放操作以后，再重新绘制

	CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);

• 从图片加载纹理如下：

	// 将 UIImage 转换为 CGImageRef
	CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
	
	// 读取图片的大小，宽和高
	size_t width = CGImageGetWidth(spriteImage);
	size_t height = CGImageGetHeight(spriteImage);
	// 获取图片字节数 宽*高*4（RGBA）
	GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
	
	// 创建上下文
	CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
	// 在CGContextRef上将图片绘制出来
	CGRect rect = CGRectMake(0, 0, width, height);
	// 使用默认方式绘制
	CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), spriteImage);
	// 图片翻转后绘制
	CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
	CGContextTranslateCTM(spriteContext, 0, rect.size.height);
	CGContextScaleCTM(spriteContext, 1.0, -1.0);
	CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
	CGContextDrawImage(spriteContext, rect, spriteImage); 
	
	// 画图完毕就释放上下文
	CGContextRelease(spriteContext);
	// 绑定纹理到默认的纹理ID
	glBindTexture(GL_TEXTURE_2D, 0);

三、修改片元着色器中的纹理坐标

• 只是修改了片元着色器的代码，x 坐标不动，将 y 坐标改为 1-y，这样就达到了翻转的效果。

	varying lowp vec2 varyTextCoord;
	uniform sampler2D colorMap;
	void main() {
	    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
	}

四、修改顶点着色器，纹理坐标

• 在顶点着色器传入的时候，就翻转。相比上面的片元着色器，执行次数要少很多，有几个顶点执行几次。

	attribute vec4 position;
	attribute vec2 textCoordinate;
	varying lowp vec2 varyTextCoord;
	
	void main() {
	    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
	    gl_Position = position;
	}

五、直接从源纹理坐标数据修改

     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, // 右下
     };
     */