在线图文包装_Mariana5D Designer学习指南_006基础篇之立方体纹理的使用.docx

立方体纹理的使用
新奥特福建公司 林健 ibigmouse@

除了通常的二维图像纹理，在Mariana5D Designer中还使用了一种特殊的纹理称为“立方体纹理”，立方体纹理实际上就是图像处理领域中广泛应用的“CubeMap”（立方体映射贴图）。CubeMap是一种环境映射贴图（Enviroment Map）技术，一般用作提供反射环境的“天空盒”，可以让应用此纹理的三维模型表面呈现四周环境的反射效果。渲染时引擎先将6张分别代表上、下、左、右、前、后方向的纹理拼合成虚拟立方体来构造全景环境，再根据模型表面的法线方向与摄像机的位置关系来确定模型表面如何对环境的进行反射映射，得到的结果好似将一个不锈钢材质的物体放置在真实环境下所获得的反射效果。

模拟物体在真实环境下的反射效果是非常耗费系统资源的，在现有的计算机硬件条件下很难实现实时渲染输出，而Mariana5D在线图文包装引入Cubemap（立方体纹理）技术后只需要在模型上应用Cubemap（立方体纹理）贴图，就可以以很少的资源开销模拟出物体在真实环境下的反射效果，犹如“身临其境”，而且能保证画面实时渲染输出。

一：立方体纹理与普通二维图像纹理的区别：

刚接触立方体纹理的用户往往都有这样的疑问：究竟立方体纹理与常规的二维图像纹理在显示效果上有什么差异？这里我们先做个对比试验：

1：制作一个简单的球体，调整球体属性，设置“镶嵌程度”为100，将球体材质属性中“正面参数”下的“自发光”参数设置为( r 150, g 150,b 150 如图1)，使球体看上去会更圆一点、更亮一点(如图2)。

2：准备好两种类型的纹理，显示的都是相同的公园环境，一种是普通的二维图像纹理（如图3），将纹理直接拖拽到球体节点上，呈现效果如图5；第二种是相同环境下的立方体纹理（如图4），是由6张图片组成的图片组，使用时按照右、左、上、下、前、后顺序依次选中图片，然后将6张图片一起拖拽到球体节点上形成立方体纹理，最终呈现效果如图6。

图1 球体 图2 材质自发光参数 图3 二维图像纹理

图4 立方体纹理(6张)

图5 平面纹理效果 图6 立方体纹理效果 图7 立方体纹理属性

比较图5和图6中的显示效果，我们可以明显地看出区别：图5中球体上的纹理毫无立体感，感觉是将纹理直接贴在一平面圆板上，当旋转摄像机时，还能看到因为采样过度而在球体的南北两极出现了纹理扭曲，旋转球体时还会发现纹理的接缝；而图6中球体表面的纹理却立体感十足，好像真的将球体放置于公园环境里。我们可以在立方体纹理属性的“模式选择”标签(如图7)下调整X/Y/Z三个轴向的旋转角度，当角度数值改变时会感觉到纹理像在球体表面漫游一般（如图8），而且球体上呈现的纹理是无缝连续的，不论如何旋转球体，都看不到南北两极处存在纹理扭曲，也找不到纹理接缝。

图8 分别调整X\Y\Z三个轴向旋转数值效果

二：立方体纹理如何进行纹理映射

前文我们讲到渲染引擎在处理立方体纹理时，会使用6张图片建立类似虚拟立方体的机制以用于纹理映射，为了详细说明立方体纹理如何在模型表面进行纹理映射，我们制作了6张边界明显的色块图来当做立方体纹理测试图，色块图可以使用Photoshop或Gtx制作 (如图9)，每张色块图大小为512x512，分别指定一种醒目的颜色，为红、绿、蓝、青、品红、黄6色，且均带有朝向文字指示，方便我们后面分析判断。将做好的立方体纹理分别贴在正方体、球体和茶壶模型上，正方体、球体使用Mariana5D Designer生成，茶壶使用3dsmax制作，效果如图10，由于6张色块图反差足够大，我们就能很清晰地看到模型上立方体纹理的边界。

图9立方体纹理测试图

图10 立方体纹理贴在正方体、球体、茶壶模型上的效果

首先使用“旋转摄像机”工具从不角度观察正方体，会发现正方体上的每个面都能反射出完整的由6张色块图拼合成的图案，随着摄像机旋转角度的改变，图案的内容也会随之改变，仔细观察还会发现反射出的图案确实是以立方体的样式呈现的，这说明正方体的6个面与立方体纹理6张色块图片不存在一一对应关系，而是存在一定映射法则来控制产生正方体每个面上的纹理显示。在旋转摄像机或旋转正方体过程中还会发现不论哪个面只要朝向角度相同，反射得到的总是相同的图案，只有通过旋转立方体纹理X\Y\Z三个轴向上的纹理坐标才能改变纹理效果。继续使用“旋转摄像机”工具从不角度观察观察球体和茶壶，会发现不论如何旋转球体，所看到球体表面所呈现纹理图案几乎都是相同的，观察茶壶模型时，也能看到类似的效果，不论如何旋转茶壶，从摄像机看到的茶壶表面所呈现的图案几乎都没有改变，只是会随着壶身的转动在细节处发生轻微变形。

为什么会出现上述的现象？这是由于立方体纹理的计算结果主要由虚拟立方体的初始纹理属性、物体表面法线方向、摄像机位置三个要素决定，不论是正方体、球体还是茶壶模型，包裹住模型的虚拟立方体的初始纹理属性是一样的，之所以在三种物体上感觉图案不一样，是由于三种物体表面的法线方向各有不同，尺寸也不一样，相应的得到的反射结果当然也就不一样，如果只旋转模型本身，由于虚拟立方体没变，看到的结果当然是面向摄像机一面的纹理保持相对不变，模型旋转运动时，物体表面的法线分布发生了变化，表面纹理当然会发生相应变形，而改变立方体纹理X\Y\Z三个轴向上的纹理坐标的实质是改变了虚拟立方体上的纹理属性。明白了上述规则，以后我们就能通过控制6张纹理图像来控制模型表面的纹理显示。

三、立方体纹理的格式

立方体纹理不是随意的6张纹理的组合，6张纹理之间必须有连续性，形成的虚拟立方体必须是水平视角0-360度，垂直视角-90-+90度的全方位图像，这种图像我们一般称为全景图。全景图有多种存储格式，不同的全景图制作软件输出的全景图图片格式也各不相同，其中最常见的就是前文介绍的6张独立的立方体面片格式，其次还有水平条形(如图11)、垂直条形(如图12)、垂直十字(如图13)、水平十字(如图14)、极坐标投影(如图15)、矩形球面投影(或称柱面投影 如图16)、墨卡托投影等等(如图17)，这些格式都可以通过全景图软件(例如pano2VR)随意转换。图18列出了前文中我们使用过的公园环境的立方体纹理的其余7种变形形态。

图11 水平条形 图12垂直条形 图13垂直十字 图14 水平十字

图15 极坐标投影 图16 矩形球面(柱面)投影 图17 墨卡托投影

图18 公园环境立方体纹理7种变形形态

Mariana5D Designer可以支持立方体面片和水平条形两种格式的全景图，在默认状态下使用立方体面片格式，这种格式使用起来非常不方便，主要是每次使用时都需要背“右、左、上、下、前、后”口诀，如果点选图片的顺序出错，就会造成形成的立方体包裹发生错位，多一张或少一张，也会造成失败，贴上去时就不会形成立方体纹理，而是变成同时叠加多张纹理。还有如果没有在制作时就赋予规范的命名，使用者拿到6张图片后真不知道哪张是前，哪张是后。Mariana5D Designer在1.6版本后开始支持水平条形格式的立方体纹理，很好地解决了这个问题，虽然必须事先使用Photoshop将文件格式转换为dds，但制作好的立方体纹理是一张单独的图片，不需要背口诀，使用起来非常方便，下面举例简单介绍一下转换流程：

1：去Nvidia官方网站下载并安装Photoshop DDS插件（搜索Nvidia Photoshop DDS Plugin），安装后打开Photoshop，打开任意一张图片，选择“存储为”，在弹出窗口中的格式选项中如果能找到“D3D/DDS (*.DDS;*.DDS)”选项(如图19)就证明插件安装成功。

2：在Photoshop中打开图4中的6张立方体图片，将6张图片按照右、左、上、下、前、后的顺序依次拼接。形成一张水平排列的长图，注意拼接不能有缝隙，还必须保证长宽的数值均是4的倍数，正确的话长度会是宽的6倍，如果觉得麻烦也可以使用pano2VR进行转换，转换时需要注意：pano2VR读入6个立方体面片的顺序是前、右、后、左、上、下，如果按照这个顺序转换出的立方体纹理在Mariana5D Designer使用时纹理会错位，其实只要在pano2VR输入窗口中强制按照右、左、上、下、前、后顺序读入对应方向立方体面片即可保证输出正确。

图19 dds格式选项 图20 nvidia dds格式选项

3：点击文件菜单下的“存储为”，输入文件名“水平TEST”，选择D3D/DDS格式，可以使用带纹理压缩功能的DXT1、DXT3、DXT5预设，也可以选择无压缩的“RGB 8.8.8”或“ARGB 8.8.8.8”预设(如图20)，纹理类型必须设置为“Cube Map”，当选择DXT1/DXT3/DXT5预设时需将“MIP Map Generation”设置为“Generation Mip maps”，当选择“RGB 8.8.8”或“ARGB 8.8.8.8” 预设时需将“MIP Map Generation设置为“No Mip maps”，单击“Save”保存图片，立方体纹理制作完成。

4：在Mariana5D Designer中简单添加一个“飘旗”(如图21)物体，直接将立方体纹理“水平TEST.DDS”拖拽到物体上，呈现效果如图22。

图21 旗飘 图22 添加了立方体纹理后的旗飘效果

4：立方体纹理的制作

既然由全景图转换而来的立方体纹理效果那么出色，那么有什么办法可以定制这些全景图呢？其实全景图并不是靠数码相机一次拍摄就能轻松获得的，专业一点做法是使用单反数码相机配合鱼眼镜头以相机为中心拍摄水平一圈4张和天地两张照片，再使用全景软件进行修改、缝合，但这种做法费用投入过高，而且对拍摄者还有一定的技术要求；还有一种方法是：在三脚架上固定一个大个的不锈钢圆球，然后在距离圆球稍远处架设一部数码相机，让数码相机镜头聚焦圆球进行拍摄，以圆球为中心，相机与圆球的距离为半径画一个圆周，将圆周若干等分，在每个等分点上拍摄一张照片，圆周分得越细越好，照片越多合成的效果也会越好，然后使用Photoshop将相机和放球的三脚架擦除，再将这些照片放在全景图软件中进行合成。当然上述方法只是简单介绍，实际上操作起来相当复杂、繁琐。在制作场景时，我们一般很难在素材库中挑选到合适的立方体纹理，其实在Mariana5D Designer的实际应用中很多时候并不需要完美的全景照片，只需要能模拟出大概的全景图像即可，切片法和使用Pano2VR合成就是两种变通的全景图制作方法：

1):切片法制作全景图：

如果将立方体纹理像纸盒一样展开，可以得到一张平面图，如果将平面图中的缺块补齐，可以获得一张完整的，横纵比为4：3的图片，那么倒过来想，如果我们得到一张4:3比例的大图，并按照图23中所示划分为12等分，那么将其中编号为2、5、6、7、8、10的图片块进行裁剪，就能得到6片完整的方形立方体纹理。经多次实验，得到图24的参数表，只需要在加工前把图片分辨率缩放到表中左边相应的尺寸，剪裁后即可得到的右边尺寸分辨率的立方体纹理。

图23 切片分割设置 图24 切片参数一览表

我们找到一张天空的照片(如图25)，按要求将其转换为立方体纹理，具体操作步骤如下：

图25 天空图片 图26 划分切片设置

1：由于原始的天空图片的分辨率为962x779，并不标准，查看“切片参数一览表”，找到最相近的分辨率为1024x768，使用Photoshop的缩放和裁剪工具加工图片，使之符合分辨率要求。

2：在Photoshop中使用切片工具，将天空图片水平划分3份，垂直划分4份(参数设置如图26，27)。

3：在Photoshop的文件菜单中，选择存储为web所用格式(如图28)，快捷方式alt+shift+ctrl+s。

图27 划分切片设置 图28 存储为web所用格式

4：按ctrl+a全选所有12个切片，由于默认输出Gif格式只能存储256色，需要将图像格式修改为PNG-24(如图29)，选择存储，在弹出的存储对话框中，命名为“天空全景.png”，保存类型设置设置为“仅限图像(*.png)” (如图30)，选择保存，在保存文件夹内会出现一个images文件夹，Photoshop会将12张切片切割好保存在这里，删除多余的图片，只留下编号为2、5、6、7、8、10的图片，输出的每张图片的尺寸为256X256，立方体纹理制作完成。

图29 输出为png格式 图30 得到独立切片

5：在Mariana5D Designer中随意添加一个圆柱，用鼠标按照07、05、02、10、06、08的编号顺序应用立方体纹理，导入一个茶壶模型，使用相同方式应用立方体纹理，最终效果如图31。

图31 应用立方体纹理的圆柱体和茶壶

2:)使用Pano2VR软件合成立方体纹理

Pano2VR是由Garden Gnome Software开发的一款全景图处理软件，可以非常方便地转换各种格式的全景图。Pano2VR支持将柱状投射格式的全景图转换为水平条形格式及立方体面片格式全景图，由于柱状投射格式的全景图最接近二维图片，通常将普通的二维图片进行一些修改后当做柱状投射的全景图进行转换。二维图片的来源虽然非常丰富，但并不是任意的图片都适合转换成全景图，只有其中一部分转换为立方体纹理后能获得满意的效果，挑选图片时需要注意如下3点：

1：所选用的图片必须能裁剪到长宽比例为2:1，意味着需要保证图片在经过缩放、裁剪后不会过度扭曲变形。

2：经过裁剪后的图片的左边界与右边界必须拥有能修改成“连续性边界”的潜力。

3：经过裁剪后的图片的上方与下方纹理内容要简洁，色彩均匀、统一。

第一条要求主要是因为很多图片经过裁剪和缩放操作后，纹理会发生很大变形，经过合成后得到立方体纹理也会变得扭曲，所以挑选图片时可以选用那些用作桌面壁纸的大分辨率图片，尽量选择长宽比例为16:10或16:9的图片，这些图片在裁剪缩放为长宽比例为2:1的图片时产生的纹理扭曲较小，且可供裁剪的余地也大；第二条要求主要是因为合成后得到的立方体纹理在水平方向上必须是360度的环绕全景图，如果纹理不连续，在旋转立方体纹理时就会看到一条明显的边界接缝，当然只有少数图片的左右边界“天生”就是纹理连续的，大多需要使用photoshop进行修改；第三条要求主要是因为使用这种方法得到的立方体纹理中的上方向和下方向的纹理一定会产生难看的纹理扭曲，需要使用photoshop进行修正，如果图片的上方区域和下方区域内容过于复杂，得到的上下方向的立方体纹理就难以修改。以下举例说明：

1：待加工的图片尺寸为1680x1050(如图32)，是网上下载的标准22寸宽屏显示器所使用的壁纸，首先我们需要将图片进行修剪并将其宽高比修改为2:1，图片大小一般设置为2048X1024、1024X512、512X256，对应最终输出的每块立方体面片大小分别为512x512、256x256、128x128，这里选择将图片尺寸修改为1024x512(如图33)。

图32 天空图片 1680x1050 图33 天空图片 1024x512

2：接下来需要对图片左右边界进行“连续化”处理，先使用滤镜工具中的“位移”将图片水平方向偏移512像素(如图34)，此操作会将边界接缝调整到图片中心(如图35)以方便修改。在Photoshop中有很多工具可用于“缝合”接缝，推荐使用“历史画笔”工具和“内容识别填充”工具，修好后的图片效果如图36，会得到一张水平方向连续的纹理。根据前文的介绍，纹理正中区域在转换为立方体纹理后会默认输出为前视图，可以通过使用“位移”工具任意指定图片中某个区域为前视图，完成后保存为图片“天空.png”(如图37)。

图34 位移属性 图35 使用平移工具移动边界

图36 修补好边界后的图片 图37 图片最终效果

3：打开Pano2VR软件(如图38)，点击“选择输入”，在弹出的“输入”对话框中(如图39)设置“输入类型”为“矩形球面投影”，在“全景图”标签处导入刚才做好的图片，按确定，回到主界面，在“输出”标签下选择“变形”，再点击增加，在弹出的“变形/缩略图输出”窗口(如图40)中将“输出类型”设置为“水平条形”，图片尺寸设置为1536x256，然后指定一个输出路径，设置输出文件的文件名为“天空out.png”，最后点确定执行转换。

图38 Pano2VR软件界面 图39 输入对话框

图40 变形/缩略图输出窗口

4：转换过程很快，完成后得到的立方体纹理格式是“水平条形”的立方体纹理(如图41)，从图中我们可以看到代表上方向和下方向纹理的第5张、第6张图片在中心处发生了不同程度的纹理扭曲(如图42)，使用Photshop的“内容识别填充”进行修复，修复后的效果如图43，此时得到的水平条形结构的立方体纹理顺序是前、右、后、左、上、下，还需要在Photoshop中改为右、左、上、下、前、后才能保证正确显示，然后再按照前文讲过的“保存为dds格式的立方体纹理”的方法进行处理，将最终结果保存为“天空.DDS”，立方体纹理制作完成。

图41 水平条形格式立方体纹理

图42 修复前的上、下方向立方体面片 图43 修复后的上、下方向立方体面片

5：打开Mariana5D Designer，使用“星形”工具制作一个简单的五角星模型(如图43)，将做好的立方体纹理贴在五角星上，效果如图44，为五角星添加一个“玻璃效果”渲染特技，将立方体纹理设置为“反射折射图”并适当调整透明度，最终效果如图45，转动五角星，能呈现若隐若现的玻璃反射折射效果。

图43 五角星模型 图44 应用立方体纹理后的效果 图45 应用“玻璃反射”特技后的效果

注意：

1：使用切片法得到的立方体纹理不是全景图，不一定适合所有的模型，但素材易得，制作简单，在相当一部分模型上也能获得不错的效果。

2:使用使用Pano2VR软件合成的方法得到的立方体纹理要比切片法得到的立方体纹理更接近全景图，出来的效果也比切片法生成的立方体纹理的要好，缺点是制作上有些繁琐，而且由于图片个体差异，经常无法将图片修复得“天衣无缝”，用户在应用时可根据需要进行选择。

3：虽然理论上纹理尺寸越大，显示的效果越好，能显示的细节也越多，但大尺寸的立方体纹理需要占用大量的显存，如果在一个显示面积只有100x100的模型上应用512x512尺寸的立方体纹理显然是个严重的浪费，而在一个场景中往往有多个立方体纹理应用同时存在，这就需要我们尽量控制立方体纹理的尺寸以节约系统资源。

5：立方体纹理的应用

立方体纹理除了可以单独使用外，很多时候都是与渲染特技配合使用产生效果，在Mariana5D Designer中的“渲染效果”目录下有很多渲染特技必须配合立方体纹理使用，例如玻璃效果、高奇金属凹凸反射、金属反射、反射、折射、海面效果等等，这些特技我们将专门拿出章节来讲解，以下是几个典型的立方体纹理特技效果。

油漆特效

玻璃特效

金属反射特效 金属特技(香槟金金属效果)

高奇金属凹凸反射特效 有机玻璃特效