OpenGL之画三角形以及常用API详解。

最近开始学习OpenGL 感觉头都要炸了。 OpenGL的API 关于官方文档 的资料少之又少。经过了几天的翻墙查阅各种国外个资料，感觉受益非浅。接下来，让我来慢慢开始讲一下最近自己所学的知识。

首先创建一个Xcode项目。并且为项目导入OpenGLES.framework 系统库，这样做，我们就用用这个框架来进行绘三角型了。

接下来创建一个HZTriangularView。并把OpenGLES.framework 中两个重要的头文件引入 该文件中。这里注意一下：为什么用ES2呢？ 因为现在广泛应用都是使用ES2 的API了。ES2 和 ES1 API的改动很大。由于根据主流来学习。查阅资料时，资料基本都是ES2 来完成绘画的。

下面四个属性是接下来需要使用到的，在这，我先把它写出来。

#import <UIKit/UIKit.h>

#import <OpenGLES/ES2/gl.h>

#import <OpenGLES/ES2/glext.h>

@interface HZTriangularView : UIView{

    EAGLContext *_context;

    CAEAGLLayer *_eaglLayer;

    GLuint _renderbuffers;

    GLuint _framebuffers ;

}

第一步：在这，有个很重要方法必须重点说明一下，必须实现这个方法。

//  所有的OpenGL渲染都是在这个 CAEAGLLayer类型图层进行渲染的。所以这一个必须设置。否则运行不起来。

+(Class)layerClass{

    return [CAEAGLLayerclass];

}

第二步：

//  创建上下文。

- (void)initContext{

    _context = [[EAGLContextalloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];

    if (!_context) {

        NSLog(@"Failed to initialize OpenGLES 2.0 context");

        exit(1);

    }

    

    if (![EAGLContextsetCurrentContext:_context]) {

        NSLog(@"Failed to set current OpenGL context");

        exit(1);

    }

}

第三步：

//  转化图层。

- (void)initLayer{

    _eaglLayer = (CAEAGLLayer *)self.layer;

    _eaglLayer.opaque =YES;

}

第四步：

//  创建渲染缓冲区。并为其绑定缓冲对象。

- (void)initRenderBuffer{

    glGenRenderbuffers(1, &_renderbuffers);

    glBindRenderbuffer(GL_RENDERBUFFER,_renderbuffers);

    [_context renderbufferStorage:GL_RENDERBUFFERfromDrawable:_eaglLayer];

}

第五步：

//  创建帧缓冲区，并为其绑定缓冲对象。

- (void)initFrameBuffer{

    glGenFramebuffers(1, &_framebuffers);

    glBindFramebuffer(GL_FRAMEBUFFER,_framebuffers);

    // 把渲染缓冲区绑定到帧缓冲区上。并用颜色进行渲染。

    glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0,GL_RENDERBUFFER,_renderbuffers);

}

第六步：

//  渲染

-(void)render{

    glClearColor(162.0/255.0,72.0/255.0,52.0/255.0,1.0);

    glClear(GL_COLOR_BUFFER_BIT);

    [_context presentRenderbuffer:GL_RENDERBUFFER];

}

第七步：

-(instancetype)initWithFrame:(CGRect)frame{

    if (self = [superinitWithFrame:frame]) {

        [self initLayer];

        [self initContext];

        [self initRenderBuffer];

        [self initFrameBuffer];

        [self render];

    }

    return self;

}

写完上面的每一个步骤后，一个基本的渲染就可以成功显示了，别忘了把在控制器中把HZTriangularView创建出来然后添加起来噢，不然显示不出效果的。

运行起来，显示下面的颜色证明你已经成功渲染了一个View，接下来我们就要开始制作三角型的渲染。

开始绘画三角型时，先让我们来了解一下。绘三角型 需要拿一下前提和准备。在这，我会稍微讲解一下。两个文件，一个叫顶点着色器，另一个叫 片元着色器，为什么这两个着色器叫文件呢。因为它跟我们现在Xcode使用的文件不同。后缀是可以任意命名的。

这两个着色器文件中。主要是存储着 顶点 颜色 输入 传出 等等功能，下面代码会一一跟大家介绍。

现在来分析 绘制三角型需要哪些准备：

1.0 三角型的坐标。在二维中坐标用（X,Y）表示 而在三维中 用（X,Y,Z) 

2.0 三角型的颜色。单一的颜色 还是 多种颜色的。

3.0 三角型的连接。三个点连接起来。

看到这里。估计许多同学都会有种懵懵的状态，没关系 下面会慢慢讲解。

在OpenGL中，最常使用的就是C语言的结构体。

//  这是一个代表顶点的结构体 Position:(x,y,z) Color:(R,G,B,A)

typedef struct{

    float Position[3];

    float Color[4];

}Vertex;

//  这就是顶点结构体的 3个顶点和颜色。

const Vertex vertices[]={

    {{0.5,-0.5},{1.0,0.0,0.0,1.0}},

    {{0.5,0.5},{0.0,1.0,0.0,1.0}},

    {{-0.5,0.5},{0.0,0.0,1.0,1.0}}

    

};

    

//  这就是三角型相连的三个点。

const GLubyte Indices[] = {

    0,1,2

};

现在 我们有了三角型 坐标 颜色 相连点。那么我们还需要 有上面说过的 两种着色器。

  triangular.glsl 这个文件叫做顶点着色器，在该文件写入