3D拓撲自動佈局之Web Workers篇

2D拓撲的應用在電信網管和電力SCADA領域早已習覺得常了，隨着OpenGL特別是WebGL技術的普及，3D方式的數據可視化也慢慢從佛殿神堂步入了尋常百姓家，彷佛和最近高檔會所被整改成普通茶館是同樣的節奏。

3D呈現當然比2D方式更直觀，但若是擺放圖元佈局卻比2D麻煩，畢竟增長了一個維度，手工佈局不如之前2D手工操做方便，所以3D的自動佈局功能比2D凸顯其重要性。最近玩了玩HT的彈力自動佈局插件挺有意思，特別在平板上Touch方式拖拽三維空間圖元節點時，對我這種控制慾較強者頗有知足感。

 

彈力佈局也不是啥新鮮玩意兒了，傳統彈力佈局算法都是採用經過CPU迭代運算的方式，對於海量數據特別是在純客戶端運算的方式確定是不可行的，所以這些年也有不少採用GPU的方式進行並行計算的方式可極大提升性能，等OpenCL更成熟HT for Web提供了WebCL的解決方案我再來張開這個話題。今天的話題採用的仍是CPU，只不過我把自動佈局的算法拉到了Web Worker來運算，純屬爲了好玩實際意義不大，畢竟Worker運算結果還得不斷序列化給GUI頁面層，不斷來回數據傳輸也挺耗性能，固然若是你讓Worker運行一段時間，只把最終結果push回Web層進行呈現仍是有點實際意義的，畢竟不用Worker時js單線程運行，對這種計算密集型的算法只會卡死界面沒法進行其餘業務操做。

 

如下是頁面部分的代碼，經過new Worker('workderjs')構建Worker後臺運行對象，經過worker.addEventListener('message', ..)監聽後臺自動佈局後派發的圖元位置信息進行更新，經過worker.postMessage(info)發送界面拖拽圖元位置變化信息。

       function reload() {                    
            var info = {
                A: parseInt($("A").value), 
                B: parseInt($("B").value)
            };
            reloadModel(dataModel, info);
            worker.postMessage(info);
        }

        function init() {        
            dataModel = new ht.DataModel();                   
            g3d = new ht.graph3d.Graph3dView(dataModel); 
            toolbar = new ht.widget.Toolbar(items);
            borderPane = new ht.widget.BorderPane();
            borderPane.setTopView(toolbar);
            borderPane.setCenterView(g3d);       

            g3d.mi(function(evt){
                if(evt.kind === 'betweenMove'){                
                    moveMap = {};
                    g3d.sm().each(function(data){
                        if(data instanceof ht.Node){
                            moveMap[data._id] = data.p3();
                        }
                    });
                    worker.postMessage({moveMap: moveMap});                
                }
            }); 

            worker = new Worker("worker.js");    
            worker.addEventListener('message', function(e) {
                var info = e.data;
                for(var id in info.result){
                    var data = dataModel.getDataById([id]);
                    if(data && !g3d.isSelected(data)){
                        data.p3(info.result[id]);
                    }                
                }  
            }); 

            reload();
        }

如下是後臺Work.js的代碼，經過importScripts("ht.js")引入HT核心包，經過importScripts("ht-forcelayout.js")引入HT的彈力佈局插件，經過importScripts("util.js")引入和頁面代碼共享的一些通用函數，經過self.postMessage({result: result})發送自動佈局運算結果推送到頁面，經過
self.addEventListener('message', ...)監聽頁面發過來的位置變化信息，從而實現了先後臺的互通。

importScripts("ht.js");
importScripts("ht-forcelayout.js");
importScripts("util.js");

ht = self.ht;
dataModel = new ht.DataModel();
forceLayout = new ht.layout.Force3dLayout(dataModel);

forceLayout.onRelaxed = function(){    
    var result = {};
    dataModel.each(function(data){
       if(data instanceof ht.Node){
           result[data._id] = data.p3();
       } 
    });
    self.postMessage({result: result});
};
forceLayout.start();    

self.addEventListener('message', function(e) {
    var info = e.data;
    if(info.moveMap){
        dataModel.sm().cs();
        for(var id in info.moveMap){
            var data = dataModel.getDataById(id);
            if(data){
                data.p3(info.moveMap[id]);
                dataModel.sm().as(data);
            }
        }
    }
    else{
        reloadModel(dataModel, info);                 
    }        
}, false);

如下視頻爲在Android平板上跑3D拓撲自動佈局的效果，這個例子純粹爲了玩玩Web Workers，這樣折騰性能並不會提升，甚至由於來回序列化更費性能，Web Worker可使用的場景並不太多，比較適合純數學運算的業務邏輯，同時還須要注意跑在Worker的代碼是不能操做任何界面對象，例如window和document之類的對象。

下篇《3D拓撲自動佈局之Node.js篇》咱們再將算法移到Node.js端玩