ArchieOpenGL基础教程第八课：创建3D图形和纹理映射（MFC/SDI)
参考Nehe教程05、06课点击打开链接
绘制3D对象
在上节课的内容上作些扩展，我们现在开始生成真正的3D对象，而不是象前两节课中那样3D世界中的2D对象。我们给三角形增加一个左侧面，一个右侧面，一个后侧面来生成一个金字塔(四棱锥)。给正方形增加左、右、上、下及背面生成一个立方体。
我们混合金字塔上的颜色，创建一个平滑着色的对象。给立方体的每一面则来个不同的颜色。
BOOL COpenglbaseView::RenderScene()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 清除屏幕及深度缓存
glLoadIdentity(); // 重置当前的模型观察矩阵
glTranslatef(-1.5f,0.0f,-6.0f); // 左移 1.5 单位，并移入屏幕 6.0
glRotatef(m_fRotTriangle,0.0f,1.0f,0.0f); // 绕Y轴旋转金字塔
glBegin(GL_TRIANGLES); //开始绘制金字塔的各个面
有些人可能早已在上节课中的代码上尝试自行创建3D对象了。但经常有人来信问我:"我的对象怎么不会绕着其自身的轴旋转？看起来总是在满屏乱转。"要让您的对象绕自身的轴旋转，您必须让对象的中心坐标总是(0.0f,0,0f,0,0f)。下面的代码创建一个绕其中心轴旋转的金字塔。金字塔的上顶点高出原点一个单位，底面中心低于原点一个单位。上顶点在底面的投影位于底面的中心。
注意所有的面－三角形都是逆时针次序绘制的。这点十分重要，在以后的课程中我会作出解释。现在，您只需明白要么都逆时针，要么都顺时针，但永远不要将两种次序混在一起，除非您有足够的理由必须这么做。
我们开始画金字塔的前侧面。因为所有的面都共享上顶点，我们将这点在所有的三角形中都设置为红色。底边上的两个顶点的颜色则是互斥的。前侧面的左下顶点是绿色的，右下顶点是蓝色的。这样相邻右侧面的左下顶点是蓝色的，右下顶点是绿色的。这样四边形的底面上的点的颜色都是间隔排列的。
glColor3f(1.0f,0.0f,0.0f); // 红色 glVertex3f( 0.0f, 1.0f, 0.0f); // 三角形的上顶点 (前侧面) glColor3f(0.0f,1.0f,0.0f); // 绿色 glVertex3f(-1.0f,-1.0f, 1.0f); // 三角形的左下顶点 (前侧面) glColor3f(0.0f,0.0f,1.0f); // 蓝色 glVertex3f( 1.0f,-1.0f, 1.0f); // 三角形的右下顶点 (前侧面)
现在绘制右侧面。注意其底边上的两个顶点的X坐标位于中心右侧的一个单位处。顶点则位于Y轴上的一单位处，且Z坐标正好处于底边的两顶点的Z坐标中心。右侧面从上顶点开始向外侧倾斜至底边上。
这次的左下顶点用蓝色绘制，以保持与前侧面的右下顶点的一致。蓝色将从这个角向金字塔的前侧面和右侧面扩展并与其他颜色混合。
还应注意到后面的三个侧面和前侧面处于同一个glBegin(GL_TRIANGLES) 和 glEnd()语句中间。因为我们是通过三角形来构造这个金字塔的。OpenGL知道每三个点构成一个三角形。当它画完一个三角形之后，如果还有余下的点出现，它就以为新的三角形要开始绘制了。OpenGL在这里并不会将四点画成一个四边形，而是假定新的三角形开始了。所以千万不要无意中增加任何多余的点。
最后画左侧面。又要切换颜色。左下顶点是蓝色，与后侧面的右下顶点相同。右下顶点是蓝色，与前侧面的左下顶点相同。
到这里金字塔就画完了。因为金字塔只绕着Y轴旋转，我们永远都看不见底面，因而没有必要添加底面。如果您觉得有经验了，尝试增加底面(正方形)，并将金字塔绕X轴旋转来看看您是否作对了。确保底面四个顶点的颜色与侧面的颜色相匹配。
glBegin(GL_TRIANGLES); // 绘制三角形 glColor3f(1.0f,0.0f,0.0f); // 红色 glVertex3f( 0.0f, 1.0f, 0.0f); // 三角形的上顶点 (前侧面) glColor3f(0.0f,1.0f,0.0f); // 绿色 glVertex3f(-1.0f,-1.0f, 1.0f); // 三角形的左下顶点 (前侧面) glColor3f(0.0f,0.0f,1.0f); // 蓝色 glVertex3f( 1.0f,-1.0f, 1.0f); // 三角形的右下顶点 (前侧面) glColor3f(1.0f,0.0f,0.0f); // 红色 glVertex3f( 0.0f, 1.0f, 0.0f); // 三角形的上顶点 (右侧面) glColor3f(0.0f,0.0f,1.0f); // 蓝色 glVertex3f( 1.0f,-1.0f, 1.0f); // 三角形的左下顶点 (右侧面) glColor3f(0.0f,1.0f,0.0f); // 绿色 glVertex3f( 1.0f,-1.0f, -1.0f); // 三角形的右下顶点 (右侧面) glColor3f(1.0f,0.0f,0.0f); // 红色 glVertex3f( 0.0f, 1.0f, 0.0f); // 三角形的上顶点 (后侧面) glColor3f(0.0f,1.0f,0.0f); // 绿色 glVertex3f( 1.0f,-1.0f, -1.0f); // 三角形的左下顶点 (后侧面) glColor3f(0.0f,0.0f,1.0f); // 蓝色 glVertex3f(-1.0f,-1.0f, -1.0f); // 三角形的右下顶点 (后侧面) glColor3f(1.0f,0.0f,0.0f); // 红色 glVertex3f( 0.0f, 1.0f, 0.0f); // 三角形的上顶点 (左侧面) glColor3f(0.0f,0.0f,1.0f); // 蓝色 glVertex3f(-1.0f,-1.0f,-1.0f); // 三角形的左下顶点 (左侧面) glColor3f(0.0f,1.0f,0.0f); // 绿色 glVertex3f(-1.0f,-1.0f, 1.0f); // 三角形的右下顶点 (左侧面) glEnd(); // 金字塔绘制结束
接下来开始画立方体。他由六个四边形组成。所有的四边形都以逆时针次序绘制。就是说先画右上角，然后左上角、左下角、最后右下角。您也许认为画立方体的背面的时候这个次序看起来好像顺时针，但别忘了我们从立方体的背后看背面的时候，与您现在所想的正好相反。(译者注：您是从立方体的外面来观察立方体的)。
注意到这次我们将立方体移地更远离屏幕了。因为立方体的大小要比金字塔大，同样移入6个单位时，立方体看起来要大的多。这是透视的缘故。越远的对象看起来越小 :) 。
如果您真的不在乎绘制多边形的次序(顺时针或者逆时针)的话，您可以直接拷贝顶面的代码，将Y坐标从1改成 -1，也能够工作。但一旦您进入象纹理映射这样的领域时，忽略绘制次序会导致十分怪异的结果。
glLoadIdentity(); glTranslatef(1.5f,0.0f,-7.0f); // 先右移再移入屏幕 glRotatef(m_fRotQuadrangle,1.0f,1.0f,1.0f); // 在XYZ轴上旋转立方体 glBegin(GL_QUADS); // 开始绘制立方体 glColor3f(0.0f,1.0f,0.0f); // 颜色改为蓝色 glVertex3f( 1.0f, 1.0f,-1.0f); // 四边形的右上顶点 (顶面) glVertex3f(-1.0f, 1.0f,-1.0f); // 四边形的左上顶点 (顶面) glVertex3f(-1.0f, 1.0f, 1.0f); // 四边形的左下顶点 (顶面) glVertex3f( 1.0f, 1.0f, 1.0f); // 四边形的右下顶点 (顶面) glColor3f(1.0f,0.5f,0.0f); // 颜色改成橙色 glVertex3f( 1.0f,-1.0f, 1.0f); // 四边形的右上顶点(底面) glVertex3f(-1.0f,-1.0f, 1.0f); // 四边形的左上顶点(底面) glVertex3f(-1.0f,-1.0f,-1.0f); // 四边形的左下顶点(底面) glVertex3f( 1.0f,-1.0f,-1.0f); // 四边形的右下顶点(底面) glColor3f(1.0f,0.0f,0.0f); // 颜色改成红色 glVertex3f( 1.0f, 1.0f, 1.0f); // 四边形的右上顶点(前面) glVertex3f(-1.0f, 1.0f, 1.0f); // 四边形的左上顶点(前面) glVertex3f(-1.0f,-1.0f, 1.0f); // 四边形的左下顶点(前面) glVertex3f( 1.0f,-1.0f, 1.0f); // 四边形的右下顶点(前面) glColor3f(1.0f,1.0f,0.0f); // 颜色改成黄色 glVertex3f( 1.0f,-1.0f,-1.0f); // 四边形的右上顶点(后面) glVertex3f(-1.0f,-1.0f,-1.0f); // 四边形的左上顶点(后面) glVertex3f(-1.0f, 1.0f,-1.0f); // 四边形的左下顶点(后面) glVertex3f( 1.0f, 1.0f,-1.0f); // 四边形的右下顶点(后面) glColor3f(0.0f,0.0f,1.0f); // 颜色改成蓝色 glVertex3f(-1.0f, 1.0f, 1.0f); // 四边形的右上顶点(左面) glVertex3f(-1.0f, 1.0f,-1.0f); // 四边形的左上顶点(左面) glVertex3f(-1.0f,-1.0f,-1.0f); // 四边形的左下顶点(左面) glVertex3f(-1.0f,-1.0f, 1.0f); // 四边形的右下顶点(左面) glColor3f(1.0f,0.0f,1.0f); // 颜色改成紫罗兰色 glVertex3f( 1.0f, 1.0f,-1.0f); // 四边形的右上顶点(右面) glVertex3f( 1.0f, 1.0f, 1.0f); // 四边形的左上顶点(右面) glVertex3f( 1.0f,-1.0f, 1.0f); // 四边形的左下顶点(右面) glVertex3f( 1.0f,-1.0f,-1.0f); // 四边形的右下顶点(右面) glEnd(); // 立方体绘制结束 m_fRotTriangle+=0.2f; // 增加三角形的旋转变量 m_fRotQuadrangle-=0.15f; // 减少四边形的旋转变量 return TRUE; // 继续运行
2、纹理映射
纹理映射:
在这一课里，我将教会你如何把纹理映射到立方体的六个面。
学习 texture map 纹理映射(贴图)有很多好处。比方说您想让一颗导弹飞过屏幕。根据前几课的知识，我们最可行的办法可能是很多个多边形来构建导弹的轮廓并加上有趣的颜色。使用纹理映射，您可以使用真实的导弹图像并让它飞过屏幕。您觉得哪个更好看？照片还是一大堆三角形和四边形？使用纹理映射的好处还不止是更好看，而且您的程序运行会更快。导弹贴图可能只是一个飞过窗口的四边形。一个由多边形构建而来的导弹却很可能包括成百上千的多边形。很显然，贴图极大的节省了CPU时间。第一课中加入了int COpenglbaseView::LoadGLTextures()和LoadBMP(char *Filename)函数这里派上了用场，在OnCreate里调用，直接载入纹理图像。
然后我们增加了三个新的浮点变量
xrot , yrot 和 zrot 。这些变量用来使立方体绕X、Y、Z轴旋转。
最后一行 GLuint texture[1] 为一个纹理分配存储空间。如果您需要不止一个的纹理，应该将参数1改成您所需要的参数。
GLfloat m_fXRot;
GLfloat m_fYRot;
GLfloat m_fZRot;
GLuint texture[1]; // 保存1个纹理标志初始化
COpenglbaseView::COpenglbaseView()
{
// TODO: add construction code here
m_hRC=NULL;
m_pDC=NULL;
m_fRotQuadrangle=20.0f;
m_fRotTriangle=7.0f;
m_fXRot=20.0f;
m_fYRot=10.0f;
m_fZRot=1.0f;
}
//////////////////////////////////////////////////////////////////////////
//加载纹理
//////////////////////////////////////////////////////////////////////////
int COpenglbaseView::LoadGLTextures()
{
GLuint loop;
int Status=FALSE;
AUX_RGBImageRec *TextureImage[1]; // 创建保存1个纹理的数据结构
memset(TextureImage,0,sizeof(void *)*1); // 初始化
if (TextureImage[0]=LoadBMP("Data/logo.bmp")) // 加载纹理0
{
Status=TRUE;
glGenTextures(1, &texture[0]); // 创建5个纹理
glBindTexture(GL_TEXTURE_2D, texture[0]);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY,
0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
}
if (TextureImage[0])
{
if (TextureImage[0]->data)
{
free(TextureImage[0]->data);
}
free(TextureImage[0]);
}
return Status;
}在myInit中调用LoadGLTextures
void COpenglbaseView::myInit()
{
if (!LoadGLTextures()) // 调用纹理载入子例程
{
return ; // 如果未能载入，返回FALSE
}
glEnable(GL_TEXTURE_2D);
//置黑背景
glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 黑色背景
glEnable(GL_DEPTH_TEST); // 启用深度测试
glClearDepth(1.0f); // 设置深度缓存
glDepthFunc(GL_LEQUAL); // 所作深度测试的类型
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); // 真正精细的透视修正
glShadeModel(GL_SMOOTH);//选择扁平或者光滑的阴影，此处选择了光滑的阴影
//glClear(GL_COLOR_BUFFER_BIT);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
//用当前设置的清除色清除指定的缓冲区 （颜色缓冲区与深度缓冲区）
glEnable(GL_NORMALIZE);//转换后法向矢量与单位长度成比例
glMatrixMode(GL_MODELVIEW);
glLoadIdentity ();//设置当前矩阵的单位矩阵
}渲染代码将进行重写。
现在我们绘制贴图『译者注：其实贴图就是纹理映射。将术语换来换去不好，我想少打俩字。^_^』过的立方体。这段代码被狂注释了一把，应该很好懂。开始两行代码 glClear() 和 glLoadIdentity() 是第一课中就有的代码。 glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) 清除屏幕并设为我们在 InitGL() 中选定的颜色，本例中是黑色。深度缓存也被清除。模型观察矩阵也使用glLoadIdentity()重置。
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 清除屏幕及深度缓存 glLoadIdentity(); // 重置当前的模型观察矩阵 glTranslatef(0.0f,0.0f,-5.0f); // 移入屏幕 5 个单位 //下面三行使立方体绕X、Y、Z轴旋转。旋转多少依赖于变量 xrot ， yrot 和 zrot 的值。 glRotatef(m_fXRot,1.0f,0.0f,0.0f); // 绕X轴旋转 glRotatef(m_fYRot,0.0f,1.0f,0.0f); // 绕Y轴旋转 glRotatef(m_fZRot,0.0f,0.0f,1.0f); // 绕Z轴旋转下一行代码选择我们使用的纹理。如果您在您的场景中使用多个纹理，您应该使用
glBindTexture(GL_TEXTURE_2D, texture[ 所使用纹理对应的数字 ]) 选择要绑定的纹理。当您想改变纹理时，应该绑定新的纹理。有一点值得指出的是，您不能在 glBegin() 和 glEnd() 之间绑定纹理，必须在 glBegin() 之前或 glEnd() 之后绑定。注意我们在后面是如何使用 glBindTexture 来指定和绑定纹理的。
glBindTexture(GL_TEXTURE_2D, texture[0]); // 选择纹理
为了将纹理正确的映射到四边形上，您必须将纹理的右上角映射到四边形的右上角，纹理的左上角映射到四边形的左上角，纹理的右下角映射到四边形的右下角，纹理的左下角映射到四边形的左下角。如果映射错误的话，图像显示时可能上下颠倒，侧向一边或者什么都不是。
glTexCoord2f 的第一个参数是X坐标。 0.0f 是纹理的左侧。 0.5f 是纹理的中点， 1.0f 是纹理的右侧。 glTexCoord2f 的第二个参数是Y坐标。 0.0f 是纹理的底部。 0.5f 是纹理的中点， 1.0f 是纹理的顶部。
所以纹理的左上坐标是 X：0.0f，Y：1.0f ，四边形的左上顶点是 X： -1.0f，Y：1.0f 。其余三点依此类推。
试着玩玩 glTexCoord2f 的X，Y坐标参数。把 1.0f 改为 0.5f 将只显示纹理的左半部分，把 0.0f 改为 0.5f 将只显示纹理的右半部分。
BOOL COpenglbaseView::RenderScene()
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // 清除屏幕及深度缓存
glLoadIdentity(); // 重置当前的模型观察矩阵
glTranslatef(0.0f,0.0f,-5.0f); // 移入屏幕 5 个单位
//下面三行使立方体绕X、Y、Z轴旋转。旋转多少依赖于变量 xrot ， yrot 和 zrot 的值。
glRotatef(m_fXRot,1.0f,0.0f,0.0f); // 绕X轴旋转
glRotatef(m_fYRot,0.0f,1.0f,0.0f); // 绕Y轴旋转
glRotatef(m_fZRot,0.0f,0.0f,1.0f); // 绕Z轴旋转
glBindTexture(GL_TEXTURE_2D, texture[0]); // 选择纹理
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); // 纹理和四边形的左上
// 后面
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); // 纹理和四边形的左上
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(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(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f); // 纹理和四边形的右上
glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f); // 纹理和四边形的左上
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, 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); // 纹理和四边形的左上
glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f); // 纹理和四边形的左下
// 左面
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();
// 现在增加 xrot , yrot 和 zrot 的值。尝试变化每次各变量的改变值来调节立方体的旋转速度，或改变+/-号来调节立方体的旋转方向。
m_fXRot+=0.3f; // X 轴旋转
m_fYRot+=0.2f; // Y 轴旋转
m_fZRot+=0.4f; // Z 轴旋转
// m_fRotTriangle+=0.2f; // 增加三角形的旋转变量
// m_fRotQuadrangle-=0.15f; // 减少四边形的旋转变量
return TRUE; // 继续运行
}
下载链接