纹理翻转解析
我们在使用纹理贴图来渲染一张图片的时，在解压缩纹理图像的过程中，画出来的位图原点是从图像的左下角开始的，画出的结果就是倒置的，怎么让它翻转过来呢？这就需要在图片渲染过程中纹理相关的部分处理了。
原图
上下倒置的镜像图
倒置图看起来就像是原图在水面上的倒影，是个上下倒置的镜像图。
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));
}
网友评论