近些年来，随着城市规模的扩大和规划需求的增强，以二维地理数据为基础的传统地理信息应用已满足不了专业领域的需求，三维空间数据在各行业的应用越来越受重视。三维建模技术是建立数字城市的基础，通过该技术将三维数据表示的规划场景直观、形象地展现在屏幕上，可以为城市细节规划和城市设计管理提供更加充分的决策支持^{[1, 2]}。

目前，越来越多的领域开始尝试将三维模型规划引入自己的工作流程中，三维模型的规模越来越大，模型的复杂程度日益复杂。但是由于个人知识、能力和精力的限制，不太可能由单人完成一些复杂模型的构建，通常都是由团队合作完成。同时，设计人员在地理上可能是分散的，往往很难组织小组间的分析讨论。因此，支持多用户的实时分布式的三维协同规划系统已经成为许多工作十分迫切的需求^[3]。本文尝试采用WebGL(Web graphics library)和WebSocket设计实现在城市规划应用中的三维协同建模流程。

1 三维协同系统设计

1) 协同系统需求分析。当前城市规划在数字城市和大数据技术的发展下，给人们提供了一种全新的城市规划建设和管理的理念和手段。与传统的利用平面设计图纸、数据表格和沙盘模型进行城市规划管理相比，三维规划有很多优势。虽然三维规划模型构建复杂，但系统中每个人员都能分权限地对同一个三维规划项目进行设计和修改^{[4, 5]}，通过网络快速实时展示出来，达到动态建模的目的。

2) 协同系统模式。系统采用基于领导者-参与者的协同会议模型组织协同系统用户关系和管理事件的分发，整个协同系统由若干个拥有项目的协同会议组成。用户通过注册自己的用户名和口令进入系统，成为潜在的会议参与者^[6]。

系统由若干项目构成。选定一个用户成为领导者，由领导者创建项目，成立一个协同会议并生成一个会议口令，领导者在所有用户中选择会议的参与者。

首先，每一个协同会议需要确定当前会议讨论的项目；接着，选定一个用户为当前会议的领导者，领导者拥有整个会议中最高的权限，其余参与会议的成员都是由领导者从所有用户中选定的当前会议的参与者, 拥有基本的参与者权限^[7]。

领导者和参与者在协同会议中的权限不同。领导者负责创建、启动和关闭协同会议，并在会议过程中处理新参与者的加入，控制协同场景中的模型创建和修改，并将这些修改分发给所有在线的参与者，参与者会实时地收到这些改变。领导者可以将自己的管理者权限指派给一个参与者，指派行为一旦完成，用户权限随之交换。参与者在加入会议以后，所有的模型数据的处理都交由领导者控制。

3) 协同系统架构。整个协同系统架构分为数据库层、服务层和用户层3层架构。其中，数据库包括用户数据库和项目数据库，用于保存所有的用户和项目数据。服务层包含Restful接口服务和Socket服务，其中，Restful服务主要用于处理单个用户对项目进行的交互操作，Socket服务用于多用户之间的协同信息处理。

客户端用户通过Restful接口进行用户的注册、登录和登出等用户操作，添加项目、删除项目和添加成员等项目管理操作。客户端和服务端通过Socket.io与协同服务器之间相互传递数据。用户通过注册成为协同系统中的成员，可以创建自己作为领导者的协同项目，向项目中添加各种建筑资源文件，选择其他已注册的协同系统成员为该项目参与成员，共同组成该项目的协同工作会议。

2 三维协同系统实现 2.1 客户端与服务端交互实现

客户端首先展示登录界面，用户需要使用接口注册新账号或登录已有账号来登入协同系统，登入失败会返回提示消息，提示用户重新尝试；若成功，则跳转到项目列表页。每个用户都可以在项目列表页创建自己的项目，添加项目参与成员，或输入项目ID进入自己参与的项目，如图 1所示。

在选定当前要操作的项目以后，进入项目编辑页。作为领导者进入的用户，可以修改屏幕上展示的模型数据或添加新的资源文件，这些修改都会通过Socket.io实时分发给所有当前在线的参与者，参与者得到这些修改后的数据文件以后，客户端数据模型收到数据改变事件，触发模型重绘动作，整个屏幕实时展现出模型的改变，所有项目协同人员都可以就这些修改进行讨论和修正；作为参与者进入的用户，只能得到从领导者那里发送来的数据，只有对当前项目进行读取数据的权限，而没有修改这些数据的权限^{[8, 9]}。同时需要注意的是，只有项目的领导者当前在线且与服务端建立起Socket连接以后，参与者才能够得到项目数据。

2.2 客户端设计实现

WebPack是一个前端模块化管理和打包工具，它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分离，等到实际需要的时候再异步加载。在构建协同系统时，采用WebPack来管理所有的类型(js、css、html、less等)的资源文件，最后, 在服务器上输出一个稳定的满足生产环境需求的稳定版本。

在协同系统中构建大量地理模型时，将通过服务端获得的模型数据中的经纬度坐标转换成墨卡托投影坐标展现在threejs的坐标系中。借助threejs这个运行在浏览器端的WebGL库，创建出由卫星图组成的底图平面，在底图上按照转换后的墨卡托投影坐标生成建筑模型。

2.3 服务端设计实现

服务端通过Restful接口、Socket接口和数据库3部分实现。

1) Restful接口使用Express的路由功能创建post数据接口。Express是一个简洁灵活的NodeJS Web应用框架，协同系统通过Express路由分别实现用户相关和项目相关的Restful接口，这些接口提供客户端与服务端的数据交换和验证。

2) Socket接口通过使用Socket.io实现。Socket.io是NodeJS Web下实现WebSocket的JavaScript库，它可以在不同的浏览器和移动设备上实时应用。Socket.io会自动地根据浏览器从WebSocket、AJAX长轮训等各种方式中选择最佳的方式实现网络实时协同应用，非常方便和人性化^{[10, 11]}。

在用户选择项目进入项目编辑页之后，建立一个Socket连接，服务端收到这个连接请求，创建一个客户端Socket连接对象，监听这个对象所有消息，同时返回给客户端connect消息，确认连接建立成功。一个Socket连接就在客户端和服务端之间建立完成了。

在客户端中，需要触发一些项目相关的事件，发送消息和数据给服务端，等待服务器响应，实现整个系统的实时协同。

3) 数据库采用了mongoose来管理mongoDB，mongoDB是一个基于文档的非关系型数据库，其文档是按照json格式存储的，语法命令和NodeJS Web十分相似，对于协同系统的前端和服务端的技术路线十分贴合。数据库分为两部分，分别保存用户数据和项目数据。两者的元数据对象结构设置如表 1所示。

通过表 1中元数据对象构建用户模型和项目模型文档，分别储存在数据库中。另外，服务端单独提供静态资源文件上传接口，所有的资源文件会按照文件类型存储在服务器中，可通过从数据库中获取到的资源文件名称单独从服务器上获取资源详情。

2.4 三维协同系统应用功能

1) 快速建模。可以通过导入资源文件在屏幕上快速建立所有建筑模型，在模型导入成功以后，可以使用右侧的工具栏和属性编辑栏新建建筑或者编辑现有建筑，如图 2所示。

可以在工具栏中利用样条曲线快速建立三维模型，其属性编辑栏分为3列：①图层：分为默认、地面、建筑、绘面，可以分图层展示项目数据，提供展示/隐藏、删除功能；②物体：主要展示选中地物建筑的基本属性，可以通过调整建筑的可见性和建筑层高比较整体项目规划效果，在光照分析中寻找合适属性；③材质：可以实时寻找项目中拥有的材质资源文件，可以选择不同文件以改变建筑材质。

2) 光照模拟。城市规划分析中需进行不同建筑位置和高度情况下的光照影响分析，协同系统在模拟不同季节不同时刻的光照的情况下，通过实时改变建筑物的位置和高度，可以直观地展现出不同条件下，光照对周围环境的影响。系统获取用户希望得到的光照时间，在屏幕上模拟出该时刻光照情况。

3) 项目报表展示。WebWorker是运行在后台的JavaScript代码，独立于其他脚本，WebWorker在后台运行不会影响页面的性能，项目报表等较复杂的数据可以使用WebWorker在后台进行运算而不影响用户其他操作。

当前项目报表可以实时显示出项目的总面积、绿化面积、绿化率、建筑总面积、建筑密度和容积率等指标。指标类型可以随着项目属性和建筑的属性增减进行相应修改。

3 结束语

本文针对当前三维模型规划过程过于复杂，缺少实现多人协同规划应用的现状，提出了一个基于WebSocket和WebGL的B/S(Browser/Server)架构的三维协同规划应用，探讨可行的协同流程和实现方法。该应用能够快速完成建筑建模并实现数据的实时协同，完成了光照分析和项目报表指标分析，为协同系统的具体应用场景进行了预演。今后的研究可以在此基础上设想出更多的协同场景，设计出不同的应用功能。