美文网首页
OpenGL ES 纹理翻转解析

OpenGL ES 纹理翻转解析

作者: adaodao3056 | 来源:发表于2020-09-07 16:01 被阅读0次

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

    方法1:改变纹素获取坐标   

    片元着色器中,纹素获取后 改为的1.0 - y

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


    方法2:顶点着色器 纹理坐标

    顶点着色器,纹理坐标 改为的1.0 - y

    attribute vec4 position;attribute vec2 textCoordinate;varying lowp vec2 varyTextCoord;voidmain(){//varyTextCoord = textCoordinate;varyTextCoord=vec2(textCoordinate.x,1.0-textCoordinate.y);gl_Position=position;}

    方法3:获取纹理 ,图片解压是,对图片进行 平移,缩放操作

    //1、将 UIImage 转换为 CGImageRefCGImageRef spriteImage=[UIImage imageNamed:fileName].CGImage;//判断图片是否获取成功if(!spriteImage){NSLog(@"Failed to load image %@",fileName);exit(1);}//2、读取图片的大小,宽和高size_t width=CGImageGetWidth(spriteImage);size_t height=CGImageGetHeight(spriteImage);//3.获取图片字节数 宽*高*4(RGBA)GLubyte*spriteData=(GLubyte*)calloc(width*height*4,sizeof(GLubyte));//4.创建上下文/*

        参数1:data,指向要渲染的绘制图像的内存地址

        参数2:width,bitmap的宽度,单位为像素

        参数3:height,bitmap的高度,单位为像素

        参数4:bitPerComponent,内存中像素的每个组件的位数,比如32位RGBA,就设置为8

        参数5:bytesPerRow,bitmap的没一行的内存所占的比特数

        参数6:colorSpace,bitmap上使用的颜色空间  kCGImageAlphaPremultipliedLast:RGBA

        */CGContextRef spriteContext=CGBitmapContextCreate(spriteData,width,height,8,width*4,CGImageGetColorSpace(spriteImage),kCGImageAlphaPremultipliedLast);//5、在CGContextRef上--> 将图片绘制出来/*

        CGContextDrawImage 使用的是Core Graphics框架,坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角,Core Graphics框架的原点在屏幕的左下角。

        CGContextDrawImage

        参数1:绘图上下文

        参数2:rect坐标

        参数3:绘制的图片

        */CGRect rect=CGRectMake(0,0,width,height);//6.使用默认方式绘制CGContextDrawImage(spriteContext,rect,spriteImage);

    CGContextTranslateCTM(spriteContext,0,rect.size.height);//平移CGContextScaleCTM(spriteContext,1.0,-1.0);//缩放

    CGContextDrawImage(spriteContext,rect,spriteImage);//7、画图完毕就释放上下文CGContextRelease(spriteContext);


    方法4:直接改变顶点纹理数组中  纹理坐标

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

    相关文章

      网友评论

          本文标题:OpenGL ES 纹理翻转解析

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