OpenGL中的纹理

OpenGL中的纹理可以用来表示图像、照片、视频画面等数据,在视频渲染中,只需要处理二维的纹理,每个二维纹理都由许多小的纹理元素组成,它们都是小块数据,类似于前面章节所说的像素点。要使用纹理,最常用的方式是直接从一个图像文件加载数据。为了访问到每一个纹理元素,每个二维纹理都有其自己的坐标空间,其范围是从左下角的(0,0)到右上角的(1,1)。按照惯例,一个维度称为S,而另一个则称为T。如图4-6所示,对于OpenGL内部的纹理,坐标的方向性是规定的,t方向下面是0,上面是1,而对于s方向,左边是0,右边是1,从而构成
了上述四个顶点的坐标位置,而中间的位置就是(0.5,0.5)。但是在这里还有另外一个坐标系的概念,那就是计算机系统里的坐标系,通常将x轴称为横轴,y轴称为纵轴,如图4-7所示。

我们所熟知的不论是计算机还是手机的屏幕坐标系,x轴从左到右都是从0到1,y轴从上到下是从0到1,与图片的存储恰好是一致的,假设图片的存储是把所有的像素点都存储到一个大数组中,图片存储的第一个像素点也是左上角的像素点(即第一排第一列的像素点),然后是第二个像素点(第一排第二列)存储在数组的第二个元素中,那么,这里的坐标和OpenGL中的纹理坐标正好是做了一个180度的旋转,后面将会看到如何从本地图片中加载一张纹理并且渲染到界面上,而对于纹理坐标和计算机系统坐标的理解,在那时就会显得非常重要了。下面再来看一下如何加载一张图片作为OpenGL中的纹理,首先要在显卡中创建一个纹理对象,OpenGL ES提供的方法原型如下:
void glGenTextures (GLsizei n, GLuint* textures)
这个方法传递进去的第一个参数是需要创建几个纹理对象,并且把创建好的纹理对象的句柄放到第二个参数中去,所以第二个参数是一个数组(指针)的形式。如果只需要创建一个纹理对象的话,则只需要声明一个GLuint类型的texId,然后针对该纹理ID取地址,并将其作为第二个参数,就可以创建出这个纹理对象了,代码如下:
glGenTextures(1, &texId);
执行完这行代码之后,就会在显卡中创建出一个纹理对象,并且把该纹理对象的句柄返回给texId变量。紧接着开发者要操作该纹理对象,但是在OpenGL ES的操作过程中必须告诉OpenGL ES具体操作的是哪一个纹理对象,所以必须调用OpenGL ES提供的一个绑定纹理对象的方法,调用代码如下:
glBindTexture(GL_TEXTURE_2D, texId);
执行完毕上面这行代码之后,下面的操作就都是针对于texId这个纹理对象的了,最终对该纹理对象操作完毕之后,我们可以调用一次解绑定的代码:
glBindTexture(GL_TEXTURE_2D, 0);
这行代码执行完毕之后,代表开发者不会对texId纹理对象做任何操作了,所以上面这行代码只在最后的时候才调用。接下来就是最关键的部分,即如何将本地磁盘上的一个PNG的图片上传到显卡中的这个纹理对象上。在将图片上传到这个纹理上之前,首先应该要对这个纹理对象设置一些参数,具体参数有哪些?其实就是纹理的过滤方式,当纹理对象(可以理解为一张图片)被渲染到物体表面上的时候(实际上是OpenGL绘制管线将纹理的元素映射到OpenGL生成的片段上的时候),有可能要被放大或者缩小,而当其放大或者缩小的时候,具体应该如何确定每个像素是如何被填充的,就由开发者配置的纹理对象的纹理过滤器来指明。
magnification(放大):
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
minification(缩小):
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
一般在视频的渲染与处理的时候使用GL_LINEAR这种过滤方式,该过滤方式称为双线性过滤,可使用双线性插值平滑像素之间的过渡,OpenGL会使用四个邻接的纹理元素,并在它们之间用一个线性插值算法做插值,该过滤方式是最主要的过滤方式,当然OpenGL中还提供了另外几种过滤方式。常见的有GL_NEAREST,称为最邻近过滤,该方式将为每个片段选择最近的纹理元素,但是当其放大的时候会有很严重的锯齿效果(因为相当于将原始的直接放大,其实就是降采样),而当其缩小的时候,因为没有足够的片段来绘制所有的纹理单元(这个是真正的降采样),许多细节都会丢失;相较于这两种过滤方式,本书在使用纹理的过滤方式时都会选用双线性过滤的过滤方式(GL_LINEAR);其实OpenGL还提供了另外一种技术,称为MIP贴
图,但是这种技术会占用更多的内存,其优点是渲染也会更快。当缩小和放大到一定程度之后效果也比双线性过滤的方式更好,但是其对纹理的尺寸以及内存的占用是有一定限制的,不过,在视频的处理以及渲染的时候不需要放大或者缩小这么多倍,所以在进行视频的处理以及渲染的场景下,MIP贴图并不适用。紧接着来看一下对于纹理对象的另外一个设置,也就是在纹理坐标系的s轴和t轴的纹理映射过程中用到的重复映射或者约简映射的规则,
代码如下:
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
上述代码所表示的含义是,将该纹理的s轴和t轴的坐标设置为GL_CLAMP_TO_EDGE类型,因为纹理坐标可以超出(0,1)的范围,而按照上述设置规则,所有大于1的纹理值都要设置为1,所有小于0的值都要置为0。
接下来,就是将PNG素材的内容放到该纹理对象上,OpenGL的大部分纹理一般都只接受RGBA类型的数据(否则还得去做转化,后续会讲到YUV420P格式的视频帧在显卡中是如何转换RGBA格式的),所以我们需要对PNG这种压缩格式进行解码操作,如果想要采用一种更通用的方式,那么可以引用libpng库来进行解码操作,当然也可以使用各自平台的API进行解码,最终可以得到RGBA的数据。待得到RGBA的数据之后,记为uint8_t数组类型的pixels,然后执行如下操作:glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width,height,0,GL_RGBA,GL_UNSIGNED_BYTE, pixels);
这样就可以将该RGBA的数组表示的像素内容上传到显卡里面texId所代表的纹理对象中去了,以后只要使用该纹理对象,其实表示的就是这个PNG图片。
OpenGL中的纹理表示如何为物体增加细节,现在我们已经准备好了该纹理,那么如何把这张图片(或者说这个纹理)绘制到屏幕上呢?
首先来看一下OpenGL中的物体坐标系,如图4-8所示,物体坐标系中x轴从左到右是从-1到1变化的,y轴从下到上是从-1到1变化的,物体的中心点恰好是(0,0)的位置。

接下来的任务就是如何将这个纹理绘制到屏幕上,其实相关的基础知识已经都讲解过了,首先是搭建好各自平台的OpenGL ES的环境(包括上下文与窗口管理),然后创建显卡可执行程序书写VertexShader,代码如下:
static char* COMMON_VERTEX_SHADER =
"attribute vec4 position; \n"
"attribute vec2 texcoord; \n"
"varying vec2 v_texcoord; \n"
" \n"
"void main(void) \n"
"{ \n"
" gl_Position = position; \n"
" v_texcoord = texcoord; \n"
"} \n";

在客户端代码中,开发者要从VertexShader中读取出两个attribute,并放置到全局变量的mGLVertexCoords与mGLTextureCoords中,接下来是Fragment Shader的内容,代码如下所示:
static char* COMMON_FRAG_SHADER =
"precision highp float; \n"
"varying highp vec2 v_texcoord; \n"
"uniform sampler2D texSampler; \n"
" \n"
"void main() { \n"
" gl_FragColor = texture2D(texSampler, v_texcoord); \n"
"}
从FragmentShader中读取出来的uniform会放置到mGLUniformTexture变量里,利用上面两个Shader创建好的Program,称为mGLProgId。紧接着进行真正的绘制操作,下面将详细地讲解一下绘制部分。
1)规定窗口的大小:
glViewport(0, 0, screenWidth, screenHeight);
假定screenWidth表示绘制区域的宽度,screenHeight表示绘制区域
的高度。
2)使用显卡绘制程序:
glUseProgram(mGLProgId);
3)设置物体坐标:
GLfloat vertices[] = { -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f };
glVertexAttribPointer(mGLVertexCoords, 2, GL_FLOAT, 0, 0, vertices);
glEnableVertexAttribArray(mGLVertexCoords);
4)设置纹理坐标:
GLfloat texCoords1[] = { 0.0f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f };
GLfloat texCoords2[] = { 0.0f, 1.0f, 1.0f, 1.0f, 0.0f, 0.0f, 1.0f, 0.0f };
glVertexAttribPointer(mGLTextureCoords, 2, GL_FLOAT, 0, 0, texCoords2);
glEnableVertexAttribArray(mGLTextureCoords);
这里需要注意的是texCoords2这个纹理坐标,因为其纹理对象是将一个PNG图片的RGBA格式的形式上传到显卡上(即计算机坐标),如果该纹理对象是OpenGL中的一个普通纹理对象,则需要使用texCoords1,这两个纹理坐标恰恰就是要做一个上下的翻转,从而将计算机坐标系和OpenGL坐标系进行转换。
5)指定将要绘制的纹理对象并且传递给对应的FragmentShader:
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texId);
glUniform1i(mGLUniformTexture, 0);
6)执行绘制操作:
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
至此就可以在绘制区域(屏幕)绘制出最初的PNG图片了。如果该纹理对象不再使用了,则需要将其删除掉,需要执行的代码是:
glDeleteTextures(1, &texId);
当然,只有在最终不再使用这个纹理的时候才会调用上述这个方法,如果不调用该方法则会造成显存的泄漏。具体的实例请读者参考代码仓库中的OpenGLRenderer项目,注意,Android项目首先需要把resource目录下的PNG图片放到运行设备的sdcard的根目录之下。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容