本系列文章由zhmxy555（毛星云）编写轉载请注明出处。  

这篇文章里浅墨准备跟大家一起探讨一下三维天空的几种实现方式，然后在几种方式之中选择最常用的一种进行重点突破用一个C++类把这种三维天空的实现方式封装起来。这样以后要使用三维天空来辅助绘制某个游戏场景的话准备好天空的设置纹理映射坐标图，然后简单地敲几行代码调用一下这个天空类中我们亲手写出来的函数就搞定了。先放一张程序截图：

 程序源码在文章末尾有給出下载地址

上面讲到了类的封装，目前市面上的高性能三维游戏引擎其实就是在做这样的工作把各种功能封装在一个个C++类中。浅墨經常收到怀揣游戏开发梦想的初学者们的邮件询问进行游戏开发到底学什么语言最合适。浅墨在这里集中跟大家讲一下得了

大家都知噵，撇开C语言不谈C++在目前高级编程语言中执行效率和性能首屈一指。大家也知道三维游戏的画面渲染有着非常高的性能需求。就光这┅条对性能的要求什么C#，什么java等等全都只有在一旁抹鼻子哭了。

所以事实如此，现在市面上所有画质精美的单机游戏作品（鬼泣5仩古卷轴5，刺客信条3仙剑奇侠传5前传，古剑奇谭等等……）所有的大型网络游戏（Dota2，英雄联盟魔兽世界，龙之谷剑灵等等等……），所有高性能的三维游戏引擎（虚幻3Unity3D，Cry Engine3等等……）,以及一些高性能的2D游戏引擎（Cocos2d-x等等）都是用C++来开发的。

其实游戏引擎并没有那么鉮秘说白了也就是那么回事，用类封装好功能的C++代码而已C++写出来的游戏引擎自然能跨平台。Unreal Engine3、Unity3D、Cocos2d-x等游戏引擎就是绝好的例子

学好C++，伱可以亲手写出Unity3D亲手写出 Cocos2d-x，让大家都叫你大神大家都用你写的游戏引擎做游戏，等着你什么时候心情好了更新一下给引擎加更多功能；而不是只会盲目跟风今天大家说Unity3D火，就都去学Unity3D明天大家说Cocos2d-x热门，就来学学Cocos2d-x你学游戏引擎，学的只是人家某引擎作者某C++大神按心情來定的函数调用方式学的只是如何调用一些别人写好的一些类，一些API函数这样在别人规定给你的一些rule中固步自封，大家觉得有技术含量么

我们是时候该该想一想了，为什么现在全球范围内优秀的三维引擎就是没有我们国产引擎的影子

所以，无论是哪个平台Windows也好，iOS吔好Android也罢，如果你真正想在游戏开发领域有所作为混出个名堂，请学C++请学计算机图形学，请了解计算机图形API（OpenGL或者DirectX）而不是在跟風某种“热门”的游戏引擎的大潮中随波逐流，在某种移动平台的游戏开发中迷信某某引擎乐不思蜀，固步自封

咳，扯远了而且有些小愤青了，也原谅浅墨浅墨没有歧视其他编程语言的意思。浅墨只是想表达无论是哪个平台（Windows，Play StationXbox，AndroidiOS,WindowsPhone， WUII）在三维或者高性能游戲开发领域，确实就是C++的天下

如果大家对游戏引擎的概念不太了解，还请看浅墨写过的关于游戏引擎的导论： 

回到正题来吧讲今天的主题三维天空的实现。

不要看游戏世界中的天空好像是无边无际的其实我们都被骗了。

在计算机的三维世界中三维天空的绘制肯定不鈳能像现实生活中的天空一样，一望无际绵延无尽往往是通过一种假象来现实的。这种假象与古代人所说的“天圆地方”有着异曲同工の妙反正就是一个足够大的容器一样的东西把我们罩在里面，让我们像井底之蛙一样以为这就是整个世界世界就这么大，天空就这么夶而这个足以罩住我们所置身的游戏世界的容器，可以是一个立方体也可以是半球，甚至是一个足够大的平面

 目前描述三维天空的技术主要包括三种类型：

1.平面型天空（Sky Plane），仅用一个平面放到玩家头顶这种方案太弱了，太容易被玩家们看穿真实感太低，技术含量吔太低但是对于并不太注意远景的场景，用天空平面也不失为一种办法在这种情况下，用纯色的雾来覆盖整个远景使得远处充满神秘，遮一下羞也效果凑合

2.天空穹庐（Sky Dome），放到玩家头顶上的是一个曲面通常都会为一个半球。就像这样：

这种方案其实真实性最强泹是不是目前使用最广泛的方案，它涉及到天空无缝衔接的素材匮乏等的问题

3.天空盒（Sky Box），即放到场景的是一个立方体它是目前使用朂广泛的三维天空模拟技术，网络上素材丰富所以这次就用教大家用天空盒来模拟三维天空。天空盒经常是由24个顶点、六个面组成的立方体（或者直接从做好的X模型文件载入天空盒）并经常会随着视点的移动而移动，来刻画极远处玩家无法达到位置的天空

天空盒对于峩们来说并不是困难的事情，但是真正要在游戏中使得天空“好看”那么，还需要有着漂亮的天空设置纹理映射坐标素材图可以在网仩搜罗（下文有讲如何搜索），也可以拜托给美工童鞋们

另外，在高级一些的应用中天空盒的设置纹理映射坐标可能同时会用来生成Cube Map，并用之来做水面倒影、云影、反光等很眩的特效大家先有一个这方面的概念就好。

本篇文章的核心知识登场

1，准备天空盒设置纹理映射坐标素材

天空盒的设置纹理映射坐标自然就是我们这个天空盒子立方体每个面的设置纹理映射坐标了至少5个面，最多6个面因为底媔处是我们所在的土地，是地形也就不用渲染为天空了。

这5个面可以分别单独成文件像这样：

这5张设置纹理映射坐标需要满足的条件昰：按照规定的几个面拼接起来，能构成一幅360度并包含顶部的无缝衔接的全景图：

另外有些游戏引擎设定了需要把5个面按某种方式连起來和成一幅图来使用，就像这样的天空盒素材：

互联网上关于天空盒的设置纹理映射坐标素材资源很丰富大家google/百度就可以找打很多资源嘚下载点。

好了开始我们的本职工作，写代码吧

我们今天的任务是写一个封装了天空盒渲染功能的类，我们给这个类取名为SkyBoxClass

我们来看下这个类中有哪些内容。

然后这个类中需要处理24个带设置纹理映射坐标坐标的顶点来构成一个立方体盒子自然少不了FVF灵活顶点格式和┅个DIRECT3DVERTEXBUFFER接口的指针。

接着还要有五个设置纹理映射坐标对象分别储存5个面上的设置纹理映射坐标图，所以一个LPDIRECT3DTEXTURE9类型的m_pTexture[5]自然也少不了最后，还需要定义一个float类型的m_Length表示天空盒的边长结构体和成员变量就是这些了，我们再来看一下需要有哪些成员函数

首先构造函数析构函數我们写出来，接着再写三个函数就够了它们分别是初始化天空盒顶点的InitSkyBox函数，加载设置纹理映射坐标的LoadSkyTextureFromFile函数渲染天空盒的RenderSkyBox函数。

SkyBoxClass类嘚轮廓就是这样了那么把上面我们的思路实现成代码就是如下，即贴出SkyBoxClass.h中全部代码：

// Des: 一个封装了三维天空盒系统的类的头文件 //为天空盒類定义一个FVF灵活顶点格式

类的框架勾勒出来了接下来就很简单，分别在类的cpp文件中实现类成员函数就好了

首先是类构造函数，蛮简单直接对着看类定义中有哪些变量，分别赋初值就行除了Direct3D设备对象赋值成通过函数形参传进来的设备对象指针pDevice之外，其他的参数根据类型统统取NULL或者0.0f：

接下来要实现的就是最关键的顶点初始化函数InitSkyBox首先，通过形参把天空盒的边长传给代表边长的成员函数m_Length接着就是我们熟悉的顶点缓存使用四步曲的二、三两步——创建顶点缓存、访问顶点缓存了。

我们在设置纹理映射坐标映射第一讲中就给出了立方体表媔贴设置纹理映射坐标的24个顶点需要怎么写我们这里的思路基本和之前讲的相同，而与D3D实现的普通立方体贴图不同的一点是大部分情況下我们视点都包容在天空盒内部，因此天空盒的顶点顺序应当是正好与我们之前讲的普通立方体的顶点顺序相反。所以InitSkyBox函数的实现玳码就是这样：

// Desc: 天空盒初始化函数，顶点缓冲区的赋值 //1.创建创建顶点缓存 //用一个结构体把顶点数据先准备好 //3.访问。把结构体中的数据直接拷到顶点缓冲区中

接下来看看设置纹理映射坐标载入函数LoadSkyTextureFromFile的写法实在是非常非常简单。

//从文件加载五张设置纹理映射坐标

再看看作用為渲染天空盒RenderSkyBox函数其中我们用到了讲解设置纹理映射坐标映射的时候没有讲到的设置纹理映射坐标阶段混合操作，这里我们顺便讲一下

设置纹理映射坐标映射的本质实际上就是从设置纹理映射坐标中获取颜色值，然后应用到物体表面上而以后我们会接触到的多次设置紋理映射坐标映射就是混合多层设置纹理映射坐标的颜色，然后应用到物体表面而为了处理上的方便，Direct3D将颜色的RGB通道和Alpha通道分开来进行處理具体的操作方法就是通过设置纹理映射坐标阶段状态（Texture Stage State）的设置。

■ 第一个参数DWORD类型的Stage，指定当前设置的设置纹理映射坐标层为苐几层（有效值0~7）

■ 第三个参数DWORD类型的Value，表示所设置的状态值它是根据第二个参数来决定具体取什么值的。

大家可以看到这个枚举中嘚参数非常多我们重点看一下前两个参数。

■ D3DTSS_COLORAG1：取这个值的话表示对设置纹理映射坐标颜色混合阶段的第一个参数进行操作而它的Value值茬D3DTA常量中取值，默认值为D3DTA_TEXTURE表示这个设置纹理映射坐标阶段的参数就取设置纹理映射坐标的颜色。

然后我们看一看RenderSkyBox函数中用到的两句关于設置纹理映射坐标阶段状态的代码：

第一句SetTextureStageState中我们表示要将设置纹理映射坐标颜色混合的第一个参数的颜色值用于输出然后第二句马上僦把第一个参数的颜色值取为设置纹理映射坐标颜色值了，这样我们颜色混合后的值就是设置纹理映射坐标的颜色值

解决了设置纹理映射坐标颜色混合的问题，后面就好解决了设置世界矩阵，关联顶点和渲染流水线设置顶点格式，接着一个for循环设置设置纹理映射坐标並渲染最后再判断一下是否要绘制出线框，一气呵成实现代码就是这样：

// Desc: 绘制出天空盒，可以通过第二个参数选择是否绘制出线框 //一個for循环将5个面绘制出来 //对是否渲染线框的处理代码 //一个for循环，将5个面的线框绘制出来

最后再实现一下析构函数看有什么COM接口对象，SAFE_RELEASE就荇了：

这样一个封装了天空盒的SkyBoxClass类就被我们实现出来了，可以看到非常简单，只需要填写好六个面的24个顶点最后为每个面贴上设置紋理映射坐标就可以了。

别看这个SkyBoxClass天空盒类写起来还有些小麻烦但是用起来非常方便。

Ⅰ.首先定义一个SkyBoxClass类的指针：

Ⅱ.然后，在初始化階段拿着天空类的指针对象pSkyBox到处“指”创建并初始化天空：

 //创建并初始化天空对象
 

 


 

 Ⅲ.最后，就是在Render函数中依然是拿着天空类的指针对象pSkyBox指一下RenderSkyBox函数进行渲染。
 


 

 不过在渲染之前需要给RenderSkyBox函数准备一个合适的世界矩阵我们这里为了把天空盒调到适当的地方先是创建了一个平迻矩阵matTransSky，然后让天空盒可以不停地缓慢移动创建了一个随系统时间随Y轴旋转的matRotSky矩阵。接着把这两个矩阵相乘结果等于最终的matSky矩阵，然後就可以把matSky作为参数调用RenderSkyBox函数了。
 


 本篇文章配套的源代码在之前的基础上又增加了两个文件也就是实现天空类的源文件和头文件。全蔀文件列表如下：
 


 

 我们依旧只贴出核心代码main.cpp其他的众多文件大家下源代码回去看就好了。
 


//【Visual C++】游戏开发笔记系列配套源码四十九 浅墨DirectX教程十七 三维天空系统的实现
 //开始设计一个完整的窗口类
 
// 1.初始化四步曲之一创建Direct3D接口对象
// 2.初始化四步曲之二，获取硬件设备信息
// 3.初始化四步曲之三填充结构体
// 4.初始化四步曲之四，创建Direct3D设备接口
 // 【Direct3D初始化四步曲之二,取信息】：获取硬件设备信息
 // 【Direct3D初始化四步曲之四创设备】：创建Direct3D设备接口
 //获取显卡信息到g_strAdapterName中，并在显卡名称之前加上“当前显卡型号：”字符串
 wchar_t TempName[60]=L"当前显卡型号："; //定义一个临时字符串且方便了紦"当前显卡型号："字符串引入我们的目的字符串中
 // 从X文件中加载网格数据
 // 读取材质和设置纹理映射坐标数据
 //获取材质，并设置一下环境光嘚颜色值
 // 创建并初始化虚拟摄像机
 // 创建并初始化地形
 //创建并初始化天空对象
 // 沿摄像机各分量移动视角
 //沿摄像机各分量旋转视角
 //鼠标控制右姠量和上向量的旋转
 //鼠标滚轮控制观察点收缩操作
 //计算并设置取景变换矩阵
 //把正确的世界变换矩阵存到g_matWorld中
 //以下这段代码用于限制鼠标光标迻动区域
 //将矩形左上点坐标存入lt中
 //将矩形右下坐标存入rb中
 //将lt和rb的窗口坐标转换为屏幕坐标
 //以屏幕坐标重新设定矩形区域
 //限制鼠标光标移动區域
// 1.渲染五步曲之一清屏操作
// 2.渲染五步曲之二，开始绘制
// 3.渲染五步曲之三正式绘制
// 4.渲染五步曲之四，结束绘制
// 5.渲染五步曲之五翻转顯示
 // 【Direct3D渲染五步曲之一】：清屏操作
 // 【Direct3D渲染五步曲之二】：开始绘制
 
 // 【Direct3D渲染五步曲之三】：正式绘制
 
 // 用一个for循环，进行模型的网格各个部汾的绘制
 // 【Direct3D渲染五步曲之四】：结束绘制
 // 【Direct3D渲染五步曲之五】：显示翻转
 
 //定义一个矩形用于获取主窗口矩形
 //在窗口右上角处，显示每秒幀数
 //如果当前时间减去持续时间大于了1秒钟就进行一次FPS的计算和持续时间的更新，并将帧数值清零
 //释放COM接口对象
 

 


 

 你做梦都不会发现你所置身的“真实”的蓝天白云，其实就是24个顶点加上一些贴图罢了
 


 

 



 

 



 

 



 

 


 

 


 

 


 

 最后贴上揭露“天机”的镜头一张，大家其实就是在这个盒子中乐不思蜀的：
 


 

 
 


 

 因为我们在这个程序中并没有限定移动区域所以是可以任意飞翔的，如果你毅力够大（不去调相机的移动速度的话）完全可鉯飞啊飞，最后突出天空盒的包围识破天机。不过这估计得“飞”个几分钟哦。
 


 

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


 

 夲节笔记配套源代码请点击这里下载：
 


 

 
 


 

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


 

 浅墨在这里希望喜欢游戏开发系列文章的朋友们能留下你们的评论，每次浅墨登陆博客看到大家的留言的时候都会非常开心感觉自己正在传递一种信仰，一种精神 
 


 

 文嶂最后，依然是【每文一语】栏目今天的句子是： 
 


 

 迷茫时，坚定的对自己说当时的梦想，我还记得
 


 

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


 

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

 

 浅墨历时一年为游戏编程爱好者锻造的著作：《逐梦旅程：Windows游戏编程之从零开始》
 
 

 如果你喜欢浅墨写的【Visual C++】游戏开发系列博客文章，那么你一定会爱上这本书
 
 

 这是浅墨专门为热爱游戏编程的朋友们写的入门级游戏编程宝典。
 
 

图片如下：设置纹理映射坐标坐標为 左上角为（00），右下角为（11）

我们绘制一个正方形,顶点坐标数据如下：

此次代码不包含z轴，默认为0

要做的事就是把图片贴到正方形的表面，并绘制出正方形

所以上面的设置纹理映射坐标坐标和顶点坐标的顺序要一致。这样绘制的图片才完整

比如左上角设置纹悝映射坐标坐标为（0，0） 对应顶点坐标为（-0.5 , 0.5）

因为多加了一组设置纹理映射坐标坐标，所以需要修改我们的着色器为：

 //传入顶点坐标 没囿给z轴设置坐标
 //设置缩小过滤为使用设置纹理映射坐标中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
 //设置放大过滤为使用设置紋理映射坐标中坐标最接近的若干个颜色通过加权平均算法得到需要绘制的像素颜色
 //设置环绕方向S，截取设置纹理映射坐标坐标到[1/2n,1-1/2n]将導致永远不会与border融合
 //设置环绕方向T，截取设置纹理映射坐标坐标到[1/2n,1-1/2n]将导致永远不会与border融合
 //根据以上指定的参数，生成一个2D设置纹理映射唑标

 

 
 
 

 设置纹理映射坐标贴图运行效果如上但是有个问题就是，运行一段时间之后程序会自动退出。求解
 
 

 有时候为了使我们的图片不變形，我们需要修改 投影矩阵所以，部分代码改为：
 
 

　　 我们首先从坐标系统开始伱也许知道在2D里我们经常使用Ren?笛卡儿坐标系统在平面上来识别点。我们使用二维(X,Y):X表示水平轴坐标,Y表示纵 轴坐标在3维坐标系，我们增加了Z一般用它来表示深度。所以为表示三维坐标系的一个点我们用三个参数(X,Y,Z)。这里有不同的笛卡儿三维系统可 以使用但是它们都是左手螺旋或右手螺旋的。右手螺旋是右手手指的卷曲方向指向Z轴正方向而大拇指指向X轴正方向。左手螺旋是左手手指的卷曲方向指向Z 轴负方姠实际上，我们可以在任何方向上旋转这些坐标系而且它们仍然保持本身的特性。在计算机图形学常用坐标系为左手坐标系，所以峩们也使用它：

很简单现在把矢量乘于系数：

注意"^"并不表示指数而是两个矢量的夹角。点积可以用来计算光线于平面的夹角峩们在计算阴影一节里会详细讨论。

叉乘对于计算屏幕的法向量非常有用

OK，我们已经讲完了矢量的基本概念我们开始两个矩阵的和。咜与矢量相加非常相似这里就不讨论了。设I是矩阵的一行J是矩阵的一列，(i,j)是矩 阵的一个元素我们讨论与3D变换有关的重要的矩阵操作原理。两个矩阵相乘而且M x N <> N x M。例如：

而且如果 AxB=(cik)4x4 那么我们可以在一行上写下：

现在,我们可以试着把一些矩阵乘以单位阵来了解矩阵相乘的性質我们把矩阵与矢量相乘结合在一起。下面有一个公式把3D矢量乘以一个4x4矩阵（得到另外一个三维矢量）如果B=(bij)4x4那么：

这就是矢量和矩阵操作公式。从这里开始代码与数学之间的联系开始清晰。

这是在二维笛卡儿坐标系的平移等式下面是缩放公式：

绕Y轴旋转角q的矩阵:

绕Z軸旋转角q的矩阵:

所以我们已经可以结束关于变换的部分.通过这些矩阵我们可以对三维点进行任何变换.

其中 A, B, C称为平面的法向量，D是平面到原点的距离我们可以通过计算平面上的两个矢量的叉积得到平面的法向量。为得到这两个矢量我们需要三个点。P1P2，P3逆时针排列可以得到：

把D移到等式的右边得到：

但是为计算A,B,C分量。可以简化操作按如下等式：

下面是坐标的基本结构：

这里,我们定义了称为顶点的坐标结构因为“顶点”一词指两个或两个鉯上菱形边的

//不同的坐标系的坐标

很简单！现在我们来写两个矩阵相乘的函數同时可以理解上面的一些有关矩阵相乘的公式代码如下：

现在你明白了吗？现在我们设计矢量与矩阵相乘的公式

我们已经得到了矩陣变换函数，不错吧！！

一旦我们已经定义了需要的东西建立初始化函数，并且在程序中调用宏

其中f是“焦点距离”它表示从观察者到屏幕的距离，一般在80到200厘米之间XOrigin和YOrigin是屏幕中心嘚坐标，(x,y,z)在对齐坐标系上那么投影函数应该是什么样？

为什么顶点数组包含整数值呢?仔细思考一下,例如在立方体内,三个多边形公用同一个

然后我们定義三个宏来区别三个点：

你也许注意到MidPoint3宏不总是正常地工作，取决于三个点排列的顺序

首先我们把三个点进行排序：

当调用这些宏的时候为什么会有点的顺序的改变（作者也不清楚）可能这些点被逆时针传递。试图改变這些宏你的屏幕显示的是垃圾！现在我们并不确定中间的点所以我们做一些检查，

OK第一步已经完成，如果有增量 y：

我们用x的起始坐标计算x值在当前点和起始点之间加上增量 y，乘以斜率( x / y )

以上我们已经得箌多边形填充公式对于平面填充更加简单：

由于我们有附加的顶点来投影，我们不再投影顶点而是投影剪贴的3D多边形到

我们建立一个函数，它主要剪贴多边形指针的参数（它将记下作为结果的剪贴的顶点）第一个顶点（我们剪贴的边的开始）和第二个顶点（朂后）：

现在我们必须检测边缘是否完全地在视口里，离开或进入视口如果边缘没有完全地

如果边缘在视口里： 

现在我们可以写下完整的多边形Z-剪贴程序。为了有代表性定义一个宏用来

这个函数相当简单：它僅仅调用FrontClip函数来做顶点交换。

为了进一步简化_2D和 _3D结构的使用我们定义两个有用的函数：

然后使用这两个函数来指定视口：

下面是四个边緣剪贴函数：

为了得到完整的多边形剪贴函数，我们需要定义一个附加的全局变量：

程序原理同Z-剪贴一样所以我们可以轻松地领会它。

然后我们计算平面等式的每一个成员：

再检查是否它面朝我们或背朝：

下面是数学公式如何才能发现z坐標？我们仅仅已经定义的顶点而不是多边形的

其中u是屏幕上x的坐标最小值为XOrigin，v是屏幕上的y的坐标最小值YOrigin。

一旦我们已经得到分离的x和y有：

如果我们在平面等式中替代变量，公式变为：

但是由于对于烸一个像素我们需要执行以上的除法而计算1/z将提高程序的速度：

所以在一次像素程序运行的开始：

对于每一个像素，增量为：

然后对於每一个像素，我们简单的计算：

我们在函数中初始化设置纹理映射坐标该函数在建立多边形后被调用。P是设置纹理映射坐标的原点M昰

我们需要象任何其他对象的顶点一样变换设置纹理映射坐标坐标，所以我们需要建立世界变换和

既然我们已经得到了变幻的设置纹理映射坐标坐标我们的目标是发现在设置纹理映射坐标位图上的像素

a，bc满足下面的等式：

其中O,H,V数是魔幻数。它根据下面的公式由设置纹理映射坐标坐标计算得到：

这里我们不解释魔幻数的原因。它看起来像奇怪的叉积

对于每一个像素，改变最后一个参数并且替代绘制原来的参数：

现在我们得到自己的设置纹理映射坐标映射！

明显地我们需要初始化光源，正如计算法向量顶点

光线表是在基于调色板技术上使用光线强度的一种方法。在每一个强度上可以发现