http://www.jianshu.com/p/750fde1d8b6a

这里是一篇新手教程,环境是Xcode7+OpenGL ES 2.0,目标写一个OpenGL ES的hello world
OpenGL ES系列教程在这里
OpenGL ES系列教程的代码地址

你的star和fork是我的源动力,你的意见能让我走得更远

核心思路

通过GLKit,尽量简单地实现把一张图片绘制到屏幕。

效果展示

 

具体细节

1、新建OpenGL ES上下文

  1. - (void)setupConfig {
  2. //新建OpenGLES 上下文
  3. self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2]; //2.0,还有1.0和3.0
  4. GLKView* view = (GLKView *)self.view; //storyboard记得添加
  5. view.context = self.mContext;
  6. view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888; //颜色缓冲区格式
  7. [EAGLContext setCurrentContext:self.mContext];
  8. }

GLKView* view = (GLKView *)self.view;这里需要在storyboard里面把view的类设置成GLKView,其他代码是OpenGL ES上下文的创建。

2、顶点数组和索引数组

  1. //顶点数据,前三个是顶点坐标,后面两个是纹理坐标
  2. GLfloat squareVertexData[] =
  3. {
  4. 0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
  5. 0.5, 0.5, -0.0f, 1.0f, 1.0f, //右上
  6. -0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
  7. 0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
  8. -0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
  9. -0.5, -0.5, 0.0f, 0.0f, 0.0f, //左下
  10. };

顶点数组里包括顶点坐标,OpenGLES的世界坐标系是[-1, 1],故而点(0, 0)是在屏幕的正中间
纹理坐标系的取值范围是[0, 1],原点是在左下角。故而点(0, 0)在左下角,点(1, 1)在右上角。
索引数组是顶点数组的索引,把squareVertexData数组看成4个顶点,每个顶点会有5个GLfloat数据,索引从0开始。

3、顶点数据缓存

  1. //顶点数据缓存
  2. GLuint buffer;
  3. glGenBuffers(1, &buffer);
  4. glBindBuffer(GL_ARRAY_BUFFER, buffer);
  5. glBufferData(GL_ARRAY_BUFFER, sizeof(squareVertexData), squareVertexData, GL_STATIC_DRAW);
  6. glEnableVertexAttribArray(GLKVertexAttribPosition); //顶点数据缓存
  7. glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
  8. glEnableVertexAttribArray(GLKVertexAttribTexCoord0); //纹理
  9. glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

这是本章节的核心内容

  • glGenBuffers申请一个标识符
  • glBindBuffer把标识符绑定到GL_ARRAY_BUFFER
  • glBufferData把顶点数据从cpu内存复制到gpu内存
  • glEnableVertexAttribArray 是开启对应的顶点属性
  • glVertexAttribPointer设置合适的格式从buffer里面读取数据

4、纹理贴图

  1. - (void)uploadTexture {
  2. //纹理贴图
  3. NSString* filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"jpg"];
  4. NSDictionary* options = [NSDictionary dictionaryWithObjectsAndKeys:@(1), GLKTextureLoaderOriginBottomLeft, nil];//GLKTextureLoaderOriginBottomLeft 纹理坐标系是相反的
  5. GLKTextureInfo* textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
  6. //着色器
  7. self.mEffect = [[GLKBaseEffect alloc] init];
  8. self.mEffect.texture2d0.enabled = GL_TRUE;
  9. self.mEffect.texture2d0.name = textureInfo.name;
  10. }
  • GLKTextureLoader读取图片,创建纹理GLKTextureInfo
  • 创建着色器GLKBaseEffect,把纹理赋值给着色器

基础

代码带了很多注释,百度下相应的概念,会有更多解释。
如果对OpengGL ES感兴趣,但是却毫无图形学基础的,可以看看LearnOpenGL教程

思考题

  • 1、代码中有6个顶点坐标,能否使用更少的顶点显示一个图像?
  • 2、顶点缓存数组可以不用glBufferData,要如何实现?
  • 3、如果把这个图变成左右两只对称的熊猫,该如何改?

这里可以下载demo代码。

思考题答案

思考题1:
可以使用四个顶点,绘制2个三角形 的6个顶点中有2个是重复的,使用索引可以减少重复。

思考题2:
顶点缓存数组可以不用glBufferData,要如何实现?顶点数组可以通过glBufferData放入缓存,也可以直接通过glVertexAttribPointer最后一个参数,直接把顶点数组从CPU传送到GPU。区别:glBufferData里面的顶点缓存可以复用,glVertexAttribPointer是每次都会把顶点数组从CPU发送到GPU,影响性能。

思考题3
如果把这个图变成左右两只对称的熊猫,该如何改?把屏幕切分成4个三角形,左边两个三角形同上,右边两个三角形的纹理坐标的x值调整即可。

  1.  
  2. 作者:落影loyinglin
    链接:http://www.jianshu.com/p/750fde1d8b6a
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

iOS开发-OpenGL ES入门教程1的更多相关文章

  1. iOS开发- OpenGL ES屏幕截图

    之前写过一个常规的屏幕截图:http://blog.csdn.net/hitwhylz/article/details/17189351 可是发现这个办法对于OpenGL 无用.  获取到的数据为空. ...

  2. iOS 平台开发OpenGL ES程序注意事项

    本人最近从Android平台的OpenGL ES开发转到iOS平台的OpenGL ES开发,由于平台不同,所以开发中会有一些区别,再次列出需要注意的几点. 1.首先需要了解iOS主要开发框架,再次仅介 ...

  3. OpenGL ES 系列教程

    http://www.linuxgraphics.cn/graphics/opengles_tutorial_index.html 本文收集了一套 OpenGL ES 系列教程. www.play3d ...

  4. iOS开发-UI 从入门到精通(三)

    iOS开发-UI 从入门到精通(三)是对 iOS开发-UI 从入门到精通(一)知识点的综合练习,搭建一个简单地登陆界面,增强实战经验,为以后做开发打下坚实的基础! ※在这里我们还要强调一下,开发环境和 ...

  5. iOS开发-UI 从入门到精通(二)

    iOS开发-UI 从入门到精通(二)是对 iOS开发-UI 从入门到精通(一)知识点的巩固,主要以习题练习为主,增强实战经验,为以后做开发打下坚实的基础! ※开发环境和注意事项: 1.前期iOS-UI ...

  6. OpenGL ES入门09-GLSL实现常见特效 [转]

    本文转自简书,原文地址http://www.jianshu.com/p/e4a8c83cd37 本文是关于OpenGL ES的系统性学习过程,记录了自己在学习OpenGL ES时的收获. 这篇文章的目 ...

  7. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  8. IOS 中openGL使用教程2(openGL ES 入门篇 | 绘制一个多边形)

    在上一篇我们学习了如何搭建IOS下openGL的开发环境,接下来我们来学习如何绘制一个多边形. 在2.0之前,es的渲染采用的是固定管线,何为固定管线,就是一套固定的模板流程,局部坐标变换 -> ...

  9. IOS 中openGL使用教程1(openGL ES 入门篇 | 搭建openGL环境)

    OpenGL版本 iOS系统默认支持OpenGl ES1.0.ES2.0以及ES3.0 3个版本,三者之间并不是简单的版本升级,设计理念甚至完全不同,在开发OpenGL项目前,需要根据业务需求选择合适 ...

随机推荐

  1. 使用Properties配置文件 InputStream与FileReader (java)

    java 开发中,常常通过流读取的方式获取 配置文件数据,我们习惯使用properties文件,使用此文件需要注意 文件位置:任意,建议src下 文件名称:任意,扩展名为properties 文件内容 ...

  2. SqlServer数据库查询表信息/列信息(列ID/列名/数据类型/长度/精度/是否可以为null/默认值/是否自增/是否是主键/列描述)

    查询表信息(表名/表描述) Value ) AS value FROM sysobjects a Where a.xtype = 'U' AND a.name <> 'sysdiagram ...

  3. 数据库outer连接

    left (此处省略outer) join, 左边连接右边,左边最大,匹配所有的行,不管右边 right join,右边连接左边,右边最大,匹配所有的行,不管左边 条件直接放ON后面,是先筛选右边的表 ...

  4. POJ-1958 Strange Towers of Hanoi(线性动规)

    Strange Towers of Hanoi Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 2677 Accepted: 17 ...

  5. 启动了SSH服务后,一定要关闭Telnet服务

    https://baike.baidu.com/item/ssh/10407 https://baike.baidu.com/item/Telnet/810597

  6. hmm前后向算法

    跟医生就医推导过程是一样的 隐马尔科夫模型HMM(一)HMM模型 隐马尔科夫模型HMM(二)前向后向算法评估观察序列概率 隐马尔科夫模型HMM(三)鲍姆-韦尔奇算法求解HMM参数 隐马尔科夫模型HMM ...

  7. automation轻松“一点”,搞定裸机安装系统

    企业在新建数据中心.新业务上线.老业务扩容等场景下,会采购一批新的裸机服务器,在新服务器投入使用之前,势必得进行操作系统的安装.相信每个人都有安装操作系统的经历,BIOS设置.磁盘分区.驱动安装... ...

  8. 高性能mysql第6章

    第6章,优化配置 https://www.cnblogs.com/musings/p/5913157.html 1:服务器读取的配置文件,可以使用下面的命令查询 admin@iZwz92c0zpe8t ...

  9. Spark2.x学习笔记:Spark SQL的SQL

    Spark SQL所支持的SQL语法 select [distinct] [column names]|[wildcard] from tableName [join clause tableName ...

  10. Saving Princess claire_(hdu 4308 bfs模板题)

    http://acm.hdu.edu.cn/showproblem.php?pid=4308 Saving Princess claire_ Time Limit: 2000/1000 MS (Jav ...