OpenGL ES for iPhone: Drawing a Circle

Processing译者注:processing是个编程语言,下同)转到iPhone开发是个痛苦的过程。OpenGL的实现有些不同,而且文档很少。我从Dave Mark and Jeff Lamarche 写的“Beginning iPhone Development”以及iPhone Development blog上学到不少。在这几篇文章中我想分享我学到的一些知识。可以把这个教程作为iPhone生成设计的入门来阅读,让我们开始OpenGL编程吧。

 

第一步:把工程搭起来

OpenGL ES Application 模板建立一个新的工程以openglcircle命名。

确定你成功用 UIStatusBarHidden trick 隐藏了状态栏,得到一个全屏程序。

 

第一步:一些便捷的函数

新增一个头文件 Constants.h到工程。这个文件包含一些很便捷的函数,将会在接下来的设计中多次使用到。一个函数是把角度转换成幅度,另一个函数是生成一个区间范围内的随机float数。把下面的代码加入到文件中:

#define DEGREES_TO_RADIANS(x) \
    (3.14159265358979323846 * x / 180.0)
#define RANDOM_FLOAT_BETWEEN(x, y) \
    (((float) rand() / RAND_MAX) * (y - x) + x)
 

第三步: hold住速度

打开 openglcircleAppDelegate.m ” animationInterval 改成1.0 / 2.0” 。这样,view将在一秒内只刷新两次。你可以在完成整个工程后再把这个数字改回来。但是现在刷新慢点可以让我们更清楚的看到屏幕的变化。

 

第四步:编辑View

打开 EAGLView.m ” import头文件 Constants.h ”接下来删除 drawView方法并添加我们的自定义绘图方式。就像下面这样:

- (void)drawView {
    [EAGLContext setCurrentContext:context];
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, ¬
        viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);
    glMatrixMode(GL_MODELVIEW);
    //
    // custom drawing will be done right here ...
    //
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, ¬
        viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
}
 

第五步:清空背景

processing中可以使用 background(0) 清空背景为黑色。OpenGL ES 中你需要结合glClear()glClearColor()来完成。glClearColor() 设置背景颜色,glClear()把颜色刷新出来。glClearColor()方法有4个颜色参数 (red, green, blue and alpha)值必须在 0.0  1.0之间
如果glClear()参数设置成 GL_COLOR_BUFFER_BIT,函数将会清空显示屏。把这两行加到glOrthof()函数后面。

glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
 

第六步:画圆

为了美观,我们需要定360个点来绘制这个圈。每个点有两个值:x轴和y轴,所以我们需要计算720个数值。我们现在需要一个空的 GLfloat 数组来装着720个值。

代码如下:

GLfloat vertices[720];

接下来的这段代码把unit circle边界正确的xy值填进数组:

 

译者注:原文为DEGREES_TO_RADIANS(i),有读者发现错误,应为DEGREES_TO_RADIANS(i/2)

这里已修正。

for (int i = 0; i < 720; i += 2) {
    // x value
    Vertices[i]   = (cos(DEGREES_TO_RADIANS(i/2)) * 1);
    // y value
    vertices[i+1] = (sin(DEGREES_TO_RADIANS(i/2)) * 1);
}

你必须告诉OpenGL你绘制的图形(圆)所需要的顶点数组。调用 glVertexPointer() 方法设置顶点。同时调用glEnableClientState()方法来启用设置的顶点数组 

glVertexPointer(2, GL_FLOAT, 0, vertices);
glEnableClientState(GL_VERTEX_ARRAY);

绘制图形前,我们必须告诉OpenGL需要绘制的图形颜色。在Processing中使用函数fill().,而在 OpenGL 中我们可以用 glColor4f()方法设置图形颜色。 这个方法和之前提到的glClearColor()方法一样有4个颜色参数。下面这行代码设置填充色为红色:

glColor4f(1.0f, 0.0f, 0.0f, 1.0f);

最后,调用 glDrawArrays() 方法把圆画出来。

glDrawArrays(GL_TRIANGLE_FAN, 0, 360);

在模拟器下运行,将会看到下图的结果


Downloads

你可以在这里下载教程的工程文档: openglcircle.zip.

添加随机颜色

在实际使用中经常使用随机颜色,在iPhone上可以很容易的实现这个功能。我们可以把圆周分成360等份,在绘制圆时我们要把每一等分都分配一种随机颜色。每个随机颜色的值由4部分组成,分别是red、green、blue和alpha,所以我们需要一个数组来存储圆的每一等份的4个值。下面的代码创建了一个GLfloat类型的数组,用来存放0.0~1.0之间的随机RGB值和固定为1.0不变的Alpha值。

 

// create empty array to store color values

GLfloat colors[1440];

// fill array with color values

for (int i = 0; i < 1440; i += 4) {

    // red value

    colors[i]   = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    // blue value

    colors[i+1] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    // green value

    colors[i+2] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    // alpha value

    colors[i+3] = 1.0;

}

 

如果要随机颜色来绘制圆的话,需要将原来的glColor4f()方法用glColorPointer()方法来替换。代码如下:

 

glColorPointer(4, GL_FLOAT, 0, colors);

glEnableClientState(GL_COLOR_ARRAY);

 

运行程序后,你将会看到如下所示的起点在右边的很奇怪的一副图:


如何绘制的起点在中间,使所有三角都一样大小,相信会好看得多。

画一个更好的圆

画一个更漂亮的圆其实是很容易的。你指需要将x=0.0和y=0.0的地方设置为起点,那么所有的有绘制区域就都是从圆心到圆周了。我们发现,改变绘制方式以后数组的长度只有722了。

上一节教程的程序的这里有一个小小的bug,在这里你需要将等份的计算方法改为DEGREES_TO_RADIANS(i/2)来获得0~360之间的相位值。改变后的代码如下:

 

// create an array with a size of 722

GLfloat vertices[722];

// add 2 vertices at 0.0 (x and y for the first point)

vertices[0] = 0.0;

vertices[1] = 0.0;

// fill the rest of the array with x and y values

// on the perimeter of the circle.

for (int i = 0; i < 720; i += 2) {

    vertices[i+2] = (cos(DEGREES_TO_RADIANS(i/2)) * 1);

    vertices[i+3] = (sin(DEGREES_TO_RADIANS(i/2)) * 1);

}

// 2 vertices to close the circle so it looks perfect

vertices[719] = 0.0;

vertices[720] = 1.0;

You’ll also need to add one extra color to the colors array. Change the colors code to this:

GLfloat colors[1444];

for (int i = 0; i < 1444; i += 4) {

    colors[i]   = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    colors[i+1] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    colors[i+2] = RANDOM_FLOAT_BETWEEN(0.0, 1.0);

    colors[i+3] = 1.0;

}

最后的一点小更改是为了告诉OpenGL要绘制361等份,不是360等份。

glDrawArrays(GL_TRIANGLE_FAN, 0, 361);

运行程序,一个漂亮的圆将会展现在你的眼前。


Downloads

你可以在这里下载教程的工程文档:openglcircle2.zip


第三节分我们将要学习怎样优化可以让我们的app运行流畅。前面的例子中,每次view调用draw方法的时候都会计算一次顶点。这是很浪费cpu的,因为这些顶点的值并没有被改变。如果我们只在程序加载的时候计算一次顶点效果会更好。

把下面的代码片段加入EAGLView.h中的@interface部分,同时把drawView方法里面的相同代码删除。使类的所有方法都可使用这两个值。

GLfloat vertices[722];

GLfloat colors[1444];

 

把以下计算顶点的代码片从drawView移到initWithCoder

vertices[0] = 0.0;

vertices[1] = 0.0;

for (int i = 0; i < 720; i += 2) {

    vertices[i+2]  = (cos(DEGREES_TO_RADIANS(i/2)) * 1);

    vertices[i+3] = (sin(DEGREES_TO_RADIANS(i/2)) * 1);

}

vertices[719] = 0.0;

vertices[720] = 1.0;

 

缩放圆

假如你希望绘制一个大一点或者小一点的圆你不需要重新计算顶点。你可以使用 glScalef()方法缩放圆。这个方法提供了3个参数:xyz。把下面代码添加到绘制顶点数组代码之前。

glScalef(0.7, 0.7, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 0, 361);

 

只有原大小70%的圆将被绘制到屏幕上。然而这里还有个小问题,这个圆会在每次调用drawView方法后缩小到原来的70%,最后小到看不见。我们可以用 pushMatrix() popMatrix() 方法来解决这个问题。把绘制图形的代码改成下面这样:

glPushMatrix();

glScalef(0.7, 0.7, 1.0);

glDrawArrays(GL_TRIANGLE_FAN, 0, 361);

glPopMatrix();

 

Downloads

你可以在这里下载教程的工程文档: openglcircle3.zip.



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值