iPhone OpenGL ES 2.0 教程

OpenGLES 是一个低级别的API 让你用来编写2D和3D图像在iPhone上。如果你使用另一些像Cocos2D,Sparrow,Corona 或者 Unity 框架,他们都是建立在OpenGL顶层。
有一个原因为什么程序员喜欢使用这些上层框架比直接使用OpengGL,是因为OpengGL是出了名的难学。
这个教程是为了使开始学习OpenGL的程序员有一个平缓的曲线。在这个系列中,你将掌握一些OpenGL ES的经验,你将能创造一个简单的显示一些简单图形的”Hello,World“程序。

在这个过程中,你将学到的如下面:

  • 怎样从头开始得到一个基于OpenGL的程序
  • 怎样编译和运行顶点和片段着色器
  •  怎样用顶点缓冲对象渲染一个简单的正方体在屏幕上
  • 怎样用投影和模型窗口转换
  • 怎样用深度测试渲染一个3D对象

警告:我不是一个Openg GL的专家!我是学习靠我自己和写这个教程同时。如果我制造了一些愚蠢的错误,请随意作出修正或见解。

Open GL ES 1.0 VS OpenGL ES 2.0
   首先你的知道,有两个不同版本的OpenGL(1.0 和 2.0),并且他们是不同的。
  •  OpenGL ES 1.0 使用固定管线,用使用内部的函数来设置光线,顶点,颜色,摄像机等等。
  • OpenGL ES 2.0 使用可编程管线,也就是说所有的内部函数没有了,你必须写所有的东西靠你自己。
  你或许回想“我的天啊”,如果他仅仅使增加工作,为什么还要使用OpenGL 2.0.尽管增加了一些额外的工作,使用OpenGL ES 2.0 你将做一些真真酷的效果而Open GL 1.0是不可能做到的。

iPhone OpenGL ES 2.0 教程_第1张图片

像这个卡通着色。
iPhone OpenGL ES 2.0 教程_第2张图片
甚至这个令人惊讶的光线和着色效果。
iPhone OpenGL ES 2.0 教程_第3张图片

相当酷吧?

Open GL 2.0 是仅仅能在iPhone 3GS,iPod Touch 3G 以上版本和所有的iPad中使用。

这些是站现在设备中大部分百分比,这是我们的教程将要关注的!


开始

尽管Xcode有OpenGL ES 工程模板,我想那个是困惑的对于刚开始,因为你必须通过一些代码你不能写的靠你自己,试着理解怎样工作。我想他是容易的如果你写所有的代码从头开始,那么你能理解每一处地方,所以我们这样做。

启动Xcode,到File\New\New Project,选择 iOS\Application\Window-based Application,然后点Next,你的工程名字是HelloOpenGL,点Next,选择一个目录保存他,
然后点击Create。

编译和运行,然后你将看到一个空的白色屏幕。

iPhone OpenGL ES 2.0 教程_第4张图片

这个 Window-based Application 模板是从开头在Xcode中和工程模板。他要做的是创造一个UiWindow然后呈现他在屏幕中。没有窗口,窗口控制器和其他任何东西。让我们增加一个窗口,包含OpengGL内容,去 File\New\New File, 选择 iOS\Cocoa Touch\Objective-C 类, 然后点击 Next. 进入 UIView的子类,点 Next, 新类的名字是OpenGLView.m, 点击保存.
下一步,你将增加一串代码到 OpenGLView.m 中,插入 @implementation 仅仅改变颜色为绿色。
一点点的增加每一步,我将解释每一部分我们写的

1) 增加需要的框架
第一步增加你使用OpenGL的两个框架 - OpenGLES.frameworks and QuartzCore.framework.
增加这些框架在Xcode4 中,点击 在你的 HelloOpenGL 工程 在 Groups & Files 树,然后选择  HelloOpenGL target.(选择 Build Phases) 展看 Link Binary with Libraries 节, 点击 + 按钮, 然后选择 OpenGLES.framework.   QuartzCore.framework 一样做。

iPhone OpenGL ES 2.0 教程_第5张图片


2)修改OpenGLView.h

#import <UIKit/UIKit.h>  
#import <QuartzCore/QuartzCore.h>  
#include <OpenGLES/ES2/gl.h>  
#include <OpenGLES/ES2/glext.h>  
   
@interface OpenGLView : UIView {  
    CAEAGLLayer* _eaglLayer;  
    EAGLContext* _context;  
    GLuint _colorRenderBuffer;  
}  
   
@end  

导入你的OpenGL需要的头文件,先创建些你将会用到的实力变量。


3)为CAEAGLLayer设置layer 类

+ (Class)layerClass {  
    return [CAEAGLLayer class];  
}  

设置一个视图显示OpenGL内容,你需要设置一种回调CAEAGLayer的特别层作为默认层。设置的方法是简单重载layerClass方法,仅仅像你上面做的。

4)设置非透明的层。

- (void)setupLayer {  
    _eaglLayer = (CAEAGLLayer*) self.layer;  
    _eaglLayer.opaque = YES;  
}  

默认的CALayers是透明的,这个是影响性能的一个原因。所有最好设置为非透明。


5)创建OpenGL上下文

- (void)setupContext {     
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;  
    _context = [[EAGLContext alloc] initWithAPI:api];  
    if (!_context) {  
        NSLog(@"Failed to initialize OpenGLES 2.0 context");  
        exit(1);  
    }  
   
    if (![EAGLContext setCurrentContext:_context]) {  
        NSLog(@"Failed to set current OpenGL context");  
        exit(1);  
    }  
}  

- (void)setupRenderBuffer {  
    glGenRenderbuffers(1, &_colorRenderBuffer);  
    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);          
    [_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:_eaglLayer];      
}  


要用OpenGL做任何事,你需要创造一个EAGLContext,并且设置当前上下文为你上面创建的。


一个EAGLContxt管理所有用OpenGL画时iOS需要的所有信息,这个是与你用CoreGraphics画时需要一个CoreGraphics上下文是相似的。

当你创建上下文的时候,你需要指定你需要使用的API版本。这里你想使用OpenGL2.0.如果不能使用(比如程序需要运行在iPhone 3G上)这个程序将结束。

6)创造渲染缓冲


下一步是使用OpenGL创建一个渲染缓冲,他是一个OpenGL对象用来存储图像并显示到屏幕上。

有时候你讲看到颜色缓冲也引用到渲染缓冲。因为本质上他是存储颜色来显示的。


有一些步骤来创建渲染缓冲:

1.调用glGenRenderbuffers来创建一个新的渲染缓冲对象,然后返回一个唯一的整数表示渲染缓冲(我们存储他在_colorRenderBuffer)。有时候你将认为这个唯一的整数是OpenGL的名字。

2.调用glBindRenderbuffer来告诉OpenGL。当我使用GL_RENDERBUFFER,我真正要使用的是_colorRenderBuffer。

3.最后分配一些存储空间给渲染缓冲。你能使用你上面创建的EAGLContext的renderbufferStorage方法。

7)创建帧缓冲

- (void)setupFrameBuffer {      
    GLuint framebuffer;  
    glGenFramebuffers(1, &framebuffer);  
    glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);  
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,   
        GL_RENDERBUFFER, _colorRenderBuffer);  
 }  

一个帧缓冲是一个OpenGL对象包括渲染缓冲,你将学到一些其他缓冲像深度缓冲,模板缓冲,累计缓冲。

首先的两步是创建一个帧缓冲是相似的创建渲染缓冲,它使用glGen和glBind就像你上面看到的,仅仅在结束处 “Framebuffer/s” 代替 “Renderbuffer/s”.

最后一个函数调用是新的,让你附加先前的渲染缓冲到帧缓冲的GL_COLOR_ATTACHMENT0位置。


8)清除屏幕

<span style="font-size:14px;">- (void)render {  
    glClearColor(0, 104.0/255.0, 55.0/255.0, 1.0);  
    glClear(GL_COLOR_BUFFER_BIT);  
    [_context presentRenderbuffer:GL_RENDERBUFFER];  
}  </span>
c

我们试着得到一些显示在屏幕上尽可能快的,在处理顶点,阴影以前,让我们仅仅用一个特别的颜色清除整个屏幕。

让我们它为这个网站的主颜色,是0,104,55.注意,你必须用255(这个颜色的最大值)划分这个颜色值,因为对于每个组建这个颜色范围是0到1.

为了实现这个目的我们需要在这里做三步:

  • 调用glClearColor来指定RGB和透明的值为了清除屏幕的时候使用
  • 调用glClear来实际执行这个清除。记住这个能用来不同类型的缓冲,像我们用了显示的渲染/颜色缓冲,和一些我们没有使用任然可以的深度和模板缓冲。这里我们使用GL_COLOR_BUFFER_BIT来指定哪一种应该擦出的,这里是渲染/颜色缓冲。
  • 在OpenGL上下文中调用一个方法呈现这个渲染/颜色缓冲给UIView层。

9)在OpenGLView.m中的包装代码

// Replace initWithFrame with this  
- (id)initWithFrame:(CGRect)frame  
{  
    self = [super initWithFrame:frame];  
    if (self) {          
        [self setupLayer];          
        [self setupContext];                  
        [self setupRenderBuffer];          
        [self setupFrameBuffer];                  
        [self render];          
    }  
    return self;  
}  
   
// Replace dealloc method with this  
- (void)dealloc  
{  
    [_context release];  
    _context = nil;  
    [super dealloc];  
}  

这里仅仅是一些帮助代码调用上面的所以方法和清除在dealloc中。

10)在App Delegate勾住OpenGLView
HelloOpenGLAppDelegate.h做下面的改变:

// At top of file  
#import "OpenGLView.h"  
   
// Inside @interface  
OpenGLView* _glView;  
   
// After @interface  
@property (nonatomic, retain) IBOutlet OpenGLView *glView;  

和下面的改变在 HelloOpenGLAppDelegate.m中:

// At top of file  
@synthesize glView=_glView;  
   
// At top of application:didFinishLaunchingWithOptions  
CGRect screenBounds = [[UIScreen mainScreen] bounds];      
self.glView = [[[OpenGLView alloc] initWithFrame:screenBounds] autorelease];  
[self.window addSubview:_glView];  
   
// In dealloc  
[_glView release];  <span style="color: black; line-height: 18px; font-family: Consolas, 'Courier New', Courier, mono, serif; font-size: 12px; background-color: inherit;"> </span>

这里是简单的创建了一个OpenGLView的实例在启动的时候,并且附加到窗口上。

这就是所有的,编译和运行你的工程。你将看到一个用OpenGL ES 2.0画的绿色屏幕。
iPhone OpenGL ES 2.0 教程_第6张图片

你可能感兴趣的:(图形,OpenGL,es)