[翻译] 现代OpenGL教程 02 - 贴图

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

本文会使用两个新的类到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贴图相关资源

  • The texture page on the OpenGL wiki
  • The texturing chapters of the Learning Modern 3D Graphics Programming book.
  • Tutorial 16 - Basic Texture Mapping by Etay Meiri
  • The texturing example code by Jakob Progsch

你可能感兴趣的:([翻译] 现代OpenGL教程 02 - 贴图)