基于 HTML5 WebGL 智能城市的模拟运行

前言

智能城市是一个系统。也称为网络城市、数字化城市、信息城市。

智能城市建设是一个系统工程：首先实现的是城市管理智能化，由智能城市管理系统辅助管理城市，通过管理系统人们可以监视城市的运行，了解城市每天中发生的变化，以及及时的根据这些变化做出相应的管理；其次是包括智能交通、智能电力、智能安全等基础设施的智能化，交通是一个城市的驱动，交通的畅通加速了城市的发展，通过 Web 可视化的交通管理，可以更及时的了解交通情况，做出处理；智能城市也包括智能医疗、智能家庭、智能教育等社会智能化和智能企业、智能银行、智能商店的生产智能化，从而全面提升城市生产、管理、运行的现代化水平。

本 demo 使用 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，构建了城市建筑群场景，添加了城市道路，实现了智能城市 Web 可视化，还通过动画模拟了城市的运行。

demo 地址：http://www.hightopo.com/demo/intelligent-city/entry/dest/index.html

预览图：

代码实现

加载场景

首先新建一个场景，并将场景添加到页面中。

let dm = this.dm = new ht.DataModel();
let entryG3d = this.entryG3d = new ht.graph3d.Graph3dView(dm);
entryG3d.addToDOM(); // 将场景添加到页面中

HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 div 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件 invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。

为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：

addToDOM = function(){   
    var self = this,
        view = self.getView(), // 获取组件 div  
        style = view.style;
    document.body.appendChild(view); // 将组件添加到文档对象中            
    style.left = '0';
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false); // 监听窗口变化，刷新组件            
}

 接下来反序列化城市场景 json。

ht.Default.xhrLoad('scenes/园区/城市demo.json', (text) => {
    let json = ht.Default.parse(text); // 还原 json 字符串
    let scene = json.scene; // 获取 json 中设置的投影参数
    entryG3d.setEye(scene.eye); // 设置视角
    entryG3d.setCenter(scene.center); // 设置目标中心点
    entryG3d.setFar(scene.far); // 设置远端截面位置
    entryG3d.setNear(scene.near); // 设置近端截面位置
    dm.deserialize(text); // 场景反序列化
    this.setSkyBox(entryG3d); // 设置天空球
    this.initentryG3dEvent(); // 添加场景监听事件
    this.startAnimate(); // 启动城市动画
    this.startCarAnimate(['car1Line'], dm.getDataByTag('car1')); // 启动消防小车1动画
    this.startCarAnimate(['car2Line'], dm.getDataByTag('car2')); // 启动消防小车2动画
});

场景渲染

1. 环境光贴图：将贴图影像渲染在场景中，通过 node.s('envmap', 0.5) 来设置节点的渲染程度，主要用于地板添加物体倒影效果，也可像本 demo 一样添加星光点缀。

dataModel.setEnvmap('环境光贴图.png'); // 贴图要求宽高像素为 2^n
node.s('envmap', 0.1); 

对比图：

     

右图中环境光贴图为星光，城市中心区域有了蓝色的星空色，在 demo 中旋转场景也能看到明显的星光变化。

2. 辉光：本是指低压气体中气体放电的物理现象，用在 3D 场景中将亮色突出显示，呈现一种发光的效果，可控制辉光强度，辉光显示的范围和发光阀值。

g3d.enablePostProcessing('Bloom', true); // 开启辉光
module = g3d.getPostProcessingModule('Bloom');
module.strength = 0.18; // 强度
module.threshold = 0.62; // 阈值
module.radius = 0.4; //范围
g3d.iv(); // 刷新拓扑

对比图： 

     

3. 景深：对场景中心周围的清晰程度的控制，将周围虚化，美化画面，突出主体，增强透视，可控制景深阀值（周围模糊范围程度）。

g3d.enablePostProcessing('Dof', true); // 开启景深
module = g3d.getPostProcessingModule('Dof');
module.aperture = 0.18; // 景深阀值
module.image= '景深贴图.png'; // 景深贴图 
g3d.iv(); // 刷新拓扑

对比图：

     

可以看到右图中卫星区域和最左侧变得模糊。

4. 天空球：将场景模型放置在一个大的球体中，球体内部进行贴图，来模拟天空。

node = new ht.Node()
node.s({
    'shape3d':'sphere', // 球体
    'shape3d.image': 'earth' // 贴图路径
});
node.s3(10000, 10000, 10000);
g3d.dm().add(node);
g3d.setSkyBox(node); // 设置天空球

动画实现

加载后的城市场景如下图所示：

我们可以看到建筑物群有各自的数据展示面板，围绕着中心大楼有一个光圈列车模型，是模拟的城市中心列车，还有右边一个城市卫星，现在我们来让数据面板数据变化，让列车、卫星开始动起来。

动画的实现是用调度函数来实现的（调度手册），我们先了解一下调度函数的用法：

HT 中调度进行的流程是，先通过 dataModel 添加调度任务，dataModel 会在调度任务指定的时间间隔到达时， 遍历 dataModel 所有图元回调调度任务的 action 函数，可在该函数中对传入的 data 图元做相应的属性修改以达到动画效果。

dataModel.addScheduleTask(task) 添加调度任务，其中 task 为 json 对象，可指定如下属性：

• interval：间隔毫秒数，默认值为10
• enabled：是否启用开关，默认为 true

• action：间隔动作函数，该函数必须设置

dataModel.removeScheduleTask(task) 删除调度任务，其中 task 为以前添加过的调度任务对象。

动画实现代码如下：

startAnimate() {
    let dr = Math.PI / 180 * 2, PI2 = Math.PI * 2;
    let dm = this.dm;
    let rotateOval = dm.getDataByTag('rotateOval'); // 获取城市列车模型
    let logo = dm.getDataByTag('logo'); // 获取城市卫星模型

　　 // 设置动画参数　
    let roatateTask = this.roatateTask = {
        interval: 100,
        action: function(data){
            if(data === rotateOval || data === logo){
                data.setRotation((data.getRotation() - dr) % PI2);
            }                
        }        
    };
    dm.addScheduleTask(roatateTask); // 将动画加入到调度任务中
    
　　 // 获取建筑物数据面板
    let dglsd = dm.getDataByTag('dglsd'); // 戴谷岭隧道
    let xlsd = dm.getDataByTag('xlsd'); // 杏林隧道
    let xmg = dm.getDataByTag('xmg'); // 厦门港
    let jcglzx = dm.getDataByTag('jcglzx'); // 机场管理中心

　　 // 模拟建筑物数据面板的动态展示
    let valueChangeTask = this.valueChangeTask = {
        interval: 1000,
        action: function(data){
            if(data === dglsd){
                data.a('carHour', util.randomNumBetween(3000, 6000));
            }   
            if(data === xlsd){
                data.a('carHour', util.randomNumBetween(3000, 6000));
            } 
            if(data === xmg){
                data.a('ttl', util.randomNumBetween(3, 10));
                data.a('zy', util.randomNumBetween(0, 100));
            } 
            if(data === jcglzx){
                data.a('sskll', util.randomNumBetween(500, 2000));
            }            
        }        
    };
    dm.addScheduleTask(valueChangeTask); // 将数据变化加入到调度任务中 
}

实现的动画效果如下图：

demo 还模拟了消防车赶往火灾发生地，动画如下：

消防车的行驶用到了 ht.Default.startAnim，我们先来了解一下：

ht.Default.startAnim({
    frames: 12, // 动画帧数
    interval: 10, // 动画帧间隔毫秒数
    easing: function(t){ return t * t; }, // 动画缓动函数，默认采用 ht.Default.animEasing
    finishFunc: function(){ console.log('Done!') }, // 动画结束后调用的函数。
    action: function(v, t){ // action函数必须提供，实现动画过程中的属性变化。
        node.setPosition( // 此例子展示将节点`node`从位置`p1`动画到位置`p2`。
            p1.x + (p2.x - p1.x) * v,
            p1.y + (p2.y - p1.y) * v
        );
    }
});

以上为 Frame-Based 方式动画， 这种方式用户通过指定 frames 动画帧数，以及 interval 动画帧间隔参数控制动画效果。

ht.Default.startAnim({
    duration: 500, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
    action: function(v, t){ 
        ... 
    }
});

以上为 Time-Based 方式动画，该方式用户只需要指定 duration 的动画周期的毫秒数即可，HT 将在指定的时间周期内完成动画。

由于 js 语言无法精确控制 interval 时间间隔， 采用 Frame-Based 不能精确控制动画时间周期，即使相同的 frames 和 interval 参数在不同的环境，可能会出现动画周期差异较大的问题， 因此 HT 默认采用 Time-based 的方式，如果不设置 duration 和 frames 参数，则 duration 参数将被系统自动设置为 ht.Default.animDuration 值。

消防车行驶实现代码如下：

startCarAnimate(polylineTagArr, airNode) { // 传入消防车行驶路线 tag(唯一标签)组和消防车模型节点
    let dm = this.dm;
    let entryG3d = this.entryG3d;
    let curIndex = 0;
    let polyline = dm.getDataByTag(polylineTagArr[curIndex]); // 获取消防路线 ht.PolyLine（http://www.hightopo.com/guide/guide/core/shape/ht-shape-guide.html#ref_different）
    let prePos = airNode.p3(); // 获取节点初始位置
    let preRotate = airNode.r3(); // 获取节点初始旋转角度
    let lineLength = entryG3d.getLineLength(polyline); // 获取管道长度
    let params = { // 设置消防车行驶动画参数
            duration: 10000,
            easing: function(t){
                return t * t;
            },
            action: function(v, t){
                let offset = entryG3d.getLineOffset(polyline, lineLength * v), // 获取管道指定比例的偏移信息
                    point = offset.point,
                    px = point.x,
                    py = point.y,
                    pz = point.z,
                    tangent = offset.tangent,
                    tx = tangent.x,
                    ty = tangent.y,
                    tz = tangent.z;
                airNode.p3(px, py, pz); // 移动消防车到下一位置
                airNode.lookAt([px + tx, py + ty, pz + tz], 'front'); // 消防车沿着管道方向转向
            },
            finishFunc: function(){
                if(curIndex < polylineTagArr.length - 1) { // 进入下一段路线
                    curIndex++;
                }
                else {
                    curIndex = 0; // 返回第一段路线
                }
                if(curIndex === 0) { // 消防车返回原点
                    airNode.p3(prePos);
                    airNode.r3(preRotate);
                } 
                polyline = dm.getDataByTag(polylineTagArr[curIndex]); 
                lineLength = entryG3d.getLineLength(polyline);
                this.carAni = ht.Default.startAnim(params); // 执行下一段行驶动画   
            }
        };
    this.carAni = ht.Default.startAnim(params);
}

消防车的行驶可总结为先获取行驶道路的管线长度信息，计算一定比例的管线偏移点，移动消防车位置到计算的偏移点，调整消防车模型的朝向，计算下一偏移点进行位移，直到到达当前管线尾，然后获取下一管线的长度信息，继续进行偏移。

代码中提到的三个方法：getLineLength、getLineOffset、lookAt，我们来了解一下。

　　1. g3d.getLineLength(edgeOrPolyLine)

　　根据参数 edgeOrPolyLine 方法命名我们就可以知道此方法是获取连线或管道的长度。

　　2. g3d.getLineOffset(edgeOrPolyLine, offset)

• • edgeOrPolyLine  连线或者管道
  • offset 偏移百分比

　　此方法获取连线或者管道的偏移信息，返回 { point, tangent }，其中 point 是 3D 坐标，tangent 是 point 点沿当前线的切线向量。

　　3. node.lookAt(point, direction)

• • point 3D 坐标点
  • direction 节点某一面，值可为 ‘front | back | left  | right | top | bottom’

　　将节点的某一面朝向空间某坐标点。

消防车行驶转向示意图：

　　1. 起始位置；

　　2. 通过 setPosition3d(point.x, point.y, point.z) 到达下一位置，红线为 tangent 切线向量；

　　3. 通过 node.lookAt([point.x + tangent.x, point.y + tangent.y, point.z + tangent.z], 'front'); 将车头摆向切线方向；

　　4.5. 重复以上步骤。

　　其中 [point.x + tangent.x, point.y + tangent.y, point.z + tangent.z] 即为目标点 target 的坐标。

　　

总结

 智能城市系统还包括智能楼宇的管理：

http://www.hightopo.com/demo/ht-smart-building/

地铁是一个城市的核心交通工具，地铁站的管理也必不可少：

http://www.hightopo.com/demo/ht-subway/