📄 tutorial_20.htm
字号:
if (TextureImage[loop]->data)
{
free(TextureImage[loop]->data);
}
free(TextureImage[loop]);
}
}
return Status;
}
</font></pre>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">改变窗口大小和初始化OpenGL的函数没有变化
<p></p></td><td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" 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_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">现在到了最有趣的绘制部分了,我们从清楚背景色开始,接着把物体移入屏幕2个单位。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table>
<font color="#aaffaa" size="3">
<pre>int DrawGLScene(GLvoid)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0f,0.0f,-2.0f); <font color="#ffffaa">// 物体移入屏幕2个单位</font></pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%"><font face="Tahoma,Verdana,sans-serif" size="-1"> 下面一行,我们选择'logo'纹理。我们将要通过四边形把纹理映射到屏幕,并按照顶点的顺序设置纹理坐标。</font>
<p>Jonathan Roy说OpenGL是一个基于顶点的图形系统,大部分你设置的参数是作为顶点的属性而记录的,纹理坐标就是这样一种属性。你只要简单的设置各个顶点的纹理坐标,OpenGL就自动帮你把多边形内部填充纹理,通过一个插值的过程。</p>
<p>向前面几课一样,我们假定四边形面对我们,并把纹理坐标(0,0)绑定到左下角,(1,0)绑定到右下角,(1,1)绑定到右上角。给定这些设置,你应该能猜到四边形中间对应的纹理坐标为(0.5,0.5),但你自己并没有设置此处的纹理坐标!OpenGL为你做了计算。</p>
<p>在
这一课里,我们通过设置纹理坐标达到一种滚动纹理的目的。纹理坐标是被归一化的,它的范围从0.0-1.0,值0被映射到纹理的一边,值1被映射到纹理的
另一边。超过1的值,纹理可以按照不同的方式被映射,这里我们设置为它将回绕道另一边并重复纹理。例如如果使用这样的映射方式,纹理坐标
(0.3,0.5)和(1.3,0.5)被映射到同一个纹理坐标。在这一课里,我们将尝试一种无缝填充的效果。</p>
<font face="Tahoma,Verdana,sans-serif" size="-1"><br>
<br>
<img src="Tutorial_20_files/lesson20-1.jpg" align="left"><img src="Tutorial_20_files/lesson20-2.jpg" align="right">
</font><font face="Tahoma,Verdana,sans-serif">我们使用roll变量去设置纹理坐标,当它为0时,它把纹理的左下角映射到四边形的左下角。当它大于0时,把纹理的左上角映射到四边形的左下角,看起来的效果就是纹理沿四边形向上滚动。</font></td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> glBindTexture(GL_TEXTURE_2D, texture[0]); <font color="#ffffaa">// 选择Logo纹理</font>
glBegin(GL_QUADS); <font color="#ffffaa">// 绘制纹理四边形</font>
glTexCoord2f(0.0f, -roll+0.0f); glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(3.0f, -roll+0.0f); glVertex3f( 1.1f, -1.1f, 0.0f);
glTexCoord2f(3.0f, -roll+3.0f); glVertex3f( 1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, -roll+3.0f); glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd(); </pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">启用混合和禁用深度测试</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table>
<font color="#aaffaa" size="3">
<pre> glEnable(GL_BLEND); <font color="#ffffaa">// 启用混合</font>
glDisable(GL_DEPTH_TEST); <font color="#ffffaa"> // 禁用深度测试</font>
</pre>
</font>
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">接下来我们需要根据masking的值设置是否使用“掩模”,如果是,则需要设置相应的混合系数。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> if (masking) <font color="#ffffaa">// 是否启用“掩模”</font>
{
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">如果启用了“掩模”,我们将要设置“掩模”的混合系数。一个“掩模”只是一幅绘制到屏幕的纹理图片,但只有黑色和白色。白色的部分代表透明,黑色的部分代表不透明。
<p>下面这个混合系数使得,任何对应“掩模”黑色的部分会变为黑色,白色的部分会保持原来的颜色。</p></td><td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> glBlendFunc(GL_DST_COLOR,GL_ZERO); <font color="#ffffaa">// 使用黑白“掩模”混合屏幕颜色</font>
}
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">现在我们检查绘制那一个层,如果为True绘制第二个层,否则绘制第一个层</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> if (scene)
{
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">为了不使它看起来显得非常大,我们把它移入屏幕一个单位,并把它按roll变量的值进行旋转(沿Z轴)。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> glTranslatef(0.0f,0.0f,-1.0f); <font color="#ffffaa">// 移入屏幕一个单位</font>
glRotatef(roll*360,0.0f,0.0f,1.0f); <font color="#ffffaa"> // 沿Z轴旋转</font>
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">接下我们检查masking的值来绘制我们的对象</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> if (masking) <font color="#ffffaa">// “掩模”是否打开</font>
{
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">如果“掩模打开”,我们会把掩模绘制到屏幕。当我们完成这个操作时,将会看到一个镂空的纹理出现在屏幕上。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> glBindTexture(GL_TEXTURE_2D, texture[3]); <font color="#ffffaa">// 选择第二个“掩模”纹理</font>
glBegin(GL_QUADS); <font color="#ffffaa">// 开始绘制四边形</font>
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">当我们把“掩模”绘制到屏幕上后,接着我们变换混合系数。这次我们告诉OpenGL把任何黑色部分对应的像素复制到屏幕,这样看起来纹理就像被镂空一样帖子屏幕上。
<p>注意,我们在变换了混合模式后在选择的纹理。</p>
<p>如果我们没有使用“掩模”,我们的图像将与屏幕颜色混合。</p></td><td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3">
<pre> glBlendFunc(GL_ONE, GL_ONE); <font color="#ffffaa">// 把纹理2复制到屏幕</font>
glBindTexture(GL_TEXTURE_2D, texture[4]); <font color="#ffffaa">// 选择第二个纹理</font>
glBegin(GL_QUADS); <font color="#ffffaa">// 绘制四边形</font>
glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.1f, -1.1f, 0.0f);
glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.1f, 1.1f, 0.0f);
glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.1f, 1.1f, 0.0f);
glEnd();
}
</pre>
</font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">绘制第一层图像</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> else <font color="#ffffaa"></font>
{
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">如果“掩模打开”,我们会把掩模绘制到屏幕。当我们完成这个操作时,将会看到一个镂空的纹理出现在屏幕上。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> if (masking) <font color="#ffffaa">// “掩模”是否打开</font>
{
</pre></font><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/tl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/tc.png" height="28" width="100%"></td><td><img src="Tutorial_20_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_20_files/l.png"><img src="Tutorial_20_files/l.png"></td>
<td valign="top" width="100%">如果“掩模打开”,我们会把掩模绘制到屏幕。当我们完成这个操作时,将会看到一个镂空的纹理出现在屏幕上。</td>
<td background="Tutorial_20_files/r.png"><img src="Tutorial_20_files/r.png"></td></tr></tbody></table><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><img src="Tutorial_20_files/bl.png" height="28" width="28"></td><td width="100%"><img src="Tutorial_20_files/bc.png" height="28" width="100%"></td><td><img src="Tutorial_20_files/br.png" height="28" width="28"></td></tr></tbody></table><font color="#aaffaa" size="3"><pre> glBindTexture(GL_TEXTURE_2D, texture[1]); <font color="#ffffaa">// 选择第一个“掩模”纹理</font>
glBegin(GL_QUADS); <font color="#ffffaa">// 开始绘制四边形</font>
glTexCoord2f(roll+0.0f, 0.0f); glVertex3f(-1.1f, -1.1f, 0.0f);
glTexCoord2f(roll+4.0f, 0.0f); glVertex3f( 1.1f, -1.1f, 0.0f);
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -