OpenGLES 1.1教程(二)-简单图形的绘制

转自: http://www.helmsmansoft.com/index.php/archives/1461

继上一课程，上次的课程简单说了一些关于OpenGLES 1.1的基础内容，包括初始化上下文，缓冲区的创建与绑定，及使用清屏色清屏，每段代码都加了说明，相信大家也都能看的明白了。那么这节就在上节的基础上继续进行课程说明。

这个教程主要是说一下使用OpenGLES 1.1命令绘制简单的2D图形。主要是使用上节课的模版来继续教程，如果您还没有模版，可以到这里下载:模版下载

下面就开始本节的教程：

下载模版以后，打开工程，打开RenderView.m文件，可以在里面找到- (void)render方法（渲染方法），修改这个方法代码如下：

//渲染方法
- (void)render
{
 
    static CGFloat spinnySquareVertices[8] = {
        -1.0f, -1.0f,
        1.0f,  -1.0f,
        -1.0f,  1.0f,
        1.0f,   1.0f,
    };
 
    glClearColor(0.1f, 0.8f, 1.0f, 1.0f); //设置清屏颜色
    glClear(GL_COLOR_BUFFER_BIT);  //清屏
    glViewport(0, 0, backingWidth, backingHeight);  //设置视口
 
    glColor4f(1.0, 1.0, 0.0, 1.0);  //绘制的颜色
    glVertexPointer(2, GL_FLOAT, 0, spinnySquareVertices); //确定使用的顶点坐标数列的位置和尺寸
    glEnableClientState(GL_VERTEX_ARRAY);  //启动独立的客户端功能，告诉OpenGL将会使用一个由glVertexPointer定义的定点数组
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); //进行连续不间断的渲染,在渲染缓冲区有了一个准备好的要渲染的图像
 
    [_context presentRenderbuffer:GL_RENDERBUFFER_OES]; //将渲染缓冲区的内容呈现到屏幕上
 
}

这里来逐行讲解下代码的具体作用:

static CGFloat spinnySquareVertices[8] 定义了一个类型为CGFloat的数组，说到这先来看下在IPone中OpenGL的默认坐标，如下图：

http://www.helmsmansoft.com

上面的图代表iphone的整个界面，OpenGL在其中的坐标如上图，那么从上图就可以看出，我们定义的数组（ CGFloat spinnySquareVertices[8]）的数据就是充满整个屏幕的。

glColor4f(1.0, 1.0, 0.0, 1.0) 绘制使用的颜色，参数为浮点数(0.0,1.0).

glVertexPointer(2, GL_FLOAT, 0, spinnySquareVertices) 确定使用的顶点坐标数列的位置和尺寸,其中4个参数，

第一个参数表示绘制一个定点的坐标个数，我们这里绘制的是一个充满屏幕的矩形，每个点由X和Y构成，所以是2
第二个参数表示使用的数据的类型，一般都为GL_FLOAT类型
第三个参数表示各个顶点之间跨越的字节数，这里使用的连续绘制，所以无跳跃，为0
第四个参数表示要读取的数组数据中第一个坐标元素

glEnableClientState(GL_VERTEX_ARRAY); 启动独立的客户端功能，告诉OpenGL将会使用一个由glVertexPointer定义的定点数组，此命令告诉OpenGL使用上面传入的数据真正的去绘制
PS:默认状态下，所有的客户端功能均被禁止，所以必要时需要将他们开启或关闭，启动一个客户端功能使用命令glEnableClientState

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4) 使用此命令来驱动OpenGL进行渲染，

第一个参数表示OpenGL用给定顶点应该呈现的基本类型，使用GL_TRIANGLE_STRIP命令可以让我们禁用四个顶点就可以定义两个三角形。
PS:OpenGL支持四边形，但OpenGLES并不支持四边形，仅支持三角形。
第二个参数表示传入的顶点数组中的起始指标
第三个参数表示从数组中读取的顶点数,我们绘制的是一个充满屏幕的四边形，有4个顶点

上面讲解的就是在原来基础模版上加的代码的功能，我们运行程序可以看到屏幕的状态如下图：

从这里可能不能看出具体绘制的形状，因为充满了屏幕，在上面了解了OpenGL坐标之后，可以对顶点数组进行一点修改，如下：

 static CGFloat spinnySquareVertices[8] = {
        -0.5f, -0.5f,
        0.5f,  -0.5f,
        -0.5f,  0.5f,
        0.5f,   0.5f,
    };

运行程序如下图：

我们通过以上的数据可命令代码绘制出了一个举行，那么怎么绘制出一个三角形呢？相信大家看了上面的说明应该很容易想出办法，其实很简单，只需要简单的修改两个参数就可以办到，如下：

glDrawArrays(GL_TRIANGLES, 0, 3);  //把第一个参数GL_TRIANGLE_STRIP改成GL_TRIANGLES,最后一个参数改为3
//glDrawArrays(GL_TRIANGLE_STRIP, 0, 3);//第一个参数不修改也可以实现上面的效果

运行程序，效果如下：

上面的实现，所有的2D图形都是纯色的效果，那好，下面就来实现彩色的二维图形，很简单，在render方法里，添加如下代码

一个颜色数组

static CGFloat spinnSquareColor[] = {
 
        255,255,0,255,
        0,255,255,255,
        0,0,0,0,
        255,0,255,255,
 
    };

和对颜色数组的调用使用,继续在render 里添加如下代码:

    glColorPointer(4, GL_UNSIGNED_BYTE, 0, spinnSquareColor);  //设置顶点颜色
    glEnableClientState(GL_COLOR_ARRAY);

这里对glColorPointer方法做下说明：
第一个参数，同上，一个顶点使用的坐标个数，这里是用4个值来表示一个颜色点
其他的就跟上面的方法一样了

效果图如下：

把 glVertexPointer(2, GL_FLOAT, 0, spinnySquareVertices);方法的第二个参数改为GL_FLOAT效果图如下：

下面是顶点属性数据类型

 

 顶点属性数据类型

OpenGL Type	OpenGL Enumerant	Typedef Of	Length in Bits
GLbyte	GL_BYTE	signed char	8
GLubyte	GL_UNSIGNED_BYTE	unsigned char	8
GLshort	GL_SHORT	short	16
GLushort	GL_UNSIGNED_SHORT	unsigned short	16
GLfixed	GL_FIXED	int	32
GLfloat	GL_FLOAT	float	32