由于纹理坐标左下为原点坐标, 所有我们绘制的图片为倒着的, 接下来介绍几种翻转方式.
1.通过旋转矩阵进行翻转.(这种方式是通过改变顶点, 相当于把画布翻转了)
首先需要在顶点着色器中创建旋转矩阵的管道
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
{
//注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
//1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
//2.获取渲旋转的弧度
float radians = 180 * 3.14159f / 180.0f;
//3.求得弧度对于的sin\cos值
float s = sin(radians);
float c = cos(radians);
//4.因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
/*
参考Z轴旋转矩阵
*/
GLfloat zRotation[16] = {
c,-s,0,0,
s,c,0,0,
0,0,1,0,
0,0,0,1
};
//5.设置旋转矩阵
/*
glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
location : 对于shader 中的ID
count : 个数
transpose : 转置
value : 指针
*/
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
2. 在解压图片时, 将图片翻转(顶点不改变), 可以自己想象一下.
CGContextTranslateCTM(spriteContext, 0, rect.size.height);//将图片向下移动图片高度的距离
CGContextScaleCTM(spriteContext, 1.0, -1.0);//先围绕x轴翻转上来, 在围绕y轴翻转一次(里外翻转).
3. 改变纹理采样坐标(顶点着色器和片元着色器都可以, 由于顶点着色器执行次数小于片元着色器, 所以修改顶点着色器更好, 但是也不用太过于纠结).
OpenGL要求y轴0.0坐标是在图片的底部的，但是图片的y轴0.0坐标通常在顶部.
我们可以改变顶点数据的纹理坐标，翻转y值（用1减去y坐标）。
我们可以编辑顶点着色器来自动翻转y坐标，替换TexCoord的值为TexCoord = vec2(texCoord.x, 1.0f - texCoord.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;
}
4.直接修改源纹理数据
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, // 右下
};
*/
