OpenGL
的纹理坐标是左下角的,而图片的坐标是在左上角的,所以画上去的时候会是倒立的,有五种方法可以使图片正过来
1.直接修改源纹理坐标数据
//前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,
};
2.修改片元着色器纹理坐标
只需要修改y轴的坐标即可。
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
修改前:
void main()
{
gl_FragColor = texture2D(colorMap, varyTextCoord);
}
修改后:
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}
3.修改顶点着色器纹理坐标
片元着色器的纹理坐标是通过顶点着色器传递过去,同理修改顶点着色器的纹理坐标。
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
修改前:
void main()
{
varyTextCoord = textCoordinate;
gl_Position = position;
}
修改后:
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
4.旋转矩阵翻转图形,不翻转纹理
让图形顶点坐标旋转180°. 而纹理保持原状
- (void)rotateTextureImage
{
//注意,想要获取shader里面的变量,这里记得要在glLinkProgram后面,后面,后面!
//rotate等于shaderv.vsh中的uniform属性,rotateMatrix
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,1
};
glUniformMatrix4fv(rotate, 1, GL_FALSE, zRotation);
}
//对应的shaderv.vsh
attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = textCoordinate;
//让每一个顶点坐标应用旋转矩阵
gl_Position = position * rotateMatrix;
}
上面主要参考的是围绕Z轴旋转
5.图片解压缩时,翻转源文件
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
//获取图片字节数 宽*高*4(RGBA)
GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
//创建上下文
/*
参数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);
//在CGContextRef上--> 将图片绘制出来
/*
CGContextDrawImage 使用的是Core Graphics框架,坐标系与UIKit 不一样。
UIKit框架的原点在屏幕的左上角,Core Graphics框架的原点在屏幕的左下角。
CTM(current transformation matrix当前转换矩阵)
*/
CGContextTranslateCTM(spriteContext, 0, rect.size.height);
CGContextScaleCTM(spriteContext, 1.0, -1.0);
CGContextDrawImage(spriteContext, rect, spriteImage);
CGContextRelease(spriteContext);
//绑定纹理到默认的纹理ID
glBindTexture(GL_TEXTURE_2D, 0);
free(spriteData);