008---活动的Mip贴图案例一(隧道)

[toc]

前言

通过前面的纹理一系列学习,针对一个案例对所学知识进行综合应用.

首先看效果图.

image.png

按下前后键有种穿越隧道的效果.

使用不同的Mip纹理贴图模式

首先,将隧道分为四部分,地面,天花板,左面和右面墙面.由看图可知,只需要加载三张tga文件,左右一样.

首先,创建4个批次类容器,分别存放四个面,有效果可知,只需要在z轴移动,初始化一个z轴的深度值,通过宏定义对纹理加上表示符号用来区分.


//4个批次容器类
GLBatch             floorBatch;//地面
GLBatch             ceilingBatch;//天花板
GLBatch             leftWallBatch;//左墙面
GLBatch             rightWallBatch;//右墙面

//深度初始值，-65。
GLfloat             viewZ = -65.0f;

// 纹理标识符号
#define TEXTURE_BRICK   0 //墙面
#define TEXTURE_FLOOR   1 //地板
#define TEXTURE_CEILING 2 //纹理天花板


#define TEXTURE_COUNT   3 //纹理个数

// tag文件名数组保存

GLuint  textures[TEXTURE_COUNT];//纹理标记数组
//文件tag名字数组
const char *szTextureFiles[TEXTURE_COUNT] = { "brick.tga", "floor.tga", "ceiling.tga" };

接着,在SetupRC中,创建纹理对象,读取tga文件(读取像素),设置过滤方式和环绕模式,最后载入纹理.


void SetupRC()
{
   ...
   
   //纹理对象
   glGenTextures(TEXTURE_COUNT, textures);
   //通过数组加载
    for(iLoop = 0; iLoop < TEXTURE_COUNT; iLoop++)
    {
        //绑定纹理
        glBindTexture(GL_TEXTURE_2D, textures[iLoop]);
        //读取像素
        pBytes = gltReadTGABits(szTextureFiles[iLoop],&iWidth, &iHeight,
                                &iComponents, &eFormat);
        //过滤方式
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
        //环绕方式
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
        
        //载入纹理
        glTexImage2D(GL_TEXTURE_2D, 0, iComponents, iWidth, iHeight, 0, eFormat, GL_UNSIGNED_BYTE, pBytes);
        
         //Mipmap
         glGenerateMipmap(GL_TEXTURE_2D);
         //释放
         free(pBytes);
    }
   ...
}

接下来绘制纹理坐标和顶点坐标(上,下,左,右),建立几何图形

1. 地板

image.png

对应顶点和纹理坐标

 
 floorBatch.Begin(GL_TRIANGLE_STRIP, 28, 1);
 for(z = 60.0f; z >= 0.0f; z -=10.0f)
 {
     floorBatch.MultiTexCoord2f(0, 0.0f, 0.0f);
     floorBatch.Vertex3f(-10.0f, -10.0f, z);
     
     floorBatch.MultiTexCoord2f(0, 1.0f, 0.0f);
     floorBatch.Vertex3f(10.0f, -10.0f, z);
     
     floorBatch.MultiTexCoord2f(0, 0.0f, 1.0f);
     floorBatch.Vertex3f(-10.0f, -10.0f, z - 10.0f);
     
     floorBatch.MultiTexCoord2f(0, 1.0f, 1.0f);
     floorBatch.Vertex3f(10.0f, -10.0f, z - 10.0f);
 }
 floorBatch.End();

2. 天花板

image.png

对应顶点和纹理坐标


    ceilingBatch.Begin(GL_TRIANGLE_STRIP, 28, 1);
 for(z = 60.0f; z >= 0.0f; z -=10.0f)
 {
     ceilingBatch.MultiTexCoord2f(0, 0.0f, 1.0f);
     ceilingBatch.Vertex3f(-10.0f, 10.0f, z - 10.0f);
     
     ceilingBatch.MultiTexCoord2f(0, 1.0f, 1.0f);
     ceilingBatch.Vertex3f(10.0f, 10.0f, z - 10.0f);
     
     ceilingBatch.MultiTexCoord2f(0, 0.0f, 0.0f);
     ceilingBatch.Vertex3f(-10.0f, 10.0f, z);
     
     ceilingBatch.MultiTexCoord2f(0, 1.0f, 0.0f);
     ceilingBatch.Vertex3f(10.0f, 10.0f, z);
 }
 ceilingBatch.End();

3.左边墙

image.png

对应顶点坐标和纹理坐标


 leftWallBatch.Begin(GL_TRIANGLE_STRIP, 28, 1);
 for(z = 60.0f; z >= 0.0f; z -=10.0f)
 {
     leftWallBatch.MultiTexCoord2f(0, 0.0f, 0.0f);
     leftWallBatch.Vertex3f(-10.0f, -10.0f, z);
     
     leftWallBatch.MultiTexCoord2f(0, 0.0f, 1.0f);
     leftWallBatch.Vertex3f(-10.0f, 10.0f, z);
     
     leftWallBatch.MultiTexCoord2f(0, 1.0f, 0.0f);
     leftWallBatch.Vertex3f(-10.0f, -10.0f, z - 10.0f);
     
     leftWallBatch.MultiTexCoord2f(0, 1.0f, 1.0f);
     leftWallBatch.Vertex3f(-10.0f, 10.0f, z - 10.0f);
 }
 leftWallBatch.End();

 ```
 
 
 **4.右边墙**
 [图片上传失败...(image-c6d39e-1595383726768)]
 
 对应顶点和坐标
 
```swift
 
  rightWallBatch.Begin(GL_TRIANGLE_STRIP, 28, 1);
 for(z = 60.0f; z >= 0.0f; z -=10.0f)
 {
     rightWallBatch.MultiTexCoord2f(0, 0.0f, 0.0f);
     rightWallBatch.Vertex3f(10.0f, -10.0f, z);
     
     rightWallBatch.MultiTexCoord2f(0, 0.0f, 1.0f);
     rightWallBatch.Vertex3f(10.0f, 10.0f, z);
     
     rightWallBatch.MultiTexCoord2f(0, 1.0f, 0.0f);
     rightWallBatch.Vertex3f(10.0f, -10.0f, z - 10.0f);
     
     rightWallBatch.MultiTexCoord2f(0, 1.0f, 1.0f);
     rightWallBatch.Vertex3f(10.0f, 10.0f, z - 10.0f);
 }
 rightWallBatch.End();

在RenderScene设置平移矩阵和图形和纹理绘制
1. 只在z轴方向移动,压入一个Translate矩阵
2. 纹理替换矩阵着色器进行批次类提交
3. 最后绑定纹理绘制

   
   void RenderScene(void)
{
   
   ...
    
    //压入一个z轴方向平移矩阵
    modelViewMatrix.PushMatrix();
    modelViewMatrix.Translate(0.0f, 0.0f, viewZ);
    
   // 纹理替换矩阵着色器shaderManager.UseStockShader(GLT_SHADER_TEXTURE_REPLACE, transformPipeline.GetModelViewProjectionMatrix(), 0);
    
   //绑定纹理 
    glBindTexture(GL_TEXTURE_2D, textures[TEXTURE_FLOOR]);
    floorBatch.Draw();
    
    glBindTexture(GL_TEXTURE_2D, textures[TEXTURE_CEILING]);
    ceilingBatch.Draw();
    
    glBindTexture(GL_TEXTURE_2D, textures[TEXTURE_BRICK]);
    leftWallBatch.Draw();
    rightWallBatch.Draw();
    
    
    modelViewMatrix.PopMatrix();
    
    ...
}

添加菜单入口改变过滤器


int main(int argc, char *argv[])
{
   // 添加菜单入口，改变过滤器
    glutCreateMenu(ProcessMenu);
    glutAddMenuEntry("GL_NEAREST",0);
    glutAddMenuEntry("GL_LINEAR",1);
    glutAddMenuEntry("GL_NEAREST_MIPMAP_NEAREST",2);
    glutAddMenuEntry("GL_NEAREST_MIPMAP_LINEAR", 3);
    glutAddMenuEntry("GL_LINEAR_MIPMAP_NEAREST", 4);
    glutAddMenuEntry("GL_LINEAR_MIPMAP_LINEAR", 5);
    glutAddMenuEntry("Anisotropic Filter", 6);
    glutAddMenuEntry("Anisotropic Off", 7);
    
    
    glutAttachMenu(GLUT_RIGHT_BUTTON);
}

ProcessMenu函数,每次改变选择都重新绑定,在设置过滤


void ProcessMenu(int value)
{
    GLint iLoop;
    
    for(iLoop = 0; iLoop < TEXTURE_COUNT; iLoop++)
    {
        /**绑定纹理 glBindTexture
         参数1：GL_TEXTURE_2D
         参数2：需要绑定的纹理对象
         */
        glBindTexture(GL_TEXTURE_2D, textures[iLoop]);
        
        /**配置纹理参数 glTexParameteri
         参数1：纹理模式
         参数2：纹理参数
         参数3：特定纹理参数
         
         */
        switch(value)
        {
            case 0:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_NEAREST（最邻近过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
                break;
                
            case 1:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_LINEAR（线性过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
                break;
                
            case 2:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_NEAREST_MIPMAP_NEAREST（选择最邻近的Mip层，并执行最邻近过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST_MIPMAP_NEAREST);
                break;
                
            case 3:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_NEAREST_MIPMAP_LINEAR（在Mip层之间执行线性插补，并执行最邻近过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST_MIPMAP_LINEAR);
                break;
                
            case 4:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_NEAREST_MIPMAP_LINEAR（选择最邻近Mip层，并执行线性过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_NEAREST);
                break;
                
            case 5:
                //GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER(缩小过滤器)，GL_LINEAR_MIPMAP_LINEAR（在Mip层之间执行线性插补，并执行线性过滤，又称为三线性过滤）
                glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
                break;
                
            case 6:
            
                //设置各向异性过滤
                GLfloat fLargest;
                //获取各向异性过滤的最大数量
                glGetFloatv(GL_MAX_TEXTURE_MAX_ANISOTROPY_EXT, &fLargest);
                //设置纹理参数(各向异性采样)
                glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, fLargest);
                break;
        
            case 7:
                //设置各向同性过滤，数量为1.0表示(各向同性采样)
                glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAX_ANISOTROPY_EXT, 1.0f);
                break;
                
        }
    }
    
    //触发重画
    glutPostRedisplay();
}

效果图:

image.png

demo