📄 tutorial_14.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>
<meta content="Microsoft FrontPage 3.0" name="GENERATOR"></head><body bgcolor="#000000" text="#ffffff">
<center><br>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td height="130" width="326"><img src="Tutorial_14_files/logo.png" height="130" width="326"></td>
<td align="center" valign="center" width="75%"><div align="center"><font color="#ffccaa" size="+3"><b><i>第14课</i></b></font></div></td>
</tr>
</tbody>
</table>
<!-- 上边框-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_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_14_files/lesson14.jpg" height="180" width="240"></td>
<td width="67%"><p><font class="head">图形字体:</font></p>
<p><font size="3">在一课我们将教你绘制3D的图形字体,它们可像一般的3D模型一样被变换。</font></p></td>
</tr>
</tbody></table>
</td>
<!-- 中部右边框-->
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">这节课继续上一节课课的内容。在第13课我们学习了如何使用位图字体,这节课,我们将学习如何使用轮廓字体。
<p>创
建轮廓字体的方法类似于在第13课中我们创建位图字体的方法。但是,轮廓字体看起来要酷100倍!你可以指定轮廓字体的大小。轮廓字体可以在屏幕中以3D
方式运动,而且轮廓字体还可以有一定的厚度!而不是平面的2D字符。使用轮廓字体,你可以将你的计算机中的任何字体转换为OpenGL中的3D字体,加上
合适的法线,在有光照的时候,字符就会被很好的照亮了。</p>
<p>一个小注释,这段代码是专门针对Windows写的,它使用了
Windows的wgl函数来创建字体,显然,Apple机系统有agl,X系统有glx来支持做同样事情的,不幸的是,我不能保证这些代码也是容易使用
的。如果哪位有能在屏幕上显示文字且独立于平台的代码,请告诉我,我将重写一个有关字体的教程。</p>
<p>我们从第一课的典型代码开始,添加上stdio.h头文件以便进行标准输入/输出操作,另外,stdarg.h头文件用来解析文字以及把变量转换为文字。最后加上math.h头文件,这样我们就可以使用SIN和COS函数在屏幕中移动文字了。</p></td>
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3"> </font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">另外,我们还要添加2个变量。base将保存我们创建的第一个显示列表的编号。每个字符都需要有自己的显示列表。例如,字符‘A’在显示列表中是65,‘B’是66,‘C’是67,等等。所以,字符‘A’应保存在显示列表中的base
+ 65这个位置。
<p>我们再添加一个叫做rot的变量。用它配合SIN和COS函数在屏幕上旋转文字。我们同时用它来改变文字的颜色。<br>
</p></td>
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre>GLuint base; <font color="#ffffaa">// 绘制字体的显示列表的开始位置</font>
GLfloat rot; <font color="#ffffaa">// 旋转字体</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">GLYPHMETRICSFLOAT
gmf[256]用来保存256个轮廓字体显示列表中对应的每一个列表的位置和方向的信息。我们通过gmf[num]来选择字母。num就是我们想要了解
的显示列表的编号。在稍后的代码中,我将说明如何如何检查每个字符的宽度,以便自动将文字定位在屏幕中心。切记,每个字符的宽度可以不相同。
Glyphmetrics会大大简化我们的工作。</td>
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre>GLYPHMETRICSFLOAT gmf[256]; <font color="#ffffaa">// 记录256个字符的信息</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%">下面这段用来构建真正的字体的代码类似于我们创建位图字体的方法。和13课一样,只是使用wglUseFontOutlines函数替换wglUseFontBitmaps函数。<br>
</td>
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3"> </font><font color="#aaffaa" size="3">
<pre><font color="#aaffaa" size="3">base = glGenLists(256);</font> <font color="#ffffaa"> // 创建256个显示列表</font><br>
wglUseFontOutlines( hDC, <font color="#ffffaa"> // 设置当前窗口设备描述表的句柄</font>
0, <font color="#ffffaa">// 用于创建显示列表字体的第一个字符的ASCII值</font>
255, <font color="#ffffaa">// 字符数</font>
base, <font color="#ffffaa">// 第一个显示列表的名称</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_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_14_files/l.gif"><img src="Tutorial_14_files/l.gif" height="28" width="28"></td>
<td valign="top" width="100%"><font face="arial" size="-1">That's not all however. We then
set the deviation level. The closer to 0.0f, the smooth the font will look. After we set
the deviation, we get to set the font thickness. This describes how thick the font is on
the Z axis. 0.0f will produce a flat 2D looking font and 1.0f will produce a font with
some depth. <br>
<br>
The parameter WGL_FONT_POLYGONS tells OpenGL to create a solid font using polygons. If we
use WGL_FONT_LINES instead, the font will be wireframe (made of lines). It's also
important to note that if you use GL_FONT_LINES, normals will not be generated so lighting
will not work properly. <br>
<br>
The last parameter gmf points to the address buffer for the display list data. </font></td>
<td background="Tutorial_14_files/r.gif"><img src="Tutorial_14_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_14_files/bl.gif" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/bc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/br.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<font color="#aaffaa" size="3">
<pre> 0.0f, <font color="#ffffaa">// 字体的光滑度,越小越光滑,0.0为最光滑的状态</font>
0.2f, <font color="#ffffaa">// 在z方向突出的距离</font>
WGL_FONT_POLYGONS, <font color="#ffffaa"> // 使用多边形来生成字符,每个顶点具有独立的法线</font>
gmf); <font color="#ffffaa">//一个接收字形度量数据的数组的地址,每个数组元素用它对应的显示列表字符的数据填充 </font>
}
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td><img src="Tutorial_14_files/tl.jpg" height="28" width="28"></td>
<td width="100%"><img src="Tutorial_14_files/tc.gif" height="28" width="100%"></td>
<td><img src="Tutorial_14_files/tr.gif" height="28" width="28"></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -