iOS中OpenGL应用

转自:http://mississi.blog.163.com


一、搭建开发环境

1、打开XCODE,新建一个工程

选择:IOS-->ApplicationàSingle View Application模板。

取名为“HelloOpenGL”,勾选“UseStoryboards”,然后创建。

 
  

2、添加必要的框架

在“Build Phases”栏,添加进三个框架:



3、修改viewController.h

添加“#import ”,并将它修改为继承“GLKViewController”。


 
  

4、修改“view”的类

双击“MainStoryboard.storyboard”展开,选择“view”。

 
  

然后,在其“Identity Inspector”中,将它的类改为“GLKView”。

 

 至此,OpenGL环境已基本搭建出来了。运行,应该不会报错,尽管它目前仍是黑屏。


二、开始堆代码

基本上,所有的代码都在“ViewController.m”中写。

1、添加全局属性声明

 

当然,还得在实现部分补足“@synthesize context;”和“@synthesize effect;”。


2、添加一组顶点数据

这是一个正方形顶点的数组,实际上它是由二个三角形接合而成的。

  每行顶点数据的排列含义是:

顶点X、顶点Y,顶点Z、法线X、法线Y、法线Z、纹理S、纹理T。

在后面解析此数组时,将参考此规则。

顶点位置用于确定在什么地方显示,法线用于光照模型计算,纹理则用在贴图中。

一般约定为“顶点以逆时针次序出现在屏幕上的面”为“正面”。

世界坐标是OpenGL中用来描述场景的坐标,Z+轴垂直屏幕向外,X+从左到右,Y+轴从下到上,是右手笛卡尔坐标系统。我们用这个坐标系来描述物体及光源的位置。


三、初始化OpenGL环境

1、基本的初始化代码

在“viewDidLoad”方法内,补充初始化代码:


第一部分:使用“ES2”创建一个“EAGLContext”实例。

第二部分:将“view”的context设置为这个“EAGLContext”实例的引用。并且设置颜色格式和深度格式。

第三部分:将此“EAGLContext”实例设置为OpenGL的“当前激活”的“Context”。这样,以后所有“GL”的指令均作用在这个“Context”上。随后,发送第一个“GL”指令:激活“深度检测”。

第四部分:创建一个GLK内置的“着色效果”,并给它提供一个光源,光的颜色为绿色。

 

2、运行

现在应该是粉红色屏幕了(目前场景仍是空的),说明初始化过程没问题。


四、将顶点数据写入通用的顶点属性存储区

1、写入过程

首先将数据保存进GUP的一个缓冲区中,然后再按一定规则,将数据取出,复制到各个通用顶点属性中。

注:如果顶点数据只有一种类型(如单纯的位置坐标),换言之,在读数据时,不需要确定第一个数据的内存位置(总是从0开始),则不必事先保存进缓冲区。


2、顶点数组保存进缓冲区

 

这几行代码表示的含义是:声明一个缓冲区的标识(GLuint类型)à让OpenGL自动分配一个缓冲区并且返回这个标识的值à绑定这个缓冲区到当前“Context”à最后,将我们前面预先定义的顶点数据“squareVertexData”复制进这个缓冲区中。

注:参数“GL_STATIC_DRAW”,它表示此缓冲区内容只能被修改一次,但可以无限次读取。


3、将缓冲区的数据复制进通用顶点属性中

  

首先,激活顶点属性(默认它的关闭的)。“GLKVertexAttribPosition”是顶点属性集中“位置Position”属性的索引。

顶点属性集中包含五种属性:位置、法线、颜色、纹理0,纹理1。

它们的索引值是0到4。

激活后,接下来使用“glVertexAttribPointer”方法填充数据。

参数含义分别为:

顶点属性索引(这里是位置)、3个分量的矢量、类型是浮点(GL_FLOAT)、填充时不需要单位化(GL_FALSE)、在数据数组中每行的跨度是32个字节(4*8=32。从预定义的数组中可看出,每行有8个GL_FLOAT浮点值,而GL_FLOAT占4个字节,因此每一行的跨度是4*8)。

最后一个参数是一个偏移量的指针,用来确定“第一个数据”将从内存数据块的什么地方开始。


4、继续复制其他数据

在前面预定义的顶点数据数组中,还包含了法线和纹理坐标,所以参照上面的方法,将剩余的数据分别复制进通用顶点属性中。

 

原则上,必须先“激活”某个索引,才能将数据复制进这个索引表示的内存中。

因为纹理坐标只有两个(S和T),所以上面参数是“2”。


五、执行渲染循环

万事具备,现在可以让OpenGL显示一些东西了。

在GLKit框架中,尽管OpenGL的行为,是由“GLKViewController”和“GLKView”联合控制的,但实际上“GLKView”类中完全不需要写任何自己的代码,因为,“GLKView”类中每帧触发的两个方法“update”和“glkView”,都转交给“GLKViewController”代理执行了。


1、添加代理方法

在“ViewController.m”中添加两个方法:

  

这两个方法每帧都执行一次(循环执行),一般执行频率与屏幕刷新率相同(但也可以更改)。

第一次循环时,先调用“glkView”再调用“update”。

一般,将场景数据变化放在“ update ”中,而渲染代码则放在“ glkView ”中。

2、渲染场景


  

前两行为渲染前的“清除”操作,清除颜色缓冲区和深度缓冲区中的内容,并且填充淡蓝色背景(默认背景是黑色)。

“prepareToDraw”方法,是让“效果Effect”针对当前“Context”的状态进行一些配置,它始终把“GL_TEXTURE_PROGRAM”状态定位到“Effect”对象的着色器上。此外,如果Effect使用了纹理,它也会修改“GL_TEXTURE_BINDING_2D”。

 

接下来,用“glDrawArrays”指令,让OpenGL“画出”两个三角形(拼合为一个正方形)。OpenGL会自动从通用顶点属性中取出这些数据、组装、再用“Effect”内置的着色器渲染。

 

3、结果

 

渲染内容终于呈现了,蓝色背景、还有一个绿色矩形(其实是两个三角形)。绿色并非是此物体的本色,而受是绿色灯光影响。

PS:在前面的顶点数据定义中,期望得到一个正方形,但为什么显示结果却是一个矩形?


六、正确显示正方形外观

默认,“Effect”的投影矩阵是一个单位矩阵,它不做任何变换,将场景(-1,-1,-1)到(1,1,1)的立文体范围的物体,投射到屏幕的X:-1,1,Y:-1,1。因此,当屏幕本身是非正方形时,正方形的物体将被拉伸,从而显示为矩形。

实际上,默认的“Effect”模型视图矩阵也是一个单位矩阵。

透视投影中的观察点位于原点(0,0,0),并沿着Z轴的负方向进行观察,就像是从屏幕内部看进去。

 

1、修改投影矩阵

为了正确显示,需要修改投影矩阵。在“update”方法中添加下面的代码:

 

首先计算出屏幕的纵横比(aspect),然后缩放单位矩阵的Y轴,强制将Y轴的单位刻度与X轴保持一致。

 

2、渲染观察效果

 

3、使用透视投影矩阵

把单位矩阵做拉伸,本质上仍然是一个正交投影。要模拟人眼观察世界的效果,则必须使用透视投影。

把上面的代码做一些修改:

 

使用GLKit自带的方法创建出一个透视矩阵,视角、纵横比、近平面、远平面。

渲染效果如下:

 

4、修改模型视图矩阵

上图看起来感觉像一个正方形,但似乎左右两边没显示完整。

原因是,正方形与透视视点距离太近。

有两个方法解决这个问题:一是修改原始的顶点数据(Z轴值),使之透视视点;二是通过所谓的“模型视图矩阵”,将正方形“变换”到远一点的位置。

添加以下代码:

 这样,同样再次显出一个精确的正方形。


七、使用纹理

1、准备纹理

在PS中剪切、调节纹理尺寸(512*512),并保存为Tulips.JPG。本例中使用的图像是一幅黄色的郁金香。

然后在XCODE,导入进工程中。

 

2、使用GLKTextureLoader加载纹理

在“ viewDidLoad ”方法的后面,追加下列代码:
 

首先用“NSBundle”找到资源“Tulips.jpg”的路径,然后用“GLKTextureLoader”类方法同步加载这个纹理,也可以用它的实例方法异步进行加载。

默认,此图片加载进TEXTURE0,如果需要加载进其他单元,需要先用指令“glActiveTexure(GL_TEXTUREn)”。——n为1-(CL_COMBINED_TEXTURE_IMAGE_UNITS-1)中的一个数值。

加载成功后,该纹理的信息都保存在“textureInfo”中,以后,直接使用此变量的相关属性,就可以在OpenGL中应用这个纹理了。


3、将纹理绑定到Effect

接着,继续添加后续代码:

 

4、渲染

 

与意料中的结果似乎有差距,黄色的花瓣变成了绿色?图像是上下颠倒的?


八、纹理细节调整

造成上面错误是原因是:

在最初构造Effect光照时,使用了绿色,所以整个纹理被“染”成为绿色。

图像颠倒是因为纹理的坐标原点不在左下角。

1、修改光照颜色

 

2、将纹理坐标原点改为左下角

GLKit加载纹理,默认都是把坐标设置在“左上角”。然而,OpenGL的纹理贴图坐标却是在左下角,这样刚好颠倒。

在加载纹理之前,添加一个“options”:

 

这个参数可以让系统在加载纹理后,做一些基本的处理。如预乘Alpha、创建“Mipmaps”等。

 

3、渲染,一切正常



九、使用自定义的着色器

迄今,例中只是简单地调用了“GLKit”内置的着色程序进行渲染。但是,在某些情况下,可能需要使用自己的特殊的着色器。

1、编写着色程序

一个着色器由两个部分构成(可以是两个文件,也可以是硬编码嵌在程序中的两段代码字串)。

它们分别是:顶点着色程序和片段着色程序。

创建两个“Empty”文件,分别命名为“v.shader”和“f.shader”。


  

然后,两个文件分别写入这些代码:

2、加载、存储、编译、附着、链接

在OpenGL中使用自定义着色器,过程比较繁琐。

首先需要加载这个文件-->把它转换为GLChar(UTF8编码)-->保存进GUP内存-->编译内存中的字串代码-->附着给“program”对象。

上述过程要进行两次(分别为顶点程序和片段程序)。

最后,将“program”链接到当前“Context”,这样才能在OpenGL中发挥作用。

为了简化代码,可以写成两个方法,作为公共的加载方法使用:

  

3、开始加载自定义的着色器

在“viewDidLoad”方法里追加以下代码:


如何判断着色器是否能正常工作?可以用:

glGetProgramiv(_program, GL_LINK_STATUS, ¶ms);

如果返回的“params”为1,则说明一切正常。

另外,上面代码中“_program”为新添加进去的公共变量

   

4、为着色器提供参数

顶点着色程序需要一个属性参数:position(表示顶点的位置)

 

5、在“glkView”方法后追加

渲染结果为:

屏幕上出现两个矩形,有图案的是用“effct”渲染的,上面红色的是用“_program”自定义着色器渲染的。


十、增加着色器显示纹理

上述着色器是一个超级简单的着色器(几乎没实现什么功能,仅是简单地着为红色)。

下面逐渐增加它的功能。


1、修改着色器

给顶点着色器,增加纹理坐标属性“TexCoord”和该坐标的输出“coord”(此输出将在片段着色器中使用)。


给片段着色器,增加纹理坐标输入“coord”,以及统一的“sampler2D”变量。

 片段的颜色改为由“texture2D”函数计算出来,实际上就是按纹理坐标从纹理像素中取样。

2、绑定着色器变量

要使着色器正常工作,必须提供它需要的参数内容。

在“viewDidload”方法后,添加“绑定”代码:

  

第一部分是绑定“position”属性到通用的的顶点属性索引“0”上,绑定“texCoord”到通用的顶点属性索引“3”上。(索引1是法线,2是顶点颜色)。

绑定后,必须调用“glLinkProgram”方法才能生效。

 

第二部分,绑定“统一的纹理sampler2D”变量,到纹理0号单元——在使用“GLKTextureLoader”加载纹理时,默认是激活了“0”号单元。当然,如果是激活其他单元(例如8),则这里就相应的改为8。

绑定之前,必须调用“glUseProgram”才起作用。


3、运行渲染



十一、着色器顶点变换矩阵

在上述着色器代码中,是直接使用:

gl_Position = position;

也就是说,顶点位置没有经过任何变换,直接使用它的原始数据(所以它的图像也被显示为一个矩形)。


1、引入变换矩阵

修改顶点着色器代码:

  

添加了一个统一的矩阵变量“modelViewProjectionMatrix”(模型、视图、投影矩阵,是这三个变换矩阵合并后(乘法),得到一个单个的矩阵)。将来,要在主程序中将矩阵值传入。


2、传入矩阵值

在“update”方法中,追加下面的代码:

  

查询到“modelViewProjectionMatrix”变量à计算合并矩阵à传给着色器。

传入着色器的值是modelViewProjectionMatrix.m,注意后面的“m”,它表示是一维数组形式的矩阵。


3、再次渲染

 

因为,“Effect”的变换矩阵与“着色器”的渲染结果相同,所以,显示为两个完全重合的正方形。


4、偏离屏幕中心

为了更便于观察,下面将“着色器”渲染的正方形偏离一下。

修改代码:


 

在合并矩阵之前,先把“modelViewMatrix”做一个平移(1.0,1.0,-1.0)。

结果为:


 

注意到两个图像的颜色略有差别,这是因为“Effect”内置的着色器使用了光源。而自定义的着色器没有光效代码,它完全照搬了纹理的“原色”。另外,后面那个正方形变小了,是因为它更远离了“相机”。


十二、动画

所谓动画,其实就是在“update”中有规律地修改一些Matrix参数,连续刷新时,即产生动画的“错觉”。

1、旋转动画

添加一些代码,如下:


  

首先要添加一个全局旋转变量“_rotation”。

然后让它每帧旋转一点点,并以此修改“modelVireMatrix”矩阵。


2、渲染动画效果

 

结果是,正方形围绕“自己”进行了旋转。

如果希望它绕屏幕中心旋转,怎么做?


3、理解矩阵堆栈

OpenGL的矩阵变换是放在一个矩阵堆栈中的(后进先出),代码中矩阵变换的次序,决定了堆栈中矩阵的变换顺序。所以,上述矩阵的变换实际上是倒过来进行的:先做平移,再做旋转,这样它就围绕屏幕中心旋转了。

把上面的代码中“平移”和“旋转”交换一下次序即可:



(完)

你可能感兴趣的:(IOS)