技术之道·第六篇 | CIM平台的探索与初步实践

CIM的定义：

以建筑信息模型(BIM)、地理信息系统(GIS)、物联网(IoT) 等技术为基础，整合城市地上地下、室内室外、历史现状未来多维多尺度信息模型数据和城市感知数据，构建起的三维数字空间的城市信息有机综合体。

CIM不同于传统三维，而是一个范围更大、内容更丰富的城市运行数据管理、呈现、分析的平台。是以三维数据模型为基座进行数据承载，对城市运行进行监控、管理、分析、预测的智能化城市管理场景。

CIM的应用场景：

CIM平台是时空数据、业务流程数据、物联感知数据汇聚、呈现的载体，是智慧城市建设的重要基座之一，通过CIM平台，可以为智慧城市的可视化表达、多度数据的联动、分析、推演提供支撑。CIM平台可应用于多种场景，如智慧城市、智慧交通、智慧警务、智慧园区、智慧医疗等。提供数据感知、管理、分析存储，三维呈现、交互等服务，支撑场景实现智能化建设。

ArcGIS简介：

ArcGIS是CIM平台的基座，ArcGIS是一个全面的系统，可以用来收集、组织、管理、分析、交流和发布地理信息，可应用到政府、企业、科技、教育和媒体等相关领域，主要分为ArcGIS Pro桌面端软件、ArcGIS Server服务软件与CityEngine建模软件。

ArcGIS数据处理通用流程：

ArcGIS数据处理通用流程为：数据-->CityEngine三维建模-->ArcGIS Pro数据处理-->ArcGIS Server发布服务-->UniinV调用服务，流程如下图所示：

UniinV融合：

CIM平台可以完美兼容产互自研的UniinV平台，实现CIM发布服务与精细化建模的融合，即可实现大范围场景的可视化呈现，又可具象重点场景、设施的精细化效果，实现数据、特效与场景的高度契合与互动。助力更智能、更逼真的虚拟仿真场景的建设。打造数字化孪生平台。

3D 模型：

目前主流的三维模型抽象建模是基于多边形网格（Polygon Mesh），如下图所示。整体感知就是多边形面片愈多（面片密度）还原的三维立体效果愈真实。最精简的多边形自然是三角形（大部分场景下说的面片即三角面片），三维物体的每个细节可以通过三角面片的顶点、边及面等几何数学概念来描述。微观上来看，基于面片建模的三维模型本质上都是密度极其复杂的几何体。

因此，依赖一些专业 3D 扫描仪（比如如视自研的黎曼、伽罗华等扫描仪）或全景相机等设备采集数据后，再通过算法加工可以获取这些描述三维立体结构的三角面片数据。前端再利用WebGL/Three.js 等技术将其渲染至浏览器上，此时就能得到模型的三维立体轮廓，效果如下图（左）所示的网格模型。

而要达到下图（右）的效果，仅仅有三维"骨架"轮廓是不够的，需要在此基础上贴一层"皮肤"，而这层"皮肤"则是通过UV纹理贴图添加上的。

对于三维模型有两个比较重要的坐标系统，一个是顶点的位置 (x,y,z) 坐标，另一个则是UV坐标。什么是UV呢？简言之，就是二维平面贴图映射到三维模型表面的依据。比如典型的UV贴图效果如图三所示，前文提到三维结构是通过顶点、边及面组成的三角面片组成的，二维的三角面通过数据依赖映射关系从UV贴图中抠出一个相同边、面的三角形贴到三角面片上。此处的UV即指定义了二维平面图片每个点的位置与三维结构三角面片位置的映射关系信息。

至此，基于三角面片和UV贴图数据即可渲染出3D 模型。出于性能考虑，纯粹依靠 3D 模型在终端设备（iOS\Android等）还原真实细节现阶段并不现实。通过 3D 模型还原的整体结构。至于细节，则通过点位立方体全景的方式实现。

基于 3D 模型与传统 DOM 开发的差异性对比

三维坐标系 vs DOM树：

前端DOM树布局是基于CSS盒子模型和Flex布局，页面大部分布局都是基于此实现，此外还有圣杯、双飞翼等经典布局体系。在二维层面依托强大的CSS，前端布局是可以满足大部分的应用场景。但是放在三维空间，需要跟坐标系打交道。

三维建模坐标体系：

三维研发的首个门槛就是跟各种坐标系打交道，一个三维空间会存在多个三维物体，如何放置这些三维物体则需要一个三维世界坐标系来定位。此外，三维空间的三维物体通常都是静止的，其移动、旋转等操作都是控制相机的移动来实现的，如上图所示。然而，由于终端设备的屏幕是二维的，相机作为一个"眼睛"将三维物体投影到二维屏幕上又涉及到平面坐标系、齐次坐标系等。所以，如何理清这些坐标系的概念和坐标系间的相互转换是3D研发的首个门槛。

面向异步 Hooks 事件：

在处理三维模型行为交互体验时与传统前端很明显的差异就是面临的异步细节要更多。在DOM层面前端开发时，接触的异步事件主要集中在点击、触摸、滚动和Ajax异步请求等。但是在三维交互中，除此之外还会频繁接触放大缩小、拖拽位移、模式切换等各类异步行为。