CN116048491A - Tdu virtual simulation visual editor and editing method thereof - Google Patents

Abstract

The invention provides a Tdu virtual simulation visual editor and an editing method thereof, wherein the Tdu virtual simulation visual editor consists of a virtual resource embedding management module, a virtual simulation flow editing module, a visual editing module of blocks and a real-time virtual simulation effect preview module, and adopts a Web end technology to build engineering and construct a page structure, and creates a visual tool block through programming language to realize the creation of codes by graphics; the virtual resource embedding management module comprises a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit, and a code block in a picture format is imported into the editor through the picture resource adding unit; importing the code blocks in the animation format into the editor through an animation resource adding unit; importing the code blocks in the audio format into the editor by an audio resource adding unit: code blocks in video format are imported into the editor by a video asset adding unit.

Description

Tdu virtual simulation visual editor and editing method thereof

Technical Field

The invention belongs to the field of visual editing, and particularly relates to a Tdu virtual simulation visual editor and an editing method thereof.

Background

Along with the promotion of new infrastructure, digital transformation is a necessary way for the future development of the economic society. In the future, all enterprises will become digital companies, which not only require enterprises to develop products with digital characteristics, but also change the design, development, manufacturing and service processes of the whole products through digital means, and link the internal and external environments of the enterprises through digital means. The conversion from a physical system to a digital model is realized through simulation modeling, virtual reality, data driving and visual interaction, and the current situation monitoring, prediction analysis and visual display are performed based on the simulation model, so that the method is a key for realizing safe production and intelligent manufacturing; the main value is simulation modeling, visualization, data interaction, analysis reasoning and prediction optimization.

Currently, when developing virtual simulation projects, a three-dimensional engine framework has been implemented, and corresponding virtual simulation projects can be quickly generated by importing a boson exeamfile format configuration table (hereinafter referred to as an EXM configuration table) and related picture, animation, audio and video resource files.

However, there are thresholds on the configuration of these resources, that is, they need to have a certain code writing capability, and also need to have a certain understanding of the project structure. These problems are particularly pronounced when we are facing social services. This development is extremely difficult for people without a programming basis.

Therefore, there is a need for a Tdu virtual simulation visual editor and an editing method thereof.

Disclosure of Invention

The invention provides a Tdu virtual simulation visual editor and an editing method thereof, which solve the problems that in the prior art, a threshold exists in the configuration of resources, most people do not have code writing capability, and for people without programming foundation, the development mode is extremely difficult, and in order to solve the problems, the virtual simulation visual editor adopts a graphical interface mode for processing.

The technical scheme of the invention is realized as follows: a Tdu virtual simulation visual editor consists of a virtual resource embedding management module, a virtual simulation flow editing module, a visual editing module of blocks and a real-time virtual simulation effect preview module, wherein a Web end technology is adopted to build engineering and a page structure, and a visual tool block is created through programming language to realize the creation of codes by graphics; the virtual resource embedding management module comprises a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit, and a code block in a picture format is imported into the editor through the picture resource adding unit; importing the code blocks in the animation format into the editor through an animation resource adding unit; importing the code blocks in the audio format into the editor by an audio resource adding unit: importing the code blocks in the video format into the editor through a video resource adding unit; the virtual simulation flow editing module performs virtual simulation flow editing through dragging and splicing combination of building blocks in a flow editing area by extracting flow functions into independent function type blocks; the visual editing module of the block comprises a data display unit and a data modification unit, wherein the data display unit is used for visually displaying resource data of the virtual resource embedded in the management module, and backing up, storing and replacing the data through the data modification unit; the real-time virtual simulation effect preview module performs synchronous modification and real-time presentation of virtual simulation effects while editing blocks through a Webgl visual three-dimensional engine.

The method comprises the steps that a Web end technology Vue+TypeScript+Vite is adopted to build engineering and a page structure through a virtual simulation visual editor; creating a visualization tool block using the programming language google block enables creating code from graphics. The user can construct an EXM configuration table from a block of graphical objects in a manner similar to a toy. Each graphic object is a code block, and a user can splice the graphic objects to create a desired behavior, and then combine the simple functions to construct a complete executable EXM configuration table. And the whole process only needs dragging of the mouse, does not need keyboard knocking, and is very convenient.

As a preferred embodiment, the virtual simulation flow editing module includes a block category area management unit, a block display area management unit, a block work area management unit, a block data conversion unit, and a configuration file generation unit; the block category area management unit is used for classifying and partitioning the code blocks, so that a user can quickly find the required category blocks through category columns; the block display area management unit is used for carrying out area management on the category column display area and carrying out classification management on the category blocks in the display area; the block working area management unit is used for dividing the working space into three areas including a classification area, a building block area and a script area and adjusting the placement position of the code block; the block data conversion unit is used for adjusting the format data of the code blocks when the positions of the code blocks of different partitions in the working space are mutually adjusted; the configuration file generating unit is used for selecting resource files from the local storage to upload, and transmitting the files to the back end for storage in the form of file streams.

As a preferred embodiment, the real-time virtual simulation effect preview module includes a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit, where virtual simulation display data is accessed through the data access unit, and after the data format is processed through the data processing unit, the processed data is sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

An editing method of a Tdu virtual simulation visual editor, the method comprising the steps of: s1: entering a Tdu virtual simulation visual editor, and then initializing a working area in the editor; s2: after the initialization of the working area is completed, uploading resource data, and after the resource data is obtained, editing the block area; s3: operating the blocks in the script area through the starting block, selecting the display data through the block class by the blocks in the script area, and inputting the selected block class into the script area through the output block; s4: after the block of the script area is clicked, executing and synchronizing the operation of rendering by the WebgI engine and displaying the clicked information in the block; s5: after the WebgI engine is rendered, previewing through a virtual scene, and after the information in the block is displayed, modifying and backing up the block information; s6: and when the execution is finished after clicking, ending the block editing, and outputting the EXM configuration table to end the whole editing.

After the technical scheme is adopted, the invention has the beneficial effects that: traditional development flow requires personnel with expertise and technology to write codes and configure resource files, and the mastering of the code and the resource files requires low cost and cost. The advent of the Tdu virtual simulation visualization editor would greatly reduce this cost and price, even if personnel without a programming base can do this development work.

Drawings

In order to more clearly illustrate the embodiments of the invention or the technical solutions of the prior art, the drawings which are used in the description of the embodiments or the prior art will be briefly described, it being obvious that the drawings in the description below are only some embodiments of the invention, and that other drawings can be obtained according to these drawings without inventive faculty for a person skilled in the art.

FIG. 1 is a functional diagram of a Tdu virtual simulation visualization editor framework.

FIG. 2 is a flow chart of the Tdu virtual simulation visualization editor.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present invention, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the invention without making any inventive effort, are intended to be within the scope of the invention.

Examples:

as shown in fig. 1, a Tdu virtual simulation visual editor is composed of a virtual resource embedding management module, a virtual simulation flow editing module, a visual editing module of blocks and a real-time virtual simulation effect preview module, wherein a Web end technology is adopted to build engineering and construct a page structure, and a visual tool block is created through a programming language to realize the creation of codes by graphics; the virtual resource embedding management module comprises a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit, and a code block in a picture format is imported into the editor through the picture resource adding unit; importing the code blocks in the animation format into the editor through an animation resource adding unit; importing the code blocks in the audio format into the editor by an audio resource adding unit: importing the code blocks in the video format into the editor through a video resource adding unit; the virtual simulation flow editing module performs virtual simulation flow editing through dragging and splicing combination of building blocks in a flow editing area by extracting flow functions into independent function type blocks; the visual editing module of the block comprises a data display unit and a data modification unit, wherein the data display unit is used for visually displaying resource data of the virtual resource embedded in the management module, and backing up, storing and replacing the data through the data modification unit; the real-time virtual simulation effect preview module performs synchronous modification and real-time presentation of virtual simulation effects while editing blocks through a Webgl visual three-dimensional engine.

The virtual simulation visual editor comprises virtual simulation resource embedding management, virtual simulation flow editing functions, visual editing of blocks, real-time virtual simulation effect preview and other functional modules, and can release virtual simulation contents through a platform without a three-dimensional engine and personnel on a code programming basis. The visual editor can realize the flow editing of virtual simulation by pulling and splicing the building blocks in the flow editing area through extracting the related functions of the flow into independent function type blocks. The function blocks of different types can intuitively and rapidly find the required type blocks through different colors and indication icons, and the splicing and arrangement sequence among the blocks can also obviously present the flow of the virtual simulation of the current editing. The editor combines with the WebgI visual three-dimensional engine technology to realize synchronous change of editing blocks and real-time display of virtual simulation effects, the displayed effects are completely consistent with the finally output virtual simulation contents, and what you see is what you get is really realized.

The virtual simulation visual editor mainly adopts a programming language GoogleBlockly to realize the function of visual editing. A main body working space is built and divided into three areas, namely a classification area, a building block area and a script area. In the classification area, the behavior classification categories are classified, and all the blocks with the same behavior are generalized, so that a user can quickly find the required blocks through the left class category; the basic classes of all graphic blocks are defined in the building block area by using the factory mode, each basic class block has independent style, information code and data logic generation definition, and each block can have the functions of text input, data pull-down display, logic calculation and the like according to the classes. The user drags the base class blocks to generate corresponding instance objects, and each instance object dynamically allocates an id as a unique identifier by an id generator; the user can drag the graphic blocks in the building block area to the script area, the user performs virtual simulation flow editing in the script area, information data carried by each graphic block dragged to the script area is cached to the block queue, an editor can take out all information data from the block queue after the user completes the virtual simulation flow editing, and the block data is picked up and converted into an extensible markup language (ExtensibleMarkupLanguage, XML) under a data mapping mechanism set by the user, and then the extensible markup language is stored in a data pool to realize the persistence of the data.

The virtual simulation flow editing module comprises a block category area management unit, a block display area management unit, a block working area management unit, a block data conversion unit and a configuration file generation unit; the block category area management unit is used for classifying and partitioning the code blocks, so that a user can quickly find the required category blocks through category columns; the block display area management unit is used for carrying out area management on the category column display area and carrying out classification management on the category blocks in the display area; the block working area management unit is used for dividing the working space into three areas including a classification area, a building block area and a script area and adjusting the placement position of the code block; the block data conversion unit is used for adjusting the format data of the code blocks when the positions of the code blocks of different partitions in the working space are mutually adjusted; the configuration file generating unit is used for selecting resource files from the local storage to upload, and transmitting the files to the back end for storage in the form of file streams.

The real-time virtual simulation effect preview module comprises a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit, virtual simulation display data are accessed through the data access unit, the data format is processed through the data processing unit, and the processed data are sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

As shown in fig. 2, an editing method of a Tdu virtual simulation visual editor, the method includes the following steps: s1: entering a Tdu virtual simulation visual editor, and then initializing a working area in the editor; s2: after the initialization of the working area is completed, uploading resource data, and after the resource data is obtained, editing the block area; s3: operating the blocks in the script area through the starting block, selecting the display data through the block class by the blocks in the script area, and inputting the selected block class into the script area through the output block; s4: after the block of the script area is clicked, executing and synchronizing the operation of rendering by the WebgI engine and displaying the clicked information in the block; s5: after the WebgI engine is rendered, previewing through a virtual scene, and after the information in the block is displayed, modifying and backing up the block information; s6: and when the execution is finished after clicking, ending the block editing, and outputting the EXM configuration table to end the whole editing.

When facing to tedious resource allocation, even professional personnel can feel dizziness sometimes, so in order to facilitate the experience of users in this aspect, a virtual resource embedding management function is added into the editor. The editor provides an uploading entry for picture, animation, audio and video resources for a user, the user clicks an uploading button to call up a local file manager, a resource file is selected from local storage to upload, and the editor transmits the file to the back end for storage in a file stream mode. The user only needs to care what resources to use, and not what to do specifically.

The common user does not have clear cognition on the code effect like a professional technician, and in order to solve the problem that the user is lost in specific effect when editing by using the graphic block, a real-time virtual simulation effect preview function is added in the editor. The virtual simulation visual editor is designed based on an MVVM (Model-View-ViewModel) architecture, after a user clicks an instantiated graphic block in a script area and updates the data of the graphic block, the editor saves the modified result, then updates the Model layer data, re-renders the View layer View after a Webgl engine of the ViewModel layer receives an update notification of the Model layer data, and adds the updated View to the browser context environment of a specified area of the visual editor through an HTML (hypertext markup language) inline frame element < iframe >. Therefore, the right preview area of the editor can display the final effect of the graphic block in real time, and a user can conveniently and clearly recognize the graphic block during operation.

Clicking and saving after the user finishes editing the graphic block and uploading the resource file, and storing all the current operations of the user into a database by the editor. The foregoing description of the preferred embodiments of the invention is not intended to be limiting, but rather is intended to cover all modifications, equivalents, alternatives, and improvements that fall within the spirit and scope of the invention.

Claims (4)

1. The Tdu virtual simulation visual editor is characterized by comprising a virtual resource embedding management module, a virtual simulation flow editing module, a visual editing module of blocks and a real-time virtual simulation effect preview module, wherein a Web end technology is adopted to build engineering and a page structure, and a visual tool block is created through a programming language to realize the creation of codes by graphics;

the virtual resource embedding management module comprises a picture resource adding unit, an animation resource adding unit, an audio resource adding unit and a video resource adding unit, and a code block in a picture format is imported into the editor through the picture resource adding unit; importing the code blocks in the animation format into the editor through an animation resource adding unit; importing the code blocks in the audio format into the editor by an audio resource adding unit: importing the code blocks in the video format into the editor through a video resource adding unit;

the virtual simulation flow editing module performs virtual simulation flow editing through dragging and splicing combination of building blocks in a flow editing area by extracting flow functions into independent function type blocks;

the visual editing module of the block comprises a data display unit and a data modification unit, wherein the data display unit is used for visually displaying resource data of the virtual resource embedded in the management module, and backing up, storing and replacing the data through the data modification unit;

the real-time virtual simulation effect preview module performs synchronous modification and real-time presentation of virtual simulation effects while editing blocks through a Webgl visual three-dimensional engine.

2. The Tdu virtual simulation visualization editor of claim 1, wherein: the virtual simulation flow editing module comprises a block category area management unit, a block display area management unit, a block working area management unit, a block data conversion unit and a configuration file generation unit;

the block category area management unit is used for classifying and partitioning the code blocks, so that a user can quickly find the required category blocks through category columns;

the block display area management unit is used for carrying out area management on the category column display area and carrying out classification management on the category blocks in the display area;

the block working area management unit is used for dividing the working space into three areas including a classification area, a building block area and a script area and adjusting the placement position of the code block;

the block data conversion unit is used for adjusting the format data of the code blocks when the positions of the code blocks of different partitions in the working space are mutually adjusted;

the configuration file generating unit is used for selecting resource files from the local storage to upload, and transmitting the files to the back end for storage in the form of file streams.

3. The Tdu virtual simulation visualization editor of claim 1, wherein: the real-time virtual simulation effect preview module comprises a data access unit, a data processing unit, a data docking unit and a data interaction effect display unit, virtual simulation display data are accessed through the data access unit, the data format is processed through the data processing unit, and the processed data are sent to the data interaction effect display unit through the data docking unit to display the virtual simulation effect.

4. An editing method of a Tdu virtual simulation visual editor, characterized in that the method comprises the following steps:

s1: entering a Tdu virtual simulation visual editor, and then initializing a working area in the editor;

s2: after the initialization of the working area is completed, uploading resource data, and after the resource data is obtained, editing the block area;

s3: operating the blocks in the script area through the starting block, selecting the display data through the block class by the blocks in the script area, and inputting the selected block class into the script area through the output block;

s4: after the block of the script area is clicked, executing and synchronizing the operation of rendering by the WebgI engine and displaying the clicked information in the block;

s5: after the WebgI engine is rendered, previewing through a virtual scene, and after the information in the block is displayed, modifying and backing up the block information;

s6: and when the execution is finished after clicking, ending the block editing, and outputting the EXM configuration table to end the whole editing.

Images