美文网首页
OpenGL ES之图片纹理翻转常用方法

OpenGL ES之图片纹理翻转常用方法

作者: lb_ | 来源:发表于2019-06-20 21:55 被阅读0次

由于iOS屏幕坐标中Y轴向下为正方向,即大家所熟知的左上角为(0,0),而OpenGL中纹理坐标系中左下角为(0,0),因此如不做处理时,默认贴图纹理是翻转效果的。
上篇文章案例中我们使用GLKit时,使用以下方法处理纹理翻转

//2.设置纹理参数
    //纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
    
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];

这是使用GLKit时设置Options,指定翻转后GLKit会继续处理翻转纹理。

那么在使用可编程管线GLSL中,本文列举以下几种方法处理:

1.翻转原始纹理坐标

修改前默认纹理坐标如下:

//前3个是顶点坐标,后2个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, 0.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, 0.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, 0.0f,    0.0f, 0.0f,
        
        0.5f, 0.5f, 0.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, 0.0f,     0.0f, 1.0f,
        0.5f, -0.5f, 0.0f,     1.0f, 0.0f,
    };

由于纹理坐标是0-1的,所以我们只需要用 1 减 原来的纹理坐标的y值,即可完成翻转,如下:

    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 1 - 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1 - 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 1 - 0.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 1 - 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1 - 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 1 - 0.0f,
    };

2.翻转图片源文件

在解压过程中,可以对图片的源文件进行翻转,代码如下:

 //  第二种方法:解决翻转问题,平移再翻转Y轴

    //把spriteContext沿Y轴正方向移动图片的高度
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    //把图片直接翻转过来
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);

3.通过旋转矩阵直接旋转图形

在加载纹理时,把图形直接旋转180度即可,如下先写一个旋转矩阵传入顶点着色器.

//解决纹理翻转
- (void)rotateTextureImage{
    //注意,想要获取shader里面的变量,这里记得要在glLinkProgram后面,后面,后面!
    //1. rotate等于shaderv.vsh中的uniform属性,rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    //2.获取渲旋转的弧度
    float radias = 180 * 3.1415926 / 180.0f;
    
    //3.求得弧度对于的sin\cos值
     float s = sin(radias);
     float c  = cos(radias);
    
    //4.在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);
}

然后在顶点着色器中接收到旋转矩阵后与原始定点位置相乘即可。

//顶点着色器GLSL代码
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

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

4. 修改着色器里的纹理坐标

我们可以修改顶点着色器里的纹理坐标或者修改片元着色器里的纹理坐标,两种方式原理是一样的。

修改顶点着色器
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0 - textCoordinate.y);
    gl_Position = position;
}
修改片元着色器
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

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

以上为几种纹理翻转解决方案,使用GLKit时则较为简单,GLSL时个人偏向第二种解决方案,代码简单,一个地方即可处理完毕。

相关文章

  • OpenGL ES之图片纹理翻转常用方法

    由于iOS屏幕坐标中Y轴向下为正方向,即大家所熟知的左上角为(0,0),而OpenGL中纹理坐标系中左下角为(0,...

  • OpenGL ES纹理翻转方法

    1.顶点取反1 顶点着色器 片元着色器 2.顶点取反2 顶点着色器 rotateMatrix Z轴旋转矩阵 片元着...

  • OpenGL ES之旅(三)-- OpenGL ES 纹理翻转解

    纹理翻转概述 在使用OpenGL ES函数加载纹理到图形时,经常遇到纹理上下颠倒的问题。原因是因为OpenGL E...

  • OpenGL纹理内容

    纹理可以理解为一张图片,OpenGL渲染图片会将图片的像素保存在纹理缓存中。 OpenGL常用纹理函数 载入纹理 ...

  • OpenGL纹理

    纹理可以理解为一张图片,OpenGL渲染图片会将图片的像素保存在纹理缓存中。OpenGL常用纹理函数 载入纹理 纹...

  • OpenGL之纹理及应用案例

    纹理介绍 OpenGL使用的图片数据(纹理)都是tga格式的,而iOS/OpenGL ES使用PNG/JPEG格式...

  • OpenGL ES 纹理翻转

    旋转矩阵 让图形的顶点旋转180度,纹理保持不变。 GSL代码 旋转解压时的图片 CGContextTransla...

  • OpenGL ES 纹理翻转

    1调度api 传入顶点 - < 顶点变化

  • 在 iOS 中使用 GLSL 实现分屏滤镜

    首先使用 OpenGL ES 加载原图,可以参考我的另一篇文章《OpenGL ES 加载图片并翻转》[https:...

  • OpenGL ES 纹理翻转解析

    GLSL实现渲染图片 纹理需要翻转的原因:手机的(0,0)点在左上角,纹理的(0,0)点在左下角,导致渲染出来的图...

网友评论

      本文标题:OpenGL ES之图片纹理翻转常用方法

      本文链接:https://www.haomeiwen.com/subject/amssqctx.html