基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案

互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化，大家感受最深刻的可能是游戏、电商、O2O等和我们生活息息相关的行业，但这次我想讲一下不受普通人关注但又人人都离不开的建筑业在互联网大潮冲击下的变革。

作者简介：

杜长宇·Autodesk资深开发顾问

杜长宇，Autodesk资深开发顾问。目前负责其公司云技术的支持和推广，关注HTML5、WebGL、NodeJs及Web上的三维模型显示技术。

提到建筑业，就必然要提到BIM（Building Information Modeling）即建筑信息模型。BIM技术经过近十年的发展，已经被越来越多的业主、开发商、设计者和运维人员所接受，建筑业必将迎来继“甩图板”以来的又一次技术革命。上海中心、鸟巢等标志性建筑的BIM技术应用，进一步证明了BIM技术的生命力。BIM技术将在设计、施工到运维整个生命周期中发挥巨大威力。同时我们也注意到，设计、施工、运营维护人员和业主开发商等在同一个BIM模型上工作以达到自始至终的数据工作的“单一模型”模式在实践中是不切实际的，BIM模型在项目建造的不同阶段、基于不同目的、不同的参与者等因素，BIM模型的要包含和表达的信息以及详细程度也是不同的，有必要根据具体运用情况对BIM模型进行细化或概括，根据使用情况还可能需要对BIM模型进行轻量化处理，以便达到去粗取精、更易使用的目的。

我们以运维阶段为例，在建筑已经建造完成进入运维阶段时，我们的运维系统往往希望轻量化的BIM模型。首先是在原始BIM模型基础上的概括与简化，比如在设计阶段或施工阶段的某些具体信息在运维阶段并不一定有用，如果这些冗余信息在BIM运维阶段不做概括和简化，不但会造成BIM模型过于复杂导致性能问题，还可能由于信息冗杂、干扰，导致运维系统使用不便。所以有必要根据BIM模型的应用场景做必要的简化。与此同时，运维阶段所需要的一些必要信息，在设计和施工阶段也是没办法包含在BIM模型之内的，也需要根据具体使用情况，对BIM模型信息做必要的补充。这个过程必然造成BIM模型的版本分化，有必要做好版本管理工作。

根据运维系统的特点，运维人员可能并不熟悉建筑建模软件的使用，同时让运维人员使用建模软件来做运维管理也是不实际的，所以还需要对BIM模型的格式做必要的转换达到轻量化，以便在运维系统中使用。常见的BIM模型轻量化解决方案有下面几种，大家一起探讨：

1. 使用Autodesk Navisworks 软件。 Autodesk Navisworks可以接受包括Revit在内的多种业界常见的BIM模型格式，同时具有很高的压缩比。Navisworks同时提供丰富的API，有不少厂商使用Navisworks做运维平台。其优点是支持数据格式众多，压缩比高，轻量化效果好同时提供丰富API，易于开发与集成。但是 Navisworks 是桌面软件，客户端需要安装Navisworks软件，需要License授权，成本较高。 使用Navisworks虽然可以开发基于Web的应用，但Navisworks只能支持IE浏览器，并且每个客户也还是需要安装Navisworks软件。同时由于IE浏览器版本的升级，新版本IE浏览器对Navisworks的支持还有问题。而且该方案也不支持移动设备浏览。
2. 使用DWFx格式。DWF格式是更通用的数据格式，几乎所有Autodesk软件都支持导出为DWF格式。其优点是支持的格式众多，Autodesk Design Review还提供的免费的Web插件，可以在Web端运行，有简单API可以做定制和集成。不过Design Review或DWG viewer也是基于COM技术的，只能在IE浏览器上运行，这在互联网时代的大背景下，这简直是非常苛刻的要求。同时DWF viewer对超大模型的支持能力一般，打开超大模型时加载时间较长、对计算机性能要求高，运行性能也会有影响。不支持移动设备。
3. WebGL解决方案。随着最新Web技术的发展，尤其是HTML5/WebGL技术的发展与成熟，为我们在Web和移动端显示BIM模型提供了新的选择，这必将是将来的发展方向。HTML5/WebGL技术使用原生浏览器本身的功能，不需要下载安装任何插件即可在Web端浏览和显示复杂的三维BIM模型或二维DWG图纸。同时支持包括Firefox、Google Chrome等现代浏览器，iOS、Android设备上也可以运行。所以几乎所有浏览器、所有设备上都可以使用。使用WebGL技术做BIM模型的轻量化，需要把原始BIM模型进行解析，用WebGL技术在浏览器端或移动端对BIM模型进行重新绘制渲染，对技术水平要求较高。不过目前已有成熟解决方案，使这个过程得到的简化。

使用基于HTML/WebGL技术的BIM模型轻量化Web浏览技术更契合技术发展方向，Autodesk的View and Data API技术的推出，进一步降低了对BIM模型预处理难度，使得基于HTML/WebGL技术对BIM模型的Web浏览、分享以及协作更简单。Autodesk View and Data API技术支持包括Revit、Inventor、Navisworks、Catia、AutoCAD等软件的超过60多种数据格式，几乎涵盖业界所有三维数据格式。

Autodesk View and Data API由两部分组成，对于BIM模型的预处理等技术复杂度高的工作以云服务的形式提供，用户可以以REST的方式调用；同时浏览器端提供基于JavaScript的API，方便对模型做更精细的控制以及和其他业务系统做深度集成。

如上图所示，服务器端API部分以业界流行的REST方式提供，可以由任意语言或平台调用。通过REST API，我们实现基于OAuth 2.0的身份认证、模型文件的上传以及云端的格式转换。通过View and Data API提供的云服务，我们不用花费大量的时间和精力对不同格式的模型进行解析，只需利用云端服务的强大威力，从而降低我们系统开发过程中的技术难度。

模型经云端进行格式转换后即可使用View and Data浏览器端API，使用JavaScript把模型嵌入到浏览器中并和其他系统做集成。该模型浏览器以及提供了内置的三维模型浏览查看功能，比如模型的缩放、旋转、视点跳转等，同时还提供模型目录结构树浏览、模型组件的隐藏与显示、模型组件的信息显示与搜索，而且内置的模型测量工具，可以对模型组件长度、角度、面积等多种参数进行量测，内置的剖面工具可以在任意平面上对模型进行剖切从而查看模型的内部结构。

通过View and Data 客户端的JavaScript API，我们可以以编程的方式对模型浏览器进行控制、比如通过相机参数的控制来实现视点跳转和模型自动旋转，获取属性信息以便和其他系统集成，捕捉用户事件以及创建风格一致的用户界面等等。由于View and Data API基于Three.js构建，除了Autodesk View and Data API 客户端本身提供的API之外，结合HTML5技术、Three.js技术，我们可以做出更多酷炫的应用效果。

下面的例子展示了使用Autodesk View and Data API同时显示三维模型和二维图纸，并实现三维模型、二维图纸以及统计图表的联动。

下面是View and Data API在某大厦运维系统中应用的实例，运维人员随时在基于Web的运维系统中查看设备的运行状态、维护工单等信息，并实现和三维模型的联动，一目了然。使用View and Data API技术在浏览器中查看复杂的三维模型，不需要安装任何客户端，只需要浏览器即可。

此外还有某建筑的全生命周期管理系统，实现基于Web中三维BIM模型的建筑全生命周期管理，使用View and Data API, 在Web系统中显示复杂的三维BIM模型更简单方便。

同时注意到，Autodesk View and Data API不但可用于建筑模型的web浏览，对于机械模型同样试用。以下示例展示了根据模型属性信息的动态标注：

下面示例展示了使用View and Data API结合Three.js技术实现对模型组件的移动拆解：