opengl 教程(16) 纹理映射

原帖地址:http://ogldev.atspace.co.uk/www/tutorial16/tutorial16.html

      纹理映射意思就是把图片(或者说纹理)映射到3D模型的一个或多个面上。纹理可以是任何图片,使用纹理映射可以增加3D物体的真实感,我们常见的纹理有砖,植物叶子等等。

下图中是使用纹理映射和没有使用纹理映射四面体的比较。

      要使用纹理映射,我们必须做以下三件事情:在OpenGL中装入纹理,为顶点提供纹理坐标(为了把纹理映射到顶点),用纹理坐标在纹理上执行一个采样操作,得到一个像素颜色。

      三维空间中的物体经过缩放,旋转,平移,最终投影到屏幕上,依赖于摄像机位置和方位的不同,最终呈现的形式可能千差万别,但根据纹理坐标,GPU会保证最终的纹理映射结果是正确的。在光栅化阶段,GPU也会插值纹理坐标,这样,每个片元都有一个对应纹理坐标。在片元shader中,片元(或像素)会根据纹理坐标,采样得到最终的纹理单元颜色,并把这些颜色和当点片元的颜色或者根据光照计算的颜色混合,从而输出像素的最终颜色。下面的教程中,我们将看到,纹理单元能够包含不同的数据,实现很多特效。

      OpenGL支持 1D, 2D, 3D, cube等等多种纹理,这些纹理在不同的技术中使用。我们首先来学习2D纹理,2D纹理通常来说就是一块有高度和宽度的surface(表面),宽度乘以高度的结果就是纹理单元的数目。那么如何指定顶点的纹理坐标呢?其实顶点的纹理坐标并不是顶点在纹理surface上的坐标,否则的话,那受限制就太大了,因为我们的三维物体表面是变化的,有的大,有的小,这样的话,意味着我们要不断更新纹理坐标,这显然很难做到。因此,存在纹理坐标空间,每维的纹理坐标范围都是[0,1],所以纹理坐标通常都是[0,1]之间的一个浮点数,我们用纹理坐标乘以纹理的高度或宽度,就可以得到顶点在纹理上对应的纹理单元位置,例如:如果纹理位置是 [0.5,0.1],纹理宽度是320,纹理高度是200,那个对应纹理单元位置就是 (160,20) (0.5 * 320 = 160 和 0.1 * 200 = 20)。

      通常纹理空间又叫UV空间,U对应2维笛卡尔坐标的x轴,V对应y轴,OpenGL中,U轴方向从左到右,V轴方向从下到上,如下图所示,可以看到(0,0)位置在左下角,向上V增加,向右U增加:

下图中的三角形被指定纹理坐标:

当三角形做了各种变化后,它的纹理坐标保持不变,假设三角形光栅化前,它的位置如下。

      纹理坐标是三角形顶点的属性,无论三角形怎么变化,对于顶点来说,纹理坐标相对位置都不变,当然也可以在顶点shader中,动态改变纹理坐标,这个主要用于实现一些特殊的效果,比如水面效果等等。在本教程中,我们将保持纹理坐标不变。

      另一个和纹理映射相关的概念是“滤波”,前面我们讨论了通过一个纹理坐标,得到相应的纹理单元,由于纹理坐标是[0,1]之间的浮点数,它乘以纹理高度宽度,可能得到一个浮点的映射坐标,比如我们把纹理坐标映射到纹理单元 (152.34,745.14),此时怎么得到纹理单元呢?最简单的方法,我们可以四舍五入,得到 (152,745),这种方法,可以工作,但是在一些情况下,效果并不是很好,一个更佳的方案是:得到一个2×2的quad纹理单元, ( (152,745), (153,745), (152,744) 和(153,744) ),然后在这些纹理单元颜色之间进行线性插值操作,线性插值和该纹理单元到(152.34,745.14)的距离有关,越接近这个坐标,影响就越大,越远,影响越小,这个效果要比四射五入直接选取纹理单元要好。

     决定最终哪一个纹理单元被选择的方法就称作“滤波”,最简单的方法就是前面说的四舍五入方法,这种滤波方式又叫nearst滤波 (nearest filtering),这是一种点采样的滤波方式,前面说的基于线性插值的滤波称作线性滤波 。OpenGL提供多种采样方式,你可以选择其中任意一种,通常,更好的滤波效果需要更高的GPU运算能力,这有可能影响帧率。选择更好的效果和更流畅的画面是个balance问题。

      下面我们看看OpenGL中如何实现纹理映射:在OpenGL中使用纹理,我们首先要学习四个概念:纹理对象,纹理单元,采样对象以及shader中的采样uniform变量。

      纹理对象本身包括纹理需要的数据,比如图像数据。根据存储的数据格式(RGB,RGBA等等),纹理可分为1维纹理,2维纹理,3维纹理等等,OpenGL提供了一种方便的函数,只要指定数据的起始地址,以及数据格式属性,就可以很方便的把数据装入GPU,纹理通常就是通过这种方法装入video memory,在装入纹理时候,可以指定多个参数,比如滤波方式等等。类似顶点缓冲数据,我们也可以把纹理和句柄关联起来。当创建句柄,装入纹理后,我们能够实时切换纹理,和不同的OpenGL句柄进行绑定,而不需要再次装入数据,此时,OpenGL的driver会保证,渲染前,纹理数据被装入video memory。

      纹理对象并不直接和shader(纹理采样实际上在shader中实施)打交道,而是通过一个纹理单元(texture unit),该纹理单元的索引被传递到shader中。这样,shader就能通过该纹理单元访问纹理对象。通常我们可以使用多个纹理单元(数目和具体gpu有关), 为了把一个纹理对象A绑定到纹理单元0,我们首先要激活纹理单元0,然后才能绑定到纹理对象A,此时,如果要使用第二个纹理对象,可以激活纹理单元1,然后绑定到相应的纹理对象。

      实际的情况可能有点复杂,一个纹理单元其实可以同时绑定多个纹理对象,只要这些纹理对象的类型不同,这类型是纹理对象的target,比如1D,2D等等,绑定纹理对象和纹理单元时,我们必须指定target,例如:我们可以把targe维1D纹理对象A和target维2D的纹理对象B同时绑定到同一个纹理单元。

      采样操作通常在片元shader中实施,具体操作是通过一个采样函数,采样函数需要知道采样的纹理单元,因为shader中可能有多个纹理单元。具体是通过一组纹理uniform变量来区分不同的纹理单元,这些uniform变量和纹理单元是一一对应关系,当你对某个uniform变量进行采样操作时,该变量对应的纹理对象被使用。

      最后再来看一下采样对象,注意不要把它和采样uniform变量混淆。纹理对象包含图像数据,也包括配置采样操作的参数等等,这些参数是采样状态的一部分,我们也可以创建一个采样对象,配置它的参数,并把它绑定到纹理单元,这将会重载纹理对象中定义的采样状态,本文中,我们并没有实施采样对象。

下图总结了我们前面学习的一些概念:

主要代码:

       OpenGL能够装入内存中的纹理数据,但并没有提供一个方法,把图像文件,比如PNG,JPG等,装入到内存中,我们使用一个开源的图像处理库  ImageMagick, 该库支持多种格式的图像处理。在程序代码中,直接包含了该库的源代码。

大部分的纹理操作被包装在texture类中:

texture.h

class Texture
{
public:
   Texture(GLenum TextureTarget, const std::string& FileName);
   bool Load();
   void Bind(GLenum TextureUnit);
};

      创建一个纹理对象时候,我们需要指定target(我们用GL_TEXTURE_2D),以及图像文件名字,之后,我们可以调用Load函数,来装入纹理数据。如果需要把纹理对象绑定到特殊的纹理单元,我们可以用Bind函数。

texture.cpp

try {
   m_pImage = new Magick::Image(m_fileName);
   m_pImage->write(&m_blob, "RGBA");
}
catch (Magick::Error& Error) {
   std::cout << "Error loading texture '" << m_fileName << "': " << Error.what() << std::endl;
   return false;
}

       用上面的代码,我们把图像文件装入内存(此时在system memory中),并准备装入OpenGL。我们使用了Magic::Image实例,并提供图像文件名字,使用该函数后,将把纹理图像数据装入m_pImage对象内部,OpenGL不能直接访问,所以我们接着做一个write操作,把纹理数据写到m_blob变量表示的内存中,我们使用的图像格式是RGBA。BLOB (Binary Large Object)是一个二进制文件块,常用来存储图像块,以便其它程序使用。

glGenTextures(1, &m_textureObj);

      上面这个OpenGL函数和 glGenBuffers()很相似,第一个参数是个数字,指定要创建的纹理对象数量,第二个参数是纹理对象数组。在本教程中,我们使用一个纹理对象。

glBindTexture(m_textureTarget, m_textureObj);

      通过glBindTexture()函数,我们绑定一个纹理对象,这样下面所有对纹理的操作都是基于该对象,如果我们要操作别的纹理对象,需要重新使用glBindTexture()函数绑定别的纹理对象。glBindTexture()函数中第二个参数是纹理对象句柄,第一个参数是纹理target,它的值可能是 GL_TEXTURE_1D, GL_TEXTURE_2D等等。不同的纹理对象同时只能绑定一个target,在本教程中,target在纹理类构造函数中实施,我们使用的是GL_TEXTURE_2D 。

glTexImage2D(m_textureTarget, 0, GL_RGBA, m_pImage->columns(), m_pImage->rows(), 0, GL_RGBA, GL_UNSIGNED_BYTE, m_blob.data());

      glTexImage2D函数用来装入纹理对象的数据,也就是把system memory中的数据(m_blob)和纹理对象关联起来,可能在该函数调用时候就拷贝到video memory,也可能是延时拷贝,这个是由driver控制的。 glTexImage* 函数有几个版本,每个版本都对应一个纹理target。该函数的第一个参数是纹理target,第二个参数是LOD(层次细节),一个纹理对象可能包含多个分辨率的相同图像,这些图像称作mipmap层,每个mipmap层数都有一个LOD索引,范围从0到最高分辨率。本教程程序中,只有一个mipmap层,所以该值为0 。

     第三个参数是纹理对象的格式,你可以指定为4通道的颜色RGBA,或者仅指定红色通道GL_RED,本教程程序中,我们使用GL_RGBA ,接下来的2个参数是纹理的高度和宽度,通过 ImageMagick的内部函数rows和colomns,我们可以很方便的得到这两个值。第5个参数是纹理的边选项,本程序中我们设置为0。

      最后的三个参数指定源纹理数据的格式,类型以及数据内存地址。格式指定颜色channel的格式,这必须和m_blob中的data相匹配,类型描述每个颜色channel的格式,本程序中为无符号8位数字GL_UNSIGNED_BYTE,最后一个参数是纹理数据内存地址。

glTexParameterf(m_textureTarget, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(m_textureTarget, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

      上面两个函数指定纹理采样的方式,纹理采样方式是纹理状态的一部分。对于magnification 和 minification ( http://www.cnblogs.com/mikewolf2002/archive/2012/04/07/2436063.html , 关于这两个概念请参考这个链接 ),我们都指定线性滤波.

(texture.cpp)

void Texture::Bind(GLenum TextureUnit)
{
   glActiveTexture(TextureUnit);
   glBindTexture(m_textureTarget, m_textureObj);
}

      在3D程序中,可能有多个draw,每个draw提交前,可能需要绑定不同的纹理,以便在shader中使用,上面的Bind函数就是使我们方便的切换不同的纹理,它的参数是一个纹理单元。

layout (location = 0) in vec3 Position;

layout (location = 1) in vec2 TexCoord;
uniform mat4 gWVP;
out vec2 TexCoord0;
void main()
{
   gl_Position = gWVP * vec4(Position, 1.0);
   TexCoord0 = TexCoord;
};

      这是更新后的顶点shader,这儿有一个输入参数纹理坐标,是一个2D向量,在顶点shader中我们并没有对纹理坐标进行任何变化,而是直接输出,但在片元shader前的光栅化阶段,会对纹理坐标进行插值操作。

in vec2 TexCoord0;

out vec4 FragColor;
uniform sampler2D gSampler;
void main()
{
    FragColor = texture2D(gSampler, TexCoord0.st);
};

      上面是更新后的片元shader,其中有一个输入变量TexCoord0,它包含了插值后的纹理坐标,还有一个uniform变量gSampler,它是sampler2D类型,应用程序必须设置纹理单元值以便和这个uniform变量连接起来,这样shader才能访问纹理,返回值就是采样的纹理单元颜色。后面的光照的教程中,都是根据光照因子乘以这个采样颜色,从而得到最终的像素颜色。

Vertex Vertices[4] = {
    Vertex(Vector3f(-1.0f, -1.0f, 0.5773f), Vector2f(0.0f, 0.0f)),
    Vertex(Vector3f(0.0f, -1.0f, -1.15475), Vector2f(0.5f, 0.0f)),
    Vertex(Vector3f(1.0f, -1.0f, 0.5773f), Vector2f(1.0f, 0.0f)),
    Vertex(Vector3f(0.0f, 1.0f, 0.0f), Vector2f(0.5f, 1.0f)) };

新的顶点结构包括顶点位置以及顶点纹理坐标。

tutorial16.cpp

...
glEnableVertexAttribArray(1);
...
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), 0);
glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)12);
...
pTexture->Bind(GL_TEXTURE0);
...
glDisableVertexAttribArray(1);

      在渲染循环中也有一些代码变动,因为增加了纹理坐标属性,所以我们启动了属性1,这和顶点shader中的layout是一致的,接着我们会调用glVertexAttribPointer指定顶点缓冲中纹理坐标的位置,纹理坐标是2个浮点数,所以函数第二个参数是2,注意第五个参数都是顶点结构的大小,这对于位置和纹理属性是一样的, 这个参数称作 'vertex stride',就是2个顶点之间的字节数目。在我们的顶点缓冲中,包含pos0, texture coords0, pos1, texture coords1, 等等,前面的教程中,只有一个位置属性,所以该参数设置为0。最后一个参数顶点结构起始地址到纹理属性的偏移字节数。

      在draw调用前,我们进行一次纹理绑定操作,注意下面的禁止顶点属性函数调用,指定顶点属性后,我们需要在一次禁止它。

glFrontFace(GL_CW);
glCullFace(GL_BACK);
glEnable(GL_CULL_FACE);

      上面三个函数设定三角形面背面剔除功能,启用该功能后,会在PA阶段,剔除法向朝后的三角面(背面三角形本来就看不见),从而这些面不会做片元shader,从而提高程序性能。第一个函数指定三角形顶点为顺时针顺序,就是说从前面看向三角形时,它的顶点是顺时针排列,第二个函数指定剔除背面(而不是前面),第三个参数开启剔除功能。

glUniform1i(gSampler, 0);

      设定纹理单元的索引,我们将会在片元shader中通过uniform变量使用纹理。在前面的代码中,gSampler会通过 glGetUniformLocation()函数得到。

pTexture = new Texture(GL_TEXTURE_2D, "test.png");
if (!pTexture->Load()) {
    return 1;
}

上面的代码创建纹理对象,并装入它。

程序执行后界面如下:

时间: 2024-10-11 19:12:46

opengl 教程(16) 纹理映射的相关文章

NeHe的OpenGL教程6(Bang翻译Delphi版)-如何用图片进行纹理映射

NeHe的OpenGL教程6(Bang翻译Delphi版)-如何用图片进行纹理映射 在这一课里,我将教会你如何把纹理映射到立方体的六个面,如下图: 将下图放在应用程序data目录下,起名NeHe.bmp program lesson6a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com     注:本单元用到了glaux.dll和glaux.pas,下载地址为:

NeHe的OpenGL教程5(Bang翻译Delphi版)-如何绘制立方体

NeHe的OpenGL教程5(Bang翻译Delphi版)-如何绘制立方体 在这一课里,我们把三角形变为立体的金子塔形状,把四边形变为立方体,如下图: program lesson5a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc: HGLRC;    

NeHe的OpenGL教程7(Bang翻译Delphi版)-如何使用光源

NeHe的OpenGL教程7(Bang翻译Delphi版)-如何使用光源        在这一课里,我将教会你如何用光源照亮立方体的六个面,如下图: 将下图放在应用程序data目录下,起名NeHe.bmp program lesson7a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com     在这一课里,我将教会你如何用光源照亮立方体的六个面     注:本

NeHe的OpenGL教程1(Bang翻译Delphi版)-如何绘制OpenGL窗口

NeHe的OpenGL教程1(Bang翻译Delphi版)-如何绘制OpenGL窗口 在这个教程里,我将教你在Windows环境中创建OpenGL程序.它将显示一个空的OpenGL窗口,可以在窗口和全屏模式下切换,按ESC退出.它是我们以后应用程序的框架.如下图: program lesson1a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses 

NeHe的OpenGL教程2(Bang翻译Delphi版)-如何绘制平面图形

NeHe的OpenGL教程2(Bang翻译Delphi版)-如何绘制平面图形 这一课中,我将教您如何创建三角形和四边形.如下图: program lesson2a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc: HGLRC;               

NeHe的OpenGL教程4(Bang翻译Delphi版)-如何让图形旋转

NeHe的OpenGL教程4(Bang翻译Delphi版)-如何让图形旋转 在这一课里,我将教会你如何旋转三角形和四边形.左图中的三角形沿Y轴旋转,四边形沿着X轴旋转.如下图 program lesson4a; {    OpenGL DelphiXE    出处:根据NeHe代码翻译而来(http://nehe.gamedev.net/)    作者:帅宏军 shuaihj@163.com} uses  Windows,  Messages,  OpenGL; // 全局变量var  h_Rc

PHP开发框架Yii Framework教程(16) UI 组件 StarRating示例

CStarRating 主要用于评分,显示一组星星(5 个)用于打分. 基本用法如下 <center class="form"> <?php $form=$this->beginWidget('CActiveForm'); ?> <?php $this->widget('CStarRating',array( 'model'=>$model, 'attribute'=>'rating', 'name'=>'rating', '

opengl 教程(23) shadow mapping (1)

   原帖地址:http://ogldev.atspace.co.uk/www/tutorial23/tutorial23.html          当光投射到物体上时,会在地面或者墙壁等物体上产生阴影.在计算机图形学中,有很多种技术可以产生阴影,本篇教程中,我们学习一种最常用的阴影技术-shadow mapping.       对于OpenGL程序中的阴影问题,可以归结为:如何判定一个像素是否在阴影区域.简单的说,我们可以把像素的位置和光源的位置连接起来(如下图所示),如果连接线通过物体(

Javascript实例教程(16) 日期函数

javascript|函数|教程 使用javascript的日期函数 Date(日期)对象可以使用Date()构造器来创建,在前面的教程中我们已经介绍了Date()构造器,这里就不重复叙述.它没有参数,返回的数值就是当前的日期.下面的表格显示了为日期构造器的有效输入: var today = new Date(); 返回当前的日期和时间 var newyear = new Date("December 31, 1998 23:59:59"); 输入的是表单的字符串 "月 日,