首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网络游戏 >

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

2013-10-28 
【Visual C++】游戏开发五十四 浅墨DirectX教程二十一 视觉的诡计:公告板(Billboard)技术本系列文章由zhmxy5

【Visual C++】游戏开发五十四 浅墨DirectX教程二十一 视觉的诡计:公告板(Billboard)技术


本系列文章由zhmxy555(毛星云)编写,转载请注明出处。  

文章链接: http://blog.csdn.net/poem_qianmo/article/details/13278851

作者:毛星云(浅墨)    微博:@浅墨_毛星云      邮箱: happylifemxy@163.com

 


I'm back~,这段时间大家久等了~

现在大家看到的,就是【Visual C++】游戏开发系列文章第三季中作为正式回归的第一篇文章了。

在这篇文章中,我们一起详细探讨了游戏编程中公告板技术的方方面面,有“深入”的过程分析,也有“浅出”的大家喜闻乐见的使用方法几步曲,最后依旧是一个注释详细的示例程序将这一节的内容融会贯通,且文章最后附有这篇博文配套示例程序的源代码下载。

首先放一张截图吧:

 【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

 这里的3D人物,可就是一张图片哦,而不是之前我们用的3D人物模型。



 

那么文章开头还是先和大家唠唠家常。浅墨现在想说的是这周实在是太累了,天天在各种奇奇怪怪忽然冒出来的事情上耗费时间。比如这个周六周末,明明是好好的自由自配时间,却忽然冒出来要连上两天奇葩的课,从早上8点上到下午6点。不过还好浅墨机智地带了电脑过去,在课堂上坐在不起眼的地方低头为大家写这篇博客,不然可能就不会有这篇文章的出生了。

然后写这句话的时候时间是10月27号晚上8点22分,一个小时之前浅墨正拖着身心俱疲的身体回到宿舍,倒头就睡,按照平常的习惯如果累成这样,必然是回来之后简单的洗澡然后倒头就睡到第二天早上自然醒,但是考虑到答应了大家今天晚上要更新博客,所以短暂的补充精力之后,撑着眼皮,逼着自己起来为大家更新这篇博客。

不过,浅墨知道这样的努力到最终肯定都是值得的,就像之前有一次每日一语里面的那个句子一样:

“面对生活,我们没有选择,但是请始终相信,现在所经历的一切,都有它存在的意义。”

再扯下去这就不是一篇技术文章了,那么,我们就开始正题。

 

 


一、公告板(Billboard)技术的概念和定位

 

公告板(Billboard)技术,也常译为广告牌技术,通常是利用多边形总是朝向观察者这一特性,来达到某些特定的效果。它是一种通过简单方式实现许多没有固定表面效果的一项非常实用的技术,它可以四两拨千斤地完成很多神奇的效果。例如公告板技术加上纹理的Alpha混合与动画在一起使用,可以实现很多没有固定表面的特效,如烟雾、火焰、爆炸、能量盾、云彩、水滴,树木,森林,喊话窗口,甚至NPC人物等等。

需要再次强调的是,公告板技术通常都是和纹理的Alpha混合一起使用的,这样便能够以极低的系统资源实现丰富的绘制效果。

关于地位,公告板技术在3D游戏中有着非常广泛的应用,因为它可以极大地节省资源、提高游戏的流畅度,降低对3D游戏素材的依赖,以及降低对配置要求的门槛。


 

二、对公告板技术的情境理解

 

公告板的原理是使用两个三角形组成的矩形显示一张平面位图,并且在显示的过程中,该平面矩形的角度随虚拟摄像机的观察角度和位置的变化而变化。

在Direct3D应用中,公告板的实现方式通常是两种,一种是让某个平面始终对着虚拟摄像机,也就是平面模型的屏幕与观察者的视线垂直(图1)。

 【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

另一种是让平面模型全部朝向投影空间的前屏幕,也就是平面模型与投影平面相平行(图2)。

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

 

 

公告板最常见的例子是用作模拟3D树木。想要模拟3D树木往往不用真正的3D模型,而是用看上去很像3D树木的2D图像映射到一个矩形平面上。

 


如果我们向某个方向观察一个映射到多边形的树木时,由于多边形是朝某个固定方向的,此时能够正确的观察该树木。但是当我们与树木朝向之间有一个观察角度的话,图形在观察者的视野中就会逐渐变窄。

但是如果我们用了告板技术的话,那么树木始终都是朝向用户的,这个时候,无论我们如何在水平方向转移观察方向都可以正确地观察到没有很多异样的树木。

为了印象深刻,再来一个对比吧,如果不使用公告板技术,在水平方向上环绕着移动视角,便显示出了扭曲的图形:

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

 

使用公告板技术后,便正确显示的人物画面:

 【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术


这样的差距可不是一点点~




三、公告板技术的实现原理理解


然后是关于实现原理。

说白了,公告板技术的实现原理也就是三个方面需要注意:

1.   在合适的位置和朝向放置矩形平面

2.   让矩形平面始终和视线垂直

3.   将位图贴到矩形平面上

 

 公告板技术的原理其实很简单,就是使用两个三角形组成的矩形来显示一个位图,在显示过程中这个矩形面板根据摄像机的观察角度和位置而变化。这里看起来又和前面章节中讲到的在3D中显示2D图形有些像,但它们是不同的。当采用正交投影时,显示出来的图形将不具有纵深感,不会随着距离的远近而产生缩 放。而在3D环境中一般的面板又不能很好地显示出效果。

 

 一般来说,公告板技术可以分成三类,分别应用于不同的游戏类型需求:

1.观察者可以在游戏虚拟空间中任意移动,而我们的工作是让某一模型始终对着摄像机。例如,一个太阳。这一类在当前技术中使用较少,因为目前硬件的能力突飞猛进,直接放一个3D模型的太阳就行了。

2.在角色扮演游戏中,摄像机可以做的旋转只限于水平和竖直。程序员的目的是:无论角色如何走动,某一个平面模型始终朝向观察点。简单来说,就是平面模型的平面和视线垂直。

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

a.垂直于视线图示


(3)第三类和第二类相似,差异在于平面模型不是全部朝向观察点,而是全部朝向投影空间的前屏幕。简单来说,就是平面模型始终与屏幕平行。

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术

b.平行于屏幕图示

 

 

 

四、公告板技术使用五步曲

 



还是老规矩,深入浅出,没力气没精力理解前面的那些理论的话(其实前面的理论也不难的- -),落实到一个用上,不妨直接啃这一节总结好的精粹知识,瞬间就学会了如何快速上手使用公告板技术。

 关于这五步曲的大体思路,其实就是纹理映射几步曲那一套弄完之后,渲染的时候加关于公告板矩阵的一些额外操作就是了。而最关键的两个步骤:一是在合适的位置和朝向放置矩形平面,二是将位图贴到矩形平面上。



Ⅰ.五步曲之一:顶点的定义

想实现公告板的话,首先当然是需要定义公告板矩形的灵活顶点格式FVF。因为在公告板矩形中只显示一张位图,所以在灵活顶点格式中仅需要包含位置和一对纹理坐标。


这一步当然是定义描述广告牌矩形的灵活顶点格式。由于在广告牌矩形上只用显示一张位图就行,所以在灵活顶点格式中只要包含位置和一对纹理坐标,但是其实我们之前在贴地面的纹理的时候就用到了相同格式的FVF顶点格式,所以如果在之前的demo上修改代码的话,这步根本不用去新加什么代码,知道我们之前用烂了的那个FVF顶点格式结构体CUSTOMVERTEX这次继续服役就行了~

 



好吧,上代码,核心部分main.cpp的详细注释代码:



【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术


【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术


我们可以发现,无论以水平方向上哪个角度去观察这张图片,都俨然显现出3D模型的真实立体效果,这就是公告板技术的功劳,在这么真的3D效果面前,可不要又一次被一点雕虫小技蒙蔽了双眼哦。


文章最后,依旧是放出本篇文章配套源代码的下载:


本篇文章配套源代码请点击这里下载:


【浅墨DirectX提高班】配套源代码之二十一下载 (新浪微盘)



以上就是本节笔记的全部内容,更多精彩内容,且听下回分解。




文章最后,依然是【每文一语】栏目,今天的句子是: 



心是一个人的翅膀,心有多大,世界就有多大。很多时候限制我们的,不是周遭的环境,也不是他人的言行,而是我们自己。看不开、忘不了、放不下,把自己囚禁在灰暗的记忆里;不敢想、不自信、不行动,把自己局限在固定的空间里……如果不能打破心的禁锢,即使给你整个天空,你也找不到自由的感觉。加油:)

【Visual C++】游戏开发五十四 浅墨DirectX课程二十一 视觉的诡计:公告板(Billboard)技术


下周一,让我们离游戏开发的梦想更近一步。

下周一,游戏开发笔记,我们,不见不散。



6楼liubaofeng281分钟前
the king come back
5楼u0125963997分钟前
pan.baidu.com/share/link?uk=2403150601&shareid=3432026678npan.baidu.com/share/link?uk=2403150601&shareid=3431852878npan.baidu.com/share/link?uk=2403150601&shareid=3431510805npan.baidu.com/share/link?uk=2403150601&shareid=3431309558npan.baidu.com/share/link?uk=2403150601&shareid=3431099819npan.baidu.com/share/link?uk=2403150601&shareid=3430892649npan.baidu.com/share/link?uk=2403150601&shareid=3430657086npan.baidu.com/share/link?uk=2403150601&shareid=3430455530npan.baidu.com/share/link?uk=2403150601&shareid=3430233472npan.baidu.com/share/link?uk=2403150601&shareid=3429970725npan.baidu.com/share/link?uk=2403150601&shareid=3429718481npan.baidu.com/share/link?uk=2403150601&shareid=3429432452npan.baidu.com/share/link?uk=2403150601&shareid=3429190791npan.baidu.com/share/link?uk=2403150601&shareid=3428982660npan.baidu.com/share/link?uk=2403150601&shareid=3428769130npan.baidu.com/share/link?uk=2403150601&shareid=3428572895npan.baidu.com/share/link?
4楼worenri29分钟前
强势归来!~
3楼qlwy409629分钟前
毛兄辛苦啦!
2楼ghsau2小时前
1楼u0125968086小时前
photo.163.com/q/8236016/?mid=177126039nphoto.163.com/q/8236015/?mid=177126039nphoto.163.com/q/8236014/?mid=177126039nphoto.163.com/q/8236014/?mid=177126039nphoto.163.com/q/8236012/?mid=177126039nphoto.163.com/q/8236011/?mid=177126039nphoto.163.com/q/8236010/?mid=177126039nphoto.163.com/q/8236035/?mid=177126043nphoto.163.com/q/8236034/?mid=177126043nphoto.163.com/q/8236033/?mid=177126043nphoto.163.com/q/8236031/?mid=177126043nphoto.163.com/q/8236030/?mid=177126043nphoto.163.com/q/8236027/?mid=177126043nphoto.163.com/q/8236030/?mid=177126043nphoto.163.com/q/8236026/?mid=177126043nphoto.163.com/q/8236025/?mid=177126043nphoto.163.com/q/8236024/?mid=177126043nphoto.163.com/q/8236049/?mid=177126064nphoto.163.com/q/8236048/?mid=177126064nphoto.163.com/q/8236047/?mid=177126064nphoto.163.com/q/8236045/?mid=177126064nphoto.163.com/q/8236046/?mid=177126064

热点排行