GLSL渲染图片倒置问题解读与解决当然这种问题,并不是OpenGL的问题,而是历史和数学的原因,早期在硬件设计就是这样做

原图: 结果:

倒置原因

导致这样的倒置问题的原因,在于,图片纹理在坐标中的原点(0,0)是在左下角,而屏幕的坐标原点(0,0)是在左上角.片元着色器渲染每个像素点时,是从纹理数据的(0,0)开始,放在了屏幕的(0,0)上,如下: 当然这种问题,并不是OpenGL的问题,而是历史和数学的原因,早期在硬件设计就是这样做的,从上到下,从左到右也是符合我们阅读习惯的.

那我们在使用GLKit框架进行纹理加载时,其实也有做过调整

// 纹理坐标的原点是在左下角，而图片显示的原点在左上 ，这里需要进行调整，以免渲染出来的结果是倒的
NSDictionary *option = @{GLKTextureLoaderOriginBottomLeft:@(YES)};
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:option error:nil];

解决方式

1.添加旋转矩阵

我们可以在片元着色源码中,添加一个旋转矩阵,然后在开始渲染前,传输调整后的坐标矩阵,进行一个旋转操作

//shader.fsh 片元源码中
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
uniform mat4 rotateMatrix;

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

然后在渲染步骤中,向片元源码中rotateMatrix传输uniform类型的矩阵数据

获取rotateMatrix变量
计算旋转矩阵
设置片元源码中的rotateMatrix数据

// 顶点翻转
- (void)rotateTextureImage{
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    //1. rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");
    //2.获取渲旋转的弧度
    float radins = 180 * 3.14159f / 180.0f;
    //3.求得弧度对于的sin\cos值
    float s = sin(radins);
    float c = cos(radins);
    //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. Core Graphics平移旋转

我们可以在setupTexture加载纹理的函数中,对纹理进行调整

// 图片rect
CGRect rect = CGRectMake(0, 0, width, height);
    
// 添加1:平移画布的高度
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
// 添加2:y轴翻转画布
CGContextScaleCTM(spriteContext, 1.0, -1.0);
    
CGContextDrawImage(spriteContext, rect, spriteImage);

y轴翻转,像素点x轴数据不变,y轴数据-1

3. 在片元着色器源码中调整纹理坐标

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

类似第二种方式,将像素点的y值调整,不过调用的位置不同,这里是在每个像素点传到片元着色器中时,对y值进行调整,这样的话,调用的次数非常大,每个像素点都会进行这样的计算,造成压力.

4. 在顶点着色器源码中调整

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

这种方式和第三种基本一样,只是调用的次数会大大减少,因为调用顶点着色器的次数,由图片的顶点个数觉得,而不是像素个数.

5.修改顶点、纹理坐标数据

修改前:
	GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.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, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
修改后:
    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,
    };

这种方式,是调整了顶点坐标与纹理坐标的对应关系