3D空间中移动图像:

你想知道如何在3D空间中移动物体，你想知道如何在屏幕上绘制一个图像，而让图像的背景色变为透明，你希望有一个简单的动画。这一课将教会你所有的一切。前面的课程涵盖了基础的OpenGL，每一课都是在前一课的基础上创建的。这一课是前面几课知识的综合，当你学习这课时，请确保你已经掌握了前面几课的知识。

欢迎进入第九课。到现在为止，您应该很好的理解OpenGL了。『CKER：如果没有的话，一定是我翻译的罪过......』。您已经学会了设置一个OpenGL窗口的每个细节。学会在旋转的物体上贴图并打上光线以及混色(透明)处理。这一课应该算是第一课中级教程。您将学到如下的知识：在3D场景中移动位图，并去除位图上的黑色象素(使用混色)。接着为黑白纹理上色，最后您将学会创建丰富的色彩，并把上过不同色彩的纹理相互混合，得到简单的动画效果。
我们在第一课的代码基础上进行修改。先在程序源码的开始处增加几个变量。出于清晰起见，我重写了整段代码。

#include    <stdio.h>                    // 标准输入输出库头文件
#include    <glaux.h>                    // GLaux库的头文件

下列这几行新加的。twinkle和 tp是布尔变量, 表示它们只能设为 TRUE 或 FALSE。 twinkle用来跟踪 闪烁 效果是否启用。 tp用来检查 'T'键有没有被按下或松开. (按下时 tp=TRUE, 松开时 tp=FALSE).

BOOL    twinkle;                        // 闪烁的星星
BOOL    tp;                            // 'T' 按下了么?

num 跟踪屏幕上所绘制的星星数。这个数字被定义为一个常量。这意味着无法在以后的代码中对其进行修改。这么做的原因是因为您无法重新定义一个数组。因此，如果我们定义一个50颗星星的数组，然后又将num增加到51的话，就会出错『CKER：数组越界』。不过您还是可以(也只可以)在这一行上随意修改这个数字。但是以后请您别再改动 num 的值了，除非您想看见灾难发生。

const    num=50;                            // 绘制的星星数

现在我们来创建一个结构。 结构这词听起来有点可怕，但实际上并非如此。 一个结构使用一组简单类型的数据 (以及变量等)来表达较大的具有相似性的数据组合。 我们知道我们在保持对星星的跟踪。 您可以看到下面的第七行就是 stars；并且每个星星有三个整型的色彩值。第三行 int r,g,b设置了三个整数. 一个红色 (r), 一个绿色 (g), 以及一个蓝色 (b). 此外，每个星星离屏幕中心的距离不同, 而且可以是以屏幕中心为原点的任意360度中的一个角度。如果你看下面第四行的话, 会发现我们使用了一个叫做 dist的浮点数来保持对距离 的跟踪. 第五行则用一个叫做 angle的浮点数保持对星星角度值的跟踪。
因此我们使用了一组数据来描述屏幕上星星的色彩, 距离, 和角度。 不幸的是我们不止对一个星星进行跟踪。但是无需创建 50 个红色值、 50 个绿色值、 50 个蓝色值、 50 个距离值 以及 50 个角度值，而只需创建一个数组star。 star数组的每个元素都是stars类型的，里面存放 了描述星星的所有数据。star数组在下面的第八行创建。 第八行的样子是这样的： stars star[num]。数组类型是 stars结构. 所数组 能存放所有stars结构的信息。 数组名字是 star. 数组大小是 [num]。 数组中存放着 stars结构的元素. 跟踪结构元素会比跟踪各自分开的变量容易的多. 不过这样也很笨, 因为我们竟然不能改变常量 num来增减星星 数量。

typedef struct                            // 为星星创建一个结构
{int r, g, b;                        // 星星的颜色
    GLfloat dist;                        // 星星距离中心的距离GLfloat angle;                        // 当前星星所处的角度
}
stars;                                // 结构命名为stars
stars star[num];                        // 使用 'stars' 结构生成一个包含 'num'个元素的 'star'数组

接下来我们设置几个跟踪变量：星星离观察者的距离变量(zoom)，我们所见到的星星所处的角度(tilt)，以及使闪烁的星星绕Z轴自转的变量spin。
loop变量用来绘制50颗星星。texture[1]用来存放一个黑白纹理。如果您需要更多的纹理的话，您应该增加texture数组的大小至您决定采用的纹理个数。

GLfloat    zoom=-15.0f;                        // 星星离观察者的距离
GLfloat    tilt=90.0f;                        // 星星的倾角
GLfloat    spin;                            // 闪烁星星的自转

GLuint    loop;                            // 全局 Loop 变量

GLuint    texture[1];                        // 存放一个纹理

紧接着上面的代码就是我们用来载入纹理的代码。我不打算再详细的解释这段代码。这跟我们在第六、七、八课中所用的代码是一模一样的。这一次载入的位图叫做star.bmp。这里我们使用glGenTextures(1, &texture[0])，来生成一个纹理。纹理采用线性滤波方式。

AUX_RGBImageRec *LoadBMP(char *Filename)            // 载入位图文件
{FILE *File=NULL;                    // 文件句柄if (!Filename)                        // 确认已给出文件名
    {return NULL;                    // 若无返回 NULL
    }File=fopen(Filename,"r");                // 检查文件是否存在if (File)                        // 文件存在么?
    {fclose(File);                    // 关闭文件句柄return auxDIBImageLoad(Filename);        // 载入位图并返回指针
    }return NULL;                        // 如果载入失败返回 NULL
}

下面的代码(调用上面的代码)载入位图，并转换成纹理。变量用来跟踪纹理是否已载入并创建好了。

int LoadGLTextures()                        // 载入位图并转换成纹理
{int Status=FALSE;                    // 状态指示器
AUX_RGBImageRec *TextureImage[1];            // 为纹理分配存储空间memset(TextureImage,0,sizeof(void *)*1);        // 将指针设为 NULL// 载入位图，查错，如果未找到位图文件则退出if (TextureImage[0]=LoadBMP("Data/Star.bmp")){Status=TRUE;                    // 将 Status 设为TRUE
glGenTextures(1, &texture[0]);            // 创建一个纹理// 创建一个线性滤波纹理
        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;                        // 返回 Status的值
}

现在设置OpenGL的渲染方式。这里不打算使用深度测试，如果您使用第一课的代码的话，请确认是否已经去掉了 glDepthFunc(GL_LEQUAL); 和 glEnable(GL_DEPTH_TEST);两行。否则，您所见到的效果将会一团糟。这里我们使用了纹理映射，因此请您确认您已经加上了这些第一课中所没有的代码。您会注意到我们通过混色来启用了纹理映射。

int InitGL(GLvoid)                        // 此处开始对OpenGL进行所有设置
{if (!LoadGLTextures())                    // 调用纹理载入子例程
    {return FALSE;                    // 如果未能载入，返回FALSE
    }glEnable(GL_TEXTURE_2D);                // 启用纹理映射
glShadeModel(GL_SMOOTH);                // 启用阴影平滑
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);            // 黑色背景glClearDepth(1.0f);                    // 设置深度缓存
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);    // 真正精细的透视修正
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);            // 设置混色函数取得半透明效果glEnable(GL_BLEND);                    // 启用混色

以下是新增的代码。设置了每颗星星的起始角度、距离、和颜色。您会注意到修改结构的属性有多容易。全部50颗星星都会被循环设置。要改变star[1]的角度我们所要做的只是star[1].angle={某个数值}；就这么简单！

    for (loop=0; loop<num; loop++)                // 创建循环设置全部星星{star[loop].angle=0.0f;                // 所有星星都从零角度开始

第loop颗星星离中心的距离是将loop的值除以星星的总颗数，然后乘上5.0f。基本上这样使得后一颗星星比前一颗星星离中心更远一点。这样当loop为50时(最后一颗星星)，loop 除以 num正好是1.0f。之所以要乘以5.0f是因为1.0f*5.0f 就是 5.0f。『CKER：废话，废话！这老外怎么跟孔乙己似的！:)』5.0f已经很接近屏幕边缘。我不想星星飞出屏幕，5.0f是最好的选择了。当然如果如果您将场景设置的更深入屏幕里面的话，也许可以使用大于5.0f的数值，但星星看起来就更小一些(都是透视的缘故)。
您还会注意到每颗星星的颜色都是从0～255之间的一个随机数。也许您会奇怪为何这里的颜色得取值范围不是OpenGL通常的0.0f～1.0f之间。这里我们使用的颜色设置函数是glColor4ub，而不是以前的glColor4f。ub意味着参数是Unsigned Byte型的。一个byte的取值范围是0～255。这里使用byte值取随机整数似乎要比取一个浮点的随机数更容易一些。

        star[loop].dist=(float(loop)/num)*5.0f;        // 计算星星离中心的距离
        star[loop].r=rand()%256;            // 为star[loop]设置随机红色分量
        star[loop].g=rand()%256;            // 为star[loop]设置随机红色分量star[loop].b=rand()%256;            // 为star[loop]设置随机红色分量
    }return TRUE;                        // 初始化一切OK
}

Resize的代码也是一样的，现在我们转入绘图代码。如果您使用第一课的代码，删除旧的DrawGLScene代码，只需将下面的代码复制过去就行了。实际上，第一课的代码只有两行，所以没太多东西要删掉的。

int DrawGLScene(GLvoid)                        // 此过程中包括所有的绘制代码
{glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);    // 清除屏幕及深度缓存
    glBindTexture(GL_TEXTURE_2D, texture[0]);        // 选择纹理for (loop=0; loop<num; loop++)                // 循环设置所有的星星
    {glLoadIdentity();                // 绘制每颗星星之前，重置模型观察矩阵
        glTranslatef(0.0f,0.0f,zoom);            // 深入屏幕里面glRotatef(tilt,1.0f,0.0f,0.0f);            // 倾斜视角

现在我们来移动星星。星星开始时位于屏幕的中心。我们要做的第一件事是把场景沿Y轴旋转。如果我们旋转90度的话，X轴不再是自左至右的了，他将由里向外穿出屏幕。为了让大家更清楚些，举个例子。假想您站在房子中间。再设想您左侧的墙上写着-x，前面的墙上写着-z，右面墙上就是+x咯，您身后的墙上则是+z。加入整个房子向右转90度，但您没有动，那么前面的墙上将是-x而不再是-z了。所有其他的墙也都跟着移动。-z出现在右侧，+z出现在左侧，+x出现在您背后。神经错乱了吧？通过旋转场景，我们改变了x和z平面的方向。
第二行代码沿x轴移动一个正值。通常x轴上的正值代表移向了屏幕的右侧(也就是通常的x轴的正向)，但这里由于我们绕y轴旋转了坐标系，x轴的正向可以是任意方向。如果我们转180度的话，屏幕的左右侧就镜像反向了。因此，当我们沿 x轴正向移动时，可能向左，向右，向前或向后。

        glRotatef(star[loop].angle,0.0f,1.0f,0.0f);    // 旋转至当前所画星星的角度
glTranslatef(star[loop].dist,0.0f,0.0f);    // 沿X轴正向移动

接着的代码带点小技巧。星星实际上是一个平面的纹理。现在您在屏幕中心画了个平面的四边形然后贴上纹理，这看起来很不错。一切都如您所想的那样。但是当您当您沿着y轴转上个90度的话，纹理在屏幕上就只剩右侧和左侧的两条边朝着您。看起来就是一条细线。这不是我们所想要的。我们希望星星永远正面朝着我们，而不管屏幕如何旋转或倾斜。
我们通过在绘制星星之前，抵消对星星所作的任何旋转来实现这个愿望。您可以采用逆序来抵消旋转。当我们倾斜屏幕时，我们实际上以当前角度旋转了星星。通过逆序，我们又以当前角度"反旋转"星星。也就是以当前角度的负值来旋转星星。就是说，如果我们将星星旋转了10度的话，又将其旋转-10度来使星星在那个轴上重新面对屏幕。下面的第一行抵消了沿y轴的旋转。然后，我们还需要抵消掉沿x轴的屏幕倾斜。要做到这一点，我们只需要将屏幕再旋转-tilt倾角。在抵消掉x和y轴的旋转后，星星又完全面对着我们了。

        glRotatef(-star[loop].angle,0.0f,1.0f,0.0f);    // 取消当前星星的角度
glRotatef(-tilt,1.0f,0.0f,0.0f);        // 取消屏幕倾斜

如果 twinkle 为 TRUE，我们在屏幕上先画一次不旋转的星星：将星星总数(num) 减去当前的星星数(loop)再减去1，来提取每颗星星的不同颜色(这么做是因为循环范围从0到num-1)。举例来说，结果为10的时候，我们就使用10号星星的颜色。这样相邻星星的颜色总是不同的。这不是个好法子，但很有效。最后一个值是alpha通道分量。这个值越小，这颗星星就越暗。
由于启用了twinkle，每颗星星最后会被绘制两遍。程序运行起来会慢一些，这要看您的机器性能如何了。但两遍绘制的星星颜色相互融合，会产生很棒的效果。同时由于第一遍的星星没有旋转，启用twinkle后的星星看起来有一种动画效果。(如果您这里看不懂得话，就自己去看程序的运行效果吧。)
值得注意的是给纹理上色是件很容易的事。尽管纹理本身是黑白的，纹理将变成我们在绘制它之前选定的任意颜色。此外，同样值得注意的是我们在这里使用的颜色值是byte型的，而不是通常的浮点数。甚至alpha通道分量也是如此。

        if (twinkle)                    // 启用闪烁效果{// 使用byte型数值指定一个颜色
            glColor4ub(star[(num-loop)-1].r,star[(num-loop)-1].g,star[(num-loop)-1].b,255);glBegin(GL_QUADS);            // 开始绘制纹理映射过的四边形glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);glEnd();                // 四边形绘制结束
        }

现在绘制第二遍的星星。唯一和前面的代码不同的是这一遍的星星肯定会被绘制，并且这次的星星绕着z轴旋转。

        glRotatef(spin,0.0f,0.0f,1.0f);            // 绕z轴旋转星星// 使用byte型数值指定一个颜色glColor4ub(star[loop].r,star[loop].g,star[loop].b,255);glBegin(GL_QUADS);                // 开始绘制纹理映射过的四边形
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);glEnd();                    // 四边形绘制结束

以下的代码代表星星的运动。我们增加spin的值来旋转所有的星星(公转)。然后，将每颗星星的自转角度增加loop/num。这使离中心更远的星星转的更快。最后减少每颗星星离屏幕中心的距离。这样看起来，星星们好像被不断地吸入屏幕的中心。

        spin+=0.01f;                    // 星星的公转
        star[loop].angle+=float(loop)/num;        // 改变星星的自转角度star[loop].dist-=0.01f;                // 改变星星离中心的距离

接着几行检查星星是否已经碰到了屏幕中心。当星星碰到屏幕中心时，我们为它赋一个新颜色，然后往外移5个单位，这颗星星将踏上它回归屏幕中心的旅程。

        if (star[loop].dist<0.0f)            // 星星到达中心了么{star[loop].dist+=5.0f;            // 往外移5个单位
            star[loop].r=rand()%256;        // 赋一个新红色分量
            star[loop].g=rand()%256;        // 赋一个新绿色分量
            star[loop].b=rand()%256;        // 赋一个新蓝色分量}}return TRUE;                        // 一切正常
}

现在我们添加监视键盘的代码。下移到WinMain()。找到SwapBuffers(hDC)一行。我们就在这一行后面增加键盘监视代码。
代码将检查T键是否已按下。如果T键按下过，并且又放开了，if块内的代码将被执行。如果twinkle为FALSE，他将变为TRUE。反之亦然。只要T键按下， tp就变为TRUE。这样处理可以防止如果您一直按着T键的话，块内的代码被反复执行。

        SwapBuffers(hDC);                // 切换缓冲if (keys['T'] && !tp)                // 是否T 键已按下并且 tp值为 FALSE
        {tp=TRUE;                // 若是，将tp设为TRUE
            twinkle=!twinkle;            // 翻转 twinkle的值}

下面的代码检查是否松开了T键。若是，使 tp=FALSE。除非tp的值为FALSE，否则按着T键时什么也不会发生。所以这行代码很重要。

        if (!keys['T'])                    // T 键已松开了么？{tp=FALSE;                // 若是 ，tp为 FALSE
        }

余下的代码检查上、下方向键，向上翻页键或向下翻页键是否按下。

        if (keys[VK_UP])                // 上方向键按下了么？{tilt-=0.5f;                // 屏幕向上倾斜
        }if (keys[VK_DOWN])                // 下方向键按下了么？
        {tilt+=0.5f;                // 屏幕向下倾斜
        }if (keys[VK_PRIOR])                // 向上翻页键按下了么
        {zoom-=0.2f;                // 缩小
        }if (keys[VK_NEXT])                // 向下翻页键按下了么？
        {zoom+=0.2f;                // 放大
        }

像以前一样，确认窗口的标题是否正确。

        if (keys[VK_F1])                // F1键按下了么?{keys[VK_F1]=FALSE;            // 若是，使对应的Key数组中的值为 FALSE
            KillGLWindow();                // 销毁当前的窗口fullscreen=!fullscreen;            // 切换 全屏 / 窗口 模式// 重建 OpenGL 窗口if (!CreateGLWindow("NeHe's 透明纹理实例",640,480,16,fullscreen)){return 0;            // 如果窗口未能创建，程序退出
            }}}
}

这一课我尽我所能来解释如何加载一个灰阶位图纹理，(使用混色)去掉它的背景色后，再给它上色，最后让它在3D场景中移动。我已经向您展示了如何创建漂亮的颜色与动画效果。实现原理是在原始位图上再重叠一份位图拷贝。到现在为止，只要您很好的理解了我所教您的一切，您应该已经能够毫无问题的制作您自己的3D Demo了。所有的基础知识都已包括在内！

转载于:https://www.cnblogs.com/fish7/p/4008302.html

第09课 OpenGL 移动图像相关推荐

  1. 太空射击第09课：精灵动画

    太空射击第09课:精灵动画 在本课中,我们将通过添加一些精灵动画来使我们的流星更有趣.本次课用到的图像可以点击这里下载 视频 观看视频 流星动画 pygame 中的transform模块 我们所有的流 ...

  2. 第09课 图像的算术运算

    **学科:**人工智能 年级: 七年级上 **课题:**第09课 图像的算术运算 课时数:1课时 教学目标: 1.通过对图像算术的原理阐释,理解图像算术运算的实现过程. 2.能够对比分析两种不同图像加 ...

  3. 【个人笔记】OpenCV4 C++ 图像处理与视频分析 09课

    个人资料,仅供学习使用 修改时间--2022年2月14日 10:59:22 学习课程:OpenCV4 图像处理与视频分析实战教程 课程讲师:贾志刚 09 图像直方图+直方图均衡化+直方图比较 open ...

  4. 第09课：精进的4个习惯

    大家好,我是安晓辉.上节课我们介绍了目标设定与执行的方法,这一讲我们来看看如何培养精进的四个习惯. 习惯是很强大的力量,要把精进落实到日常习惯中.我个人有这4个习惯,供同学们参考: 1. 对标管理 2 ...

  5. 第09课：项目实战——让你的神经网络模型越来越深

    上一篇,我们主要介绍了深层神经网络模型的结构和常用的标记方法,详细推导了深层神经网络模型的正向传播和反向传播过程,并在最后介绍了多分类 Softmax 模型. 本文我将带领大家通过搭建一个较深层的神经 ...

  6. 第09课：生活中的工厂模式——你要拿铁还是摩卡

    用程序来模拟生活 从剧情中思考工厂模式 工厂模式的模型抽象 类图 模型说明 简单工厂的优点 简单工厂的缺点 模型的拓展应用 应用场景 [拓展]工厂三姐妹 简单工厂模式 工厂方法模式 抽象工厂模式 进一 ...

  7. 智慧解析第09课：路西法祭品

    转载于:https://www.cnblogs.com/quejuwen/p/3709341.html

  8. 第09课：基于 Etcd 的分布式锁实现原理及方案

    Etcd 最新版本已经提供了支持分布式锁的基础接口(可见官网说明),但本文并不局限于此. 本文将介绍两条实现分布式锁的技术路线: 从分布式锁的原理出发,结合 Etcd 的特性,洞见分布式锁的实现细节: ...

  9. NeHe OpenGL课程 网址整理

    NeHe OpenGL第一课:OpenGL窗口 NeHe OpenGL第二课:多边形 NeHe OpenGL第三课:颜色渲染 NeHe OpenGL第四课:旋转 NeHe OpenGL第五课:3D空间 ...

  10. NeHe的OpenGL教程笔记

    大一寒假的时候对OpenGL产生了兴趣,但那会根本看不懂这个教程.大三寒假之前看了21课的代码,但是交了计算机图形学的大作业后就又搁置了.这次重新拾起,希望可以全部看完,并整理一下每节教程的内容. 第 ...

最新文章

  1. html div数据替换,javascript – 将html添加到div而不替换其中的当前内容
  2. jQuery知识汇总
  3. 第二章matlab数据及其运算,第2章 MATLAB数据及其运算_习题答案
  4. nyoj239月老的难题
  5. Delphi编码规范
  6. Eclipse 中 按 Ctrl+Shift+F 格式化代码时每行容纳的字符数
  7. 大数据平台的3个核心功能
  8. Mac Nginx 配置 Tomcat 配置 jdk环境变量 Nginx部署服务遇到的坑（1）
  9. gpg 中标麒麟获取 密钥失败_PHP实现码云Gitee的WebHook密钥验证算法
  10. 小白记事本--JAVA入门
  11. 数据结构——顺序表 SqList *L 和 SqList * L的区别
  12. 省市县地区编码五级联东2021年版sql
  13. 主梁弹性模量计算_简支梁计算方法
  14. 【计算机网络】5G网络结构————5G技术大有可为
  15. Tensorflow-GPU使用时笔记本电脑声音过大的问题
  16. C++ 读取txt文件中数据并存入数组中
  17. 常用照片规格尺寸对照表
  18. 服务器系统安装蓝牙驱动,安装蓝牙设备 - Windows drivers | Microsoft Docs
  19. 2022软件测试工程师的简历怎么写？
  20. AR发展简史（未完待续）

热门文章

  1. 信锐nac6100管理口怎么进去_建盏生锈了怎么办？
  2. C# 读取XML 写入XML 读写XML
  3. c++ extern学习
  4. react项目案例_教程28——使用 react-rewired 配置基本的环境（项目）
  5. 用sql写每年的第三周_如何写好5000行的SQL代码
  6. c char转int_C/C++基础之sizeof使用
  7. 过滤器和拦截器的区别_拦截器和过滤器的区别
  8. c语言 stm32结构体赋值,STM32学习笔记9——结构体赋值问题
  9. transformClassesWithProfilers-transformForDebug
  10. 【springssm加载applicationContext.xml文件的一个坑】