课程
10.3 贴图纹理映射
10.3 贴图纹理映射
1. 任务描述
本关任务
为了完成本关任务，你需要掌握：了解计算机图形学的纹理映射原理，了解 OpenGL 程序的贴图纹理映射方法。 为了在场景中添加纹理映射，需要执行以下步骤：
- 纹理控制：定义纹理如何包裹物体的表面。
- 定义纹理：利用矩形图像进行贴图是二维纹理贴图中常用的方法。
- 纹理映射方式：用函数可以设置纹理映射的方式。
- 纹理坐标：定义纹理与几何坐标对应关系的纹理坐标。
预期输出
具体要求
提示：每一步相关知识可以点击展开查看 给三个矩形添加纹理映射。
1. 设置控制纹理映射
设置控制纹理映射的函数，参数分别如下：
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);相关知识点击查看
纹理的控制： OpenGL 的纹理控制实质上就是定义纹理是如何包裹物体的表面，因为纹理的外形并不总是与物体一致。控制纹理映射方式 of 函数原型如下：void glTexParameter{fi}v(GLenum target, GLenum pname, TYPE param);
参数 target 指定纹理映射类型，必须是 GL_TEXTURE_1D 或 GL_TEXTURE_2D。pname 指定一个单值纹理参数的符号名，param 指定纹理参数的取值。
2. 定义二维纹理贴图
运用定义二维纹理贴图函数，参数分别如下：
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR_EXT, GL_UNSIGNED_BYTE, pixels);相关知识点击查看
定义二维纹理贴图的函数原型如下：void glTexImage2D(GLenum target, GLint level, GLint components, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels);
参数说明如下： （1）target 指定纹理映射方式，此处必须是 GL_TEXTURE_2D； （2）level 指定纹理图像纹理分辨率的级数。当只有一种分辨率时 level 的值为 0； （3）components 指定选用 RGBA 的哪些成分用于颜色的混合和调整，1 代表只选用纹理图像的红色分量，2 表示选择纹理图像的红色和 alpha 分量，3 代表同时选用纹理图像的红、绿、蓝分量，4 表示同时选择红、绿、蓝和 alpha 分量； （4）width 和 height 定义纹理图像的长度和宽度，必须是 2 的 n 次方； （5）border 说明纹理边界的宽度，当其值为 0 时，边界也为 0；当 border 为 1 时，纹理图像的长度和宽度必须写成 2^m+2border 及 2^n+2border 的形式，其中 m、n 为一个大于 32 的整数； （6）format 说明纹理图像数据的格式，其值可以是 GL_COLOR_INDEX、GL_RGB、GL_RGBA、GL_RED、GL_GREEN、GL_BLUE、GL_ALPHA、GL_LUMINANCE_ALPHA； （7）type 说明纹理图像的数据类型，取值可为：GL_TYPE、GL_UNSIGNED_BYTE、GL_SHORT、GL_UNSIGNED_SHORT、GL_INT、GL_UNSIGNED_INT、GL_FLOAT、GL_BITMAP 之一； （8）pixels 说明纹理图像的像素数据的存储地址，通常纹理可以是彩色的或灰度的。
3. 设置纹理映射方式
设置纹理映射方式，函数参数如下：
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);相关知识点击查看
纹理映射函数可用来设置纹理映射方式：void glTexEnv{fi}v(GLenum target, GLenum pname, TYPE param);
参数说明如下： （1）target 指定一个纹理环境，值必须是 GL_TEXTURE_ENV。 （2）pname 指定一个纹理环境参数的符号名，可以是 GL_TEXTURE_ENV_MODE 或 GL_TEXTURE_ENV_COLOR。若 pname 取值为 GL_TEXTURE_ENV_MODE，则 param 取值可为 GL_MODULATE、GL_DECAL、GL_BLEND 和 GL_REPLACE；若 pname 取值为 GL_TEXTURE_ENV_COLOR，则 param 取值可为包含 4 个浮点数的数组 (B,G,R,A)。 （3）当 param 取值为 GL_MODULATE 时，纹理图像以透明方式贴在物体表面上，就像现实世界中将一张带有图案的透明纸贴在物体上一样；当 param 取值为 GL_BLEND 时，则使用了一个 RGBA 常量来融合物体原色和纹理图像颜色的映射方式；当 param 取值为 GL_REPLACE 时，纹理映射的结果是在物体表面上映射纹理图像，不让其下的任何物体的颜色表现出来。
4. 设置三个矩形纹理坐标
设置三个矩形面的纹理和位置坐标，并根据前两个面的坐标参数写出左侧立面的参数。函数参数如下： 底面坐标：
glTexCoord2f(0.0f, 0.0f); glVertex3f(-6.0f, -3.0f, 0.0f); // 右边近点坐标
glTexCoord2f(0.0f, 3.0f); glVertex3f(-6.0f, 7.0f, 0.0f); // 左边近点坐标
glTexCoord2f(3.0f, 3.0f); glVertex3f(6.0f, 7.0f, 0.0f); // 左边远点坐标
glTexCoord2f(3.0f, 0.0f); glVertex3f(6.0f, -3.0f, 0.0f); // 右边远点坐标右侧立面坐标：
glTexCoord2f(0.0f, 0.0f); glVertex3f(-6.0f, -3.0f, 0.0f); // 下边近点坐标
glTexCoord2f(0.0f, 1.0f); glVertex3f(-6.0f, -3.0f, 5.0f); // 上边近点坐标
glTexCoord2f(2.0f, 1.0f); glVertex3f(6.0f, -3.0f, 5.0f); // 上边远点坐标
glTexCoord2f(2.0f, 0.0f); glVertex3f(6.0f, -3.0f, 0.0f); // 下边远点坐标左侧立面坐标（纹理坐标参考右侧立面坐标）：
glTexCoord2f( , ); glVertex3f( , , ); // 左下点的坐标
glTexCoord2f( , ); glVertex3f( , , ); // 左上点的坐标
glTexCoord2f( , ); glVertex3f( , , ); // 右上点的坐标
glTexCoord2f( , ); glVertex3f( , , ); // 右下点的坐标相关知识点击查看
纹理图像一般用二维数组来表示，纹理坐标通常有一维、二维、三维或四维形式，称为 s、t、r、q 坐标。定义纹理坐标的函数原型如下，它有多达 32 种变化：void glTexCoord1{sifd}(GLint s); void glTexCoord2{sifd}(GLint s, GLint t); void glTexCoord3{sifd}(GLint s, GLint t, GLint r); void glTexCoord4{sifd}(GLint s, GLint t, GLint r, GLint q);
glTexCoord2f() 函数： 有两个参数：GLfloat s, GLfloat t 第一个参数代表 X 坐标。0.0f 是纹理的左侧。0.5f 是纹理的中点，1.0f 是纹理的右侧。 第二个参数代表 Y 坐标。0.0f 是纹理的底部。0.5f 是纹理的中点，1.0f 是纹理的顶部。 一个完全纹理的四个顶点的坐标分别是 、、、，分别对应左下、左上、右上、右下角。 可以这么认为，纹理一个挨着一个粘在坐标轴上，显示多个、显示那部分完全由四个顶点坐标决定。 比如显示 3 行 2 列个位图（共 6 个），坐标可以这样：、、、。
相关知识
相关知识可以在具体步骤中点击展开查看
开始你的任务吧，祝你成功！
2. 我的回答
文件 step3/test3.cpp:
// 提示：在合适的地方修改或添加代码
#include <GL/freeglut.h>
#include<stdlib.h>
#include<stdio.h>
// 评测代码所用头文件-开始
#include<opencv2/core/core.hpp>
#include<opencv2/highgui/highgui.hpp>
#include<opencv2/imgproc/imgproc.hpp>
using namespace std;
// 评测代码所用头文件-结束
#define WindowWidth 400
#define WindowHeight 400
#define WindowTitle "OpenGL纹理测试"
#define _CRT_SECURE_NO_WARNINGS
//定义两个纹理对象编号
GLuint texGround;
GLuint texWall;
#define BMP_Header_Length 54 //图像数据在内存块中的偏移量
static GLfloat angle =220.0f; //旋转角度
// 函数power_of_two用于判断一个整数是不是2的整数次幂
int power_of_two(int n)
{
if (n <= 0)
return 0;
return (n & (n - 1)) == 0;
}
/* 函数load_texture
* 读取一个BMP文件作为纹理
* 如果失败，返回0，如果成功，返回纹理编号
*/
GLuint load_texture(const char* file_name)
{
GLint width, height, total_bytes;
GLubyte* pixels = 0;
GLuint last_texture_ID = 0, texture_ID = 0;
// 打开文件，如果失败，返回
FILE* pFile = fopen(file_name, "rb");
if (pFile == 0)
return 0;
// 读取文件中图象的宽度和高度
fseek(pFile, 0x0012, SEEK_SET);
fread(&width, 4, 1, pFile);
fread(&height, 4, 1, pFile);
fseek(pFile, BMP_Header_Length, SEEK_SET);
// 计算每行像素所占字节数，并根据此数据计算总像素字节数
{
GLint line_bytes = width * 3;
while (line_bytes % 4 != 0)
++line_bytes;
total_bytes = line_bytes * height;
}
// 根据总像素字节数分配内存
pixels = (GLubyte*)malloc(total_bytes);
if (pixels == 0)
{
fclose(pFile);
return 0;
}
// 读取像素数据
if (fread(pixels, total_bytes, 1, pFile) <= 0)
{
free(pixels);
fclose(pFile);
return 0;
}
// 对就旧版本的兼容，如果图象的宽度和高度不是的整数次方，则需要进行缩放
// 若图像宽高超过了OpenGL规定的最大值，也缩放
{
GLint max;
glGetIntegerv(GL_MAX_TEXTURE_SIZE, &max);
if (!power_of_two(width)
|| !power_of_two(height)
|| width > max
|| height > max)
{
const GLint new_width = 256;
const GLint new_height = 256; // 规定缩放后新的大小为边长的正方形
GLint new_line_bytes, new_total_bytes;
GLubyte* new_pixels = 0;
// 计算每行需要的字节数和总字节数
new_line_bytes = new_width * 3;
while (new_line_bytes % 4 != 0)
++new_line_bytes;
new_total_bytes = new_line_bytes * new_height;
// 分配内存
new_pixels = (GLubyte*)malloc(new_total_bytes);
if (new_pixels == 0)
{
free(pixels);
fclose(pFile);
return 0;
}
// 进行像素缩放
gluScaleImage(GL_RGB,
width, height, GL_UNSIGNED_BYTE, pixels,
new_width, new_height, GL_UNSIGNED_BYTE, new_pixels);
// 释放原来的像素数据，把pixels指向新的像素数据，并重新设置width和height
free(pixels);
pixels = new_pixels;
width = new_width;
height = new_height;
}
}
// 分配一个新的纹理编号
glGenTextures(1, &texture_ID);
if (texture_ID == 0)
{
free(pixels);
fclose(pFile);
return 0;
}
// 绑定新的纹理，载入纹理并设置纹理参数
// 在绑定前，先获得原来绑定的纹理编号，以便在最后进行恢复
GLint lastTextureID = last_texture_ID;
glGetIntegerv(GL_TEXTURE_BINDING_2D, &lastTextureID);
glBindTexture(GL_TEXTURE_2D, texture_ID);
//********1.请输入代码设置纹理映射控制函数********//
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);
//**********************************************//
//*********2.请输入代码设置纹理的定义函数*********//
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_BGR_EXT, GL_UNSIGNED_BYTE, pixels);
//**********************************************//
//********3.请输入代码进行纹理映射方式设置*********//
glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
//**********************************************//
glBindTexture(GL_TEXTURE_2D, lastTextureID); //恢复之前的纹理绑定
free(pixels);
return texture_ID;
}
void display(void)
{
// 清除屏幕
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// 设置视角
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(75, 1, 1, 21);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(13 ,5, 5, 0, 0, 0, 0, 0, 1);
glRotatef(angle, 0.0f, 0.0f, 1.0f); //旋转
// 绘制底面以及纹理
glBindTexture(GL_TEXTURE_2D, texGround);
glBegin(GL_QUADS);
//**********4.1请输入代码进行底面纹理坐标设置******//
glTexCoord2f(0.0f, 0.0f); glVertex3f(-6.0f, -3.0f, 0.0f); //右边近点坐标
glTexCoord2f(0.0f, 3.0f); glVertex3f(-6.0f, 7.0f, 0.0f); //左边近点坐标
glTexCoord2f(3.0f, 3.0f); glVertex3f(6.0f, 7.0f, 0.0f); //左边远点坐标
glTexCoord2f(3.0f, 0.0f); glVertex3f(6.0f, -3.0f, 0.0f); //右边远点坐标
//**********************************************//
glEnd();
// 绘制立面
glBindTexture(GL_TEXTURE_2D, texWall);
glBegin(GL_QUADS);
//*******4.2请输入代码进行右侧矩形纹理坐标设置*****//
glTexCoord2f(0.0f, 0.0f); glVertex3f(-6.0f, -3.0f, 0.0f); //下边近点坐标
glTexCoord2f(0.0f, 1.0f); glVertex3f(-6.0f, -3.0f, 5.0f); //上边近点坐标
glTexCoord2f(2.0f, 1.0f); glVertex3f(6.0f, -3.0f, 5.0f); //上边远点坐标
glTexCoord2f(2.0f, 0.0f); glVertex3f(6.0f, -3.0f, 0.0f); //下边远点坐标
//**********************************************//
glEnd();
//绘制另外一个立面
glBindTexture(GL_TEXTURE_2D, texWall);
glBegin(GL_QUADS);
//*****4.3请输入代码进行左侧矩形纹理坐标设置******//
// 注意这里 X 坐标修正为 6.0f，使其退到房间远端形成真正的拐角
glTexCoord2f(0.0f, 0.0f); glVertex3f(6.0f, 7.0f, 0.0f); //左下点的坐标
glTexCoord2f(0.0f, 1.0f); glVertex3f(6.0f, 7.0f, 5.0f); //左上点的坐标
glTexCoord2f(2.0f, 1.0f); glVertex3f(6.0f, -3.0f, 5.0f); //右上点的坐标
glTexCoord2f(2.0f, 0.0f); glVertex3f(6.0f, -3.0f, 0.0f); //右下点的坐标
//**********************************************//
glEnd();
glutSwapBuffers();
}
int main(int argc, char *argv[])
{
glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(400, 400);
glutCreateWindow("几何变换示例");
glEnable(GL_DEPTH_TEST);
glEnable(GL_TEXTURE_2D); // 启用纹理
texGround = load_texture("ground1.bmp"); //加载纹理
texWall = load_texture("wall1.bmp");
glutDisplayFunc(&display); //注册函数
glutMainLoopEvent();
/*************以下为评测代码，与本次实验内容无关，请勿修改**************/
GLubyte* pPixelData = (GLubyte*)malloc(400 * 400 * 3);//分配内存
GLint viewport[4] = {0};
glReadBuffer(GL_FRONT);
glPixelStorei(GL_UNPACK_ALIGNMENT, 4);
glGetIntegerv(GL_VIEWPORT, viewport);
glReadPixels(viewport[0], viewport[1], viewport[2], viewport[3], GL_RGB, GL_UNSIGNED_BYTE, pPixelData);
cv::Mat img;
std::vector<cv::Mat> imgPlanes;
img.create(400, 400, CV_8UC3);
cv::split(img, imgPlanes);
for (int i = 0; i < 400; i++) {
unsigned char* plane0Ptr = imgPlanes[0].ptr<unsigned char>(i);
unsigned char* plane1Ptr = imgPlanes[1].ptr<unsigned char>(i);
unsigned char* plane2Ptr = imgPlanes[2].ptr<unsigned char>(i);
for (int j = 0; j < 400; j++) {
int k = 3 * (i * 400 + j);
plane2Ptr[j] = pPixelData[k];
plane1Ptr[j] = pPixelData[k + 1];
plane0Ptr[j] = pPixelData[k + 2];
}
}
cv::merge(imgPlanes, img);
cv::flip(img, img, 0);
cv::namedWindow("openglGrab");
cv::imshow("openglGrab", img);
//cv::waitKey();
cv::imwrite("../img_step3/test.jpg", img);
return 0;
}