美文网首页
OpenGL ES 纹理翻转

OpenGL ES 纹理翻转

作者: Joker_King | 来源:发表于2020-08-06 10:18 被阅读0次

旋转矩阵

让图形的顶点旋转180度,纹理保持不变。

GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
float radians = 180 * 3.14159f / 180.0f;
float s = sin(radians);
float c = cos(radians);
    
GLfloat zRotation[16] = {
    c, -s, 0, 0,
    s, c, 0, 0,
    0, 0, 1.0, 0,
    0.0, 0, 0, 1.0
};
glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);

GSL代码

attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

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

旋转解压时的图片

CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;

size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));

CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
  
CGRect rect = CGRectMake(0, 0, width, height);
CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), 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);
glBindTexture(GL_TEXTURE_2D, 0);

CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
平移画布

-w512
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
将画布平移到某个位置
-w500
CGContextScaleCTM(spriteContext, 1.0, -1.0);
翻转画布
-w520
CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
将画布移动到原来的位置
-w499

修改片元着色器

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

修改顶点着色器

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

void main()
{
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}

修改源纹理坐标

 GLfloat attrArr[] =
 {
 0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
 -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
 -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
 0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
 -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
 0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
 };
 */

总结

  1. 第一种方案需要对每一个顶点都进行旋转。
  2. 第二种方案是在解压图片时对图片进行翻转,也是目前使用最多的。
  3. 对纹理的每个像素坐标进行处理。
  4. 在顶点着色器中对纹理的顶点坐标进行翻转。
  5. 直接修改纹理坐标的对应关系。

相关文章

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

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

  • OpenGL ES 纹理翻转

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

  • OpenGL ES 纹理翻转

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

  • OpenGL ES 纹理翻转解析

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

  • OpenGL ES 纹理翻转解析

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

  • OpenGL ES--纹理翻转

    OpenGL要求y轴0.0坐标是在图片的底部的,但是图片的y轴0.0坐标通常在顶部,所以要进行翻转。 1.旋转矩阵...

  • OpenGL ES纹理翻转方法

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

  • OpenGL ES 纹理翻转策略

    背景:使用GLSL渲染一张图片到屏幕上,发现图片是倒置的,这是因为屏幕的坐标原点在左上角,向右和向下为x和y正方向...

  • OpenGL ES纹理翻转策略

    在OpenGL ES中按常规加载一张纹理后,会发现纹理图片在渲染后显示在屏幕上是倒置的 那么如何解决这种现象的发生...

  • OpenGL/OpenGL ES (五) —— 纹理翻转策略

    OpenGL/OpenGL ES (一) —— 专业名词快速了解OpenGL/OpenGL ES (二) —— 渲...

网友评论

      本文标题:OpenGL ES 纹理翻转

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