基于 H5 和 webGL 的 3D 智慧城市

前言

　　中共中央、国务院在今年12月印发了《长江三角洲区域一体化发展规划纲要》(下文简称《纲要》)，并发出通知，要求各地区各部门结合实际认真贯彻落实。

　　《纲要》强调，要提升基础设施互联互通水平，打造数字长三角，协同建设新一代信息基础设施，共同推动重点领域智慧应用。大力发展基于物联网、大数据、人工智能的专业化服务，提升各领域融合发展、信息化协同和精细化管理水平。围绕城市公共管理、公共服务、公共安全等领域，支持有条件的城市建设基于人工智能和 5G 物联的城市大脑集群。

城市治理和管理不仅是国家治理体系的重要组成部分，同时也是全球互联网治理体系的重要载体和构建网络空间命运共同体的重要基础。上个月我们发布了一篇文章《基于 HTML5 WebGL 构建智能城市 3D 场景》，大体介绍了如何使用 ht.js 快速 3D  建模，展示了良好的可视化效果，今天继续探讨智慧城市的应用。

　　demo: http://www.hightopo.com/demo/city/

功能点

•  应急响应
•  交通情况
•  城市漫游
•  工程情况

1.应急响应

随着城市化、工业化、信息化进程加快,各种风险隐患层出不穷,突发事件频繁发生,已经从“非常态化”的偶发事件演变成了“常态化”的频发事件,直接威胁着公众的生命财产安全。为了及时、有效、妥善地处置各种城市突发事件,必须建立统一领导的指挥系统、常备不懈的保障系统和防患未然的防范系统,。

上图主要以 2/3D  联动的方式，依次展示了在面对突发情况下，城市应急救援的响应过程。

步骤：事故定位->告警设施自启动->电力切断->油气截断阀启动->周边情况->确认告警范围->通知学校->医院准备->应急人员准备->交通规划->应急方案预备->应急方案启动->应急资源触发->现场方案预备->现场方案启动->人员进场->作业中）

实现思路：首先对模型进行分组，并在相应的图元上标记 tag ，使用 ht.Default.startAnim()  来完成每一步的动画效果，然后拼接动画即可实现上图中的 3D 动画效果。至于右边的 2D 步骤显示面板的联动，因为本 demo 采用的是 ht.js 来实现的， ht.DataModel 作为承载 Data  数据的模型，管理着 Data  数据的增删以及事件派发，右侧的 2D 面板里的步骤也是一个个 Data ，我们只要对其进行数据绑定，在动画执行到某一时刻，通过动态修数据来控制图元的透明度等样式就可以实现 2/3D 联动了。demo 中的事故地点，点击可跳转到另一个室内定位的 案例 。

// 事故定位动画主要代码
animStep_1() {

let process\_01 = this.main.g2d.dm().getDataByTag("process\_01");
process\_01.s("opacity", 1);
let emergencyResponseParent\_1 = this.main.g3d
    .dm()
    .getDataByTag("emergencyResponseParent\_1");
this.setVisible(emergencyResponseParent\_1, true, "children");
let children = this.getChildren(emergencyResponseParent\_1);
children.forEach(i => {
    i.s("shape3d.transparent", true);
    i.s("shape3d.opacity", 0);
});
this.main.anim = ht.Default.startAnim({
    duration: 2000,
    easing: t => {
        return t;
    },
    finishFunc: () => {
        this.animStep\_2();
    }, // 动画结束后调用的函数。
    action: (v, t) => {
        this.setStepPanel(process\_01, t, 4);
        if (t <= 0.25) {
            children\[0\].s("shape3d.opacity", 5 \* Ease.easeOutSine(t));
        } else if (t <= 0.375) {
            children\[1\].s(
                "shape3d.opacity",
                8 \* Ease.easeOutSine(t - 0.25)
            );
        } else if (t <= 0.5) {
            children\[2\].s(
                "shape3d.opacity",
                8 \* Ease.easeOutSine(t - 0.375)
            );
        }
    }
});

}

2.交通情况

先上图：

从应用领域来看，目前我国智慧交通主要应用在公路交通信息化、城市道路交通管理服务信息化以及城市公交信息化领域。伴随着数字化转型，政府主动牵头智慧城市建设，未来市场潜力巨大。该功能点能更直观有效的反应当前的道路交通情况，使各地政府更加有效的、科学的管理交通，发挥出大城市的交通效能。常规的 2D 效果图已经不满足于当下的需求了，伴随着大数据、云计算、5G、AI、边缘计算等技术的发展成熟，3D  可视化更能直观的、有效的反馈信息。当然，3D  可视化离不开一款强大的图形引擎。本模块只是简单地模拟了交通状况，并未继续拓展。

3.城市漫游

由于计算机图形学和软硬件技术的快速发展,虚拟现实技术越来越为人们所重视。虚拟现实技术的应用一直是计算机应用领域的热点,虚拟现实技术的应用价值已经得到了广泛的认可。3D  漫游可以提供很好的用户交互体验，所以本 demo  也展示了这一功能。

借助于 HT，漫游功能的实现只要几行代码就可以实现了。ht.Shape  是极其强大的图元类型，这里绘制漫游路线就是使用其扩展子类 ht.Polyline ，绘制一条三维空间管道，然后通过获取该路径上的点来不断设置 eye 就行了。代码如下：

// 漫游动画
roamingAnim() {

// polyline
let polyline = this.main.g3d.dm().getDataByTag("polyline");
this.main.anim = ht.Default.startAnim({
    duration: 15000,
    easing: t => {
        return t;
    },
    finishFunc: () => {
    }, // 动画结束后调用的函数。
    action: (v, t) => {
        let length = this.main.g3d.getLineLength(polyline),
            offset = this.main.g3d.getLineOffset(polyline, length \* v),
            point = offset.point,
            px = point.x,
            py = point.y,
            pz = point.z;
            this.main.g3d.setEye(
                px ,
                py ,
                pz
            );
            this.main.g3d.setCenter(0, 0, 0);
    }
});

}

4.工程情况

该页面主要展示了工程情况：大桥（戳）、盾构作业（戳）、海底隧道（戳）。

至此，该 demo 的功能点就介绍完了。

图一，12月12日晚，厦门地铁2号线吕厝路口配套的物业开发地块施工现场发生塌陷，所幸没有造成人员伤亡，事故原因疑似管道破裂导致，水流将路基中的稳定土层掏空，加上路面上的汽车压力，导致路面坍塌。

图二，3月21日下午14:48左右，位于响水县生态化工园区的化工厂发生爆炸。近年来，多加化工厂爆炸，所造成的生命、财产损失不可估量。

一场场事故触目惊心，时刻提醒着我们要防患于未然。水是人类生活的源泉而随着城市的发展水污染问题也越来越严重，水资源监管和治理成为城市发展的一大困扰，水质监控不及时、水灾预警不及时更是直接关系到民生问题。而智慧水务的发展则能非常及时、准确的解决问题。假如有比较好的监控预警系统，这些事故发生的可能性将大大降低。后续会再写些关于智慧水务的文章，也会再拓展应急预案的场景案例。