Automatic Layout of 3D topology-Web Workers

The Application of 2D topology has become a norm for telecom network management and power SCADA. With the popularization of OpenGL, especially WebGL technology, 3D data visualization has gradually moved from the Buddhist temple to an ordinary home, it seems the same pace as the recent rectification of high-end clubs into normal teahouses.

3D rendering is more intuitive than 2D, but it is more difficult to place elements in 2D la S. After all, it adds a dimension, which is not as convenient as 2D la S, therefore, the automatic layout function of 3D is more important than 2D. Recently, it was interesting to play with the HT auto-scaling layout plug-in, especially when dragging 3D space element nodes by Touch on the tablet, it was very satisfying for me to have such a strong desire to control.

 

The elastic layout is nothing new. The traditional elastic layout algorithm uses the CPU iteration method, which is definitely not feasible for the calculation of massive data, especially on pure clients, therefore, many GPU-based parallel computing methods have greatly improved performance over the years. When OpenCL is more mature, HT for Web provides WebCL solutions, I will open this topic again. Today's topic is CPU, But I pull the automatically deployed algorithm to the Web Worker for computation. This is purely for fun and has little practical significance, after all, the Worker operation results have to be serialized to the GUI page layer, and continuous back-and-forth data transmission also consumes performance. Of course, if you want Worker to run for a period of time, it is of some practical significance to only push the final result back to the Web layer for presentation. After all, js runs in a single thread without Worker, this computation-intensive algorithm only gets stuck on the interface and cannot perform other business operations.

 

The following is the code of the page. The Worker background running object is constructed through new Worker ('workderjs') and the worker is used. addEventListener ('message ',..) the metadata location information distributed after the automatic layout of the listening background is updated through worker. postMessage (info): drag and drop the metadata location change information on the send interface.

       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();        }

The following is background Work. js Code, through importScripts ("ht. introduce HT core package, introduce HT elastic layout plug-in through importScripts ("ht-forcelayout.js"), through importScripts ("util. js ") introduce some common functions shared with page code through self. postMessage ({result: result}) sends the Automatic Layout calculation result to the page
Self. addEventListener ('message',...) listens to the location change information sent from the page, thus realizing the intercommunication between the front and back ends.

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);

The following video shows the effect of running the automatic layout of the 3D topology on the Android tablet. This example is purely for Web Workers, so the performance will not be improved, even because the serialization is more cost-effective, there are not many scenarios that Web Worker can use. It is suitable for the business logic of pure mathematical operations. At the same time, you must note that the code running on Worker cannot operate any interface objects, such as window and document.

In the next article "Node. js of automatic 3D topology layout", we will move the algorithm to the Node. js end.