📄 tutorial_11.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><!-- 这篇文章由Dancingwind翻译，作者的联系方式zhouwei02@mails.tsinghua.edu.cn --><title>NeHe OpenGL教程第十一课，DancingWind翻译</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
A:link {COLOR: #ccaaff; TEXT-DECORATION: none}
A:visited {COLOR: #ccaaff; TEXT-DECORATION: none}
A:active {COLOR: #ccaaff; TEXT-DECORATION: none}
A:hover {COLOR: #ffccaa; TEXT-DECORATION: none}
</style></head><body bgcolor="#000000" text="#ffffff"><br><br>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td height="130" width="326"><img src="Tutorial_11_files/logo.png" height="130" width="326"></td>
<td align="center" valign="middle" width="75%"><font color="#ffccaa" size="+3"><b><i>第11课</i></b></font></td>
</tr></tbody></table>
<!-- 上边框-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<!-- 中部-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<!-- 中部左边框-->
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<!-- 中部文字部分-->
<td valign="top" width="100%">
<table border="0" width="100%">
<tbody><tr>
<td width="33%"><img src="Tutorial_11_files/lesson11.jpg" height="180" width="240"></td>
<td width="67%"><p><font class="head">飘动的旗帜:</font></p>
<p><font size="3">这一课从第六课的代码开始，创建一个飘动的旗帜。我相信在这课结束的时候，你可以掌握纹理映射和混合操作。</font></p></td>
</tr>
</tbody></table>
</td>
<!-- 中部右边框-->
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<!-- 下边框-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_11_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_11_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_11_files/tr.png" height="28" width="28"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td background="Tutorial_11_files/l.png"><img src="Tutorial_11_files/l.png"></td>
<td valign="top" width="100%">大
家好！对那些想知道我在这里作了些什么的朋友，您可以先按文章的末尾所列出的链接，下载我那毫无意义的演示（Demo）看看先！我是bosco，我将尽我
所能教您来实现一个以正弦波方式运动的图象。这一课基于NeHe的教程第六课，当然您至少也应该学会了一至六课的知识。您需要下载源码压缩包，并将压缩包
内带的data目录连其下的位图一起释放至您的代码目录下。或者使用您自己的位图，当然它的尺寸必须适合OpenGL纹理的要求。<br>
在我们开始之前，先打开Visual C++（译者：我可是用的C++ Builder…）并在其他的#inlude之后，添加如下的代码。这将引入我们在程序中将要用到的复杂（译者：复杂吗？）数学函数sine和cosine。<br></td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre>#include <math.h> <font color="#ffffaa">// 引入数学函数库中的Sin</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">我
们将使用points数组来存放网格各顶点独立的x，y，z坐标。这里网格由45×45点形成，换句话说也就是由44格×44格的小方格子依次组成了。
wiggle_count用来指定纹理波浪的运动速度。每3帧一次看起来很不错，变量hold将存放一个用来对旗形波浪进行光滑的浮点数。这几行添加在程
序头部，位于最后一行#include之后、GLuint texture[1]之前的位置。<br></td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre>float points[ 45 ][ 45 ][3]; <font color="#ffffaa">// Points网格顶点数组</font>
int wiggle_count = 0; <font color="#ffffaa">// 指定旗形波浪的运动速度</font>
GLfloat hold; <font color="#ffffaa">// 临时变量</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">然后下移至LoadGLTextures()子过程。本课中使用的纹理文件名是Tim.bmp。找到LoadBMP("Data/NeHe.bmp")这一句，并用LoadBMP
("Data/Tim.bmp")替换它。<br></td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> if (TextureImage[0]=LoadBMP("Data/Tim.bmp")) <font color="#ffffaa">// 载入位图</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">接着在InitGL()函数的尾部return TRUE之前，添加如下的代码。</td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> glPolygonMode( GL_BACK, GL_FILL ); <font color="#ffffaa">// 后表面完全填充</font>
glPolygonMode( GL_FRONT, GL_LINE ); <font color="#ffffaa">// 前表面使用线条绘制</font></pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">上面的代码指定使用完全填充模式来填充多边形区域的背面（译者：或者叫做后表面吧）。相反，多边形的正面（译者：前表面）则使用轮廓线填充了。这些方式完全取决于您的个人喜好。并且与多边形的方位或者顶点的方向有关。详情请参考红宝书（Red
Book）。这里我顺便推销一本推动我学习OpenGL的好书 — Addison-Wesley出版的《Programmer's Guide to
OpenGL》。个人以为这是学习OpenGL的无价之宝。<br>
接着上面的代码并在return TRUE这一句之前，添加如下的几行。<br></td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> <font color="#ffffaa">// 沿X平面循环</font>
for(int x=0; x<45; x++)
{
<font color="#ffffaa">// 沿Y平面循环</font>
for(int y=0; y<45; y++)
{
<font color="#ffffaa">// 向表面添加波浪效果</font>
points[x][y][0]=float((x/5.0f)-4.5f);
points[x][y][1]=float((y/5.0f)-4.5f);
points[x][y][2]=float(sin((((x/5.0f)*40.0f)/360.0f)*3.141592654*2.0f));
}
}
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%"><p>这里感谢Graham Gibbons关于使用整数循环变量消除波浪间的脉冲锯齿的建议。<br>
</p>
<p>上面的两个循环初始化网格上的点。使用整数循环可以消除由于浮点运算取整造成的脉冲锯齿的出现。我们将x和y变量都除以5，再减去4.5。这样使得我们的波浪可以“居中”（译者：这样计算所得结果将落在区间[-4.5，4.5]之间）。<br>
</p>
<p>点[x][y][2]最后的值就是一个sine函数计算的结果。Sin()函数需要一个弧度参变量。将float_x乘以40.0f，得到角度值。然后除以360.0f再乘以PI，乘以2，就转换为弧度了。<br>
</p>
<p> 接着我将彻底重写DrawGLScene函数。<br>
</p></td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
</font><pre><font color="#aaffaa" size="3">int DrawGLScene(GLvoid) <font color="#ffffaa">// 绘制我们的GL场景</font>
{
int x, y; <font color="#ffffaa">// 循环变量</font>
float float_x, float_y, float_xb, float_yb; <font color="#ffffaa">// 用来将旗形的波浪分割成很小的四边形</font>
</font></pre>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td background="Tutorial_11_files/l.gif"><img src="Tutorial_11_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">我们使用不同的变量来控制循环。下面的代码中大多数变量除了用来控制循环和存储临时变量之外并没有什么别的用处。</td>
<td background="Tutorial_11_files/r.gif"><img src="Tutorial_11_files/r.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_11_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_11_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_11_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); <font color="#ffffaa">// 清除屏幕和深度缓冲</font>
glLoadIdentity(); <font color="#ffffaa">// 重置当前的模型观察矩阵</font>
glTranslatef(0.0f,0.0f,-12.0f); <font color="#ffffaa">// 移入屏幕12个单位</font>
glRotatef(xrot,1.0f,0.0f,0.0f); <font color="#ffffaa">// 绕 X 轴旋转</font>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -