📄 tutorial_38.htm
字号:
}
void Deinitialize (void)
{
}
void Update (DWORD milliseconds) <font color="#ffffaa">// 更新,执行动画</font>
{
if (g_keys->keyDown [VK_ESCAPE] == TRUE) <font color="#ffffaa">// 按ESC退出</font>
{
TerminateApplication (g_window);
}
if (g_keys->keyDown [VK_F1] == TRUE) <font color="#ffffaa">// 按F1切换显示模式</font>
{
ToggleFullscreen (g_window);
}
}
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">接下来看看绘制代码。在这部分我将讲解如何用尽可能简单的方式将一个图像映到两个三角形上。有些人认为有理由相信,一个图像到三角形<br>
上的单一映射是不可能的。 <br>
实际上,你可以轻而易举地将图像映到任何形状的区域内。使得图像与边界匹配或者完全不考虑形式。根本没关系的。(译者:我想作者的意<br>
思是,从长方形到三角形的解析影射是不存在的,但不考虑那么多的话,任意形状之间的连续影射总是可以存在的。他说的使纹理与边界匹配<br>
,大概是指某一种参数化的方法,简单地说使得扭曲最小。) <br>
首先清屏,循环润色50个蝴蝶对象。 <br></td><td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre>void Draw (void) <font color="#ffffaa">// 绘制场景</font>
{
glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
for (int loop=0; loop<50; loop++)
{
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%"> 调用glLoadIdentify()重置投影矩阵,然后选择对象的纹理。用glTranslatef()为蝴蝶定位,然后沿x轴旋转45度。使之向观众微略倾斜,这<br>
样比较有立体感。最后沿z轴旋转,蝴蝶就旋转下落了。 <br></td><td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> glLoadIdentity (); <font color="#ffffaa">// 重置矩阵</font>
glBindTexture(GL_TEXTURE_2D, texture[obj[loop].tex]); <font color="#ffffaa">// 绑定纹理</font>
glTranslatef(obj[loop].x,obj[loop].y,obj[loop].z); <font color="#ffffaa">// 绘制物体</font>
glRotatef(45.0f,1.0f,0.0f,0.0f);
glRotatef((obj[loop].spinz),0.0f,0.0f,1.0f); </pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">其实到三角形上的映射和到方形上并没有很大区别。只是你只有三个定点,要小心一点。 <br>
下面的code中,我们将会值第一个三角形。从一个设想的方形的右上角开始,到左上角,再到左下角。润色的结果像下面这样:<font face="Tahoma,Verdana,sans-serif" size="-1"><br>
<br>
<br>
<center>
<img src="Tutorial_38_files/triangle1.jpg">
</center>
<br>
<br>
</font>注意半个蝴蝶出现了。另外半个出现在第二个三角形里。同样地将三个纹理坐标与顶点坐标非别对应,这给出充分的信息定义一个三角形上的映射。
<br></td>
<td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> glBegin(GL_TRIANGLES);
glTexCoord2f(1.0f,1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
glTexCoord2f(0.0f,1.0f); glVertex3f(-1.0f, 1.0f, obj[loop].flap);
glTexCoord2f(0.0f,0.0f); glVertex3f(-1.0f,-1.0f, 0.0f); </pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">下面的code润色另一半。同上,只是我们的三角变成了从右上到左下,再到右下。
<center>
<img src="Tutorial_38_files/triangle2.jpg">
</center>
第一个三角形的第二点和第二个三角形的第三点(也就是翅膀的尖端)在z方向往复运动(即z=-1.0f和1.0f之间),两个三角形沿着蝴蝶的身<br>
体折叠起来,产生拍打的效果,简易可行。 <br></td>
<td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre>
glTexCoord2f(1.0f,1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
glTexCoord2f(0.0f,0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);
glTexCoord2f(1.0f,0.0f); glVertex3f( 1.0f,-1.0f, obj[loop].flap);
glEnd();
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">下面一段通过从obj[loop].y中递减obj[loop].yi使蝴蝶自上而下运动。spinz值递增spinzi(可正可负)flap递增fi.fi的正负取决于翅膀向<br>
上还是向下运动。 <br></td><td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> <font color="#ffffaa">//移动,选择图像</font>
obj[loop].y-=obj[loop].yi;
obj[loop].spinz+=obj[loop].spinzi;
obj[loop].flap+=obj[loop].fi;
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">当蝴蝶向下运行时,需要检查是否越出屏幕,如果是,就调用SetObject(loop)来给蝴蝶赋新的纹理,新下落速度等。
</td>
<td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> if (obj[loop].y<-18.0f) <font color="#ffffaa">//判断是否超出了屏幕,如果是重置它</font>
{
SetObject(loop);
}
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%">翅膀拍打的时候,还要检查flap是否小于-1.0f或大于1.0f,如果是,令fi=-fi,以改变运动方向。Sleep(15)是用来减缓运行速度,每帧15毫<br>
秒。在我朋友的机器上,这让蝴蝶疯狂的飞舞。不过我懒得改了:) <br></td><td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> if ((obj[loop].flap>1.0f) || (obj[loop].flap<-1.0f))
{
obj[loop].fi=-obj[loop].fi;
}
}
Sleep(15);
glFlush ();
}
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_38_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_38_files/l.png"><img src="Tutorial_38_files/l.png"></td>
<td valign="top" width="100%"><p>希望你在这一课学的开心。也希望通过这一课,从资源文件里读取纹理,和三角形映射的过程变得比较容易理解。我花五分钟又冲读了一遍,<br>
感觉还好。如果你还有什么问题,尽管问。我希望我的讲义尽可能好,因此期待您的任何回应。</p>
<table border="1" width="100%">
<tbody><tr>
<td width="27%"><img src="Tutorial_38_files/logo%25203.jpg" align="middle" height="200" width="209"></td>
<td width="73%">版权与使用声明:<br>
我是个对学习和生活充满激情的普通男孩,在网络上我以DancingWind为昵称,我的联系方式是zhouwei02@mails.tsinghua.edu.cn,如果你有任何问题,都可以联系我。
<p>引子<br>
网络是一个共享的资源,但我在自己的学习生涯中浪费大量的时间去搜索可用的资料,在现实生活中花费了大量的金钱和时间在书店中寻找资料,于是我给自己起了
个昵称DancingWind,其意义是想风一样从各个知识的站点中吸取成长的养料。在飘荡了多年之后,我决定把自己收集的资料整理为一个统一的资源库。</p>
<p>版权声明<br>
所有DancingWind发表的内容,大多都来自共享的资源,所以我没有资格把它们据为己有,或声称自己为这些资源作出了一点贡献。故任何人都可以复
制,修改,重新发表,甚至以自己的名义发表,我都不会追究,但你在做以上事情的时候必须保证内容的完整性,给后来的人一个完整的教程。最后,任何人不能以
这些资料的任何部分,谋取任何形式的报酬。</p>
<p>发展计划<br>
在国外,很多资料都是很多人花费几年的时间慢慢积累起来的。如果任何人有兴趣与别人共享你的知识,我很欢迎你与我联系,但你必须同意我上面的声明。</p>
<p>感谢<br>
感谢我的母亲一直以来对我的支持和在生活上的照顾。<br>
感谢我深爱的女友田芹,一直以来默默的在精神上和生活中对我的支持,她甚至把买衣服的钱都用来给我买书了,她真的是我见过的最好的女孩,希望我能带给她幸福。</p>
<p>资源下载: <br>
文档 <a href="http://www.owlei.com/DancingWind/Res/mht/NeHe%20OpenGL%20Chinese%20Course%2038.mht">网页格式</a>
<a href="http://www.owlei.com/DancingWind/Res/pdf/OpenGL_Nehe_Course_Tutorial_38.pdf">PDF格式</a><br>
源码 <a href="http://www.owlei.com/DancingWind/Res/Src/38_Resource.rar">RAR格式</a></p></td>
</tr>
</tbody></table><table border="0" width="100%">
<tbody><tr><td align="left" width="50%"><b><font size="-1"><a href="http://www.owlei.com/DancingWind/Course/Tutorial_37.htm"><
第37课 </a></font></b></td>
<td align="right" width="50%"><b><font size="-1"><a href="http://www.owlei.com/DancingWind/Course/Tutorial_39.htm">第39课
></a></font></b></td>
</tr></tbody></table>
</td>
<td background="Tutorial_38_files/r.png"><img src="Tutorial_38_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_38_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_38_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_38_files/br.png" height="28" width="28"></td></tr></tbody></table>
</body></html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -