SuperMap iClient3D for WebGL实现白模镜面反射效果

作者：nannan

目录

前言

一、镜面反射材质的制作方法

1.1 SuperMap iDesktop 中直接修改模型数据材质

1.1.1 修改材质

1.1.2 生成缓存

1.2 SuperMap iDesktopX 中，基于材质管理器制作 PBR 材质

1.2.1 制作材质

1.2.2 导出材质

1.3 基于 SuperMap Hi-Fi 3D SDK for Unity 在游戏引擎中制作 PBR 材质，并导出使用

1.3.1 制作材质

1.3.2 导出材质

1.4 基于 SuperMap Hi-Fi 3D SDK for Unreal 在游戏引擎中制作 PBR 材质，并导出使用

1.4.1 生成缓存

1.4.2 UE修改材质

二、WebGL加载

2.1 加载白模

2.2 添加PBR材质

2.3 添加环境光

---

前言

       镜面反射是光线在遇到光滑表面时的一种现象，其中光线以特定的角度从表面反射，形成明亮的反射光。这种反射是按照反射定律进行的，即入射角等于反射角。

       在镜面反射中，光线以束状或平行的方式撞击表面，并以相同的角度反射。这种现象通常发生在光滑、平整的表面上，如镜子、金属、水面等。镜面反射产生的反射光线具有强烈的方向性和明亮的光束，可以清晰地显示出入射光源的位置和形状。

       镜面反射的强度和方向取决于入射光线的角度和表面的特性。如果入射角度与表面法线垂直，那么反射光线将以相同的角度反射，形成完美的镜面反射。然而，如果入射角度偏离垂直方向，反射光线将偏离原始光线的路径，并且反射强度会减弱。

       镜面反射在许多领域都有广泛的应用，包括光学、计算机图形学、摄影等。在计算机图形学中，镜面反射是模拟真实世界中光线与物体交互的重要技术，可以用来增强渲染的真实感和细节。通过模拟光线在镜面上的反射，可以实现逼真的光照效果，使物体看起来更加逼真和有质感。

       总而言之，镜面反射是光线在光滑表面上以特定角度反射的现象，产生明亮的反射光。它在许多领域中有重要的应用，用于增强渲染的真实感和细节。本文主要讲解白模镜面反射效果，镜面反射与材质密切相关，金属度越高，粗糙度越低，反射的效果就越明显。材质的制作方法有以下四种，下面我们来具体看看：

一、镜面反射材质的制作方法

1.1 SuperMap iDesktop 中直接修改模型数据材质

       该方法使用 SuperMap iDesktop（11i） 的材质编辑器，直接修改模型数据集中的材质。由于是直接修改了原始数据，所以生成的 s3m 缓存，在 SuperMap iDesktop 及 SuperMap iClient3D for WebGL 中加载，都显示为 PBR 材质的效果。不足之处是，如果要调整 PBR 材质效果，需要在 SuperMap iDesktop 中进行，并且调整完成之后，需要重新生成 s3m 缓存。

1.1.1 修改材质

        将模型数据集添加到球面场景中，定位到模型处。选中模型，右键【材质编辑】，点击【材质】，右侧会出现材质编辑对话框，直接将材质类型修改为 PBR 材质，然后根据需要调整材质参数。比如，金属度越高，粗糙度越低，反射的效果越明显。设置好后点击【保存到模型】即可。

1.1.2 生成缓存

       模型数据集右键【生成缓存】，可以按照默认的参数切缓存。（注意：设置为PBR材质后S3M版本不能设置为S3M1.0，S3M2.0及以后版本都支持PBR材质）

生成出来的缓存默认材质类型就是PBR。

桌面加载缓存效果如下图所示。保存场景，保存工作空间，在iServer上以工作空间的方式发布三维服务。

1.2 SuperMap iDesktopX 中，基于材质管理器制作 PBR 材质

       通过材质管理器，实现了材质的导入与导出，因此可以将已有的 PBR 材质，直接替换原始材质，应用于模型。 

1.2.1 制作材质

       点击【三维地理设计】-【材质】按钮，即可弹出材质管理器界面。本地材质库中，给出了一些 常见的材质类型，用户也可以新建 PBR 材质。 材质属性中的基色，金属，自发光等参数，与上一章节中的材质属性完全一致。

1.2.2 导出材质

       导出材质为.json 格式的材质，支持再导入 SuperMap iDesktopX，以便在不同项目， 不同用户之间复用材质。还支持在 SuperMap iClient3D for WebgL中使用，下一节会详细介绍。

1.3 基于 SuperMap Hi-Fi 3D SDK for Unity 在游戏引擎中制作 PBR 材质，并导出使用

       在 Unity 3D 游戏引擎中制作 PBR 材质，并将材质导出， 在 SuperMap iDesktopX 及 SuperMap iClient3D for WebGL 进行使用。 优点是可以借助游戏引擎的材质编辑器制作材质，并且可以使用游戏引擎已有的材质素材库。

1.3.1 制作材质

       Unity制作材质并导出材质的前提是在 Unity 中安装超图游戏引擎插件，下载地址SuperMap技术资源中心|为您提供全面的在线技术服务，具体参考插件包里的 SuperMap Hi-Fi 3D SDK for Unity 帮助文档的内容，这里不做详细说明。

1.3.2 导出材质

       Unity导出的PBR材质，可以用到普通缓存，将普通缓存变成PBR效果的缓存，主要是在webgl进行使用。单击选中需要导出的材质球，右键单击，在弹出的面板中，选择【SuperMap】-【导出材质json】选项；

弹出“”保存Json 路径”面板，选择保存的路径，即可保存成功。保存后在保存路径可以看到生成的.json文件

1.4 基于 SuperMap Hi-Fi 3D SDK for Unreal 在游戏引擎中制作 PBR 材质，并导出使用

       该方式，综合了上述方法的优点：

（1）可基于 Unreal Engine 的材质编辑器来制作材质；

（2）游戏引擎中，已经积累了丰富的材质资源，可直接拿来进行使用；

（3）通过替换材质的功能，优化模型效果，操作方便，可见性强；

（4）一键导出数据中引用的游戏引擎材质，将游戏引擎中的材质复制到 SuperMap iClient3D for WebGL 中；

（5）实现一套数据，在游戏引擎及 SuperMap iClient3D for WebGL 中具有相似的材质效果。

       该方法要求模型的对象及材质具有比较精细的颗粒度，适用于精细化调整模型的材质。比如在建筑模型中，要求地面，墙体，窗框，玻璃等是分开的，能够分别选择不同的对象进行材质的替换。一般 BIM 类型的数据都能满足要求，一些制作比较精细的城市精细模型，也可以使用该方法。在这里还是以上面的白模为例进行说明。

1.4.1 生成缓存

       在 SuperMap iDesktopX 中，使用右键-生成三维瓦片功能。生成缓存界面上，材质类 型选择 UE 材质。只有选择 UE 材质，后续在替换材质的时候才能获取到 S3M 缓存正确的材 质名称，以进行材质的替换。 由于生成的缓存需要带有法线及切线信息，以保证在 UE 中正确的显示效果，所以生成缓存需要使用新版本的桌面，SuperMap iDesktopX 需要是 11i(2023)(V11.1.1)。

生成缓存的.scp 文件中，"s3m:MaterialType" 的值为： "UEMaterial"。

添加到球面场景预览如下，可以看到两个模型球都比较光滑，是因为生成UE缓存重新计算了法线。

1.4.2 UE修改材质

      UE修改材质前提是在 Unreal Engine 中安装超图游戏引擎插件，下载地址SuperMap技术资源中心|为您提供全面的在线技术服务，具体参考插件包里的 SuperMap Hi-Fi 3D SDK for Unreal 帮助文档的内容，这里不做详细说明。    

      在UE中，选择某个文件夹右键，点击【添加/导入内容】-【材质】，会生成一个空材质球。

      选中材质球，在材质图表中右键，通过控制板里面搜索所有节点，这里输入con，在常量里选择Constant4Vector节点。

      建一个节点后，编辑这个节点颜色：双击这个节点的颜色区域，启动编辑颜色。记得将A调成1，颜色选择白色，点击【确定】，然后将该节点连接到基础颜色上。

       参考上面步骤右键新建一个常量为Constant的节点，点击该节点，左侧将值设为1，然后连接到Metallic金属材质上。

       参考上面步骤右键新建一个常量为Constant的节点，将该节点连接到材质球的粗糙度属性上。这样镜面反射的材质就制作好了。

在运行场景前先开启碰撞检测，然后运行场景，添加生成的UE白模缓存，定位。选择右侧菜单栏的【数据美化/材质编辑】，点击场景中要替换材质的模型，会看到数据美化/材质编辑弹出框中会显示原始材质信息，将新建好的材质球用鼠标拖拽到材质替换的框中，点击【保存】。

保存材质后，记得点击右侧菜单栏里的保存场景。

然后再数据美化/材质编辑属性框中选择材质导出，勾选修改材质的该图层，点击【确定】。

在缓存目录下会生成一个名为MaterialPackages的材质包。

打开该材质包文件夹，会看到有两个json文件，分别记录图层信息和材质信息。

打开该缓存的config文件，发现会新增一个“associateMaterialUrl”的属性，这里是关联材质包。

二、WebGL加载

2.1 加载白模

       本文1.1节、1.4节方法生成的缓存发布的三维服务在场景中只需一行代码就可以加载出来，有镜面反射的效果。代码与效果如下图所示：

viewer.scene.open('http://localhost:8090/iserver/services/3D-BaiMoJingMianFanSheXiaoGuo/rest/realspace');

图2.1.1 iDesktop直接修改模型材质后切缓存在前端的加载效果（参考1.1节）

       

图2.2.2 基于UE游戏引擎制作的PBR材质替换UE缓存材质后在前端的加载效果（参考1.4节）

       小编在测试中也生成了无材质的普通缓存，发布服务后，前端加载，为后续贴PBR材质做准备。下图是白模无材质时前端加载的效果图：

2.2 添加PBR材质

        这里代码添加的PBR材质是1.2节或者1.3节导出的材质，这两种方法导出的材质在前端加载代码一致，效果也一致。当然也支持对1.1、1.4节的缓存在前端重新设置材质。这里会发现四种方法制作的PBR材质在前端的渲染效果一样。

viewer = new SuperMap3D.Viewer('Container');
var promise = viewer.scene.open('http://localhost:8090/iserver/services/3D-BaiMoJingMianFanSheXiaoGuo/rest/realspace');

SuperMap3D.when(promise, function(layers) {
    var layer = viewer.scene.layers.find('白模无材质');
	layer.setPBRMaterialFromJSON("./data/pbr/Material.json");
});

2.3 添加环境光

       参考SuperMap iClient for WebGL加载HDR格式的环境光贴图-CSDN博客可知，需要HDR格式的环境光贴图，一般环境光贴图为 hdr 格式，与天空盒的原始图片类型相同。小编这里推荐一个下载网址，里面的天空盒素材可以免费使用：HDRIs • Poly Haven。

       点击选中其中某个资产，会进入下图页面。右侧为下载的参数，按照箭头只是操作。下载的时候，如果用作天空盒，为保证天空背景的清晰度，建议选择 4k 的分辨率。如果是作为本文的环境光贴图，建议选择2k即可。

       我们提供了格式转换的工具（链接：百度网盘 请输入提取码 
提取码：xirz ），支持将 hdr 格式的图片，转成 ktx2 格式的文件，并生成 带有球谐系数的 txt 文档。

转换后得到的结果如下：

     将 sh.txt 文件中的数值，设置给 scene.sphericalHarmonicCoefficients。 并在 scene.specularEnvironmentMaps 引用导出的.ktx2 文件。 具体截图和代码如下：

//Ktx参数
var L00 = new SuperMap3D.Cartesian3(0.616249561309814,  0.421498507261276,  0.526324093341827);
var L1_1 = new SuperMap3D.Cartesian3(0.387345433235168,  0.325144469738007,  0.483184158802032);
var L10 = new SuperMap3D.Cartesian3(0.242264628410339,  0.105249635875225,  0.090847678482533);
var L11 = new SuperMap3D.Cartesian3(-0.231861993670464, -0.096431933343410, -0.051784042268991);
var L2_2 = new SuperMap3D.Cartesian3(-0.019521847367287, -0.005637660622597,  0.001093475031666);
var L2_1 = new SuperMap3D.Cartesian3(0.082481838762760,  0.043283250182867,  0.047196645289660);
var L20 = new SuperMap3D.Cartesian3(0.018776653334498,  0.006989635527134,  0.002578776329756);
var L21 = new SuperMap3D.Cartesian3(-0.124479666352272, -0.005080182570964,  0.035791657865047);
var L22 = new SuperMap3D.Cartesian3(0.067414768040180,  0.009877396747470, -0.028460180386901);

var coefficients = [L00, L1_1, L10, L11, L2_2, L2_1, L20, L21, L22];
scene.sphericalHarmonicCoefficients = coefficients;

scene.specularEnvironmentMaps = './images/the_sky_is_on_fire_2k.ktx2';

       运行后的结果如下图所示，环境光贴图不仅打亮了物体，并且由于物体添加了PBR 材质，产生了假反射的效果，也就是镜面反射效果。

我们再到HDRIs • Poly Haven下载另一个天空盒素材，重复2.3节步骤，得到的最终结果如下：

上面方法使用的缓存是普通材质的缓存，下面我们使用UE材质的缓存添加环境光，会看到如下效果：

是不是很好玩，效果很炫酷呀？希望这个功能为您的项目锦上添花，大家快来一起和小编动手操作吧！