上面说到需要编译两个着色器。

我们将编译着色器的方法提取出来：

第一步：

前面几行代码我就不解释了。

第四行：我们使用glCreateShader来创建一个代表shader 的OpenGL对象。这时必须告诉OpenGL，你想创建 fragment shader还是vertex shader。这里就是shaderType的作用。返回的是这个着色器的唯一标识ID。

第七行：我们使用glShaderSource来获取这个着色器的源码。第一个参数：这个着色器的唯一标识；第二个参数：几个着色器，第三个参数：这个着色器的源码地址，第四个参数：长度地址

第八行：调用glCompileShader在运行时编译这个着色器。

这个方法封装完成之后，下面我们开始编译这两个着色器.

1 把它们俩关联起来

2 告诉OpenGL来调用这个程序

第二步：

创建两个变量GLuint _positonSlot;

                        GLint _colorSlot;  用来获取两个着色器的指针

前两行代码老规矩不解释了。

第三行：调用了glCreateProgram得到编译器的唯一标识。

第四行，第五行：将两个着色器连接起来组成一个整体的program并连接到这个编译器上。

第六行：调用glUseProgram让OpenGL执行我的program。

第七、八行：调用glGetAttribLocation来获取这两个着色器的指针。至于后面的“position”和“SourceColor”，可以看下我们的SimpleVertex.glsl中，头部定义了两个变量：attribute vec4 Position和attribute vec4 SourceColor，我们这里的目的就是获取这两个变量的值，然后赋值给_positonSlot和_colorSlot变量。

第九行：调用glEnableVertexAttribArray来启用着色器数据。

第三步：

在你用OpenGL渲染图形的时候，时刻要记住一点，你只能直接渲染三角形，而不是其它诸如矩形的图形。所以，一个菱形需要分开成两个三角形来渲染

我们已经完成了着色器的编译，接下来我们画出我们要画的菱形。

先来分析下这个菱形的结果：

这四个点分别是V1（0.5，0，0），V2（-0.5，0.5，0），V3（-0.5，0，0），V0（0.5，-0.5，0）

分析可以知道，我们分隔的两个三角形是顶点（V1，V2，V3）和（V3，V0，V1）

第四步：我们创建一个结构体来存放这些点和这些顶点的颜色

C语言中的结构体，存放位置和颜色

上面分析的四个点的坐标位置和顶点颜色

下面创建三角形的两个顶点数组

就是我们刚才分析的（V1，V2，V3）和（V3，V0，V1）

第五步：创建VBO

传数据到OpenGL的话，最好的方式就是用Vertex Buffer对象。

基本上，它们就是用于缓存顶点数据的OpenGL对象。通过调用一些function来把数据发送到OpenGL-land。（是指OpenGL的画面？）

这里有两种顶点缓存类型– 一种是用于跟踪每个顶点信息的（正如我们的Vertices array），另一种是用于跟踪组成每个三角形的索引信息（我们的Indices array）。

这里面很多东西和第一节的东西一样，这里的说明就标记到代码里面了

第六步：我们重写第一节的render方法。

第七步：下面我们在重写的initFrame方法里面依次调用

运行看看结果吧。