OpenGL ES — GLSL加載紋理時顛倒的解決方案

上篇介紹到如何使用GLSL加載紋理，加載完成後會發現紋理是顛倒的狀態。下面咱們就會介紹出現顛倒問題的緣由和幾種解決方案。

紋理顛倒的緣由

出現顛倒問題的根本緣由是紋理座標的原點和屏幕原點不一致形成。屏幕的座標原點（0,0）在左上角，而紋理的座標原點(0,0)在左下角。

解決方案

1. 使用矩陣翻轉

-(void)rotateTextureImage
{
    //注意，想要獲取shader裏面的變量，這裏記得要在glLinkProgram後面，後面，後面！
    //1. rotate等於shaderv.vsh中的uniform屬性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    GLuint scale = glGetUniformLocation(self.myPrograme, "scaleMatrix");
    
    //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
    };
    GLfloat scaleMatrix[16] = {
        -1,0,0,0,
        0,1,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);
    glUniformMatrix4fv(scale, 1, GL_FALSE, scaleMatrix);    
}
複製代碼

• vertexShader代碼

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
uniform mat4 scaleMatrix;

varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    vec4 vPos = rotateMatrix * scaleMatrix * position;
    gl_Position = vPos;
}
複製代碼

• vertexShader 中GLSL代碼（另外一種）不使用scaleMatrix

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

uniform mat4 rotateMatrix;
void main()
{
    varyTextCoord = textCoordinate;
    vec4 vPos  = rotateMatrix * position;
    vPos *= vec4(-1, 1, 1, 1);
    gl_Position = vPos;
}
複製代碼

######2. 紋理讀取時，翻轉繪圖上下文

• 在圖片加載紋理方法中

//4.建立上下文
    /*
     參數1：data,指向要渲染的繪製圖像的內存地址
     參數2：width,bitmap的寬度，單位爲像素
     參數3：height,bitmap的高度，單位爲像素
     參數4：bitPerComponent,內存中像素的每一個組件的位數，好比32位RGBA，就設置爲8
     參數5：bytesPerRow,bitmap的沒一行的內存所佔的比特數
     參數6：CGColorSpaceRef,colorSpace,bitmap上使用的顏色空間
     參數7：bitmapInfo,- kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8,width * 4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
    //五、在CGContextRef上--> 將圖片繪製出來
    /*
     CGContextDrawImage 使用的是Core Graphics框架，座標系與UIKit 不同。UIKit框架的原點在屏幕的左上角，Core Graphics框架的原點在屏幕的左下角。
     CGContextDrawImage
     參數1：繪圖上下文
     參數2：rect座標
     參數3：繪製的圖片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
    
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);//向x,平移0,向y平移rect.size.height
    CGContextScaleCTM(spriteContext, 1.0, -1.0); //x,縮放1.0，y,縮放-1.0
 
    //6.使用默認方式繪製
    CGContextDrawImage(spriteContext, rect, spriteImage);
複製代碼

• 關鍵代碼

CGContextTranslateCTM(spriteContext, 0, rect.size.height);//向x,平移0,向y平移rect.size.height
    CGContextScaleCTM(spriteContext, 1.0, -1.0); //x,縮放1.0，y,縮放-1.0
複製代碼

######3. 翻轉verTexShader代碼中gl_Position

• 方法一

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
    varyTextCoord = textCoordinate;
    vec4 vPos  = position;
    vPos *= vec4(1, -1, 1, 1);
    gl_Position = vPos;
}
複製代碼

• 方法二

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = vec4(position.x, - position.y,1,1);
}
複製代碼

4.改變vertexShader中紋理座標

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0 -textCoordinate.y);
    gl_Position = position;
}
複製代碼

5.改變fragShader中紋理座標

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

6.修改每一個頂點的紋理座標(頂點與紋理映射關係)

//6.設置頂點、紋理座標
    //前3個是頂點座標，後2個是紋理座標
    //修改前的
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,//1,1
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,//0,0
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,//0,1

        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,//1,0
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,//0,0
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,//1,1
    };
    //修改後
    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,
    };

複製代碼

以上六種方案，均可以解決紋理顛倒的問題。