由于紋理坐標左下為原點坐標, 所有我們繪制的圖片為倒著的, 接下來介紹幾種翻轉(zhuǎn)方式.
1.通過旋轉(zhuǎn)矩陣進行翻轉(zhuǎn).(這種方式是通過改變頂點, 相當于把畫布翻轉(zhuǎn)了)
首先需要在頂點著色器中創(chuàng)建旋轉(zhuǎn)矩陣的管道
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;//旋轉(zhuǎn)矩陣
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
vec4 vPos = position;
vPos = vPos * rotateMatrix;//每次頂點向量都乘以旋轉(zhuǎn)矩陣得到新的頂點
gl_Position = vPos;
}
接下來創(chuàng)建一個旋轉(zhuǎn)矩陣, 并通過管道傳到頂點著色器.
-(void)rotateTextureImage
{
//注意搬葬,想要獲取shader里面的變量壕探,這里記得要在glLinkProgram后面,后面,后面!
//1. rotate等于shaderv.vsh中的uniform屬性忌怎,rotateMatrix
GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
//2.獲取渲旋轉(zhuǎn)的弧度
float radians = 180 * 3.14159f / 180.0f;
//3.求得弧度對于的sin\cos值
float s = sin(radians);
float c = cos(radians);
//4.因為在3D課程中用的是橫向量炭晒,在OpenGL ES用的是列向量
/*
參考Z軸旋轉(zhuǎn)矩陣
*/
GLfloat zRotation[16] = {
c,-s,0,0,
s,c,0,0,
0,0,1,0,
0,0,0,1
};
//5.設(shè)置旋轉(zhuǎn)矩陣
/*
glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
location : 對于shader 中的ID
count : 個數(shù)
transpose : 轉(zhuǎn)置
value : 指針
*/
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
2. 在解壓圖片時, 將圖片翻轉(zhuǎn)(頂點不改變), 可以自己想象一下.
CGContextTranslateCTM(spriteContext, 0, rect.size.height);//將圖片向下移動圖片高度的距離
CGContextScaleCTM(spriteContext, 1.0, -1.0);//先圍繞x軸翻轉(zhuǎn)上來, 在圍繞y軸翻轉(zhuǎn)一次(里外翻轉(zhuǎn)).
3. 改變紋理采樣坐標(頂點著色器和片元著色器都可以, 由于頂點著色器執(zhí)行次數(shù)小于片元著色器, 所以修改頂點著色器更好, 但是也不用太過于糾結(jié)).
OpenGL要求y軸0.0坐標是在圖片的底部的伙菜,但是圖片的y軸0.0坐標通常在頂部.
我們可以改變頂點數(shù)據(jù)的紋理坐標衍慎,翻轉(zhuǎn)y值(用1減去y坐標)转唉。
我們可以編輯頂點著色器來自動翻轉(zhuǎn)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.直接修改源紋理數(shù)據(jù)
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, // 右下
};
*/