Based HTML5 + WebGL 3D visualization system UAV

Foreword

In recent years, more and more rapid development of unmanned aerial vehicles, aerial photography for both people, but also for military reconnaissance, involving a wide range of industries, also known as "flying camera." But as military use, the more stringent performance requirements of UAV is important. This system is through Hightopo of HT for Web products to build a UAV 3D visualization systems, through its panoramic display of information to simulate UAV surveillance drones state.

Display system includes four kinds of modes: mode entity, thermodynamic model, and a wireframe internal mode, the mode switching can be performed by the operation button below the aircraft.

Preview Address: https://hightopo.com/demo/plane/

Implementation process

Load interface components using 2D topology mapping, various sizes of full vector icons, compared with the traditional png jpg format images, perfect fit mobile terminal, PC terminal, such as a large screen and resolution of the screen, does not appear distortion.
UAVs and the surrounding information panel with built 3D engine scene, drone user can view the scene from any position.
Animation Guocheng product provided by changing animation function ht.Default.startAnim Lai drive pattern attribute value Yingyong manner of Time-Based, need only specify the animation number of milliseconds of duration period, calculated by the system to frames or action function is called the number of times in order to ensure more efficient, smoother animation process.

interface

Load interface to show loading progress by property values dynamically changing patterns, to change the transparency of the graphic method after calling hidden2d loaded through animation finishFunc, after which by moveCamera within the narrow perspective of the scene, in order to achieve the effect of fade to fade (i.e., away from the interface is loaded into the 3D scene). At the same time changes the position of the UAV 3D graphics scene is implemented as one of various forms and the separation of a corresponding button.

// loading progress
function loadAnim () {
  ht.Default.startAnim({
    duration: 6000,
    easing: t => {
      return 1 - (--t) * t * t * t;
    },
    action: (v, t) => { 
      loge.s('clip.percentage', v); percentText.s('text', Math.floor(v * 100)); }, finishFunc: () => { hidden2d() } }) } // 隐藏 2d 图纸 function hidden2d(){ ht.Default.startAnim({ duration: 500, easing: t => { return t; }, action: (v, t) => { dm2d.each(e => { e.s('opacity', 1 - v); }) }, finishFunc: () => { dm2d.setBackground(''); g3d.moveCamera(eye, center, {duration: 3000, easing: t => {return 1 - (--t) * t * t * t;}}); planeFit(); buttonSeparate(); } }) }

Making 2D interface is a graph plotting a drawing, and the logo is made of an icon, an icon can be used multiple times in the drawing, and show a different look. Four right in the figure is the same logo icon, respectively, show different ways of cutting, and transparency, the system logo progress bar cutting effect is proportional to the dynamic change icons to achieve, and fade-out effect of the interface it is to change the transparency. Making the entire icon is a combination of drawing different graphics, these graphics we can to change the color, form style logo on the left side.

UAV switching morphology

UAV body is divided into three forms: solid pattern, and heat wireframe mode. By clicking the button below, a button to switch to the corresponding shape. Switching process, the target form is displayed, and the target are moving up and down form and original form, allows users to simultaneously view a brief, after then return the original form in situ and hide. It has no way hidden, wireframe wireframe mode is to change color, the other two modes is adjust the transparency of the model. Frame where the contour model is generated, automatically calculated by the 3D drawing engine, is very convenient.

// choose to display models
function select(data){
  const name = data.getDisplayName();
  const moveData = dm3d.getDataByTag(name);
  const normalP = normalPlane.p3();

  ht.Default.startAnim({
    duration: 1000,
    easing: t => { return 1 - (--t) * t * t * t; }, action: (v, t) => { if(name === 'linePlane'){ moveData.s('wf.color', 'rgba(64,173,152,' + v + ')'); } else{ moveData.s('shape3d.opacity', v); } moveData.p3(normalP[0], normalP[1] + (4500 - normalP[1]) * v, normalP[2]); isShow.p3(normalP[0], normalP[1] + (2500 - normalP[1]) * v, normalP[2]); hiddenRing(v); }, finishFunc: () => { isShow.s('shape3d.transparent', true); ht.Default.startAnim({ duration: 1000, easing: t => { return 1 - (--t) * t * t * t; }, action: (v, t) => { if(isShow.getTag() === 'linePlane'){ isShow.s('wf.color', 'rgba(64,173,152,' + (1 - v) + ')'); } else{ isShow.s('shape3d.opacity', 1 - v); } moveData.p3(normalP[0], 4500 + (normalP[1] - 4500) * v, normalP[2]); isShow.p3(normalP[0], 2500 + (normalP[1] - 2500) * v, normalP[2]); showRing(v); }, finishFunc: () => { isShow = moveData; if(moveData.getTag() === 'normalPlane'){ moveData.s('shape3d.transparent', false); } isAnim = false; } }); } }); }

通过 3D 引擎，我们可以生成立体图形，也可以添加导入的模型，图形的位置由 x、y、z 三个方向的坐标来确认，而坐标轴汇聚的原点则是图形的锚点，无人机前方旋转的圆环则是将锚点调整到圆环中心后，操纵 rotation 属性进行转动。在系统中线框状态的无人机则是像图中左侧的球体这样生成的，如果我们将图形的透明度调为 0，则只显示线框的样式。

内部结构

在线框模式下，大家会发现按钮的上方出现了一个小按钮，点击它就可以进入到无人机的另一个状态，在这里我们除了可以看到线框，还能够接触到无人机的内部结构，查看它的每一个部件。进入的过程会将场景内的其它图形隐藏，将内部结构显示出来。

// 内部模式
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); } }) } }) }

接下来，我们探索一下进入内部模式时，从四周缓缓移入窗口的图形又是怎么实现的

现如今，终端的屏幕分辨率各式各样，很多网页在开发前期都会选择响应式布局或自适应式布局，而 HT for Web 的 2D 拓扑组件除了提供矢量绘制，还提供了一套相契合的布局方式。从上图中我们可以看到，红框中的部分是最开始的加载界面，而红框四周的部分则是内部模式中移入的部分，系统中的加载页面与此不同，正是因为添加了布局方式。

首先我们将红框中背景图片选为整个页面根节点，修改它的 fullscreen 属性为 fill，并为其添加全屏锁定的方式。其次将根节点设置为其余节点的吸附节点，并为其余节点修改合适的布局方式。这样背景图片就会填充整个界面，而四周节点的位置则始终保持在背景图片的外侧，在加载界面中就不会显示出来了。内部模式将四周节点移动至界面内，也是通过修改位置来实现的，但是因为全屏锁定方式设置为垂直，所以背景的宽度被改变，左右两侧节点的移动则需要在获取到当前界面显示宽度后去计算移动位置。

总结

现如今，信息化快速发展，智能化工具成为了新生产力出现在我们的生活中。与此同时，工业互联网的概念也随之诞生，将人、数据、设备联系到了一起，而可视化界面则可以很好的将数据和设备进行展示，方便管理的同时也更加安全、高效。

HT for Web 提供了 2D、3D 两种模式的可视化方式，它功能强大的同时也易于学习使用，有兴趣的同学也可以来体验一下。