纹理翻转解析

我们在使用纹理贴图来渲染一张图片的时，在解压缩纹理图像的过程中，画出来的位图原点是从图像的左下角开始的，画出的结果就是倒置的，怎么让它翻转过来呢？这就需要在图片渲染过程中纹理相关的部分处理了。

原图
上下倒置的镜像图

倒置图看起来就像是原图在水面上的倒影，是个上下倒置的镜像图。

1. 修改纹理坐标

首先，顶点坐标是和纹理坐标相对应的。图片角度不对，就依次改变顶点对应的纹理坐标实现翻转。数组中每行最后两列的纹理坐标由：

GLfloat attrArr[] = {
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
    
    0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
    -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
    0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
};

改为

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

这种做法一劳永逸。但是需要一个一个对照着改，很麻烦。如果顶点很多，在修改纹理坐标时也是很费时的。

2.解压图片时翻转

在渲染之前我们需要把png或者jpg之类的图片进行解压缩，而解压缩其实就是重新绘制成位图。在获取图片数据后，可以先把图片翻转，然后再绘制。

使用Quartz中用户空间和设备空间中间的转换矩阵CTM实现。下面的图画的不是太准确，理解就好，不纠结。

CGRect rect = CGRectMake(0, 0, width, height);

CGContextTranslateCTM(bitmapContext, 0, rect.size.height);
CGContextScaleCTM(bitmapContext, 1, -1);

先下移一个图片高度，再针对Y轴做一个镜像。

QQ20190611-095926@2x.png

3. 使用旋转矩阵

创建一个旋转180度的矩阵，通过uniform通道传给顶点着色器。

//1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
//2.获取渲旋转的弧度
float radians = 180 * (M_PI / 180.0f);
   
//3.求得弧度对于的sin\cos值
float s = sin(radians);
float c = cos(radians);
    
//4.定义旋转矩阵
GLfloat zRotation[16] = {
    1,0,0,0,
    s,c,0,0,
    c,-s,0,0,
    0,0,0,1
};
    
//5.设置旋转矩阵
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);

着色器部分把顶点向量和旋转矩阵相乘或得一个旋转后的顶点位置：

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

4.在顶点着色器中修改

用1.0减去纹理坐标的Y值，使y坐标反转。片元着色器会对每个像素进行计算，调用次数很多，这里应该尽量去掉不必要的操作。

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    //varyTextCoord = textCoordinate;
    varyTextCoord = vec2(textCoordinate.x, 1.0 - textCoordinate.y);
    gl_Position = position;
}

5.在片元着色器中修改

同样的方法也可以在顶点着色器中使用。顶点数据相对较少，不过也不建议写不必要的操作。

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
//    gl_FragColor = texture2D(colorMap, varyTextCoord);
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x, 1.0 - varyTextCoord.y));
}