OpenGL ES零基础入门----(1)创建窗口

iOS上绘制图形的方式很多,UIKitCoreGraphicsSpriteKitOpenGL ESMetal等可以绘制图形。这里是OpenGL ES的零基础入门学习。
OpenGL ES是一套非常底层但使用非常广泛的C语言API,专为移动设备定制,可在不同的手机系统或浏览器上使用,渲染效果非常好非常流畅。

开始创建窗口的学习,本章的学习目标是用OpenGL ES 渲染一个窗口。
  • 1.创建一个完整的openGL ES代码过程
  • 2.渲染一个窗口
第一步,创建一个Single View Application工程
1
第二步,创建UIView的子类MyOpenGLView。
2
第三步,先导入OpenGLES.frameworkGLKit.framework两个库,并在MyOpenGLView引入OpenGL ES头文件GLKit。
3
4
第四步,配置OpenGL ES渲染的上下文EAGLContext
EAGLContext

An EAGLContext object manages an OpenGL ES rendering context—the state information, commands, and resources needed to draw using OpenGL ES. To execute OpenGL ES commands, you need a current rendering context.
Drawing resources, such as textures and renderbuffers, are managed for the EAGLContext object by an EAGLSharegroup object associated with the context. When you initialize a new EAGLContext object, you can choose to have it create a new sharegroup, or you can use one obtained from a previously created context.
Before drawing to a context, you must bind a complete framebuffer object to the context. For more information on configuring rendering contexts.

EAGLContext对象管理着OpenGLES的渲染context,即所有绘制的状态,命令及资源信息,并控制GPU去执行渲染运算。
绘制如textures及renderbuffers的过程,是由一个与context绑定的EAGLSharegroup对象来管理的。当初始化一个EAGLContext对象的时候,可选择新建一个sharegroup,或者使用已有的,这一点我们往往采用系统默认即可。在绘制到context之前,我们要先绑定一个完整的framebuffer对象到context中。

    1.设置上下文 (set up context)
    context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    if (!context)
    {
        context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    }
    if (![EAGLContext setCurrentContext:context])
    {
        NSLog(@"setting currentContext faile");
        return;
    }

必须在CAEAGLLayer上才能绘制OpenGLES内容。

    2.渲染的图层layer(rendering layer)
    CAEAGLLayer *layer = (CAEAGLLayer *)self.layer;
    layer.opaque = YES;// CALayer 默认是透明的,必须将它设为不透明才能让其可见
    layer.contentsScale = [UIScreen mainScreen].scale;// 设备的分辨率

如果在viewController中,使用[self.view.layer addSublayer:layer];添加在当前view的图层中即可。
不过我们现在创建的是了UIView的子类MyOpenGLView,所以直接重写UIView+layerClass类方法即可

+ (Class)layerClass
{
    return [CAEAGLLayer class];
}
第五步,配置渲染缓冲区(Render Buffer)

渲染缓冲区类似一个平面,用于保存绘制内容,并使用某种数据类型加以填充,比如颜色值。我们在此创建的是颜色缓冲区,用以保存所绘制的颜色信息,缓冲区大小由CAEAGLLayer的bounds中size指定,这在处理屏幕旋转时是个非常重要的条件。通常,屏幕发生旋转时,屏幕的宽高值互换,故需要重新创建帧缓冲区等内容,后续文档将详细讨论此问题。OpenGL ESFrame bufferRender bufferData buffer等类型的缓冲区,它们的作用各不相同。

    3.配置渲染缓冲区 (Configurate render buffer)
    GLuint renderBuffer;
    //创建一个渲染缓冲区对象
    glGenRenderbuffers(1, &renderBuffer);
    //将该渲染缓冲区对象绑定到管线上
    glBindRenderbuffer(GL_RENDERBUFFER, renderBuffer);
    //在绑定好渲染缓冲区后,通知EAGLContext让CAEAGLLayer实例中分配存储空间,用以保存后续绘制的内容
    [context renderbufferStorage:GL_RENDERBUFFER fromDrawable:layer];

renderBuffer对象本身不能直接使用,不能挂载到GPU上而直接输出内容的,要使用frameBuffer

第六步,配置帧缓冲区(Frame Buffer)
    4.配置帧缓冲区 (configurate frame buffer)
    GLuint frameBuffer;
    //创建一个帧染缓冲区对象
    glGenFramebuffers(1, &frameBuffer);
    //将该帧染缓冲区对象绑定到管线上
    glBindFramebuffer(GL_FRAMEBUFFER, frameBuffer);
    //将创建的渲染缓冲区绑定到帧缓冲区上,并使用颜色填充
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, frameBuffer);

先设置renderbuffer,然后设置framebuffer,顺序不能互换。

第七步,配置清屏颜色(glClearColor)
   5.配置清空屏幕所用的颜色 (configurate clear buffer color)
    glClearColor(1.0, 0.0, 0.0, 1.0);
    // 用来指定要用清屏颜色来清除由mask指定的buffer,此处是color buffer
    glClear(GL_COLOR_BUFFER_BIT);
    // 将指定renderBuffer渲染在屏幕上
    [context presentRenderbuffer:GL_RENDERBUFFER];

完成上面七个步骤后,我们就可以渲染出一个红色的屏幕,如下图所示

5

重要代码如下:

Paste_Image.png

本文源码可以在这里获得:https://github.com/476455183/OpenGLES

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容