GLSL加载纹理颠倒的六种解决方案

作者：御o雪

链接：https://www.jianshu.com/p/23d7dd24d6f6

纹理颠倒原因

GLSL 加载一张图片纹理，最后发现加载出来的图片是倒置的。倒置的原因，是纹理坐标的坐标原点与视觉系的坐标原点不一致造成的。

即：纹理坐标原点 (0.0, 0.0)坐标在左下角，屏幕的坐标原点(0.0,0.0)在左上角。

纹理颠倒解决策略：

1.使用矩阵翻转

• 在加载纹理之后：

    //解决纹理翻转(方法1)
    [self rotateTextureImage];

-(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);    
}

• 对应shader 中GLSL代码

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;
}

• shader 中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);
    
    //5、在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,
    };

以上就是六种解决纹理图片掉到问题的方法。

技术交流，欢迎加我微信：ezglumes 。

扫码关注，持续更新

喜欢就点个「在看」吧 ▽