OpenGL的几何变换3之内观察全景图

时间:2023-03-09 14:57:37
OpenGL的几何变换3之内观察全景图

继续上一篇文章的例子:OpenGL的几何变换2之内观察立方体

上一篇是通过绘图方式得到的立方体,没有贴图,这次加上纹理贴图。

通过纹理贴图有两种方案:

1、图片分割化,即是把一张完整的全景图片(就是支持720度全景图片)人工的分隔成前后左右上下六张图片(静态),然后分别加载这六张图片;

2、数据分割化,即是保留一张完整的全景图片,加载图片以后,对图片数据进行上下左右前后进行数据切割,或者应该说进行图片切割(动态)。

这一篇文章主要用到的技术点是纹理映射,具体不再累述,可以参考OpenGL的glTexCoord2f纹理坐标配置

本篇文章的案例主要是采用第一种(图片分割化),先附上代码:

 #include <stdio.h>
#include <windows.h>
#include <gl/glut.h> //引用相关包
#include <gl/glaux.h> GLfloat xangle = 0.0; //X 旋转量
GLfloat yangle = 0.0; //Y 旋转量
GLfloat zangle = 0.0; //Z 旋转量
GLuint texturesArr[]; //存储6个纹理 //交叉点的坐标
int cx = ;
int cy = ; //载入位图图象
AUX_RGBImageRec *loadBMP(CHAR *Filename)
{
FILE *File = NULL; //文件句柄
if (!Filename) //确保文件名已提供
{
return NULL; //如果没提供,返回 NULL
} File = fopen(Filename,"r"); //尝试打开文件
if (File) //文件存在么?
{
fclose(File); //关闭句柄
return auxDIBImageLoadA(Filename); //载入位图并返回指针
}
return NULL; //如果载入失败,返回 NULL
} //载入位图(调用上面的代码)并转换成纹理
int loadGLTextures()
{
int Status = FALSE; //状态指示器
char *imgArr[] = {
"pano/pano_f.bmp", //前面
"pano/pano_b.bmp", //后面
"pano/pano_u.bmp", //顶面
"pano/pano_d.bmp", //底面
"pano/pano_r.bmp", //右面
"pano/pano_l.bmp" //左面
};
AUX_RGBImageRec *textureImage[]; //创建纹理的存储空间 memset(texturesArr, 0x0, sizeof(texturesArr));
memset(textureImage,,sizeof(textureImage)); //将指针设为NULL for (int i = ; i < ; i++) {
Status = FALSE;
//载入位图,检查有无错误,如果位图没找到则退出
if (textureImage[i] = loadBMP(imgArr[i]))
{
Status = TRUE; //将 Status 设为 TRUE
glGenTextures(, &texturesArr[i]); //创建纹理 //使用来自位图数据生成 的典型纹理
glBindTexture(GL_TEXTURE_2D, texturesArr[i]);
//生成纹理
glTexImage2D(GL_TEXTURE_2D, , , textureImage[i]->sizeX, textureImage[i]->sizeY, , GL_RGB, GL_UNSIGNED_BYTE, textureImage[i]->data); glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR); //线形滤波
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR); //线形滤波
} if (textureImage[i]) //纹理是否存在
{
if (textureImage[i]->data) //纹理图像是否存在
{
free(textureImage[i]->data); //释放纹理图像占用的内存
}
free(textureImage[i]); //释放图像结构
}
if (Status == FALSE) {
break;
}
}
return Status; //返回 Status
} //从这里开始进行所有的绘制
void drawCube(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清除屏幕和深度缓存
glMatrixMode(GL_MODELVIEW);
glLoadIdentity(); //重置当前的模型观察矩阵 glPushMatrix();
{
gluLookAt(, , -, , , , , , );
glTranslatef(0.0f, 0.0f, -5.0f); //移入屏幕 5 个单位
glRotatef(xangle, 1.0f, 0.0f, 0.0f); //绕X轴旋转
glRotatef(yangle, 0.0f, 1.0f, 0.0f); //绕Y轴旋转
glRotatef(zangle, 0.0f, 0.0f, 1.0f); //绕Z轴旋转
#if (0) //显示反面
glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//前面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的左上
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//后面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的左上
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//顶面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的左上
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//底面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的左上
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//右面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的左上
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//左面:逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的右下
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的左上
}glEnd();
#else //显示正面
glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//前面:纹理顺时针,立方体逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的右下
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//后面:纹理顺时针,立方体逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的右下
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//顶面:纹理顺时针,立方体逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的右下
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//底面:纹理顺时针,立方体逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的右下
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//右面:纹理顺时针,立方体逆时针
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); //纹理和四边形的右下
}glEnd(); glBindTexture(GL_TEXTURE_2D, texturesArr[]); //选择纹理
glBegin(GL_QUADS); {
//左面:纹理顺时针,立方体逆时针 glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f); //纹理和四边形的左下
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 1.0f); //纹理和四边形的左上
glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, 1.0f, -1.0f); //纹理和四边形的右上
glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f); //纹理和四边形的右下
}glEnd();
#endif
}glPopMatrix();
glFlush();
} //初始化
void init(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0); //清理颜色,为黑色,(也可认为是背景颜色) glCullFace(GL_FRONT); //背面裁剪(背面不可见)
glEnable(GL_CULL_FACE); //启用裁剪
glEnable(GL_TEXTURE_2D);
loadGLTextures(); //载入纹理贴图
} void display(void)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); //清楚颜色数据和深度数据(清屏)
glLoadIdentity(); //Reset The View drawCube(); glutSwapBuffers(); //交换缓冲区。显示图形 //xangle += 0.3f;
//yangle += 0.3f;
//zangle += 0.3f;
Sleep();
} //当窗口大小改变时,会调用这个函数
void reshape(GLsizei w,GLsizei h)
{
//这里小说明一下:矩阵模式是不同的,他们各自有一个矩阵。投影相关
//只能用投影矩阵。(只是目前情况下哦,等我学多了可能就知道为什么了。) glViewport(,,w,h); //设置视口
glMatrixMode(GL_PROJECTION); //设置矩阵模式为投影变换矩阵,
glLoadIdentity(); //变为单位矩阵
gluPerspective(, (GLfloat)w / h, 0.1f, 100.0f); //设置投影矩阵
glMatrixMode(GL_MODELVIEW); //设置矩阵模式为视图矩阵(模型)
glLoadIdentity(); //变为单位矩阵
} //处理鼠标点击
void Mouse(int button, int state, int x, int y)
{
if(state == GLUT_DOWN) //第一次鼠标按下时,记录鼠标在窗口中的初始坐标
{
//记住鼠标点击后光标坐标
cx = x;
cy = y;
//printf("Mouse: x=%d, y=%d, oldx_Translatef=%f, oldy_Translatef=%f\n", x, y, oldx_Translatef, oldy_Translatef);
}
} //处理鼠标拖动
void onMouseMove(int x, int y)
{
float offset = 0.18;
//计算拖动后的偏移量,然后进行xy叠加减
yangle -= ((x - cx) * offset); if (xangle < && y > cy) {//往下拉
xangle += ((y - cy) * offset);
} else if (xangle > - && y < cy) {//往上拉
xangle += ((y - cy) * offset);
}
//printf("Move: x=%d(%d)[%d], y=%d(%d)[%d], xangle=%f, yangle=%f\n",
// x, cx, x-cx,
// y, cy, y-cy,
// xangle, yangle);
glutPostRedisplay(); //保存好当前拖放后光标坐标点
cx = x;
cy = y;
} //键盘输入事件函数
void keyboard(unsigned char key,int x,int y)
{
switch(key)
{
case 'x': //当按下键盘上d时,以沿X轴旋转为主
if (xangle < 85.0f)
{
xangle += 1.0f; //设置旋转增量
}
break;
case 'X':
if (xangle > -85.0f)
{
xangle -= 1.0f; //设置旋转增量
}
break;
case 'y':
yangle += 1.0f;
break;
case 'Y':
yangle -= 1.0f;
break;
//case 'z':
// zangle += 1.0f;
// break;
//case 'Z':
// zangle -= 1.0f;
// break;
default:
return;
}
glutPostRedisplay(); //重绘函数
} //特殊按键
void specialKey(int key, int x, int y)
{
float offset = 1.5;
printf("key=%d\n", key);
switch (key)
{
case GLUT_KEY_UP: //脑袋向上往前看
if (xangle < 90.0f)
{
xangle += offset; //设置旋转增量
}
break;
case GLUT_KEY_DOWN: //脑袋向下往前看
if (xangle > -90.0f)
{
xangle -= offset; //设置旋转增量
}
break;
case GLUT_KEY_LEFT: //脑袋想左往前看
yangle -= offset;
break;
case GLUT_KEY_RIGHT: //脑袋向右往前看
yangle += offset;
break;
default:
break;
}
glutPostRedisplay();
} int main(int argc, char *argv[])
{
printf("可通过↑↓←→按键或者鼠标控制全景图绕旋转\n"); glutInit(&argc, argv); //固定格式
glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);
glutInitWindowSize(/, /); //显示框的大小
glutInitWindowPosition(,); //确定显示框左上角的位置
glutCreateWindow("OpenGL纹理贴图"); init(); //初始化资源,这里一定要在创建窗口以后,不然会无效。
glutDisplayFunc(display);
//glutIdleFunc(display);
glutReshapeFunc(reshape); //绘制图形时的回调
//glutKeyboardFunc(keyboard);
glutMouseFunc(Mouse);
glutMotionFunc(onMouseMove);
glutKeyboardFunc(keyboard);
glutSpecialFunc(specialKey); //特殊按键
glutMainLoop();
return ;
}

附上全景图片:

OpenGL的几何变换3之内观察全景图

附上代码运行结果:

OpenGL的几何变换3之内观察全景图OpenGL的几何变换3之内观察全景图

最后附上可执行的EXE链接: https://pan.baidu.com/s/1dGf0GAt 密码: xzd5

最后测试结果还发现个问题:

这是立方体,所以在屏幕窗口的宽高不想等时,拖动图片时立方体面与面连接点看到的效果会很别扭,初步的猜测是承载贴图的图形问题,比如可以改成球体,或者等宽高固定化。