锐客网

  1. 首页 > it技术 > >

OpenGL|OpenGL ES 如何加载显示一张图片

第一部分：使用OpenGL加载一张图片流程
第一大步:设置图层
1.创建特殊图层
self.myEagLayer = (CAEAGLLayer *)self.layer;
2.设置scale
[self setContentScaleFactor:[[UIScreen mainScreen]scale]];
3.设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
第二大步:设置上下文
1.指定OpenGL ES 渲染API版本，我们使用2.0
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
2.创建图形上下文
EAGLContext *context = [[EAGLContext alloc]initWithAPI:api];
3.判断是否创建成功
if(!context) {
NSLog(@"Create context failed!");
return;
}
【OpenGL|OpenGL ES 如何加载显示一张图片】4.设置图形上下文
if (![EAGLContext setCurrentContext:context]) {
NSLog(@"setCurrentContext failed!");
return;
}
5.将局部context，变成全局的
self.myContext= context;
第三大步:清空缓存区
glDeleteBuffers(1, &_myColorRenderBuffer);
self.myColorRenderBuffer = 0;
glDeleteBuffers(1, &_myColorFrameBuffer);
self.myColorFrameBuffer = 0;
第四大步:设置RenderBuffer
1.定义一个缓存区ID
GLuintbuffer;
2.申请一个缓存区标志
glGenRenderbuffers(1, &buffer);
self.myColorRenderBuffer = buffer;
3.将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
4.将可绘制对象drawable object'sCAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
第五大步:设置FrameBuffer
1.定义一个缓存区ID
GLuintbuffer;
2.申请一个缓存区标志
//glGenRenderbuffers(1, &buffer);
//glGenFramebuffers(1, &buffer);
glGenBuffers(1, &buffer);
self.myColorFrameBuffer = buffer;
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
3.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
第六大步：开始绘制
设置清屏颜色
glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
清除屏幕
glClear(GL_COLOR_BUFFER_BIT);
1.设置视口大小
CGFloat scale = [[UIScreen mainScreen]scale];
glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, self.frame.size.height * scale);
2.读取顶点着色程序、片元着色程序
NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
NSLog(@"vertFile:%@",vertFile);
NSLog(@"fragFile:%@",fragFile);
3.加载shader
self.myPrograme = [self loadShaders:vertFile Withfrag:fragFile];
4.链接
glLinkProgram(self.myPrograme);
GLintlinkStatus;
获取链接状态
glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
if(linkStatus ==GL_FALSE) {
GLcharmessage[512];
glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
NSString*messageString = [NSStringstringWithUTF8String:message];
NSLog(@"Program Link Error:%@",messageString);
return;
}
NSLog(@"Program Link Success!");
5.使用program
glUseProgram(self.myPrograme);
6.设置顶点、纹理坐标
前3个是顶点坐标，后2个是纹理坐标
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,
};
7.-----处理顶点数据--------
(1)顶点缓存区
GLuintattrBuffer;
(2)申请一个缓存区标识符
glGenBuffers(1, &attrBuffer);
(3)将attrBuffer绑定到GL_ARRAY_BUFFER标识符上
glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
(4)把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
8.将顶点数据通过myPrograme中的传递到顶点着色程序的position
1.glGetAttribLocation,用来获取vertex attribute的入口的.
2.告诉OpenGL ES,通过glEnableVertexAttribArray，
3.最后数据是通过glVertexAttribPointer传递过去的。
(1)注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
GLuint position = glGetAttribLocation(self.myPrograme, "position");
(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(position);
(3).设置读取方式
glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
9.处理纹理数据
(1).glGetAttribLocation,用来获取vertex attribute的入口的.
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(textCoor);
(3).设置读取方式
glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
10.加载纹理
[self setupTexture:@"kunkun"];
11. 设置纹理采样器 sampler2D
glUniform1i(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
12.绘图
glDrawArrays(GL_TRIANGLES, 0, 6);
13.从渲染缓存区显示到屏幕上
[self.myContext presentRenderbuffer:GL_RENDERBUFFER];
其中 第10小步：
1、将 UIImage 转换为 CGImageRef
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
判断图片是否获取成功
if(!spriteImage) {
NSLog(@"Failed to load image %@", fileName);
exit(1);
}
2、读取图片的大小，宽和高
size_twidth =CGImageGetWidth(spriteImage);
size_theight =CGImageGetHeight(spriteImage);
3.获取图片字节数 宽*高*4（RGBA）
GLubyte* spriteData = https://www.it610.com/article/(GLubyte*)calloc(width * height *4,sizeof(GLubyte));
4.创建上下文
CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
5、在CGContextRef上--> 将图片绘制出来
CGRectrect =CGRectMake(0,0, width, height);
6.使用默认方式绘制
CGContextDrawImage(spriteContext, rect, spriteImage);
7、画图完毕就释放上下文
CGContextRelease(spriteContext);
8、绑定纹理到默认的纹理ID（
glBindTexture(GL_TEXTURE_2D, 0);
9.设置纹理属性
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
floatfw = width, fh = height;
10.载入纹理2D数据
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
11.释放spriteData
free(spriteData);
第二部分：实现图片翻转的5种方式
第1种: 旋转矩阵翻转图形,不翻转纹理
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]);
第2种: 解压图片时,将图片源文件翻转
CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
size_t width = CGImageGetWidth(spriteImage);
size_t height = CGImageGetHeight(spriteImage);
GLubyte * spriteData = https://www.it610.com/article/(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);
第3种: 修改片元着色器,纹理坐标
varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;
void main()
{
gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}
第4种: 修改顶点着色器,纹理坐标
attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;
void main()
{
varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
gl_Position = position;
}
第5种:直接从源纹理坐标数据修改
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, //右下
};

    推荐阅读


    上一篇：亲子日记53

    下一篇：2018-11-26逻辑函数