WisKeyのLullaby

huangwei.pro 『我失去了一只臂膀』「就睁开了一只眼睛」

  C++博客 :: 首页 :: 联系 :: 聚合  :: 管理
  12 Posts :: 0 Stories :: 23 Comments :: 0 Trackbacks

公告

“我该走哪条路?”
“这取决于你要去哪里。”
“我只想能到某个地方。”
“只要你走的够远,你始终能到达那个地方。”

Home: huangwei.pro
E-Mail: sir.huangwei [at] gmail.com
09.6 毕业于杭州电子科技大学
进入网易杭州研究院工作至今

常用链接

留言簿(1)

我参与的团队

搜索

  •  

积分与排名

  • 积分 - 45580
  • 排名 - 395

最新评论

阅读排行榜

评论排行榜

http://huangwei.pro/2015-08/modern-opengl2/

 

在本文中,我们将给三角形加一个贴图,这需要在顶点和片段着色器中加入一些新变量,创建和使用贴图对象,并且学习一点贴图单元和贴图坐标的知识。

本文会使用两个新的类到tdogl命名空间中:tdogl:Bitmaptdogl:Texture。这些类允许我们将jpg,png或bmp图片上传到显存并用于着色器。tdogl:Program类也增加一些相关接口。

获取代码

所有例子代码的zip打包可以从这里获取:https://github.com/tomdalling/opengl-series/archive/master.zip

这一系列文章中所使用的代码都存放在:https://github.com/tomdalling/opengl-series。你可以在页面中下载zip,加入你会git的话,也可以复制该仓库。

本文代码你可以在source/02_textures目录里找到。使用OS X系统的,可以打开根目录里的opengl-series.xcodeproj,选择本文工程。使用Windows系统的,可以在Visual Studio 2013里打开opengl-series.sln,选择相应工程。

工程里已包含所有依赖,所以你不需要再安装或者配置额外的东西。如果有任何编译或运行上的问题,请联系我。

着色器变量Uniform与Attribute

教程一里的着色器变量都是attribute,本文介绍另外一种类型的变量:uniform变量。

着色器变量有两种类型:uniformattributeattribute变量可以在每个顶点上有不同值。而uniform变量在多个顶点上保持相同值。比如,你想要给一个三角形设置一种颜色,那你应该使用uniform变量,如果你希望每个三角形顶点有不同颜色,你应该使用attribute变量。从这开始,我称呼他们为“uniforms”和“attributes”。

Uniforms能被任意着色器访问,但是Attributes必须先进入顶点着色器,而非片段着色器。顶点着色器在需要时会将该值传给片段着色器。这因为Uniforms像常量-它们不会被任何着色器更改。然而,Attributes不是常量。顶点着色器会改变Attribute变量的值,在片段着色器获取之前。就是说,顶点着色器的输出就是片段着色器的输入。

为了设置Uniform的值,我们可以调用glUniform*系列函数。而设置Attribute的值,我们需要在VBO中保存,并且和VAO一起发送给着色器,就像前一篇教程里的glVertexAttribPointer。加入你不想把值存在VBO里,你也可以使用glVertexAttrib*系列函数来设置Attribute值。

贴图

贴图,大体上来说就是你应用在3D物体上的2D图像。它有其它用途,但显示2D图像在3D几何上是最常用的。有1D,2D,3D贴图,但本文只讲2D贴图。更深入阅读,请参见Learning Modern 3D Graphics Programming书中的Textures are not Pictures章节。

贴图是存放在显存里的。那就是说,你需要在使用之前上传你的贴图数据给显卡。这类似VBO在前文的作用-VBO也是在使用之前需要存放到显存上。

贴图的高和宽需要是2的幂次方。比如16,32,64,128,256,512。本文中使用的是256*256的图像作为贴图,如下图所示。

hazard.png

 

我们使用tdogl:Bitmap来加载“hazard.png”的原始像素数据到内存中,参见stb_image帮助文档。然后我们使用tdogl:Texture上传原始像素数据给OpenGL贴图对象。幸运的是OpenGL中的贴图创建方法从面世到现在都没有实质性的变化,所以网上有大量的创建贴图的好文章。虽然贴图坐标的传输方式有变化,但创建贴图还是跟以前一样。

以下是tdogl:Texture的构造函数,用于OpenGL贴图创建。

Texture::Texture(const Bitmap& bitmap, GLint minMagFiler, GLint wrapMode) : _originalWidth((GLfloat)bitmap.width()), _originalHeight((GLfloat)bitmap.height()) { glGenTextures(1, &_object); glBindTexture(GL_TEXTURE_2D, _object); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, minMagFiler); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, minMagFiler); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrapMode); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrapMode); glTexImage2D(GL_TEXTURE_2D, 0, TextureFormatForBitmapFormat(bitmap.format()), (GLsizei)bitmap.width(), (GLsizei)bitmap.height(), 0, TextureFormatForBitmapFormat(bitmap.format()), GL_UNSIGNED_BYTE, bitmap.pixelBuffer()); glBindTexture(GL_TEXTURE_2D, 0); } 

贴图坐标

毫无疑问,贴图坐标就是贴图上的坐标。关于贴图坐标比较奇特的是它们不是以像素为单位。它们范围是从0到1,(0, 0)是左下角,(1, 1)是右上角。假如你上传到OpenGL的图像是颠倒的,那(0, 0)就是左上角,而非左下角。将像素坐标转换为贴图坐标,你必须除上贴图的宽和高。比如,在256*256的图像中,像素坐标(128, 256)的贴图坐标是(0.5, 1)。

uv_coords.png

 

贴图坐标通常被称为UV坐标。你也可以叫它们是XY坐标,但是XYZ通常被用来表示顶点,我们不希望将这两者混淆。

贴图图像单元

贴图图像单元,亦或简称“贴图单元”,是在OpenGL中略怪异的一部分。你无法直接发送贴图给着色器。首先,你要绑定贴图到贴图单元,然后呢要发送贴图单元的索引给着色器

对于贴图单元是有数量限制的。在低端硬件上,如手机,它们只有两个贴图单元。既然如此,即使我们有许多的贴图,我们也只能同时使用两个贴图单元在着色器中。我们在本文中只用到了一个贴图,所以也只需要一个贴图单元,但它可以在多个不同的着色器中混合。

实现贴图

首先,让我们创建一个新的全局贴图。

tdogl::Texture* gTexture = NULL; 

我们为加载“hazard.png”图片新增一个函数。该函数能被AppMain所调用。

static void LoadTexture() { tdogl::Bitmap bmp = tdogl::Bitmap::bitmapFromFile(ResourcePath("hazard.png")); bmp.flipVertically(); gTexture = new tdogl::Texture(bmp); } 

下一步,我们给每个三角形的顶点一个贴图坐标。假如你跟上图比较过UV坐标,就可以看出按顺序这个坐标表示(中,上),(左,下)和(右,下)。

GLfloat vertexData[] = { //  X     Y     Z       U     V 0.0f, 0.8f, 0.0f, 0.5f, 1.0f, -0.8f,-0.8f, 0.0f, 0.0f, 0.0f, 0.8f,-0.8f, 0.0f, 1.0f, 0.0f, }; 

现在我们需要修改片段着色器,使得它能使用贴图和贴图坐标作为输入。下面是新的片段着色器代码:

#version 150 uniform sampler2D tex; //this is the texture in vec2 fragTexCoord; //this is the texture coord out vec4 finalColor; //this is the output color of the pixel  void main() { finalColor = texture(tex, fragTexCoord); } 

uniform关键字说明texuniform变量。贴图是一致的,因为所有三角形顶点有相同的贴图。sampler2D是变量类型,说明它包含一个2D贴图。

fragTexCoordattribute变量,因为每个三角形顶点是不同的贴图坐标。

texture函数是用来查找给定贴图坐标的像素颜色。在GLSL旧版本中,你应该使用texture2D函数来实现该功能。

我们无法直接传送attribute给判断着色器,因为attribute必须首先通过顶点着色器。这儿是修改过的顶点着色器:

#version 150 in vec3 vert; in vec2 vertTexCoord; out vec2 fragTexCoord;  void main() { // Pass the tex coord straight through to the fragment shader fragTexCoord = vertTexCoord; gl_Position = vec4(vert, 1); } 

顶点着色器使用vertTexCoord作为输入,并且将它不经修改,直接传给名为fragTexCoordattribute片段着色器变量。

着色器有两个变量需要我们设置:vertTexCoordattribute变量和texuniform变量。让我们从设置tex变量开始。打开main.cpp,找到Render()函数。我们在绘制三角形之前设置texuniform变量:

glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, gTexture->object()); gProgram->setUniform("tex", 0); //set to 0 because the texture is bound to GL_TEXTURE0 

贴图在没有绑定到贴图单元时,是无法使用的。glActiveTexture告诉OpenGL我们希望使用哪个贴图单元。GL_TEXTURE0是第一个贴图单元,我们就使用它。

下一本,我们使用glBindTexture来绑定我们的贴图到激活的贴图单元。

然后我们设置贴图单元索引给texuniform着色器变量。我们使用0号贴图单元,所以我们设置tex变量为整数0setUniform方法只是调用了glUnifrom1i函数。

最后一步,获取贴图坐标给vertTexCoordattribute变量。为了实现它,我们需要修改LoadTriangle()函数中的VAO。之前的代码是这样的:

// Put the three triangle vertices into the VBO GLfloat vertexData[] = { //  X     Y     Z 0.0f, 0.8f, 0.0f, -0.8f,-0.8f, 0.0f, 0.8f,-0.8f, 0.0f };  // connect the xyz to the "vert" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vert")); glVertexAttribPointer(gProgram->attrib("vert"), 3, GL_FLOAT, GL_FALSE, 0, NULL); 

现在我们需要改成这样:

// Put the three triangle vertices (XYZ) and texture coordinates (UV) into the VBO GLfloat vertexData[] = { //  X     Y     Z       U     V 0.0f, 0.8f, 0.0f, 0.5f, 1.0f, -0.8f,-0.8f, 0.0f, 0.0f, 0.0f, 0.8f,-0.8f, 0.0f, 1.0f, 0.0f, };  // connect the xyz to the "vert" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vert")); glVertexAttribPointer(gProgram->attrib("vert"), 3, GL_FLOAT, GL_FALSE, 5*sizeof(GLfloat), NULL);  // connect the uv coords to the "vertTexCoord" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vertTexCoord")); glVertexAttribPointer(gProgram->attrib("vertTexCoord"), 2, GL_FLOAT, GL_TRUE, 5*sizeof(GLfloat), (const GLvoid*)(3 * sizeof(GLfloat))); 

我们第二次调用了glVertexAttribPointer,但我们也修改了第一个调用。最重要的是最后两个参数。

两个glVertexAttribPointer调用的倒数第二个参数都是5*sizeof(GLfloat)。这是“步长”参数。该参数是表明每个值开始位置的间隔是多少字节,或者说是到下个值开始的字节数。在两个调用中,每个值是5个GLFloat长度。举个例子,加入我们从“X”开始,往前数5个值,我们会落在下个“X”值上。从“U”开始也一样,也是往前数5个。该参数是字节单位,不是浮点作为单位,所以我们必须乘上浮点类型所占字节数。

最后一个参数glVertexAttribPointer是一个“偏移”参数。该参数需要知道从开始到第一个值有多少字节。开始是XYZ,所以偏移设置为NULL表示“到开始的距离为0字节”。第一个UV不在最前面-中间有3个浮点的距离。再说一遍,参数是以字节为单位,而非浮点,所以我们必须乘上浮点类型所占字节数。并且我们必须将数值转为const GLvoid*类型,因为在旧版本的OpenGL中该参数有别于现在的“偏移”。

现在,当你运行程序,你就能看到如本文最上方的那个三角形。

下篇预告

下一篇教程中我们会学一些矩阵相关的东西,使用矩阵来旋转立方体,移动相机,和添加透视投影。我们还会学习深度缓冲和基于时间更新的逻辑,比如动画。

更多OpenGL贴图相关资源

posted on 2015-08-06 20:17 威士忌 阅读(1283) 评论(1)  编辑 收藏 引用

Feedback

# re: 现代OpenGL教程 02 - 贴图 2015-12-01 17:13 mmocake
给三角形加一个贴图,学习了,MARK下  回复  更多评论
  


只有注册用户登录后才能发表评论。
【推荐】超50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理