The Presentation of the Multi-layer Structure of Network with 3D

The discussion on the application of 3D scenario to modern network management never stops. For example, how many application scenarios and the value of the application there are? What are they? How many benefits can it bring to product development and system use? Now I’m going to introduce an application scenario to you and hope that through this opportunity more requirements on applications will be elicited, thus enriching people ‘s application system.
Recently a requirement shared by many people appears. They want multi-layer structure of network to be shown in the same page. The advantages of it are:  the logical and physical structures of a network are distinctly and clearly shown in the same page. At the same time, the interaction between different layers, like changing the linking relationship between the inner and the outer nodes of a subnetwork, will not involve the complicated operations as drilling down or up, or collapsing or expanding groups.

TWaver has already provided the example code for the page mentioned above with 2D whose result is already agreeable. However, with the development of technology, clients have made further requirements and they have pointed out some disadvantages of the original way: lacking three-dimension and being no three-dimensional interactions in the scenario. At the other hand, if there are a lot of layers and nodes are dispersedly spread, it is very troublesome to make such graph.
In the interface, we generally show the hierarchical relationship of nodes with their different height. As is shown in the following image, the node at a high position and the one at a low position belong to different layers and the nodes of almost the same height are in the same layer. 3D objects all have a Z position to show their height. In this way, why don’t we show the hierarchical relationship of nodes through the difference in Z positions?
First, let’s find the data in the subnetwork. We consider the data in the same subnetwork as being in the same layer, namely, they share the same Z position.

private function createGroup1():void{
    var box:ElementBox = network.elementBox;
    var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),
                                                        new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);
    box.add(bus);
    box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(2,0,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(4,0,0),
        serverSize,s3,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),
        serverSize,s2,null,null,null,"s"));
    box.add(NodeUtils.buildLink([gpg(0,ly,0),gpg(0,ly,8)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(2,ly,0),gpg(2,ly,8)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(4,ly,0),gpg(4,ly,8)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(2,ly,8),gpg(2,ly,10),gpg(8,ly,10)],
        8,0x20AA20));

    box.add(NodeUtils.buildNodeWithCommon(gpg(8,0,10),
        srSize,csr,null,null,null,"s"));

    box.add(NodeUtils.buildBus(gpg(4,ly,14),gpg(8,ly,14),
        12,0xa0a0a0));
    box.add(NodeUtils.buildNodeWithCommon(gpg(5,0,17),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(7,sy,17),
        smallSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildLink([gpg(5,ly,17),gpg(5,ly,14)],
        3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(7,ly,17),gpg(7,ly,14)],
        3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(6,ly,14),gpg(6,ly,12),gpg(8,ly,12),gpg(8,ly,10)],
        8,0x20AA20));
    box.add(NodeUtils.buildBus(gpg(8,ly,10),gpg(10,ly,10),10,0x00a0a0));
    box.add(NodeUtils.buildBus(gpg(10,ly,8),gpg(10,ly,12),12,0xa0a0a0));
    box.add(NodeUtils.buildLink([gpg(10,ly,9),gpg(13,ly,9)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(10,ly,11),gpg(13,ly,11)],3,0x00AAA0));
    box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,9),
        smallSize,s2,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,11),
        smallSize,s2,null,null,null,"s"));

    box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(12,ly,5)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(16,ly,9)],3,0x00AAA0));
    box.add(NodeUtils.buildNodeWithCommon(gpg(12,0,5),
        serverSize,s3,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(16,0,9),
         serverSize,s1,null,null,null,"s"));

    box.add(NodeUtils.buildBillboard(gpg(22,ly,9),"cloud"));
    box.add(NodeUtils.buildLink([gpg(16,ly,9),gpg(22,ly,9)],3,0x00AAA0));

    box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(18,ly,11)],3,0xAA00A0));
    box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(17,ly,17)],3,0xAA00A0));
    box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(15,ly,19)],3,0xAA00A0));
    box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(10,ly,19)],3,0xAA00A0));
    box.add(NodeUtils.buildNodeWithCommon(gpg(18,sy,11),
        smallSize,s3,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(17,sy,17),
        smallSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(15,sy,19),
        smallSize,s2,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(10,sy,19),
        smallSize,s2,null,null,null,"s"));

    var plane:Node = NodeUtils.buildPlane(new Vector3D(0,-42,0),
        new Vector3D(1000,1000,1000),0xE0E0E0,"floor");
    box.add(plane);
    plane.setStyle(Style3D.ZORDERING_LAYER,-100);
    box.add(NodeUtils.createText(new Vector3D(0,-35,-400),
        "Group A",0xFFA0A0));

}

Second, let’s create the data in another subnetwork. To differentiate from the first layer, we set a different z position to the data in the second subnetwork from that in the first one.

private function createGroup2():void{
        var box:ElementBox = network.elementBox;
    var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),
        new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);
    box.add(bus);
    box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-9,b2,0),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,7),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,7),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,7),
        serverSize,s1,null,null,null,"s"));
    box.add(NodeUtils.buildLink([gpg(-15,l2,0),gpg(-15,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-13,l2,0),gpg(-13,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-11,l2,0),gpg(-11,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildBus(gpg(-16,l2,4),gpg(-8,l2,4),12,0xa0a0a0));
    box.add(NodeUtils.buildLink([gpg(-15,l2,7),gpg(-15,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-13,l2,7),gpg(-13,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-11,l2,7),gpg(-11,l2,4)],3,0x00AAA0));
    box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,ly,0),gpg(0,ly,0)],
        3,0x20AA20));
    var plane:Node = NodeUtils.buildPlane(new Vector3D(-800,100,300),
        new Vector3D(400,400,400),0xA0EEA0,"floor");
    box.add(plane);
    plane.setStyle(Style3D.ZORDERING_LAYER,-50);
    plane.setStyle(Style3D.BOTH_SIDES_VISIBLE,true);
    box.add(NodeUtils.createText(new Vector3D(-700,l2+20,100),
        "Group B",0xFFA0A0));
}

Now we get the result of the layers like this:

With the help of TWaver 3D library, we can rotate the scene by dragging mouse and zoom in and out by scrolling the mouse wheel, and even change the center of the view.