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端玩

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

有空看看jQuery源码吧,看不懂也会有收获

jQuery是一个对新人很亲切的JS库,它的源码风格都比较接近自然语言,可以一边对照手册,一边查看jQuery源码。第一次看必然很吃力,不过没关系,这就是学习的...

1806
来自专栏老司机的简书

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

老司机带你走进Core Animation 之粒子发射、TileLayer与异步绘制

952
来自专栏Jacklin攻城狮

iOS中,系统相册的那些事

912
来自专栏攻城狮的动态

iOS中,系统相册的那些事

2814
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发--JavaScript学习:21点游戏

一、游戏规则 21点游戏的规则有很多种,我在写这个21点游戏的时候,选取了一种规则,描述如下: 1、游戏共有两名玩家,玩家1(庄家)和玩家2,在我编写的这个21...

3826
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Trombone

课程内容 Ø Sound Manipulation Ø Sound Looping Ø SoundEffectInstance     相对于前一章的C...

1827
来自专栏九彩拼盘的叨叨叨

前端学习资源精选

看视频学技术的缺点是学习效率比较低,优点是对初学者更友好。前端入门后,不推荐看视频。

2752
来自专栏做全栈攻城狮

游戏开发7天快速入门-第2天GUI图形用户界面和游戏对象详解

本教程致力于程序员可以利用unity技术快速学习和入门游戏开发。一方面通过自己的总结希望可以帮助更多热衷与游戏开发或者编程技术开发的同仁。另一方面可以总结自己所...

651
来自专栏DeveWork

WordPress By Example:一个WordPress 主题搜索引擎

来,今天介绍个好东东,一个WordPress 主题搜索引擎。你只要在搜索框输入相关关键词,就可以获取相应的WordPress 主题。这些主题有收费与付费。就Je...

2077
来自专栏闰土大叔

在没有DOM操作的日子里,我是怎么熬过来的(终结篇)

前言 在我写终结篇的日子里,Vue版本稳定在2.9.1。当我摸清Vue的脉络之后,以一个爬坑无数的亲历者的身份,谈谈我在MVVM时代里遇到的那些事儿。 接下来,...

34413

扫码关注云+社区