OpenGL ES-08-针对GLSL的图片翻转策略

通过上一个案例GLSL加载图片,我们可以看到，最终加载的图片的倒立的，那么我们怎么让他翻转过来呢？

通常在OpenGL中，图片的原点在左下角，但是实际上一张图片的原点在图片的左上角。

1、旋转矩阵翻转图形,不翻转纹理

让图形顶点坐标旋转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、解压图片时,将图片源文件翻转

直接在解压图片重新绘制的时候，进行翻转平移操作，把图片反过来

这段代码其实是通用的，所以推荐这种方式。直接copy使用

//1、纹理解压缩
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

//2、创建一个上下文（先拿到宽、高、大小）
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、
//=====================翻转代码=====================
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); 
//=====================翻转代码=====================

//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、修改片元着色器,纹理坐标

改变片元着色器中的纹理坐标，翻转y值（用1减去y坐标）。

这种做法不推荐，有1000个像素，就会调用1000次片元着色器。避免麻烦

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

4、修改顶点着色器,纹理坐标

先在顶点着色器，把纹理坐标翻转，然后传入片元着色器使用

这种也不推荐，有100个顶点，顶点着色器就会执行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、直接从源纹理坐标数据修改

直接在设置映射关系的时候，进行正确的计算

也不推荐，如果有很多顶点，算起来很烧脑细胞。

     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, // 右下
     };

最后编辑于：2020.08.10 01:45:44