《OpenGL ES应用开发实践指南:Android卷》—— 3.5 在屏幕上绘制

3.5 在屏幕上绘制

随着完成这些最后的连接,我们现在就准备好开始在屏幕上绘制了!我们将先画桌子,然后画分隔线和木槌。
3.5.1 绘制桌子
在onDrawFrame()结尾处,让我们在glClear()调用之后加入如下代码:

我们首先通过调用glUniform4f()更新着色器代码中的u_Color的值。与属性不同,uniform的分量没有默认值,因此,如果一个uniform在着色器中被定义为vec4类型,我们需要提供所有四个分量的值。我们想要以画一张白桌子作为开始,因此,我们把红色、绿色和蓝色的值设置为代表完全亮度的值1.0f;阿尔法的值无关紧要,但是我们还是要指定它,因为一个颜色有四个分量。
一旦指定了颜色,接下来就可以用glDrawArrays(GLES20.GL_TRIANGLES, 0, 6)绘制桌子了;第一个参数告诉OpenGL,我们想要画三角形。而要画三角形,我们需要给每个三角形传递进去至少三个顶点;第二个参数告诉OpenGL从顶点数组的开头处开始读顶点;而第三个参数是告诉OpenGL读入六个顶点。因为每个三角形有三个顶点,这个调用最终会画出两个三角形。
让我们快速看一下本章起始处定义的顶点数组:

当我们调用glVertexAttribPointer()方法的时候,记得我们曾告诉OpenGL每个顶点的位置包含两个浮点数分量。glDrawArrays()调用让OpenGL使用前六个顶点绘制三角形,因此,OpenGL会使用下面这些位置绘制它们:

第一个被绘制的三角形由点(0, 0)、(9, 14)和(0, 14)围成,而第二个由点(0, 0)、(9, 0)及(9, 14)围成。

3.5.2 绘制分隔线

下一步是绘制跨越桌子中间的中心分隔线。
在onDrawFrame()方法的结尾处加入如下代码:

通过传递1.0f给第一个分量(红色)及传递0.0f给绿色和蓝色,我们把颜色设为红色;但这次需要OpenGL画线;我们从六个顶点后的第一个顶点开始读入两个顶点,OpenGL就可以画出线了。正如Java数组一样,这里使用基于0的编号规则:0、1、2、3、4、5、6,数字6就是六个顶点后的第一个顶点,或者是第七个顶点。因为每条线有两个顶点,最终用这些位置可以画出一条线:

OpenGL会从(0, 7)到(9, 7)画一条线。

3.5.3 把木槌绘制为点

最后要做的就是画两个木槌;在onDrawFrame()结尾处加入如下代码:

通过传递GL_POINTS给glDrawArrays()方法,我们让OpenGL绘制点。对于第一个木槌,我们设置其颜色为蓝色,从偏移位置8开始,并用一个顶点绘制一个点;对于第二个木槌,我们设置其颜色为红色,以偏移位置9开始,并用一个顶点绘制一个点。我们将使用下面这些位置绘制这两个点:

OpenGL会在(4.5, 2)绘制第一个点,在(4.5, 12)绘制第二个点。

3.5.4 目前为止我们得到了什么

让我们运行这个程序,看看屏幕上会出现什么。按“Ctrl+F11”键让程序运行,观察设备上或模拟器里会显示什么。你的屏幕看起来应该与图3-1相似。如果碰到了什么问题,首先在Eclipse里尝试选择“Project->Clean”,清理这个程序。

哦,看起来,哪里不太对!这个背景还是我们在第1章中使用的扎眼的红色,对于那个空气曲棍球桌子,我们为什么只看到一个角呢?在讨论这个之前,让我们来修复这个清屏用的颜色。在onSurface-Created()方法的开始处,找到glClearColor()的调用,把它更新成如下代码:

当glClear()方法被调用的时候,这会告诉OpenGL把屏幕清除成黑色,而不是红色。现在我们已经修复了那个扎眼的红颜色,需要看一下为什么我们只能看见空气曲棍球桌子的一个角了。

3.5.5 OpenGL如何把坐标映射到屏幕

目前为止,我们还没有解决的一个大问题就是:OpenGL是怎样把我们已经定义的坐标映射到屏幕上的实际物理坐标的?
这个问题的答案很复杂,随着后面章节的讲解,我们会了解到更多有关的内容;目前,我们只需要知道,无论是x还是y坐标,OpenGL都会把屏幕映射到[-1,1]的范围内。这就意味着屏幕的左边对应x轴的-1,而屏幕的右边对应+1;屏幕的底边会对应y轴的-1,而屏幕的顶边就对应+1,如图3-2所示。

不管屏幕是什么形状和大小,这个坐标范围都是一样的,如果我们需要在屏幕上显示任何东西,都需要在这个范围内绘制它们。让我们回到构造函数,把tableVertices-WithTriangles中定义的坐标更新为如下值:

让我们再次运行这个应用,我们应该看到与图3-3类似的屏幕:

这看起来好多了,但是木槌哪去了?事实证明,对于点来说,OpenGL需要我们指定在屏幕上所显示的点的大小,但我们还没指定这个大小呢。

3.5.6 指定点的大小

我们可以更新代码,告诉OpenGL那些点在屏幕上所显示的大小。在simple_vertex_shader.glsl文件里,在gl_Position赋值后面,我们可以加入如下代码行指定其大小:

通过给另外一个特殊的输出变量gl_PointSize赋值,我们告诉OpenGL这些点的大小应该是10。你可能会问,10个什么?当OpenGL把一个点分解为片段的时候,它会生成一些片段,它们是以gl_Position为中心的四边形,这个四边形的每条边的长度与gl_PointSize相等。gl_PointSize值越大,屏幕上绘出的点越大。
让我们再运行一次这个应用。我们应该能看到如图3-4所示的木槌,每个木槌都被渲染为单个的点。

我们终于把它画出来了!休息一下,坐下来,回忆一下你在本章学过的内容。本章的内容很多,但是我们还是把它讲完了,而且想办法得到了我们要在屏幕上显示的东西。
如果你准备好了,让我们回顾一下学过的内容,再做两个后续的练习。

时间: 2024-10-31 16:30:37

《OpenGL ES应用开发实践指南:Android卷》—— 3.5 在屏幕上绘制的相关文章

《OpenGL ES应用开发实践指南:Android卷》—— 导读

前 言 Android刚刚经历了一个难以置信的增长周期,全世界的消费者手里有超过7.5亿台设备,并且每天都有一百多万台设备被激活.和Apple一样,在每一台Android手机和平板上也有个集中的市场,称为Google Play.随着这个市场被安装到每台Android设备上,对任何一个梦想着发布自己的游戏或者壁纸的人来说,这都是个前所未有的机会. 在Android上,与Apple的iOS及许多其他移动平台一样,开发者可以使用一个跨平台应用编程接口创建二维或者三维图形,这个接口称为OpenGL:Op

《OpenGL ES应用开发实践指南:Android卷》—— 2.1 为什么选择空气曲棍球

2.1 为什么选择空气曲棍球 空气曲棍球是一个简单.流行的游戏,经常可以在保龄球馆和酒吧里见到它.尽管简单,但非常容易让人上瘾.在Android的应用市场--Google Play里,一些顶级游戏都是基于该游戏或者其他令人愉快的游戏的变种.随着空气曲棍球游戏开发的讲解,我们会学习很多OpenGL概念.我们会学习如何定义和绘制一个可以玩游戏的桌子,以及如何添加一些细节,如颜色.着色器和纹理.我们也会学习如何通过执行触屏事件响应用户操作. 游戏规则要玩空气曲棍球游戏,我们需要一个有两个球门的长方形桌

《OpenGL ES应用开发实践指南:Android卷》—— 第1章 准 备 开 始

第1章 准 备 开 始 在本章里,我们会直奔主题,创建我们的第一个Android OpenGL应用程序.在阅读本书每一章的过程中,你会发现,每一章都会以概述作为开始,然后浏览"游戏计划",也就是那一章的开发计划.下面就是本章的"游戏计划":首先,我们会安装和配置开发环境:然后,创建我们的第一个OpenGL应用程序,它将初始化OpenGL,并且处理Android的Activity组件的生命周期:关于生命周期,后文会做详细介绍.这些将作为我们需要在屏幕上绘制东西时的基础

《OpenGL ES应用开发实践指南:Android卷》——第3章 编译着色器及在屏幕上绘图

第3章 编译着色器及在屏幕上绘图 本章会继续上一章开始的工作.作为本章的开发计划,我们首先加载并编译前面定义的着色器,然后把它们链接在一起放在OpenGL的一个程序里.我们接下来就可以用着色器程序在屏幕上绘制空气曲棍球桌子了.打开上一章启动的AirHockey1项目,并从那里开始.

《OpenGL ES应用开发实践指南:Android卷》—— 2.7 小结

2.7 小结 本章用大量篇幅只介绍了如何定义数据,以及沿着OpenGL管道移动数据的着色器.让我们花点儿时间复习一下本章学到的那些关键概念:首先,我们学习了如何定义一个顶点属性数组,并把这个数组复制到本地内存里,以便OpenGL存取它.然后,我们写了一个顶点着色器和一个片段着色器:并了解到一个着色器只是可以运行在GPU上的一个特殊类型的程序.在下一章里,我们会在本章的基础上继续开发:在下一章的结尾处,我们就能看到空气曲棍球桌子了,也将为进一步的练习做好准备.我们将以学习如何读入和编译定义过的着色

《OpenGL ES应用开发实践指南:Android卷》—— 第2章 定义顶点和着色器

第2章 定义顶点和着色器 本章介绍我们的第一个项目:一个简单的空气曲棍球游戏.在我们开发这个项目的过程中,会学习到一些主要的OpenGL组件.作为起始,我们会学习如何使用独立的点集合构建物体,这些点称为顶点:之后,我们会学习怎样使用着色器绘制这些物体,以及告诉OpenGL如何绘制这些物体的一些小程序.顶点和着色器这两个概念极其重要,因为每个物体的构建都是通过顶点的聚合形成点.直线和三角形,并且这些基本图形都要使用着色器绘制.我们会首先学习顶点,这样就可以构建空气曲棍球游戏中用到的桌子,并且使用O

《OpenGL ES应用开发实践指南:Android卷》—— 1.1 安装工具

1.1 安装工具 下面是开发Android OpenGL所需要的基本工具列表: 一台运行Windows.OS X或者Linux的计算机 Java开发包(JDK) Android软件开发包(SDK) 集成开发环境(IDE) 一个手机.平板电脑或者支持OpenGL ES 2.0的模拟器 你需要的第一个工具是一台适合开发的个人计算机:任何较新的计算机都可以,它需要能运行Windows.OS X或者Linux.在这台计算机上,你需要安装Java开发包,可以从Oracle的网站下载:当前,Google指定

《OpenGL ES应用开发实践指南:Android卷》—— 1.4 创建Renderer类

1.4 创建Renderer类 现在要定义一个渲染器,以便我们开始清空屏幕.让我们快速浏览一下渲染器接口定义的方法: onSurfaceCreated(GL10 glUnused, EGLConfig config) 当Surface被创建的时候,GLSurfaceView会调用这个方法:这发生在应用程序第一次运行的时候,并且,当设备被唤醒或者用户从其他activity切换回来时,这个方法也可能会被调用.在实践中,这意味着,当应用程序运行时,本方法可能会被调用多次. onSurfaceChang

《OpenGL ES应用开发实践指南:Android卷》—— 3.4 做最后的拼接

3.4 做最后的拼接 我们在前两章中用了很大篇幅为这个应用打下了很好的基础:我们学习了如何使用属性数组定义一个物体的结构,也学习了如何创建着色器.加载并编译它们,以及把它们链接起来形成一个OpenGL的程序. 现在是时候在这个基础上开始构建并把它们拼接起来了.在下面的几个步骤里,我们就要把这些部分拼在一起,并准备好把第一个版本的空气曲棍球桌子画到屏幕上. 3.4.1 验证OpenGL程序的对象 在开始使用OpenGL的程序之前,我们首先应该验证一下它,看看这个程序对于当前的OpenGL状态是不是