Choice of Industrial Internet Visualization System Style: Realization of 3D Data Center Computer Room in Wireframe Mode

Posted May 27, 202012 min read

Preface

3D visualization is to present complex and abstract data information with appropriate visual elements and perspectives to facilitate the display, maintenance and management of the system. In terms of the construction options of the visualization system, the styles and effects presented are varied, and the respective applicable occasions are also different. For the embodiment of technology style, wireframe mode may be one of the most representative implementations. In the realization of the management and maintenance of the data visualization of the computer room, driven by the Industrial Internet, the maintenance data and system construction reflected are becoming more and more diverse, and Hightopo(hereinafter referred to as HT) ** HT for Web **products have a wealth of configuration options, this article will introduce how to use HT rich 2/3D configuration to build a wire-frame building visualization machine room solution.

Introduction to interface and preview of effect

The presentation of the main page is based on the design of the wire-frame technology style building. The building is surrounded by a digital soaring light column. The traffic flow effect and the simulation of the parking lot are distributed outside the site. Among them, there are many devices on the data center. As well as the early warning processing of the equipment, the side of the main office building presents the distribution of floors side by side-office floor scene and machine room floor scene; switching to the machine room scene in the inner scene, showing the arrangement of the machine room equipment group, click to select the cabinet to view Convert to this device, and blur the surrounding devices to display the clicked cabinet information, and also have a one-click switch to view the utilization information of the cabinet; another internal scene office is used to display daily office application scenarios, which can be added Maintain the information data to manage.

System Analysis

Throughout the promotion of the Industrial Internet, the development of the computer room visualization system is an extremely important part. 3D visualization, as an interactive computer room management platform with multiple visual simulation experiences, has management functions such as computer room assets, energy, and environment, and centrally monitors and manages the computer room in all aspects. This is an important part of the internal data monitoring of the computer room. In the overall style construction, the external buildings and equipment adopt the technology-style wireframe mode, which can be more cool in the effect display and value-added in the interactive experience. Add points.

One, wire-frame mode technology style construction

In the stereotyped scene building modeling, most of them are built on real scenes. The sensory is different from the digital display of the technology style. The wireframe mode is a good interpretation of this style.

Second, the establishment and application of the monitoring and management system of the 3D visual data center computer room

The 3D visual data center computer room centralized monitoring and management system implements remote centralized monitoring and management of the computer room, dynamically displays device alarm information and device parameters in real time, and quickly locates the faulty device, so that maintenance and management can be controlled and managed from the manual passive guard to the computer Mode shift.

Code

One, wireframe style technology scene

In the 3D scene style, there are many ways to achieve it, and the wireframe style is the one that most embodies the sense of technology. The scene architecture and the main body of the equipment are displayed in a wireframe style, in which the equipment on the data center will also correspond to the display of early warning events.

Wireframe mode is a special treatment for model modeling obj, the mechanism is encapsulated in HT itself, and we can select some modeling style restrictions while opening wireframe mode, such as the four sides of model obj or The three sides will affect the way the lines in the wireframe are drawn. Here, by merging the three sides and turning on the display of the four sides, it serves as a simple embodiment of the wireframe style:

//Control whether to load the four sides of obj, otherwise, merge triangles through algorithm
ht.Style ['wf.loadQuadWireframe']= false;
//Control whether to display four sides
ht.Style ['wf.combineTriangle']= true;

After the tone of the style is determined, in the main building scene, some simple event mechanism needs to be done, such as the performance of the selected state of the model and the display of the device warning information pop-up window.

The state of the model is that the highlighted frame of the selected model is turned on:

//Open the model and select the highlight wireframe width is 1
g3d.getHighlightHelper(). mode = 1;

After the model is selected and highlighted, we can clearly show the clicked model. With the processing of click events and the display of device information pop-ups, there will be a very friendly effect display in the interactive experience. For the pop-up display of device information, first bind the device to the label, and then use this unique label to find the device in the data model dataModel, and then pop up the corresponding pop-up information or warning event.

//Obtain node information from the data model based on the unique identification label
this.equipmentPanel = g3dDm.getDataByTag('equipmentPanel');
this.alarmEquipmentPanel = g3dDm.getDataByTag('alarmEquipmentPanel');
this.buildingPanel = g3dDm.getDataByTag('buildingPanel');

handleInteractive(e) {
    //Get event type kind and event processing node data
    const {kind, data} = e;
    if(kind === 'clickData') {
        let tag = data.getTag();
        if(! tag) return;
        if(tag === 'equipment') {
            //Get the location information of the clicked device
            var p3d = data.getPosition3d();
            //Set the height by 20 on the Y axis of the corresponding space coordinate on the device position information
            p3d [1]= p3d [1]+ 20;
            //Get device panel
            var panel = this.equipmentPanel;
            //Device panel display
            panel.s('3d.visible', true);
            //Set device panel coordinates
            panel.setPosition3d(p3d);
            //Hide the building panel and warning panel
            this.buildingPanel.s('3d.visible', false);
            this.alarmPlane.s('3d.visible', false);
        }
        if(tag === 'alarmEquipment') {
            //Get the location information of the clicked device
            var p3d = data.getPosition3d();
            //Set the height by 20 on the Y axis of the corresponding space coordinate on the device position information
            p3d [1]= p3d [1]+ 20;
            //Get early warning panel
            var panel = this.alarmEquipmentPanel;
            //Early warning panel display
            panel.s('3d.visible', true);
            //Set the warning panel coordinates
            panel.setPosition3d(p3d);
            //Hide building panel and equipment panel
            this.buildingPanel.s('3d.visible', false);
            this.equipmentPanel.s('3d.visible', false);
        }
        if(tag === 'building') {
            //Show building panel
            this.equipmentPanel.s('3d.visible', true);
            //hide device panel
            this.alarmEquipmentPanel.s('3d.visible', false);
             //Hide the warning panel
            this.buildingPanel.s('3d.visible', false);
        }
    }
    //Click the background to hide all panel information
    if(kind === 'clickBackground') {
        this.equipmentPanel.s('3d.visible', false);
        this.alarmEquipmentPanel.s('3d.visible', false);
        this.buildingPanel.s('3d.visible', false);
    }
}

Second, the realization of 3D animation effect

There are many collections of animations in 3D scenes, which can simply and clearly reflect some of the elements required in the scene, such as traffic flow, digital soaring, and parking lot effects, which can add vitality to static scenes.

Obtain the corresponding number, vehicle flow and light column nodes through the identification, and then achieve the above effect state by simply encapsulating the animation function drive:

//Traverse the data model to get the identification node you want to find and animate accordingly
g3dDm.each((data) => {
    //Get the node ID
    let tag = data.getTag();
    if(tag === 'num') {
        //Digital soar animation
        animNum(data);
    } else if(tag === 'car') {
        //Set the initial uv offset of the vehicle node
        data.s('top.uv.offset', [1, 0]);
        //Vehicle shuttle animation
        animCar(data);
    } else if(tag === 'light') {
        //Light column soaring animation
        animLight(data);
    }
});

The realization of all animation effects is based on the ht.Default.startAnim() animation function encapsulated in HT, which supports animation in two ways:Frame-Based and Time-Based. The latter implementation is adopted in this visualization system. Through the control and easing of animation time for duration, users can customize, and the animation is controlled by mathematical formulas, such as uniform speed change, first slow and then fast. Based on the realization of the animation function, three functions are encapsulated for the corresponding performance of the respective display nodes.

The encapsulation function of digital soar animation effect is:

function animNum(data) {
    //Set the range of node size for random number processing
    var temp3 = 16-8 *(Math.random());
    //Random number processing for setting the range of animation running time
    var temp4 = 1200 + Math.random() * 2000;
    //Set the random height of the node's range on the space coordinate Y axis
    var temp5 = 400 + Math.random() * 200;
    //Open animation function
    ht.Default.startAnim({
        duration:temp4,
        easing:function(t) {
            return t * t
        },
        action:function(v, t) {
            //Get the location coordinate information of the node
            var p3d = data.getPosition3d();
            //Set the new location coordinate information of the node
            data.setPosition3d(p3d [0], temp5-temp5 * v, p3d [2]);
            //Set the size information of the node
            data.setSize3d(temp3, temp3, temp3);
        },
        //Continue to call back this animation function after the animation function ends
        finishFunc:function() {
            animNum(data);
        }
    });
}

The wrapper function for vehicle shuttle animation effect is:

function animCar(data) {
    //Open animation function
    ht.Default.startAnim({
        duration:5000,
        easing:function(t) {
            return t
        },
        action:function(v, t) {
            //Determine whether the top texture of the node is the required corresponding information texture
            if(data.s('top.image') === 'symbols/htdesign/fill/flying gradient 2.png') {
                //Get the uv offset information of the node
                var offsetX = data.s('top.uv.offset') [0];
                //Set the new offset value to the node
                offsetX =(offsetX-0.01)%1;
                data.s('top.uv.offset', [offsetX, 0]);
            }
        },
        //Continue to call back this animation function after the animation function ends
        finishFunc:function() {
            animCar(data);
        }
    });
}

The implementation of the light beam is also the same as the effect of digital soaring. It is generated randomly by setting different time differences in random range position coordinates to form the light beam descending effect that is opposite to the digital soaring. The integration is a good interpretation of the overall style of display, and the animation of the light column will not be repeated here.

Correspondingly, the random parking effect display of the parking lot is different from the above-mentioned animated visual display, and it still has its effect significance. It can be connected to the real data to perform visual data maintenance and management on the parking of the entire parking lot. And our implementation here is a good simulation of the handling of this event, also through a simple encapsulation function to reflect the animation effect of the parking lot:

function animPark(data) {
    //Set a random value to reflect the information that the vehicle is parked randomly
    var temp = Math.random();
    //Judge the state of vehicle installation based on random values
    if(temp <0.15) {
        data.s('all.color', 'rgb(255,184,77)');
    } else if(temp> 0.6) {
        data.s('all.color', 'rgba(0,153,255,0.10)');
    }
    ht.Default.startAnim({
        duration:2000,
        easing:function(t) {
            return t
        },
        action:function(v, t) {
        },
        //Continue to call back this animation function after the animation function ends
        finishFunc:function() {
            animPark(data);
        }
    });
}

Three, the realization of the computer room

In the realization of the computer room, the internal information of the cabinet is displayed after clicking the cabinet to lock the perspective, and the status of the surrounding equipment is blurred. Double-clicking the background will return to the original perspective and restore the default state; second, the button will trigger the display of the utilization of the cabinet The color block display can fully observe the internal consumption information of each cabinet, which is convenient for the maintenance and management of the entire machine room.

In the click event processing of the cabinet, first make the entire machine room cabinet transparent and reduce the transparency to achieve the overall blur effect, and then obtain the node information through the click event processing, and then apply the encapsulated door opening animation function, After the door is opened and the enclosure of this cabinet is blurred, the internal device information of the display cabinet is displayed; double-click the background to restore the effect processing operation done before, and the perspective is transferred to the default perspective of the computer room.

After the click event is monitored, the perspective transfer function flyTo() encapsulated by HT is locked to the corresponding cabinet:

  • direction:The default is undefined, the eye is in the direction of the target(relative to the target, affected by the rotation of the target itself), for example \ [0,1,5 ]diagonally upward on the front of the target;

  • animation:default false, whether to use animation, can be set to true or false or animation animation object;

  • ratio:default 0.8, floating point type, which means the distance between the eye and the center is calculated dynamically(for example, 0.8 means the eye dynamically calculates the distance in the above direction to fit all 8 corners of the target bounding box to the screen 80%Within range);

    g3d.flyTo(data, {

      direction:[0, 10, 10],
      animation:true,
      ratio:0.9,

    });

For the opening animation of the door, first of all, the door is set to the corresponding cabinet as the parent node. After the click event is monitored, the corresponding door node and rotation angle information are called according to the multi-click node to call the door's packaging animation function:

//Pass in node and rotation angle information
export function animDoor(data, x) {
    //Open animation function
    ht.Default.startAnim({
        duration:1200,
        easing:function(t) {
            return t
        },
        //Animation execution function, animating the rotation angle based on the incoming angle information
        action:function(v, t) {
           data.setRotation3d(0, -v * x, 0);
        },
        finishFunc:function() {
            //Set the transparency of the door's parent node cabinet to 0.1
            data.getParent(). s('shape3d.opacity', 0.1);
            //Traverse the door's parent node cabinet and set the transparency to 0.1
            data.getParent(). eachChild(function(data) {
                data.s('shape3d.opacity', 0.1);
            })
        }
    });
}

For the process of returning the angle of view of the double-click background, it is through the HT-encapsulated camera movement function moveCamera(), which can achieve a transition effect of angle switching by turning on the animation function according to the center of the angle of view and the eye to be reached:

  • eye:camera position coordinates;

  • center:the coordinates of the center point;

  • anim:default false, whether to use animation, can be set to true or false or animation animation object;

    g3d.moveCamera([1294, 898, 1671], [0, 0, 0], true);

The energy consumption and processing capacity occupied by the cabinet can be reflected by the utilization rate of the cabinet, which can not only intuitively reflect the usage of each cabinet, but also use the feedback of the usage to instantly use some load cabinets or low usage. Cabinets, make intelligent adjustments so that the cabinet group can achieve the most efficient working state. The specific implementation method is to dynamically generate nodes on the cabinet group that occupy the proportion of the height of the cabinet, through random values, and the display of the energy consumption color to reflect the current utilization rate of the cabinet.

loadCapacityNode(g3dDm, cabinetList) {
    cabinetList.forEach((data) => {
        //Create a new utilization capacity node
        var node = new ht.Node();
        //Generate random numbers
        var randomNumber = Math.random() * 100;
        //Random values   are used to reflect the color change of the corresponding cabinet utilization
        var color;
        if(randomNumber <= 30) {
            color = 'rgb(51,153,255)';
        } else if(randomNumber> 30 && randomNumber <60) {
            color = 'rgb(240,225,19)';
        } else {
            color = 'rgb(242,83,75)';
        }
        //Set the location information of the utilization capacity node
        node.p3(data.p3());
        //Set the anchor information of the utilization capacity node
        node.setAnchor3d(data.getAnchor3d());
        //Set the height information of the utilization capacity node
        node.s3(data.getWidth(), data.getTall() *(randomNumber/100), data.getHeight());
        //Set some basic attributes of utilization capacity node
        node.s({
            '3d.visible':false,
            '3d.movable':false,
            'all.color':color,
            'wf.visible':true,
            'wf.color':'rgb(247,247,247)'
        });
        //Set the capacity node as a cabinet, which is convenient to traverse the cabinet nodes when returning to the room perspective and hide them together
        g3dDm.add(node);
        this.capacityList.push(node);
    })
}

to sum up

Wireframe style is just a form of effect display on the technology style. HT itself has accumulated many style keynotes and corresponding industry application occasions through years of industry accumulation, plus its own rich configuration and rapid construction. In response to the wave of the industrial Internet, it can promote the realization of solutions in many industries, such as the derivation of digital twins, the visualization of new infrastructure and other broad industries. They are involved in a variety of industry fields. I believe that HT must bring You discover a different industrial Internet!

In 2019, we have also updated hundreds of industrial Internet 2D/3D visualization case sets. Here you can find many novel examples, as well as explore many fun effect implementations and industrial Internet demonstrations: https://mp.weixin. qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

At the same time, you can also view more cases and effects: https://www.hightopo.com/demos/index.html