前沿

OpenGL要求y轴0.0坐标是在图片的底部的，但是图片的y轴0.0坐标通常在顶部，所以按照一一对应的话，图片会发生倒置的问题

image.png

我们经过修改后要求达到的效果是下面的

image.png

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

void main()
{
    varyTextCoord = textCoordinate;
    gl_Position = position;
}

片元着色器代码

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
   
    gl_FragColor = texture2D(colorMap,varyTextCoord);

}

纹理和顶点坐标对应修改

  GLfloat attrArr[] =
    {
        -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,  0.0f,0.0f,

        -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,  1.0f,0.0f,   
    };

verandtexture.png

顶点坐标和纹理对应关系
A->Aa B->Bb C->Cc D->Dd

修改顶点着色器

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

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

修改片元着色器代码

precision highp float;
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main()
{
   
    lowp vec2 tempCoord = vec2(varyTextCoord.x,1.0-varyTextCoord.y);
    gl_FragColor = texture2D(colorMap,tempCoord);

}

解压图片时,将图片源文件翻转

   CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextTranslateCTM(spriteContext, 0, -rect.size.height);

使用矩阵实现

顶点着色器

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
uniform mat4 rotateMatrix;

void main()
{
    vec4 vPos = position;
    vPos = vPos * rotateMatrix;
    varyTextCoord = textCoordinate;
    gl_Position = vPos;
}

实现代码

  GLuint rotateMatrix = 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
     };
    glUniformMatrix4fv(rotateMatrix, 1, GL_FALSE, zRotation);