OpenGL进阶(十六) - GLSL纹理（Texture）

提要

        纹理是实时渲染中的非常基础且非常重要的一个主题，它一直作为增强渲染效果的一个强有力手段。在固定渲染管线的opengl中，纹理的使用灵活度非常有限，有了shader之后，我们可以在shader中操作纹理，这时就可以用一些额外的渲染参数来渲染纹理，比如位移图（displacement maps），法向量（normal vectors）等等。

       实际上在OpenGL4.0中，纹理不仅仅是图像信息，更准确的，它应该是内存中一个块区。

UV贴图

       这是最简单的一种贴图了。从文件读取图片文件，然后绑定贴图，绘制到顶点。

       一般的3D模型制作软件都可以制作UV贴图，推荐使用Blender + GIMP，制作的方法可以参考这里。

接着按照前面说过的方法导出box.obj文件，待会用来加载。

      在Blender中导出obj文件中，没有设置和设置材质导出的最终格式并不一样，不止是有无纹理坐标的问题，面定义的格式也改变了，这里需要重写一个加载obj文件的函数。

bool Util::loadObjWithTex(const char * path,std::vector<glm::vec3> & out_vertices,std::vector<glm::vec2> & out_uvs,std::vector<glm::vec3> & out_normals)
{
    printf("Loading OBJ file with tex %s...\n", path);
    std::vector<unsigned int> vertexIndices, uvIndices, normalIndices;
    std::vector<glm::vec3> temp_vertices;
    std::vector<glm::vec2> temp_uvs;
    std::vector<glm::vec3> temp_normals;

    FILE * file = fopen(path, "r");
    if( file == NULL ){
        printf("Impossible to open the file ! Are you in the right path ? \n");
        return false;
    }
    while( 1 ){
        char lineHeader[128];
        // read the first word of the line
        int res = fscanf(file, "%s", lineHeader);
        if (res == EOF) break; // EOF = End Of File. Quit the loop.
        // else : parse lineHeader
        if ( strcmp( lineHeader, "v" ) == 0 ){
            //cout<<"Get v"<<endl;
            glm::vec3 vertex;
            fscanf(file, "%f %f %f\n", &vertex.x, &vertex.y, &vertex.z );
            temp_vertices.push_back(vertex);
        }else if ( strcmp( lineHeader, "vt" ) == 0 ){
            //cout<<"Get vt"<<endl;
            glm::vec2 uv;
            fscanf(file, "%f %f\n", &uv.x, &uv.y );
            //cout<<"uv.x"<<uv.x<<" uv.y"<<uv.y;
            uv.y = -uv.y; // Invert V coordinate since we will only use DDS texture, which are inverted. Remove if you want to use TGA or BMP loaders.
            temp_uvs.push_back(uv);
        }else if ( strcmp( lineHeader, "vn" ) == 0 ){
           // cout<<"Get vn"<<endl;
            glm::vec3 normal;
            fscanf(file, "%f %f %f\n", &normal.x, &normal.y, &normal.z );
            temp_normals.push_back(normal);
        }else if ( strcmp( lineHeader, "f" ) == 0 ){
            //cout<<"Get f"<<endl;
            std::string vertex1, vertex2, vertex3;
            unsigned int vertexIndex[3], uvIndex[3], normalIndex[3];
            int matches = fscanf(file, "%d/%d/%d %d/%d/%d %d/%d/%d\n", &vertexIndex[0], &uvIndex[0], &normalIndex[0], &vertexIndex[1], &uvIndex[1], &normalIndex[1], &vertexIndex[2], &uvIndex[2], &normalIndex[2] );
            if (matches != 9){
                printf("File can't be read by our simple parser :-( Try exporting with other options\n");
                return false;
            }
            vertexIndices.push_back(vertexIndex[0]);
            vertexIndices.push_back(vertexIndex[1]);
            vertexIndices.push_back(vertexIndex[2]);
            uvIndices.push_back(uvIndex[0]);
            uvIndices.push_back(uvIndex[1]);
            uvIndices.push_back(uvIndex[2]);
            normalIndices.push_back(normalIndex[0]);
            normalIndices.push_back(normalIndex[1]);
            normalIndices.push_back(normalIndex[2]);
        }else{
            // Probably a comment, eat up the rest of the line
            char stupidBuffer[1000];
            fgets(stupidBuffer, 1000, file);
        }
    }

// For each vertex of each triangle
    for( unsigned int i=0; i<vertexIndices.size(); i++ ){
        // Get the indices of its attributes
        unsigned int vertexIndex = vertexIndices[i];
        unsigned int uvIndex = uvIndices[i];
        unsigned int normalIndex = normalIndices[i];
        // Get the attributes thanks to the index
        glm::vec3 vertex = temp_vertices[ vertexIndex-1 ];
        glm::vec2 uv = temp_uvs[ uvIndex-1 ];
        glm::vec3 normal = temp_normals[ normalIndex-1 ];
        // Put the attributes in buffers
        out_vertices.push_back(vertex);
        out_uvs     .push_back(uv);
        out_normals .push_back(normal);
        }
    return true;
}

注意在加载uv坐标的时候y轴需要转换一下。

在initGL中需要启动2D纹理，添加一句：

glEnable(GL_TEXTURE_2D);

同时还要添加的是纹理的加载函数，用到了SDL的image库。

首先是在codeblocks工程中把库添加进来：

然后在CGL类中添加方法：

bool CGL::loadTexture(const char *name)
{
    int mode;
    GLuint texture;
    SDL_Surface* surface = IMG_Load(name);
    SDL_SetAlpha(surface, SDL_SRCALPHA, 0);
    if (surface==NULL) { //If it failed, say why and don't continue loading the texture
        cout<<"Error:" <<SDL_GetError()<<endl;
        return 0;
    }

    // work out what format to tell glTexImage2D to use...
    if (surface->format->BytesPerPixel == 3) { // RGB 24bit
            mode = GL_RGB;
        } else if (surface->format->BytesPerPixel == 4) { // RGBA 32bit
            mode = GL_RGBA;
        } else {
            SDL_FreeSurface(surface);
            return 0;
        }
    glActiveTexture(GL_TEXTURE0);
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    glTexImage2D(GL_TEXTURE_2D, 0, mode, surface->w,surface->h, 0, mode,GL_UNSIGNED_BYTE,surface->pixels);
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_REPEAT );
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_REPEAT );

    if(surface) SDL_FreeSurface(surface);

    prog.setUniform("Tex1", 0);
    return true;
}

接下来是最重要的shader了，首先看顶点shader。

#version 400
layout (location = 0) in vec3 VertexPosition;  
layout (location = 1) in vec3 VertexNormal;  
layout (location = 2) in vec2 VertexTexCoord;

out vec4 Position;
out vec3 Normal;
out vec2 TexCoord;

uniform mat4 ModelViewMatrix;
uniform mat3 NormalMatrix;
uniform mat4 ProjectionMatrix;
uniform mat4 MVP;


void getEyeSpace(out vec3 norm, out vec4 position)
{
	norm =  normalize(NormalMatrix * VertexNormal);
	position = ModelViewMatrix * vec4(VertexPosition, 1.0);
}


void main()
{
	getEyeSpace(Normal, Position);
	TexCoord = VertexTexCoord;
	gl_Position = MVP * vec4( VertexPosition, 1.0);
}

VertexPosition,VertexNormal.VertexTexCoord 都是作为输入的属性传进来的。

这里的layout用于一个具体变量前，用于显式标明该变量的一些布局属性，location的值和前面glBindAttribLocation的位置是一一对应的。

在顶点shader中获取VertexTexCoord之后，不经处理直接扔给Fregment shader，接下来在片段 shader中：

#version 400

in vec4 Position;
in vec3 Normal;
in vec2 TexCoord;

struct LightInfo{
	vec4 position;
	vec3 intensity;
};

struct MaterialInfo{
	vec3 Ka;
	vec3 Kd;
	vec3 Ks;
	float Shininess;
};

uniform sampler2D Tex1; 
uniform LightInfo Light;
uniform	MaterialInfo Material;

void phongModel(vec4 position, vec3 norm, out vec3 amb, out vec3 diff, out vec3 spec)
{
	vec3 tmp = vec3(0.9f, 0.5f, 0.3f);
	vec3 s = normalize(vec3(Light.position - position));
	vec3 v = normalize(-position.xyz);
	vec3 r = reflect(-s, norm);

	amb = Light.intensity * Material.Ka;
	float sDotN = max(dot(s, norm),0.0);
	diff = Light.intensity * Material.Kd * sDotN;
	spec = vec3(0.0);
	if(sDotN > 0.0)
		spec = Light.intensity *Material.Ks * pow( max( dot(r,v), 0.0 ),Material.Shininess );  
}

void main(void)
{
	vec3 amb,diff,spec;
	vec4 texColor = texture(Tex1, TexCoord);
	phongModel(Position, Normal, amb, diff, spec);
	
	//Render without light effect.
	gl_FragColor = (vec4( amb + diff, 1.0) * texColor) + vec4(spec, 1.0);

}

在main函数中主要是通过GLSL内置的纹理函数 - texture 来将与纹理坐标对应的纹理值从内存中取出来，接下来和光照的颜色一起混合，得到最后的颜色。

编译运行一下：

多纹理

多纹理的实现比较简单，就是将多个纹理加载到内存，然后混合得到最终纹理的颜色。

纹理的加载函数需要修改一下：

bool CGL::loadTexture()
{
    int mode;
    GLuint texIDs[2];
    glGenTextures(2, texIDs);
    // Load brick brake file
    const char * texName = "assets/textures/crate.bmp";
    SDL_Surface* surface = IMG_Load(texName);
    SDL_SetAlpha(surface, SDL_SRCALPHA, 0);
    if (surface==NULL) { //If it failed, say why and don't continue loading the texture
        cout<<"Error:" <<SDL_GetError()<<endl;
        return 0;
    }

    // work out what format to tell glTexImage2D to use...
    if (surface->format->BytesPerPixel == 3) { // RGB 24bit
        mode = GL_RGB;
    } else if (surface->format->BytesPerPixel == 4) { // RGBA 32bit
        mode = GL_RGBA;
    } else {
        SDL_FreeSurface(surface);
        return 0;
    }

    // Copy file to OpenGL
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, texIDs[0]);
    glTexImage2D(GL_TEXTURE_2D, 0, mode, surface->w,surface->h, 0, mode,GL_UNSIGNED_BYTE,surface->pixels);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

    // Load moss texture file
    texName = "assets/textures/smile.png";
    surface = IMG_Load(texName);
    SDL_SetAlpha(surface, SDL_SRCALPHA, 0);
    if (surface==NULL) { //If it failed, say why and don't continue loading the texture
        cout<<"Error:" <<SDL_GetError()<<endl;
        return 0;
    }

    // work out what format to tell glTexImage2D to use...
    if (surface->format->BytesPerPixel == 3) { // RGB 24bit
        mode = GL_RGB;
    } else if (surface->format->BytesPerPixel == 4) { // RGBA 32bit
        mode = GL_RGBA;
    } else {
        SDL_FreeSurface(surface);
        return 0;
    }

    // Copy file to OpenGL
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, texIDs[1]);
    glTexImage2D(GL_TEXTURE_2D, 0, mode, surface->w,surface->h, 0, mode,GL_UNSIGNED_BYTE,surface->pixels);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

    if(surface) SDL_FreeSurface(surface);

    prog.setUniform("Tex1", 0);
    prog.setUniform("Tex2", 1);
    return true;
}

如果是加载更多的纹理的话，可以使用纹理Buffer，那样可以获得更高的效率，这里就偷懒了 - -。

然后修改fregment shader：

#version 400

in vec4 Position;
in vec3 Normal;
in vec2 TexCoord;

struct LightInfo{
	vec4 position;
	vec3 intensity;
};

struct MaterialInfo{
	vec3 Ka;
	vec3 Kd;
	vec3 Ks;
	float Shininess;
};

uniform sampler2D Tex1; 
uniform sampler2D Tex2; 

uniform LightInfo Light;
uniform	MaterialInfo Material;

void phongModel(vec4 position, vec3 norm, out vec3 amb, out vec3 diff, out vec3 spec)
{
	vec3 tmp = vec3(0.9f, 0.5f, 0.3f);
	vec3 s = normalize(vec3(Light.position - position));
	vec3 v = normalize(-position.xyz);
	vec3 r = reflect(-s, norm);

	amb = Light.intensity * Material.Ka;
	float sDotN = max(dot(s, norm),0.0);
	diff = Light.intensity * Material.Kd * sDotN;
	spec = vec3(0.0);
	if(sDotN > 0.0)
		spec = Light.intensity *Material.Ks * pow( max( dot(r,v), 0.0 ),Material.Shininess );  
}

void main(void)
{
	vec3 amb,diff,spec;
	vec4 crateColor = texture(Tex1, TexCoord);
	vec4 mosColor = texture(Tex2, TexCoord);
	phongModel(Position, Normal, amb, diff, spec);
	
	vec4 texColor = mix(crateColor,mosColor,mosColor.a);
	//Render without light effect.
	gl_FragColor = (vec4( amb + diff, 1.0) * texColor) + vec4(spec, 1.0);

}

最终的纹理颜色是用内建的mix函数混合得到的。运行效果：

源码下载

参考

OpenGL 4.0 Shading Langage Cookbook