OpenGLES纹理翻转解决方案

2020-08-04  本文已影响0人  枫紫_6174

一.先看看我们平时显示纹理可能出现的问题


纹理旋转

二.解决方案

2.1矩阵旋转顶点坐标(即图形顶点坐标在不改变顶点纹理坐标的前提下,旋转顶点)

         在设置纹理采样器 sampler2DglUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);绘图glDrawArrays(GL_TRIANGLES, 0, 6);的中间旋转顶点坐标,传入旋转矩阵,在自定义顶点着色器里面添加旋转矩阵:uniformmat4rotateMatrix;并vec4vPos = position; vPos = vPos * rotateMatrix;gl_Position= vPos;赋值

自定义着色器传入旋转矩阵

函数实现;-(void)rotateTextureImage{

    //注意,想要获取shader里面的变量,这里记得要在glLinkProgram后面,后面,后面!

    //1. rotate等于shaderv.vsh中的uniform属性,rotateMatrix

    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");

    //2.获取渲旋转的弧度

    floatradians =180*3.14159f/180.0f;

    //3.求得弧度对于的sin\cos值

    floats =sin(radians);

    floatc =cos(radians);

    //4.因为在3D课程中用的是横向量,在OpenGL ES用的是列向量

    /*

     参考Z轴旋转矩阵

     */

    GLfloatzRotation[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.2修改顶点着色器的纹理坐标(1-纹理坐标的y值)

       在自定义顶点着色器的vsh中修改代码:varyTextCoord =vec2(textCoordinate.x,1.0-textCoordinate.y);

修改顶点着色器的纹理坐标

2.3修改片元着色器的纹理坐标(1-纹理坐标的y值)

        在自定义片元着色器fsh中修改代码:gl_FragColor=texture2D(colorMap,vec2(varyTextCoord.x,1.0-varyTextCoord.y));

修改片元着色器的纹理坐标

2.4改变顶点纹理坐标的映射位置

原来的顶点位置:

    GLfloatattrArr[] =

    {

        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,

    };

改变后的顶点位置:

GLfloatattrArr[] =

    {

        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,

    };

关于纹理坐标映射,请看我的博客纹理坐标

2.5图片源文件翻转

    拿到元纹理图片的宽高,重新绘制一张图片出来
    CGRectrect =CGRectMake(0,0, width, height);

    CGContextDrawImage(spriteContext, rect, spriteImage);

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

    CGContextRelease(spriteContext);

        

翻转后的效果
上一篇下一篇

猜你喜欢

热点阅读