城市可视化DEMO搭建经验分享

接触三维也是项目上的需求。去年底公司搭建拟态网格产品项目，接触到倾斜摄影，就开始学习3维知识。之后通过和同事调研各类主流引擎及国内各大厂家的产品。年初报了一个班学了GIS信息建模，后边我开始学习unity3D，搭建简单的DEMO。对于我来说，场景搭建是刚开始困难的地方，没有任何经验，对三维基础知识属于小白阶段。刚开始在B站各种搜教程，各种找插件资源学习。B站 的教程大多数是针对于游戏来开发，和可视化项目学习的方向不太一样。学了一段 时间，效率不高，仅仅能够将unity的面板熟悉完事。那时候TOBdesign上正好有一个unity课，专门做智慧园区的项目，跟进教程做项目，包括场景搭建优化、UI搭建及交互、数据 对接这块。几乎包括项目中所需要的UI、前端职能，这简直太符合我的需求了，于是毫不犹豫就报了班，扎根学习。我并没有完完全全跟着他的教程来走，学习些基本原理，然后马上运用到拟态网格DEMO的搭建中。因为我有C#基础，所以简单的交互我还是入门无压力。我的困难点在场景的搭建和优化，因为对三维基础知识方面的欠缺，在这上边还是多走了些弯路，但是现在慢慢的进入正轨。也多亏了各位网友的协助，大家一起学习真的比一个人单打独斗要有趣得多。

 

我为什么要做这个DEMO

说实话，我们公司的可视化项目方面的技术比较弱，发展得也比较缓慢。今年是我们公司接触3维项目的第一年，因为今年试验中的项目，模型采用倾斜摄影等种种原因，我们选择了某图引擎，一款三维GIS引擎，用下来，效果并不是太理想。怎么说呢，或许在庞大倾斜摄影模型的上会有优势，但是渲染的效果并不能达到我们的需求。可视化类项目上会在感观程度上要比其它项目重要得多，或许超图的引擎能够达到我们想要的那种效果，但是现在能用的人才资源，很难达到最优运用。前端学习成本较高。于是我萌发了用其它引擎搭建拟态网格的想法。

 

选择引擎。

上半年的时候和同事一起调研过几款引擎，国内的大厂家，好用，效率高，就是实际项目上会花钱。主流的游戏引擎，不花钱，但是学习门槛高。我们现在的需求是做DEMO ,其实免费运用国内大厂家的引擎做DEMO已经足够了。但是我想着学unity，考虑的是不仅是做DEMO，多了解 实际研发过程对我来说是比较有益的事情，果断选择了后者。

 

我运用到的软件

 

  

定位上是拟态网格中的一个功能--全景资源 ，以成都市为例 ，开始行动了 ，第一个大的目标是要搭建成都市 的场景，所以我需要一些精细点的地图数据。

 

怎么获得GIS数据?

获得方式有多种，第一种方式是 万通的淘宝购买，可以买到你想要的GIS数据，而且会更优质。第二种方式是openstreetmap上截取，这种方式会有两个弊端，一次性只能获取到局部地区的GIS数据。而且大家都可以在OSM上编辑数据 ，所以获取 下来的数据 会显得乱又多，大多数据是不需要的，需要自己慢慢处理。

  

 

第三种方式就是各种网站 上找资源 ，或网友分享等方式。根据不同的需求可用不同的方式，在做这个DEMO的时候我的GIS数据来源于群友的分享。

 

处理GIS数据

获得的成都市 的GIS数据都路网、水系、绿地、建筑及高度数据 、一些POI点等，数据 是以SHP格式存储的，一个GIS数据 包括5个同名不同扩展名的文件，直接将后缀为SHP的文件拖入QGIS，就能打开。

  

建筑处理

原生数据基本上都是瓦片数据 ，如下图瓦片数据会将一些楼分割成两个部分，得把他们合到一起才行，运用矢量工具可以将他们合并，再通过高度不同将他们打散开来，这样完美的将建筑数据 分开了

数据太多的情况下，我会优化掉面积小的块或者楼层只有一两层的建筑，保证数据的精简。打开属性面板，删掉楼层字段 少于2层的楼。

路网处理

还好我拿到的路网数据比较优质，能处理的较少，将一些不需要的路段去掉即可

  

区域块数据处理

区域块GIS包括水系、绿地、商场、小区等地域划分块，这种数据 我处理得较少，最多会把瓦片数据整 合起来。

建筑、路网、水系等数据 处理好后，将不同功能的块单独分层导出SHP。

 

GIS数据生成模型

有两种方式，第一种是用BLENDER的GIS插件，能够满足基本的建模需求，这种方式比较简单,能用的功能比较单一，比较能够理解 。第二种方式是cityEngine，能够满足很多的建筑需求，这种方式需要写规则文件，比起BLENDER学习成本较高，但是功能强大，学好了是一大利器。我一般会用cityengine生成路的模型。跟据自己的需要选择软件。此次的需求我仅用到BLENDER就够了。

注意，用blender导入的shp数据一定要是3857的坐标，否则在blender里会出问题，在QGIS里存储数据 的时候，选择3857的坐标系就行。

  

 

先用GIS插件将SHP文件导入，带有高度数据的建筑楼块数据，需要在导入时设置凸出字段。（GIS插件在文章末尾有资源分享。在偏号设置里可以安装GIS插件）

  

 

 

模型二次处理

将各种类型的模型数据导出FBX格式，如果是要对白模进行分区贴模，会运用一sketchup进行处理。我这里做的是统一贴膜，所以用C4D进行处理。

将模型放进C4D中，进行贴图，贴图的主要的目的是调整 UV,如果将没有贴图的白模放进UNITY里进行贴图的，可能会产生奇怪的效果，所以我会在C4D里将UV调整好再使用。

  

UNITY场景搭建

进入UNITY项目中，将需要的模型导入项目中，设置好材质的类型（有些模型放进unity会有材质缺失的问题，所以会用到嵌入材质）

  

将模型放进场景中，并针对模型调整材质，因为其它建模软件中材质的算法与UNITY的材质算法并不通用，所以就算是在C4D里将材质调得很漂亮 ，在unity里也没用。所以建议小伙伴们，如果是要用在UNITY里的模型，不要在其它建模软件里对材质下过多的心思。

模型摆好，调整 好材质后，需要对场景进行后期处理。用到post processing 插件，添加方式如下图

  

使用方式：在相机上挂上post processing layer脚本

  

再新建一个空的对象，挂上post processing volume 脚本，isglobal要选中。一定要记得这个对象与相机是在同一图层下才行。

  

设置好后，就可以加想要的后期处理效果了

  

常见的辉光效果添加，辉光效果要结合HDR材质一起使用最佳，将场景中楼栋的玻璃材质添加hdr发光，此时并不能达到我们想要的发光效果，然后在后处理图层里，添加BLOOM效果，将 数值调整 到合适的效果，就能看到场景中带 HDR的材质都发生了变化。

  

为了实现真实场景中，大楼的玻璃反射效果，我们需要添加反射探针，添加方式如下图

调整 反射探针的长宽高，覆盖我们需要反射的区域，再将反射探针中添加HDR立体贴图，再看场景中的玻璃材质就有反射的效果了。

  

UI效果还原

unity的UI系统 还是比较直观简单的，所有的UI需要一个cavas 进行承载，在里添加图片、文字，按照需求往上堆,一些基本图表、热力图等网上有各种插件可以用。

 

dotween插件

这是一款比较强大的动画插件，学unity必掌握的一款插件，用于制作场景中的各种动画，有种类其全的动画方式，可用脚本控制，也可以手动设置动画，在运用之前需要先把插件导入项目。

 

GIS数据的获取经验（各种方式的利弊）

如何获得优质的GIS数据呢?花钱买，如果是用在项目上的数据，建议还是购买，虽然 OPENstreetmap上有免费的数据 ，但是数据 是开源的，大家都可以在上边编辑 ，导致下载下来的数据会非常杂乱。一次性下载的面积及数据量会有限制，不能大面积的下载数据，后期拼出来也并不是很理想。购买的数据有保障，至少干净，处理更容易，而且购买的数据都是同一数据源，也不会出现各种奇怪的问题。

 

模型的UV调整 （不展UV的奇怪贴图方式）

第一次将白模导进unity搭建温江项目的场景时，没啥经验，就在unity里边调好材质给到白模，但是无论怎么弄，贴上去很奇怪，不能像我想象的那样子贴上去，拉伸也很严重，刚开始不知道怎么解决，调了两天也没弄懂什么原因，钻进牛角尖了，当时也没想到问问其它人。其实问题很简单，UV不正确，UNITY里不能调外边导入模型的UV，需要在建模软件里，将UV调整 好了再导入进来，所以在做模型的时候，用C4D或其它建模软件将模型的贴图贴好，才能用到unity里边。

 

unity 的 post processing 插件（强大的后期处理插件）

简直是unity的美颜神器，刚开始搭建场景，什么后期都没调，场景灰蒙蒙而且会偏蓝，发光材质也没有光，背光区域黑到看不到细节，阴影也很假，不太清晰，玻璃材质也没有反射周边环境的效果，整 个感受就是很假。后边学习到教程中的post porcessing插件，加上一些基础的后期效果，如辉光、景深，调色，再加上反射探针，立马高级感++。

 

C#的入门（不是你想象的那么难）

可能写代码就能劝退好多的设计师，有人说简单，有人说困难，别纠结，不自己试一试怎么知道呢，其实，只要能理解到其中的逻辑，再熟悉一些常用的关键字，简单的入门DEMO交互还是可以做的。

 

场景中的流光效果

可视化项目中，经常会看到车流效果，制作方式很简单，添加一个line，设置好坐标点（这里的坐标点其实是可以对接后台数据的）

  

新建一个材质，在PS里画贴图存PNG，添加HDR材质发光效果，将材质给到line。新建控制流光效果的脚本，挂到LINE上边即可，编写内容如下图

用到unity做完这个DEMO，认识到这款引擎的强大，打开了新世界的大门，才发现我需要学习的东西还很多，共勉吧。

 

 

 

 

--------------------------------------干   货   分   享------------------------------------------------

dotween插件：链接：https://pan.baidu.com/s/106fL1SfGfYA_0Ia3S9OLQA 提取码：HNCY 

HDR天空贴图：链接：https://pan.baidu.com/s/1HOOXDZMsLNauFiJQ3oCiTQ 提取码：qwih 

成都市GIS数据：链接：https://pan.baidu.com/s/1FpqieQZDbF-g3ZJ0TfE4cA 提取码：oif9 

BLENDER的GIS插件：链接：https://pan.baidu.com/s/1Rr1bah99poNZegNf0l4QwQ 提取码：h5i0 

最后感谢罗老提供的HDR天空贴图素材

 产品整合设计师的主页 - 站酷 (ZCOOL)