基于 HTML5 的 3D 网络拓扑树呈现

澳门新葡亰赌995577 4

在HT for
Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在展现上配合HT
for
Web的弹力布局组件会显得比较直观,一眼望去可以把整个树状结构数据看个大概,但是在弹力布局的作用下,其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了,那么这个3D树具体长成啥样呢,我们来一起目睹下~

HTML5实现3D和2D可视化QuadTree四叉树碰撞检测

QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域。QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数,从而提高游戏刷新性能,本文例子基于HT
for
Web的Canvas拓扑图和WebGL的3D引擎组件,通过GraphView和Graph3dView共享同一数据模型DataModel,同时呈现QuadTree算法下的2D和3D碰撞视图效果:

澳门新葡亰赌995577 1

QuadTree的实现有很多成熟的版本,我选择的是

我构建了HT(

需要注意从quadtree.retrieve(rect)获取需要检测的矩形对象数组中会包含自身图元,同时这些仅仅是可能会碰撞的图元,并不意味着已经碰撞了,由于我们例子是矩形,因此采用ht.Default.intersectsRect(r1,
r2)最终判断是否相交,如果你的例子是圆形则可以采用计算两个圆心距离是否小于两个半径来决定是否相交,因此最终判断的标准根据游戏类型会有差异。

采用了QuadTree还是极大了提高了运算性能,否则100个图元就需要100*100次的监测,我这个例子场景下一般也就100*(10~30)的量:

澳门新葡亰赌995577 2

除了碰撞检测外QuadTree算法还有很多有趣的应用领域,有兴趣可以玩玩这个

澳门新葡亰赌995577 3

澳门新葡亰赌995577,所有代码如下供参考:

function init(){      d = 200;    speed = 8;    dataModel = new ht.DataModel();                                    g3d = new ht.graph3d.Graph3dView(dataModel);                                                      g2d = new ht.graph.GraphView(dataModel);                       mainSplit = new ht.widget.SplitView(g3d, g2d);                       mainSplit.addToDOM();                                            g2d.translate(300, 220);          g2d.setZoom(0.8, true);          for(var i=0; i<100; i++) {        var node = new ht.Node();        node.s3(randMinMax(5, 30), 10, randMinMax(5, 30));        node.p3(randMinMax(-d/2, d/2), 0, randMinMax(-d/2, d/2));        node.s({            'batch': 'group',            'shape': 'rect',            'shape.border.width': 1,            'shape.border.color': 'white',            'wf.visible': true,            'wf.color': 'white'        });        node.a({            vx: randMinMax(-speed, speed),            vy: randMinMax(-speed, speed),            obj: {                width: node.getWidth(),                height: node.getHeight(),                data: node            }        });                            dataModel.add(node);    }                    createShape([        {x: -d, y: d},        {x: d, y: d},        {x: d, y: -d},        {x: -d, y: -d},        {x: -d, y: d}    ]);                       quadtree = new Quadtree({ x: -d, y: -d, width: d, height: d });                                    requestAnimationFrame(update);}               function update() {       quadtree.clear();                    dataModel.each(function(data){        if(!(data instanceof ht.Shape)){            var position = data.getPosition();            var vx = data.a('vx');            var vy = data.a('vy');            var w = data.getWidth()/2;            var h = data.getHeight()/2;            var x = position.x + vx;            var y = position.y + vy;            if(x - w < -d){                data.a('vx', -vx);                x = -d + w;            }            if(x + w > d){                data.a('vx', -vx);                x = d - w;            }            if(y - h < -d){                data.a('vy', -vy);                y = -d + h;            }            if(y + h > d){                data.a('vy', -vy);                y = d - h;            }            data.setPosition(x, y);                                    var obj = data.a('obj');            obj.x = x - w;            obj.y = y - h;                        quadtree.insert(obj);            setColor(data, undefined);        }    });                    dataModel.each(function(data){        if(!(data instanceof ht.Shape)){             var obj = data.a('obj');            var objs = quadtree.retrieve(obj);            if(objs.length > 1){                                            for(var i=0; i

QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分…

澳门新葡亰赌995577 4

要实现这样的效果,该从何下手呢?接下来我们就将这个问题拆解成若干个小问题来解决。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图