2D拓扑的应用在电信网管和电力SCADA领域早已习以为常了,随着OpenGL特别是WebGL技术的普及,3D方式的数据可视化也慢慢从佛殿神堂步入了寻常百姓家,似乎和最近高档会所被整改为普通茶馆是一样的节奏。
3D呈现固然比2D方式更直观,但如果摆放图元布局却比2D麻烦,毕竟增加了一个维度,手工布局不如以前2D手工操作方便,因此3D的自动布局功能比2D凸显其重要性。最近玩了玩
HT for Web的弹力自动布局插件挺有意思,特别在平板上Touch方式拖拽三维空间图元节点时,对我这种控制欲较强者很有满足感。
弹力布局也不是啥新鲜玩意儿了,传统弹力布局算法都是采用通过CPU迭代运算的方式,对于海量数据特别是在纯客户端运算的方式肯定是不可行的,因此这些年也有很多采用GPU的方式进行并行计算的方式可极大提高性能,等OpenCL更成熟<a href="http://www.hightopo.com">HT for Web</a>提供了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之类的对象。
http://v.youku.com/v_show/id_XNjc1MjYzODg4.html
分享到:
相关推荐
网络拓扑自动布局算法几篇比较实用的算法论文,写的还可以,自己留做备份
3D拓扑优化算法,经典169行代码,MATLAB语言
针对现有网络拓扑图布局算法多以节点分布均匀为目标,没有考虑边的布局,可能会导致生成的拓扑图中边布局不清晰,提出一种基于扩展力学模型的网络拓扑图布局算法。该算法通过引入点边斥力保证边布局清晰,通过节点...
NULL 博文链接:https://xhload3d.iteye.com/blog/2226706
针对三维悬臂梁,进行静载荷下的拓扑优化设计
中文3DMAX一键拓扑神器!Quad Remesher自动拓扑重构三角面转四边面插件安装方法:直接拖动插件文件(解压后的.mzp文件)到max窗口完成安装!
可以在web页面展示拓扑图,此例展示的是网络连接拓扑图。
topology optimization 学习资料,主要涉及2d -3d 基础的拓扑优化知识,附件为论文与lsm的199行代码。欢迎大家下载学习
免费的网络拓扑自动发现工具,可以讲企业的网络拓扑自动构建以便以后随时发现问题,帮助管理员、工程师快速解决网络及系统故障
拓扑自动发现算法研究,pdf格式,论文,基本算法有Ping,tracetout,Dns
主要针对拓扑优化结果的难以加工,为了实现设计加工一体化,提出一种类似3D打印的技术思想
3D拓扑优化程序matlab,3d拓扑软件,matlab源码.zip
3D拓扑优化程序matlab,3d拓扑软件,matlab源码.rar
局域网 拓扑图 net 可以扫描网络端口,查找网络中的主机
用户对于网管自动化拓扑的需求,主要包括支持设备全面、自动高效地生成拓扑、体现中间件/数据库连接关系、支持特殊的拓扑操作实现。针于网管自动化拓扑的需求,智和网管平台提出了自动化拓扑解决方案,通过网管平台...
拓扑树形布局描述
功能如下: ...拓扑图可以按树型、Spring、圆形、Organic等自动布局排列。 4.设备内部资源发现 自动发现出设备内部的网口、光口、电口、磁盘、内存、CPU、软件服务等资源信息,进一步了解设备的内部状态。
用于拓扑发现的工具 ping,Traceroute,DNS,SNMP。以及算法的原理性介绍