基於 HTML5 WebGL 智能城市的模擬運行

時間 2019-12-10

標籤基於 html5 html webgl 智能城市模擬運行欄目 HTML5 简体版

原文原文鏈接

前言

智能城市是一個系統。也稱爲網絡城市、數字化城市、信息城市。html

智能城市建設是一個系統工程：首先實現的是城市管理智能化，由智能城市管理系統輔助管理城市，經過管理系統人們能夠監視城市的運行，瞭解城市天天中發生的變化，以及及時的根據這些變化作出相應的管理；其次是包括智能交通、智能電力、智能安全等基礎設施的智能化，交通是一個城市的驅動，交通的暢通加速了城市的發展，經過 Web 可視化的交通管理，能夠更及時的瞭解交通狀況，作出處理；智能城市也包括智能醫療、智能家庭、智能教育等社會智能化和智能企業、智能銀行、智能商店的生產智能化，從而全面提高城市生產、管理、運行的現代化水平。node

本 demo 使用 HT for Web 產品輕量化 HTML5/WebGL 建模的方案，構建了城市建築羣場景，添加了城市道路，實現了智能城市 Web 可視化，還經過動畫模擬了城市的運行。json

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

預覽圖：網絡

代碼實現

加載場景app

首先新建一個場景，並將場景添加到頁面中。dom

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 函數進行更新。ide

爲了最外層組件加載填充滿窗口的方便性，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);
}