美文网首页工作生活
纹理翻转的实现方式

纹理翻转的实现方式

作者: BigBowen | 来源:发表于2019-07-05 15:19 被阅读0次

本文将的内容是在前一篇的基础上延伸的
OpenGL ES 实战三-使用GLES加载图片

一.修改纹理坐标

修改纹理坐标可以在三个地方修改:

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

纹理坐标的取值范围是0~1,只要把纹理坐标值取反(用1减去原来的纹理坐标),即可实现翻转.

varying lowp vec2 varyTextCoord;
//纹理采样器(获取对应的纹理ID)
uniform sampler2D colorMap;
void main()
{
//gl_FragColor GLSL的内建变量(GLSL已经提前定义好的变量),为像素点赋值相应的颜色值.
//texture2D(纹理采样器,纹理坐标),获取对应坐标纹素(RGBA值)
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}
2.修改顶点着色器中的纹理坐标

这里的纹理坐标在顶点着色器中是没使用的,只是借助顶点着色器传给片元着色器.

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main()
{
    //varyTextCoord = textCoordinate;
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}
3.修改外界的纹理坐标
    //前3个是顶点坐标,后2个是纹理坐标
//    GLfloat attrArr[] =
//    {
//        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,
//    };
    
    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,
    };

二.使用旋转矩阵

关于常用的矩阵变换请戳
矩阵变换
注意要把相应的矩阵传给顶点着色器

-(void)rotateTextureImage
{
    //注意,想要获取shader里面的变量,这里记得要在glLinkProgram后面,后面,后面!
    //1. rotate等于shaderv.vsh中的uniform属性,rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    //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
    };
    
    //5.设置旋转矩阵
    /*
     glUniformMatrix4fv (GLint location, GLsizei count, GLboolean transpose, const GLfloat* value)
     location : 对于shader 中的ID
     count : 个数
     transpose : 转置
     value : 指针
     */
    glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
    
    
}

三.绘制时实现翻转

在原来绘制图片的基础上加上这段代码

//向下平移了rect.size.height
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    //第三个参数表示y轴翻转180度
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);

相关文章

  • 纹理翻转的实现方式

    本文将的内容是在前一篇的基础上延伸的OpenGL ES 实战三-使用GLES加载图片 一.修改纹理坐标 修改纹理坐...

  • OpenGL 图片翻转的5种策略

    iOS纹理翻转解决策略 第1种: 旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 第...

  • 纹理翻转

    OpenGL的纹理坐标是左下角的,而图片的坐标是在左上角的,所以画上去的时候会是倒立的,有五种方法可以使图片正过来...

  • 2020-09-07

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

  • OpenGL ES 纹理翻转解析

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

  • OpenGL ES 纹理翻转解析

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

  • OpenGL ES(五)-纹理翻转解决策略

    一、旋转矩阵翻转图形,不翻转纹理 让图形顶点坐标旋转180°. 而纹理保持原状. 二、解压图片时,将图片源文件翻转...

  • 翻转纹理的5中方式

    由于CoreGraphics坐标系与UIKit坐标系不一致,导致CoreGraphics解码图片加载纹理后,图片显...

  • OpenGL 纹理翻转策略

    旋转矩阵翻转图形 解压图片时,将图片源文件翻转 修改片元着色器纹理坐标 修改顶点着色器,纹理坐标 直接从源纹理坐标...

  • OpenGL ES 3.0-纹理翻转策略

    有5种策略 旋转矩阵翻转图形,不翻转纹理 在解压图片时,将图片源文件翻转 修改片元着色器,纹理坐标 修改顶点着色器...

网友评论

    本文标题:纹理翻转的实现方式

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