DESIGN AND IMPLEMENTATION OF VIRTUAL SIMULATION TEACHING SYSTEM FOR UAV BASED ON WEBGL

: With the advent of the 5G era of digital smart city, "UAV + Application" is booming, and there is more and more demand for UAV remote sensing technology. How to cultivate high-tech application talents of UAV has become the primary problem to be solved in the development process of UAV. Based on WebGL technology, this paper combines virtual reality and panoramic technology, and adopts lightweight B/S architecture to develop an open platform for virtual simulation teaching that integrates online display, teaching, practical training, assessment, communication and management of UAV. The platform realizes the "three-dimensional teaching material, teaching platform, virtual exhibition hall" of the trinity teaching mode. Students can log in through the account to carry out theoretical learning, flight control operation learning and other interfaces, which can meet the training needs of high-tech application talents of UAV and strengthen students' understanding of theory and practice, simulation training has the advantages of repeated practice, without being limited by the space and time, and solve the problems of low interest, poor scalability and high cost of traditional UAV training.


INTRODUCTION
1 Unmanned aerial vehicles are intelligent high-tech products that can be moved in the air under the network environment and the products of high-tech in the information age (Jin et al, 2019). Under the trend of intelligence, UAV application technology combined with hyperspectral remote sensing as an emerging high-tech means has become a research hot spot at present, widely used in remote sensing mapping, geological survey, natural disasters, military applications, agriculture and forestry plant protection, power patrol, security emergency, police law enforcement, film and television aerial photography, environmental monitoring, medical care, weather forecasting, garbage disposal, urban planning, logistics and distribution, the era of digitalization of UAV has quietly arrived. "UAV + Application" is fully blossoming, and a large number of UAV technical talents are urgently needed.
The UAV simulation teaching based on WebGL has high requirements for practical ability. On the one hand, the field operation process of UAV application covers a wide range of knowledge points, which is a skill that requires repeated practice and operation. On the other hand, the operation of UAV requires strict requirement on the training site, and improper operation is easy to cause accidents. Therefore, it is urgent to introduce virtual simulation into the teaching of UAV, build a system-complete teaching system, and realize the virtual simulation operation of UAV. Users can immerse themselves in the scene and experiment or learn without limit of time, place or times, so as to improve their initiative, interest and practical ability. In modern teaching, virtual simulation experiment is an important embodiment of the combination of theory and practice. As a new type of teaching platform, the virtual simulation system provides new ideas for the problems existing in traditional teaching and has high application value. In recent years, with the advent of the "Internet +" era, more and more teaching and training has been carried out in the form of virtual simulation. Gatto used virtual simulation technology for modeling interaction of virtual control room (Gatto et al, 2013). Qiao applied the virtual simulation technology to the power system operation and development (Qiao et al, 2013). Lam demonstrates the advantages of virtual reality technology for medical teaching experiments (Lam et al, 2014). Bhagat used virtual simulation for military fact-finding training (Bhagat et al, 2016). Under the background of rapid development of virtual simulation technology, people are increasingly aware of the importance of introducing virtual simulation into teaching. The virtual simulation system is a new type of teaching platform. The 720 ° panoramic 3D scene is used as the carrier of the virtual teaching of the UAV, which provides a stage for the training and teaching of the UAV. The maturity and development of virtual reality (VR) technology and WebGL development provide technical support for virtual simulation teaching. Virtual reality technology is a new technology of computer-generated virtual simulation environment, with which users can interact with perception and realize natural interaction with three-dimensional scenes (Merians et al, 2011). It can create virtual scenes, simulate real-world environments, combine virtual and reality, and realize human-system interaction. At present, the traditional technology Web3D for 3D visualization requires the installation of plug-ins to render 3D scenes, and the visual effects of the screen are rough, which is more and more difficult to meet people's needs. On this basis, the emerging WebGL technology accelerates the development process of 3D visualization (Yin et al, 2018). WebGL simplifies the implementation of virtual simulation system, reduces the hardware requirements, has a better visual interface, and has a stronger immersive experience effect, so that teaching is no longer flat and boring, and it promotes the process of learning.
In view of the above shortcomings, this paper adopts B/S architecture, based on three.js three-dimensional engine, designing online display, teaching, training, assessment, communication and management in the integration of UAV virtual simulation teaching platform, to construct a variety of UAV model integration the scenario, solves the problem that the browser needs to install the plug-in to browse, and user interaction with the UAV, the unmanned ship through the process of implementation, verify the validity of the virtual simulation teaching system of UAV. It shows that the threedimensional scene of the system interactive and immersive friendly, and has high teaching efficiency. It can well meet the needs of users and make up for the shortcomings of traditional teaching. UAV virtual teaching system achieved virtual simulation to a large degree making the traditional teaching course into animation with virtual technology and more interactivity and facticity.

System Architecture
Virtual simulation teaching system for UAV based on WebGL uses WebGL technology combined with three.js threedimensional open source framework development. The three.js framework is usually a combination of modules that are common to code, which is used in many fields. Most of the 3D visualization systems use the C/S architecture, which requires high software and hardware and is not lightweight enough. Therefore, the system adopts the B/S architecture (browser with WebGL parsing capabilities/web server ), the loading speed is fast, and the browser can be opened without installing the Flash plug-in, which greatly reduces the development difficulty. System architecture diagram is shown in Figure 1 In the system architecture design and development, through the integration of the presentation layer, the control layer and the data layer, the site.xml file is parsed to obtain the data of the entire scene. The presentation layer uses JavaScript, HTML5, CSS programming, design and display the user login interface and 3D virtual scene; The control layer as the link between the presentation layer and the data layer, converting the model data for loading; The data layer is responsible for the storage of system data and focuses on the interacting with the database. The database includes user information, teaching resource information, device information, 3D model data, and trial balloon. The user login interface, server and model data are separated into two parts: the front end and background management. The front end is responsible for browser page development, simple and intuitive, flexible to use; the back end is responsible for server management development. Users, developers, and maintenance personnel perform their duties without affecting each other, simplify system development and maintenance, improve the flexibility, and realize the construction a 3D virtual scene rendering, further meeting user requirements for model visualization, in the case of without any plug-in installed browse and view the 3D model, and perform interactive operations such as scaling, rotating, split combination interactions, and so on to enhance visual perception and stimulate learning interest. The user only enters the system through a browser that supports WebGL, issues a request instructions at the browser end, and the server responds to the request accordingly. Mysql database is installed on the server to store a mount of data. The browser can interact with the database through the Web server, ingeniously solving the 3D interaction problem.

System overall framework design and development
Through long-term exploration and research on the training market of unmanned system, the existing training institutions in the market failed to form a sound teaching system, and the traditional teaching mode could not meet the teaching needs. With the stable development of the industry, it is urgent to establish a standardized, systematic and professional training system.
The design purpose of UAV virtual simulation system is to realize equipment cognition, human-system interaction, virtual simulation experiment operation, online assessment and communication without installing any plug-ins based on WebGL technology, mastering UAV theoretical knowledge and practical skills, and realizing the integration of learning, practice and examination. Based on these functions, the user interface is designed by using HMTL5, CSS and Java Script technology, and the display is integrated on the browser side. The whole system uses 3DMAX modeling, virtual reality technology combined with three.js framework to build the scene, and the 2D user interface and 3D virtual scene are integrated and released into the web browser to achieve virtual experiments instead of actual operations. The system builds the environment to apply the centos7 operating system, and uses the Tomcat application server to respond to HTML5 events, combined with the MySQL database to realize human-computer interaction.

MODULE DESIGN
The design of UAV virtual simulation system is based on the principles of verisimilitude, practicability, openness, high efficiency, integrity and reliability to achieve the best effect of virtual simulation. On the theoretical basis, the development of virtual simulation teaching, using modular design, it is easy to develop and expand system. The main modules of the system are: online tutorial, simulation training, online assessment, user management, and data management.
Online tutorials in the virtual exhibition hall: equipment cognition and animation display; Simulation training includes all kinds of practical training: data processing, equipment assembly, and actual operation; Online assessment is used to test learning effectiveness, communicate and interact with each other, share dynamic information, promote learning; User management changes the Settings of user login, role conversion, password, etc. Data management the management of the data stored in the resource repository involves the updating and management of resources. The overall design of the system is shown in figure 2:

Online Course Basics
The online course module is an important part of the system. Diversified virtual simulation teaching, including graphic, audio and video, MG animation, virtual simulation experiment, detachable mold of 3D printing display and practical operation, containing UAV system, unmanned ship system, data processing combine multiple knowledge points with applications, virtual and real, combined with online and offline teaching to stimulate students' interest in learning and guide students to change their learning concepts. The online courses focus on the learning of basic knowledge of UAV, and cultivate professional ability of the students. By restoring the real environment, creating a virtual classroom scene, embedding the device model of the multi-source unmanned remote sensing system, accurately and realistically restoring the appearance structure of the device, optimizing the details, combining with the application examples of scanning the two-dimensional code display, the virtual exhibition hall zooming and 720 degree rotation, increasing interest and improving learning efficiency. Let students have a certain degree of cognition of the basic knowledge of equipment.Users can learn relevant knowledge and applications according to their own needs. The Phantom 4 PRO knowledge display is shown in Figure 3. Figure 4 shows the DJI M600 Pro. The QR code is placed, and the user can scan the code to view the application examples for learning.
The International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences, Volume XLII-3/W10, 2020 International Conference on Geomatics in the Big Data Era (ICGBD), 15-17 November 2019, Guilin, Guangxi, China

3.1.2
Virtual Exhibition Hall Compared with traditional teaching, the virtual exhibition hall teaching development has more characteristics, and its simulation and interactive further. 3DMax is one of the most widely used 3D design software, with perfect 3D production and powerful rendering output ability, and simple to flexible and operate, which is the key to the establishment of 3D virtual reality model . Based on the data and pictures collection, and modeling on 3DMAX, with obj or fbx as 3D data export format, three.js load the UAV model into the scene through Load() function, using WebGL rendering and graphics integration, combined the technology of VR panorama, using JavaScript language to make Web interactive 3D scenes, integrated display in the browser, make the teaching environment, giving learners an immersive experience, bringing real fuck the sense, as it were, is helpful to enrich the teaching content, improve students' innovative and practical ability. Based on the real teaching environment, we will create virtual classrooms, embed 3D models and basic knowledge of various unmanned remote sensing system devices, accurately and objectively restore the appearance and parameters of the actual equipment, and combine with the data processing application tutorials at the later stage. students can have a preliminary cognition of the equipment and work process.  The page of online exhibition hall provides users with an entrance to the virtual online 3D exhibition hall, through which they can browse different scenes in the virtual exhibition hall. The virtual exhibition hall system displays the virtual teaching environment and equipment exhibition hall with 720° panoramic technology; At the same time, a variety of unmanned remote sensing system devices are presented by online threedimensional display technology; The users can perform threedimensional viewing of the device through the network, disassemble the device, and understand understand the structure of the device. The specific process is shown in Figure 5.

animation display
Disassembling the combined animation display is an important part of the immersive experience. Because OBJ format supports only static model of storage, so through the editable poly in the 3DMAX UAV paddles, batteries and fuselage modeling, respectively, to export in FBX format introduced FBXLoader() function and inflate.min.js plug-in imports into three.js, parsing model animations, through animation to implement disassembly and combination. The UAV can be moved, rotated and dismantled in 3D environment. Firstly, the initial frame position and final frame position of the paddle are set, then the interactive program is written for control, and the disassembly and combination display in the browser perfectly realizes the 3D animation display of the UAV, and the user can browse and learn the components and details of the UAV.

Establishment of 3D model
The number of 3D models is increasing rapidly along with the development of multimedia, animation, WebGL, 3D MAX and CAD technologies. It is very important that the 3D model is built in the virtual environment. The fidelity of the 3D model determines the immersive experience in the 3D scene. Due to the complicated drawing process of HTML5 Canvas tag, 3D MAX software with powerful modeling ability and drawing capabilities is used to make 3D model of UAV. (Huang et al, 2013) 3DMax is one of the most widely used 3D design software, with perfect 3D modeling and rendering output capabilities, which is the key to build a virtual reality 3D model. 3D MAX has a high degree of modeling and simulation, and the lighting and materials are close to reality, and the effect is realistic. Its scalability makes the it easy to load and import 3D models into the virtual environment, and the compatibility makes it perfectly matched with other software.
The UAV modeling process is complex and requires constant optimization of the details to achieve the desired model state. Before modeling, the UAV is firstly photographed and drawn, and 3DMAX is used to model according to the obtained materials. The details are corrected by Photoshop, and polygon modeling is used. The large shape details are firstly stretched and adjusted, and then local stitching is applied to further adjust and optimize the details. In order to make the model realistic and natural, without affecting the normal display of the model, minimize the model surface and vertex number optimization model to ensure that the model is not distorted, and try to reduce the resolution and reduce the number of textures without affecting the rendering resolution display cases. The two textures are combined into one texture to reduce the memory usage and improve the system operation efficiency. After the modeling is completed, the model is optimized by the software's own optimization command, exported in OBJ data format, and loaded into the 3D virtual scene. To provide users with a good interactive experience. The three-dimensional modeling of the drone is shown in Figure 6: Figure 6. 3D modeling of UAV

Rendering Processing
WebGL, as a drawing standard to achieve 3D effect in browser, has good compatibility and has been widely used in 3D visualization. WebGL comes with a new javascriptAPI that makes it easy to render 3D graphics without loading any Flash plug-ins to render the 3D graphics to be displayed in the browser. The immersive effect is better (Lee et al, 2011). WebGL is used to render 3D graphics, and the specific rendering process is shown in figure 7: The vertex shader determines the shape, and the fragment shader determines the texture. Get the WebGL context through the DOM object associated with the canvas element of HTML5, call the canvas.getContext function to get the WebGLRenderingContext, specify the viewport, initialize the viewport, create a vertex array, and the model view matrix (modelview martrix) determines the graphics in the 3D coordinate system. The vertex array is projected into the 3D space, the vertex shader performs vertex buffering, the primitive assembly into the fragment shader texture buffer, and after rasterization processing, the graphics are drawn.

Construction of virtual scenes
VR based 3D virtual scene pay attention to the training effect of UAV, which requires the virtual scene to be highly similar to the real environment and realistic. The 3D scene of WebGL is mainly composed of scene, camera, renderer and 3D models (Zhao et al, 2015). The scene is a container, using canvas in HTML5 as the rendering container, and containing data of all 3D objects. The camera controls the position, rotation and perspective (Xiang et al, 2018). It uses a perspective camera (THREE.PerspectiveCamera), which is close to reality and fits the human visual experience. The renderer determines how the object appears in the scene. After the scene is built, the model is loaded and rendered in the scene. As a lightweight 3D engine, Three.js makes it easy to add scenes, cameras, renderers and more. Firstly, 3D virtual space is constructed according to field measurements, and immersive space is tailored. Then the perspective camera is set up as the perspective observation. the 3D models of UAV are created by 3D MAX software into the three.js in OBJ format and MTL format data, and the THREE.OBJLoader() and THREE.OBJMTLLoader() auxiliary functions are used to to import the 3D models of the UAV into the virtual scene through the loading command. Rendering through the Render() function, rendering the scene in the renderer to render a 3D virtual experience scene on the web page.

Interaction design
The system mainly realizes user interaction with scene and model through mouse events. Human interaction is realized through the communication center, which not only provides a platform for users to communicate and learn, but also provides a realistic training scene. User interaction with virtual scenes through mouse events, resulting in a higher level of immersive experience. Human-computer interaction is mainly reflected in zooming, moving, and rotating events. In the scene, the scene interface is zoomed by scrolling the wheel, and the left mouse button is dragged to realize the 720° movement rotation of the scene. For the model, the mouse wheel controls the zooming of the model, the left mouse button is held down and dragged to achieve the rotation of the 3D model, and the right mouse button is clicked to drag the model.

Resource Management Module
Resource management includes integrated management of resources such as data management, user management, and online assessment. Data is updated and optimized by interacting with a web browser. The system forms a perfect teaching system under the continuous optimization and updating of resources.
The data management module involves the updating and management of data. One part contains the three-dimensional teaching materials and virtual resources independently developed, and the other part contains the high-quality resources discovered by users in the process of using and teaching. Data management can update question bank resources, text information, 3D animation and simulation experiment, according to the actual teaching needs, and keep pace with the times. Data management can update the question bank resources, text information, 3D animation, simulation experiments according to the actual teaching needs, and keep pace with the times. Support to add, delete and edit the contents of the question bank. The template is imported into test question bank. you can freely group and publish test papers, through the title, question type, classification and other conditions for quick query.
The user management module is mainly used for setting user login, user list and user roles (students, teachers, tourists and administrators). User login can modify personal information and set permissions, including the addition, deletion and modification of resources.
The online assessment module is used to test theoretical learning results and promote UAV learning. Online assessment includes course exercise assessment with different content, different types of questions (single choice, multiple choice and judgment questions) and different equipment. According to the operation process of students, automatic evaluation, according to the accuracy of the operation process, quantitative assessment results.

Simulation experiment
The UAV virtual simulation system is a platform for students to learn and practice independently. The simulation experiment is the key module of the system. The traditional experimental teaching is limited by environment, weather and insufficient equipment and other problems, which results in fewer actual operations and less experience, so it is unable to achieve the effect of skilled operation of UAV. The main purpose of the simulation experiment is to help users master the operation methods and specification requirements, and cultivate practical operation ability. Training time can be reduced through simulation and training. Users can experiment in the virtual environment without worrying about the impact of the environment. They not limited to time and space, practice in an unlimited number of times until they become proficient, which improves the learning efficiency and enables students to change from passive learning to independent learning. The simulation experiment carries out the assessment of the student's operation process in real time and evaluates the score according to the operation accuracy. Through the online virtual simulation experiment, the real experimental process is simulated, and the method of solving the problem is mastered on the basis of multiple experimental operations, thereby improving the ability of students to solve problems in practice. The virtual simulation experiment interface based on WebGL is shown in Figure 8: UAV virtual simulation interactive interface as shown in the figure, The UAV rocker has two modes: American hand and Japanese hand. The user selects a rocker mode selection by the remote controller to perform a simulation exercise. The keyboard WASD controls the left joystick and the IJKL controls the right joystick. W stands for left rocker pushing up, A for left rocker pushing to the left, S represents the left rocker pushing down, D for left rocker pushing to the right. I stands for right rocker pushing up, J for right rocker pushing to the left, K for right rocker pushing down, L for right rocker pushing to the right. Press the keys SD and JK at the same time to form "inner eight" to start the UAV. Currently the American hand remote sensing mode, pushing the right rocker up, that is, pressing the W, the UAV will fly upward, and the system interface will record the flight altitude. The UAV winding pile "S" type can train the basic operation of UAV up, down, forward, backward, left-handed and right-handed effectively, scoring in real time, and the total score is 100 points. Through the simulation of UAV operation, the UAV is controlled to move forward and backward, up and down, and to rotate left and right, practicing indefinitely until you are proficient in UAV operation.

Interactive display
Virtual exhibition hall is a new direction for the development of virtual simulation teaching, aiming at the problems of high construction cost of physical laboratories, insufficient practical training of UAV and large demand for talents. The 3D virtual scene is integrated and displayed in the browser, which makes the teaching environment threedimensional, giving the learner an immersive experience, bringing an immersive sense of practical substitution, which is conducive to enriching teaching content and improving students' innovation and practical ability. The online exhibition hall displays the virtual teaching environment and equipment exhibition hall with 720 ° panoramic technology. Multi-source remote sensing equipment is displayed. Users can disassemble and combine the equipment to understand the structure of the equipment. The virtual exhibition hall is shown in Figure 9: (a) Demonstrate the virtual 3D environment of the UAV classroom, taking the classroom as the original shape, virtualizing the table, chair, computer, etc., and creating a 720 ° rotating virtual space for display in all directions. (b) it shows the construction of the computer room, which is adjacent to the UAV classroom. (c) The "720" panorama is displayed. The "720" virtual panorama is the effect of horizontal 360 ° and vertical 360 ° full viewing Angle, with the features of 720 omni-directional, real scene display, clear and interactive. The online exhibition hall page provides users with the entrance into the virtual online 3D exhibition hall. Users can enter and use the mouse to interact, browse for different scenes in the virtual exhibition hall, 720 ° view exhibition hall device information, zoom view detail structure, close understanding of UAV, to maximize the teaching effect in the interaction of experience.

CONCLUSION
In view of the problems of imperfect traditional UAV teaching facilities and insufficient practical operation of students, the research adopts B/S architecture and based on three.js 3D engine to develop a UAV virtual simulation teaching platform integrating online display, teaching, practical training, assessment, communication and management. It provides new ideas for improving traditional teaching methods. Through the establishment of multiple UAV models, the integrated loading UAV virtual interaction scene is built, which solves the problem that the browser needs to install plug-ins to browse. The integration of learning practice and examination is realized through equipment cognition, simulation training and online examination. Finally, the research verifies the effectiveness of the designed UAV virtual simulation teaching system through the interaction process between users and UAV and unmanned ships. The results show that the 3D scene interaction and immersion of the system are friendly and have high teaching efficiency, which can well meet the needs of users and make up for the shortcomings of traditional teaching. The practice shows that the virtual simulation teaching system of UAV based on WebGL not only makes up for the shortcomings of traditional teaching in practice, but also promotes the development of UAV to a certain extent with obvious results. Promoting the development of online virtual teaching in today's big data era is of great significance and promotes the development of digital teaching.
However, some functions of the UAV virtual simulation training system still have room for further improvement: How to render 3D scene more lifelike based on WebGL efficient technology, how to display the UAV external collection, and how to deal with massive data in internal industry need further exploration and research. Secondly, the platform currently only has the basic functions of learning, training and examination. For the specific application of imitation of real operation experiment, it still needs to be further developed and improved.