preface

With the development of digitalization, industrial Internet and Internet of Things, China’s gas stations are developing towards manned, unmanned operation and remote control. The traditional manual inspection mode is gradually transformed into online monitoring mode based on automatic control, that is, using data acquisition and monitoring system SCADA. The popularization and application of SCADA system has greatly improved the monitoring efficiency of gas stations in China. This paper discusses the realization of the visual monitoring of gas stations through the visual modeling of gas stations, combined with THE 3D visualization of HT and 2D monitoring panel. Three-dimensional visual monitoring system is the integration of three-dimensional visualization technology and data acquisition and monitoring technology, giving full play to the core advantages of the two technologies, and data sharing through the database, together constitute a new SCADA system. The system also combines the camera monitoring of Haikang. By calling the camera address provided by Haikang, the video stream is transmitted to the foreground in real time and displayed on the 2D page. In the real system, each tanker and tank has its own corresponding data to be displayed. This 2d panel can be designed according to the content it needs to display, and then it can be displayed according to the data from the background. Data acquisition and monitoring system through various sensors for real-time monitoring objects of all kinds of data, upload database and Shared with real-time 3 d visualization technology of 3 d visualization model of monitoring objects and scenes, at last, through intuitive display monitor system, greatly improve the ability to monitor the expression of object data and staff work efficiency.

This system realizes the monitoring of the tanker and oil tank, as well as the retrieval and display of the camera in the gas station. This paper will explain the steps of using HT to build this system, as well as some key codes used in the scene.

Preview address: based on HTML 5 WebGL station 3 d visualization monitoring www.hightopo.com/demo/gas-st…

Interface preview

Video surveillance effect

Tanker monitoring effect

Tank monitoring effect

Switching effect of gas station

Because many gas stations are modeled in the system, different gas stations can be distinguished in the system according to the stationCode of THE URL address, that is, stationCode is the unique identification of the gas station. Of course, the system can be embedded in any third-party system. For example, in the above 3D scene, HT can append the DOM of the 3D scene to the EL dom by using g3d.addTodom (el). G3d is an instance of HT.graph3d. Graph3dView in HT. See the 3D manual for details

HT System setup steps

1. Make models

In THE 3D scene of HT, some simple modeling can be built according to THE HT API, such as the basic 3D model of wall, pipe, hexahedron, floor and so on. For example, if you want to make a 3D sphere model, you can use the following code:

1 var node = new ht.Node();
2 node.s({
3     "shape3d": "sphere"// Node style shape3D = sphere;Copy the code

If you need to use the code to a more complicated model, you can through the vertex information specified model to build, can be understood as a 3 d model is carried out by the triangle surface of patchwork, so specify all triangles of the model can construct the model of triangle surface is formed by three vertex information, Therefore, specifying the vertex information of the model can also be used to build the model. For details, please refer to the modeling manual

However, in our gas station visual monitoring system, our tanker model and the model of oil tank and gas station exterior scene are very complex models. If the above two methods are adopted:

  1. It is unrealistic to splice the gas station through the first simple model of wall, sphere, hexahedron, etc., because the model is not so comprehensive, and the mapping part is not easy to paste separately, so it is not feasible.
  2. Although it is feasible in theory to construct all models of gas stations by specifying vertex information, it requires a lot of work to calculate vertex information. It is conceivable that the workload of the code part is not small, so it is not feasible.

Currently, HT supports the import of OBJ models, so designers can model gas station scenes, refueling machines, tanks and other models according to the location pictures taken by gas stations. Obj models can be built by mainstream MODELING tools such as 3dMAX, and then imported into HT for display. Models that need interaction in the system should be modeled separately. For example, the tanker model and the OBJ model of the gas station scene should not be in the same OBJ, as shown in the following figure:

2. Set up a scene

In the previous step, we have all the models needed for the scene. In ht, we can loadObj model with ht.default. loadObj(objUrl, mtlUrl, params). After ht. Default. SetShape3dModel (name, model) to register the model, the loadObj part used to read model vertex information and map information, is what has ‘been referred to as the second in the previous step by vertex information to construct the model, At this point, vertex information has been provided by the OBJ model, so after getting vertex information, maps and other information, you can register the model by setShape3dModel. Please refer to the OBJ manual for the specific usage method, and then you can use the model by ht node primiography. The specific usage method is as follows:

1 var node = new ht.Node();
2 node.s({
3     "shape3d": name
4 });Copy the code

The above name is through ht. The Default. SetShape3dModel (the name in the name, model), said the figure yuan use to demonstrate the model.

Constitute the monitoring system is used to display tanker, tank panel of specific monitoring parameters in the model, all the 2 d for the vector in the ht, so not distortion to enlarge, the 2 d panel is put through one figure yuan show, by adjusting the styles to beautify the figure of each figure yuan yuan, specific style can refer to the manual of style.

The 2D panel of the oil tank is shown as follows:

3. Interconnection data

In the previous step, we have designed the model to be displayed and the monitoring data to be displayed, and placed them in the scene. Therefore, data docking is required in this step. At present, the docking includes:

  1. Data interconnection between two sides of the 2D panel
  2. Connection of video surveillance

The first connection can be carried out through socket or Ajax. Data from the background can be transferred to the foreground and then dynamically bound to the interface for display. In HT, data binding is used to drive the dynamic refresh of the interface content.

The camera monitoring part of the system is mainly to embed the third-party video DOM into the HT drawing. Dom can be embedded in HT by renderHTML. The principle of DOM embedding is to add a Node pixel at the corresponding position of the drawing, and according to the zoom value of the drawing, And the horizontal offset value (TX), vertical offset value (TY) drawing information and the pixel’s position, width, height pixel information to dynamically calculate the WIDTH and height of the DOM and dom position, the specific code can refer to the following:

 1 letRect = node.getrect (), // Get the node's bounding rectangle information 2 zoom = graphView.getzoom (), // Get the drawing's zoom value 3 tx = graphView.tx(), Ty = graphView.ty(); Rect. X *= zoom; rect. 7 rect.y *= zoom; 8 rect.width *= zoom; 9 rect.height *= zoom; 10 11 // Div left is the x coordinate below, top is the y coordinate below 12let x = tx + rect.x;
13 let y = ty + rect.y;
14 
15 div.style.position = 'absolute';
16 div.style.width = rect.width + 'px';
17 div.style.height = rect.height + 'px';
18 div.style.left = x + 'px';
19 div.style.top = y + 'px';Copy the code

The above code shows the principle of dynamically placing DOM to HT drawings, so users can put DOM elements into 2D drawings according to their own needs. The monitoring module DOM in this system is dynamically placed based on this principle. The following figure shows the dom superposition effect.

4. Make animations

The animation effect in this system is relatively simple, which is mainly to fly the perspective to the object when clicking the tanker or oil tank, and the corresponding monitoring data is displayed on the 2D panel. The perspective switch is mainly to modify the data of eye and Center of 3D scene, but HT provides a more convenient operation function, flyTo. So the main code is the following line:

3 g3d.flyTo(node, {animation:true, direction: [-16, 6, 8], distance: 600 });Copy the code

For details about the second parameter, please refer to the 3D manual provided above. Direction: undefined by default, the eye is in the direction of the target (relative to the target, affected by the rotation of the target itself, distance: The default is undefined (if undefined, use ratio mode below to calculate the distance). The floating point type represents the fixed distance between the eye and the center, as explained in the above two arguments.

Another use of this function is that when the value of the first parameter is null, the perspective will be adjusted to all nodes in the scene, so it is possible to see the panorama of the gas station by using this function.

System in another effect is falsified background, along with the background of principle is to modify the transparency of all models in the scene, for example by traverse all the nodes in the system, set the transparency of the current node is 0.1, is on the vision we see the scene which is a scene of blur, specific node style properties can refer to the manual of style has given above, The key codes are as follows:

Datamodel.each ((d) = >{3 // opacityMap is used to record the transparency value of a node before it is blurred 4if(! opacityMap[d.getId()]) { 5 opacityMap[d.getId()] = { 6'shape3d.opacity': d.s('shape3d.opacity'7),'shape3d.transparent': d.s('shape3d.transparent'8),'all.opacity': d.s('all.opacity'9),'all.transparent': d.s('all.transparent'),
10             'left.opacity': d.s('left.opacity'11),'left.transparent': d.s('left.transparent'12),'right.opacity': d.s('right.opacity'),
13             'right.transparent': d.s('right.transparent'14),'front.opacity': d.s('front.opacity'15),'front.transparent': d.s('front.transparent'16),'back.opacity': d.s('back.opacity'17),'back.transparent': d.s('back.transparent'18),'top.opacity': d.s('top.opacity'19),'top.transparent': d.s('top.transparent'),
20             'bottom.opacity': d.s('bottom.opacity'21),'bottom.transparent': d.s('bottom.transparent'22),'3d.selectable': d.s('3d.selectable'), 23}; // Set opacity of the current node to opacity at most 0.1 in the system'shape3d.opacity': opacity,
28         'shape3d.transparent': true29,'all.opacity': opacity,
30         'all.transparent': true31.'left.opacity': opacity,
32         'left.transparent': true33.'right.opacity': opacity,
34         'right.transparent': true35,'front.opacity': opacity,
36         'front.transparent': trueAnd 37'back.opacity': opacity,
38         'back.transparent': true,
39         'top.opacity': opacity,
40         'top.transparent': true,
41         'bottom.opacity': opacity,
42         'bottom.transparent': true43,'3d.selectable': false44}); 45});Copy the code

After the above code is executed, all nodes in the scene will be blurred. Because the transparency attribute needed to be set for the blurred node is different, there are a total of more than ten style attributes above that need to be determined and set. For the specific style name, please refer to the style manual proposed above.

In the scene, there is operation of double-clicking convenience store to enter the interior scene of convenience store. The specific interaction and effect are shown as follows:

5. Optimize your scene

When there are too many points or faces in the 3D scene, as well as too many 3D panels and bulletin boards, several optimization strategies can be used in HT to optimize the 3d scene. We know that all models in the 3D scene are composed of triangular planes, and triangular planes are composed of three vertices. Therefore, if there are too many points or faces in the scene, there will be some lag, and GPU rendering will be time-consuming. In HT, you can input g3d.showdebugtip () on the console to display the total number of faces and vertices in the scene, and the specific effect is as follows:

Vertices are the number of points, and Faces are the number of Faces.

Therefore, the following four intuitive optimization strategies can be optimized in HT:

  1. Reduce the number of sides of the model
  2. Use a large number of the same primitives in a batch processing scenario
  3. Use caching for 3D panels
  4. Hide some detail primitives when the scene view is far away, or hide invisible primitives when the scene view is close to a model to improve performance

In the first case, the number of faces of the model can be reduced by various means of surface reduction during the design modeling. This part of the optimization space is the largest and the effect is the most obvious.

In the second case, batch can be used. The principle of batch to improve performance is that the performance is poor when the model is drawn independently by the elements, but when a batch of elements are aggregated into a large model for one-time drawing, the refresh performance of WebGL will be greatly improved. For details, please refer to the batch manual.

In the third case, the attribute shape3d.image.cache is used to enable the cache of the panel. When a scene needs to use a large number of functions similar to bulletin board, we can use the above attribute to set the cache of the node. The specific usage method can be referred to the 3D manual.

In the fourth case, we can hide some detail primitives when our eyes are far away from the scene. For example, when the map is zoomed in to a very small size, specific cities will be hidden. When zoomed in to the details of a specific model, other invisible primitives can be set to be hidden accordingly, which can improve a lot of performance.

Mobile effect