美文网首页
OpenGLES纹理翻转解决方案

OpenGLES纹理翻转解决方案

作者: 枫紫_6174 | 来源:发表于2020-08-04 23:16 被阅读0次

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


    纹理旋转

    二.解决方案

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

            

    翻转后的效果

    相关文章

      网友评论

          本文标题:OpenGLES纹理翻转解决方案

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