背景

B 端市场中大量客户项目有很强的 3D 场景需求，奇安信集团服务的党政军企客户的安全业务场景也不例外，3D 场景已经成为客户业务的必选项。经过 5 年多在客户业务场景中的迭代发展，我们也收获了很多宝贵的经验与成果，今天我们选择将其中可公开的部分整理成系列文章与各位同仁分享，希望能够帮助到有需要的人，同时也欢迎大牛们、砖家们随时指正。

分享计划

《Web3D场景分类、构成及工作流》即本文，将会介绍雷尔可视化平台对 3D 场景的分类，例：地球场景、行政区地图场景等，及不同场景的构成元素和实现 3D 场景的工作流。
《模型标准的对比及选择》将会科普不同模型标准的优缺点，尤其对我们所选择的 glTF 2.0 标准，将会在标准本身、研发侧、建模侧进行深入的分析。
《建模工具中形状和材质的最佳实践》将会分享 Blender 中对于形状和材质的实现技巧。
《数据、氛围类动效建模小技巧》将会分享 Blender 对于数据、氛围类动效的实现技巧。
《WebGL实现3D场景的小技巧》将会分享研发侧在通过 WebGL 实现 3D 场景过程中所遇到的问题及解决方式。

接下来，我们开始第一篇正文：《Web3D场景分类、构成及工作流》。

3D 场景作为主视觉的由来

业务场景的大屏开发过程中，受限于高维度、高复杂性的数据，常采用多视图协同交互可视分析方法进行可视分析，即在可视分析的数据变换和可视交互过程中，以多视图的共同参数作为协同主题，实现了分析者在关联视图交互过程中的协同一致。

采用多视图协同交互可视分析方法实现的大屏，以是否有主视觉可分为两大类：无主视觉的报表可视分析大屏，有主视觉的可视分析大屏。

无主视觉的大屏往往由多种统计图表组成，各图表无明确的主次之分；有主视觉的大屏则具有鲜明的布局方式，常以统计图表作为辅助图表，而整个大屏中占用面积最大、视觉冲击力和表现力最强的主视觉则以抽象的概念表达或地理信息表达为主。同时，主视觉中的交互常会引起辅助图表的协同。

除统计图表和 2D 图表，我们认为需要通过 WebGL 的方式实现的主视觉，统称为 3D 主视觉。相比于 2D 图表，3D 主视觉的实现往往门槛高、定制型强、研发周期长。酷炫却复杂的 3D 场景，看似毫无章法，实则类别鲜明，场景组成元素相对固定。

3D 场景分类与特点

我们将不同类别的 3D 主视觉统称为 3D 场景，3D 场景大体分为以下几类：地球场景、行政区块地图场景、城市场景、园区场景、拓扑场景、矢量地图场景（其中，矢量地图场景涉及专业的地图领域，不在本次讨论范畴，敬请期待后续3D地图可视化技术系列文章）。

地球场景

在地球场景中，地球作为整个场景中各元素的容器，其上会有数据打点、文本标注等，除表达数据含义的物体外，场景中也会有粒子、天空盒等增强场景氛围的元素。地球场景的详细元素构成如下：

从球面到外层依次为：球体、球体效果、数据打点、氛围、天空，球体往往包含底图、地形、行政区；球体效果可球体效果增强，常包含水纹、菲涅尔等效果；数据打点是与地理位置相关的数据在球面的展示；氛围常为粒子系统等；天空即天空盒或天空球。

行政区地图场景

在行政区地图场景中，行政区作为整个场景中各元素的容器，从地面到天空，元素依次为：固定地面、父级行政区、主行政区底部、主行政区、数据打点、氛围。其中，固定地面、父级行政区和主行政区底部为装饰元素，用以增强整个场景的视觉美感。

城市场景

在城市场景中，城市主体作为整个场景中各元素的容器，从地面到天空依次为：固定地面、城市主体、标志建筑、数据打点、氛围和天空。其中，固定地面常包含：地形、水系、地面、道路、绿植等；城市主体常包含建筑素模和标准建筑。在该场景中，城市主体和标志建筑能够较为直观地使人获取城市信息。

园区场景

在园区场景中，园区建筑作为整个场景中各元素的容器，从地面到天空，依次为：固定地面、园区主体、标志建筑、数据打点、天空。与城市场景类似，该场景中的固定地面也包含了地面、道路、绿植等；园区主体和标志建筑同样能够使人以直观的方式获取园区信息。

拓扑场景

在 3D 拓扑场景中，常包含：固定地面、区域、节点、连线、氛围等元素。拆解完毕各场景的组成元素后，我们发现各场景所使用的元素会有部分交集，例如：氛围、固定地面可用于不同的场景中，各场景都会涉及数据打点。有些模拟现实环境的场景，场景元素的构成较为复杂，通过前端研发难以实现。由此，我们很自然地想到了使用 3D 建模加 WebGL 研发相结合的方式来完成 3D 场景的研发。这样的研发、交付过程中，会涉及到建模师和前端工程师，又由于建模端与 Web 端渲染引擎天然的隔离，模型在 Web 端的效果复现，成为这一实现过程中的重要环节。

3D场景设计-研发工作流

在 3D 场景的实现过程中，完整的工作流如下：

建模师负责在建模工具中对场景进行搭建，搭建完毕的场景以模型文件的方式输出至研发端；前端研发首先需要将模型加载至浏览器中，并尽力复原其效果，对于一些无法使用建模方式输出的元素或 Web 端积累下来用以复用的元素，前端研发可直接添加至场景，并输出前端工程文件至业务研发；业务研发为实现业务交付需要为整个场景添加交互逻辑、数据逻辑等。

设计阶段

以城市场景为例，建模师首先按照业务场景元素拆解规范去制作场景，在这一过程中，所述“元素”为业务元素，需要转换至相应的图形元素才能进行建模工作的完成，例如：道路的构成转换为平面和纹理贴图的组合，树木为三角形面片的组合。图形元素可组合至业务模型单元、业务模型单元可进一步组合为场景模型。

在这一过程中，建模师需要参考图形规范制作图形元素，图形元素可积累至模型库，模型库中包含了几何体、材质、特效、贴图等；按照业务规范组合而成的业务元素和业务模型单元也是可以积累复用的。

研发阶段

搭建好的业务场景模型输入至浏览器后，需要前端研发进行场景元素和业务逻辑的完善，对于模型的加载、使用，常见场景元素、数据图层，前端可以图形库的方式进行累积以便复用。关于3D建模和 Web 研发的分工如下：

此工作流中，还会涉及很多具体的问题，例如：模型标准的选择、 Web 研发对于 3D 图形的制作等，敬请期待后续系列文章。