OpenGL-ES2.0

OpenGL ES2.0入门详解

1.决定你要支持的OpenGL ES的版本。目前,OpenGL ES包含1.1和2.0两个版本,iPhone 3G+和iPad开始支持OpenGL ES2.0。而且这两个版本之间的差异非常大,不仅仅在编程思想上,API之间的差距也很大。因此,如果你想使用OpenGL ES开发3D程序或游戏,那么首先就要决定使用哪个版本,还是说两个版本都支持。OpenGL ES定义了代表不同版本的宏:

enum
{
kEAGLRenderingAPIOpenGLES1 = 1, //1.1版
kEAGLRenderingAPIOpenGLES2 = 2 //2.0版
}typedef NSUInteger EAGLRenderingAPI;

以iPhone代码为例,你可以通过以下方式判断用户设备所支持的OpenGL ES版本,如果支持2.0,就使用2.0进行渲染;如果仅支持1.1,则使用1.1版进行渲染:

Cocos2dx-OpenGL ES2.0教程:纹理贴图(6)

作者:乐逍遥Jun

上一篇文章中,我们介绍了如何绘制一个立方体,里面涉及的知识点有VBO(Vertex Buffer Object)、IBO(Index Buffer Object)和MVP(Modile-View-Projection)变换。

本文将在教程4的基础之上,添加纹理贴图支持。最后,本文会把纹理贴图扩展至3D立方体上面。

基本方法

当我们把一张图片加载到内存里面之后,它是不能直接被GPU绘制出来的,纹理贴图过程如下:

首先,我们为之前的顶点添加纹理坐标属性并传到vertex shader里面去,然后把内存里面的纹理传给GPU,最后,在fragment shader里面通过采样器,就可以根据vertex shader传递过来的纹理坐标把纹理上面的颜色值用插值的方式映射到每一个像素上去。

接下来,让我们看看具体怎么做。

准备纹理坐标(纹理坐标也叫UV坐标)

Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5)

作者:乐逍遥Jun

上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率。

本教程将带领大家一起走进3D–绘制一个立方体。其实画立方体本质上和画三角形没什么区别,所有的模型最终都要转换为三角形。

同时,本文还会介绍如何通过修改MVP矩阵来让此立方体不停地旋转。另外,大家还可以动手去修改本教程的示例代码,借此我们可以更加深入地理解OpenGL的normalized device space。

准备立方体数据

在开始真正的绘制代码之前,我们先要准备好数据。首先,我们需要改进的是代表顶点属性的结构体:

typedef struct {
float Position[3];
float Color[4];
} Vertex;
这里,我们把Position从一个长度为2的数组变成了一个长度为3的数组,用于存储顶点的xyz的值。

Cocos2dx-OpenGL ES2.0教程:使用VBO索引(4)

作者:乐逍遥Jun

上一篇文章中,我们介绍了uniform和模型-视图-投影变换,相信大家对于OpenGL ES 2.0应该有一点感觉了。在这篇文章中,我们不再画三角形了,改为画四边形。下篇教程,我们就可以画立方体了,到时候就是真3D了,哈哈。

为什么三角形在OpenGL教程里面这么受欢迎呢?因为在OpenGL的世界里面,所有的几何体都可以用三角形组合出来。我们的四边形也一样,它可以用两个三角形组合出来。

你的第一个四边形

首先,因为OpenGL里面没有直接绘制四边形的命令的,所以我们需要画两个三角形来拼成一个四边形。这样的话,这样的话我们一共需要6个顶点。这6个顶点的坐标如下所示:

float vertercies[] =
{ -1,-1,
1, -1,
-1, 1,
-1, 1,
1,1,
1, -1};

Cocos2dx-OpenGL ES2.0教程:初识MVP(3)

作者:乐逍遥Jun

上一篇文章中,我在介绍vertex shader的时候挖了一个坑:CC_MVPMatrix。它其实是一个uniform,每一个cocos2d-x预定义的shader都包含有这个uniform,
但是如果你在shader里面不使用这个变量的话,OpenGL底层会把它优化掉。

但是,CC_MVPMatrix是在什么时候设置进来的呢?我在shader里面明明没有看到它,它从哪儿来的?别急,请继续往下读。

初识Uniform

在回答上面几个问题之前,让我们先来介绍一下什么是uniform。简单来说,uniform是shader里面的一种变量,它是由外部程序设置进来的,它不像vertex的attribute,每个顶点都有一份数据。除非你显式地调用glUniformXXX函数来修改这个uniform的值,否则它的值恒定不变。接下来,让我们修改myFragmentShader.frag,给它添加一个新的uniform数据:

Cocos2dx-OpenGL ES2.0教程:编写自己的shader(2)

作者:乐逍遥Jun

上篇文章中,我给大家介绍了如何在cocos2d-x里面绘制一个三角形,当时我们使用的是cocos2d-x引擎自带的shader和一些辅助函数。在本文中,我将演示一下如何编写自己的shader,同时,我们还会介绍VBO(顶点缓冲区对象)和VAO(顶点数组对象)的基本用法。

在编写自己的shader之前,我觉得有必要提一下OpenGL渲染管线。
理解OpenGL渲染管线,对于学习OpenGL非常重要。下面是OpenGL渲染管线的示意图:(图中淡蓝色区域是可以编程的阶段)

pipeline

pipeline

一步一步学android OpenGL ES2.0编程(6 大结局)

响应触摸事件
使你的OpenGL ES应用能响应触摸的关键是扩展你实现的GLSurfaceView 代码,覆写onTouchEvent() 方法来监听触摸事件。

本文向你展示如何监听用户的触摸事件以使用户可以旋转某个OpenGL ES对象。

设置一个触摸监听器
为了使你的OpenGL Es应用响应触摸事件,你必须在你的GLSurfaceView 类中实现onTouchEvent()事件。下面的例子演示了如何监听MotionEvent.ACTION_MOVE 事件然后把它们转换成一个形状的旋转角度。

注意在计算完旋转角度之后,本方法调用requestRender() 来告诉renderer要渲染帧了。这样做是很高效的,因为在没有发生旋转时不需要重画帧。然而,在你没有要求只在数据发生改变才重画之前,还不能达到最高效,即别忘了解除这一句的注释:

一步一步学android OpenGL ES2.0编程(5)

添加运动
在屏幕上绘制是OpenGL的基础能力,但是你也可以用其它的Android图形框架类来做,包括Canvas和Drawable。 但是OpenGL ES提供了另外的能力,可以在三维上移动和变换对象。总之它能创造很牛B的用户体验。在本文中,你将学会如何使用OpenGL ES为形状添加旋转功能。

转动一个形状
使用OpenGL ES 2.0旋转一个对象也是十分简单地。你创建另外一个变换矩阵(一个旋转矩阵)然后把它合并到你的投影和相机视口变换矩阵就行了:

如果你的三角形在此新后转不起来,则要查看是否把GLSurfaceView.RENDERMODE_WHEN_DIRTY 设置注释了,下面马上就讲到。

启用持续渲染
到现在,你应在代码中注释掉设置只在数据改变时才渲染的代码,否则,OpenGL 只有转一次然后等待直到GLSurfaceView 的包含者调用requestRender():

一步一步学android OpenGL ES2.0编程(4)

应用投影和相机视口

在OpenGLES环境中,投影和相机视口使你绘制的对象以更接近物理对象的样子显示。这是通过对坐标精确的数学变换实现的。

投影-这种变换跟据所在GLSurfaceView的宽和高调整对象的坐标。如果没有此变换,对象会被不规则的视口扭曲。投射变换一般只需要在OpenGLview创建或发生变化时调用,代码写在renderer的onSurfaceChanged()方法中。
相机视口-此变换基于一个虚拟相机的位置调整对象的坐标。注意OpenGLES并没有定义一个真的相机对象,而是提供了一些工具方法变换绘制对象的显示来模拟一个相机。一个相机视口的变换可能只在创建GLSurfaceView时调用,或跟据用户动作动态调用。
本文讲解了如何创建一个投影和一个相机视口然后应用到GLSurfaceView的形状绘制过程。

定义一个投影
投影变换的数据是在GLSurfaceView.Renderer 类的 onSurfaceChanged() 方法中计算。下面的例子跟据GLSurfaceView 的宽和高,使用Matrix.frustumM()方法计算出了一个投影变换Matrix:

一步一步学android OpenGL ES2.0编程(3)

绘制形状
你定义了要绘制的形状后,你就要画它们了。使用OpenGLES 2.0会形状会有一点点复杂,因为API提供了大量的对渲染管线的控制能力。

本文讲解如何绘制你在前文中定义的那些形状们。

初始化形状
在你做任何绘制之前,你必须初始化形状然后加载它。除非形状的结构(指原始的坐标们)在执行过程中发生改变,你都应该在你的Renderer的方法onSurfaceCreated()中进行内存和效率方面的初始化工作。

绘制一个形状
使用OpenGLES 2.0画一个定义好的形状需要一大坨代码,因为你必须为图形渲染管线提供一大堆信息。典型的,你必须定义以下几个东西:

VertexShader-用于渲染形状的顶点的OpenGLES 图形代码。
FragmentShader-用于渲染形状的外观(颜色或纹理)的OpenGLES 代码。
Program-一个OpenGLES对象,包含了你想要用来绘制一个或多个形状的shader。

同步内容
--电子创新网--
粤ICP备12070055号