Technological diversity: UAV 3D visualization system based on HTML5 WebGL

Preface

In recent years, the development of unmanned aerial vehicles has become more and more rapid. They can be used for both civil aerial photography and military reconnaissance. They involve a wide range of industries and are also called "flying cameras." But for military use, the performance requirements of UAVs are more stringent and important.

This system is a drone 3D visualization system built through Hightopo's HT for Web product, which simulates the monitoring of the drone status through the panoramic display of the drone and its information.

The system contains 4 display modes: physical mode, thermal mode, wire frame mode and internal mode. The modes can be switched by operating the buttons under the aircraft.

Implementation process

• The loading interface is drawn with 2D topology components and fully vectorized icons. Compared with the traditional png, jpg and other formats, the loading interface is perfectly adapted to screens of various sizes and resolutions such as mobile, PC, and large screens, and will not appear Distortion situation.
• The drone and its surrounding information panel uses a 3D engine to build the scene, and the user can view the drone from any position in the scene.
• The animation process uses the animation function ht.Default.startAnim provided by the product to drive the change of the graphics attribute value. Applying its Time-Based approach, only the number of milliseconds of the animation period is specified, and the system calculates the number of frames or the action function is called The number of times to ensure a more efficient and smooth animation process.

interface

Dynamic case operation preview address: https://www.hightopo.com/demos/index.html

In the loading interface, the loading progress is displayed by dynamically changing the attribute values ​​of the graphics. After loading, the hidden2d method is called through the animation finishFunc to change the transparency of the graphics. After that, the perspective of the scene is zoomed in through moveCamera to achieve the effect of fade out to fade in. (That is, leave the loading interface and enter the 3D scene). At the same time, change the position of the graphics in the 3D scene to realize the integration of various forms of drones and the separation of corresponding buttons.

 

The 2D interface is made by drawing a drawing, while the logo is by drawing an icon. An icon can be used multiple times in the drawing and can show different appearances. The four logos on the right in the figure below are the same icon, showing different cutting methods and transparency. The progress bar effect of the logo in the system is to dynamically change the cutting ratio of the icon to achieve, and the interface fades out. It is to change transparency. The entire icon is made by drawing different graphics combinations. We can also change the color of these graphics to form the logo style on the left.

Drone form switching

 

The main shape of the UAV is divided into three types: entity mode, wire frame mode and thermal mode. By clicking the button below, you can switch to the form corresponding to the button. During the switching process, the target form is displayed, and the target form and the original form are moved up and down respectively, so that the user can view them simultaneously for a short time, and then return to the original position and hide the original form. The hiding method is different. The wireframe mode is to change the color of the wireframe, and the other two modes are to adjust the transparency of the model. The wireframe here is generated according to the outline of the model, and it is automatically calculated and drawn by the 3D engine, which is very convenient.

Through the 3D engine, we can generate three-dimensional graphics, or add imported models. The position of the graphics is confirmed by the coordinates of the x, y, and z directions, and the dots where the coordinate axes converge are the anchor points of the graphics. The rotating ring at the front of the machine is to adjust the anchor point to the center of the ring and manipulate the rotation attribute to rotate. The UAV in the wireframe state in the system is generated like the sphere on the left in the figure. If we adjust the transparency of the graph to 0, only the wireframe style will be displayed.

 

Internal structure

 

In the wireframe mode, you will find a small button above the button, click on it to enter another state of the drone, where we can not only see the wireframe, but also touch the inside of the drone Structure, view every part of it. The process of entering will hide other graphics in the scene and reveal the internal structure.

// 内部模式
function moveToInternal(){
  const width = background.getWidth();   // 获取背景当前宽度
  const beginLeft = -(width / 2 - 960);   // 计算两侧节点起始位置
  const beginRight = width / 2 + 960;
  ht.Default.startAnim({
    duration: 2000,
    easing: t => {
      return t;
    },
    action: (v, t) => { 
      linePlane.s('wf.color', 'rgba(64,173,152,' + (1 - v) + ')');
      hiddenRing(v);
    },
    finishFunc: () => {
      dm3d.each(e => {
          e.s('3d.visible', false)
      })
      linePlane_internal.each(e => {
        e.s('3d.visible', true);
      })
      ht.Default.startAnim({
        duration: 1000,
        easing: t => {
          return 1 - (--t) * t * t * t;
        },
        action: (v, t) => { 
          title.setY(-50 + (70 + 50) * v);
          returnButton.setY(1095 + (1020 - 1095) * v);
          leftShape.setX(beginLeft + 130 * v);
          rightShape.setX(beginRight - 130 * v);
        }
      })
    }
  })
}

Next, let's explore how the graphics that slowly move into the window from all around are realized when entering the internal mode

 

Nowadays, terminal screen resolutions are various. Many web pages choose responsive layout or adaptive layout in the early stages of development.  In addition to vector rendering, the 2D topology component of HT for Web  also provides a set of compatible Layout method. From the above picture, we can see that the part in the red frame is the initial loading interface, and the part around the red frame is the part moved in the internal mode. The loading page in the system is different because of the addition of Layout method.

First, we select the background image in the red box as the root node of the entire page, modify its fullscreen property to fill, and add a full screen lock method to it. Secondly, set the root node as the adsorption node of the remaining nodes, and modify the appropriate layout for the remaining nodes. In this way, the background image will fill the entire interface, and the positions of the surrounding nodes will always remain outside the background image, and will not be displayed in the loading interface. The internal mode moves the surrounding nodes into the interface, which is also achieved by modifying the position, but because the full screen lock mode is set to vertical, the width of the background is changed, and the movement of the nodes on the left and right sides needs to be obtained after obtaining the display width of the current interface To calculate the moving position.

to sum up

Nowadays, with the rapid development of informatization, intelligent tools have become new productive forces and appear in our lives. At the same time, the concept of the Industrial Internet was born, connecting people, data, and equipment. The visual interface can display data and equipment well, which is convenient for management and safer and more efficient.

HT for Web  provides 2D and 3D visualization methods. It is powerful and easy to learn and use. Students who are interested can also come and experience it.