通過上一個案例GLSL加載圖片,我們可以看到，最終加載的圖片的倒立的，那么我們怎么讓他翻轉(zhuǎn)過來呢？

通常在OpenGL中，圖片的原點在左下角，但是實際上一張圖片的原點在圖片的左上角。

1、旋轉(zhuǎn)矩陣翻轉(zhuǎn)圖形,不翻轉(zhuǎn)紋理

• 讓圖形頂點坐標旋轉(zhuǎn)180°. 而紋理保持原狀

這種做法不推薦，不僅代碼量多，還需要去計算，再傳入頂點著色器使用

    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    float radians = 180 * 3.14159f / 180.0f;
    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(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);

2、解壓圖片時,將圖片源文件翻轉(zhuǎn)

• 直接在解壓圖片重新繪制的時候，進行翻轉(zhuǎn)平移操作，把圖片反過來

這段代碼其實是通用的，所以推薦這種方式。直接copy使用

//1、紋理解壓縮
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

//2、創(chuàng)建一個上下文（先拿到寬、高、大?。?size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));

CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);

//3、將圖片繪制出來  
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, rect, spriteImage);

//4、
//=====================翻轉(zhuǎn)代碼=====================
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); 
//=====================翻轉(zhuǎn)代碼=====================

//5、畫圖完畢就釋放上下文
CGContextRelease(spriteContext);

//6、綁定紋理id（這里有個小技巧，如果只有一個紋理id，默認是0，就可以省略glGenTexture代碼了）
glBindTexture(GL_TEXTURE_2D, 0);

//7、設置紋理屬性
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

//8、載入2D紋理
float fw = width,fh = height;
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    
//9、釋放spriteData
free(spriteData);

我們來分析一下這幾句代碼都做了什么？

image

3、修改片元著色器,紋理坐標

• 改變片元著色器中的紋理坐標，翻轉(zhuǎn)y值（用1減去y坐標）。

這種做法不推薦，有1000個像素，就會調(diào)用1000次片元著色器。避免麻煩

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

4、修改頂點著色器,紋理坐標

• 先在頂點著色器，把紋理坐標翻轉(zhuǎn)，然后傳入片元著色器使用

這種也不推薦，有100個頂點，頂點著色器就會執(zhí)行100次，也要避免麻煩

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

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

5、直接從源紋理坐標數(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, // 右下
     };