Local analysis method of large-scale GLTF model

Abstract

The invention provides a local analysis method for a large-scale GLTF model, and the method specifically comprises the steps: configuring a virtual browser environment in a server-side environment, and solving a problem of compatibility between a server-side development platform and a Web side; the file structure of the GLTF is analyzed, and the GLTF file is analyzed through a Web end 3D display module; an asynchronous calling mechanism is adopted for function calling, and analysis and rendering are conducted through synchronous calling after asynchronous operation is completed; the method comprises the following steps of: after reading a cache file, analyzing data into a cascade data structure; analyzing the picture from the GLTF binary file and storing the picture as an independent picture file, and obtaining and mapping material textures; and determining a data storage format, naming the cache file, and analyzing the file to the local in combination with a model import processing mechanism. The invention provides a technical scheme which is used for improving the display efficiency and can finish the loading of models and animations in a local display engine, mainly aiming at the problem that the display efficiency of the GLTF file is low when the GLTF file is displayed in a webpage.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a local parsing method for a large-scale GLTF model. Background Art

[0002] GLTF stands for Graphics Language Transmission Format. This cross-platform format has become the standard for 3D objects on the Web. Considering the prevalence of the GLTF format on the Internet, the GLTF format not only includes 3D model data, but more importantly and complexly, the GLTF file also includes the display function of 3D animation. Therefore, it is worthwhile to innovate technology based on this universal standard.

[0003] Parsing GLTF files and displaying them locally can provide better performance, higher customization, better security, and can be displayed without a network connection compared to displaying them in a browser. These advantages make parsing GLTF files and displaying them locally a more appropriate choice in some cases, especially for applications that require higher performance and more flexible customization.

[0004] At the same time, the GLTF model has the advantages of lightweight, high transmission efficiency, fast loading speed, etc., and supports embedding textures, animations and other data, reducing file size while maintaining high quality. At present, the GLTF model has been widely used in some large-scale model scenarios, such as games, virtual reality, augmented reality, large-scale architecture and mechanical engineering.

[0005] Currently, the engine used to display GLTF files on the browser side is WebGL, and there are certain memory limitations when displaying on web pages. Therefore, for larger models, the display efficiency will be very low. Summary of the invention

[0006] According to the technical problems raised above, a local parsing method for large-scale GLTF models is provided. The present invention mainly uses the back-end server environment (JavaScript) to complete the programming work, and implements the parsing of the model in the GLTF file and the generation and extraction of the intermediate frames of the animation through a Web-based 3D display module. Finally, the cached data will be handed over to the OpenGL display engine of DCiP to complete the loading of the model and animation, providing a new technical solution for 3D graphics and animation display applications.

[0007] The technical means adopted by the present invention are as follows:

[0008] A local parsing method for a large-scale GLTF model, the specific steps include:

[0009] S1. Configure a virtual browser environment in the server environment to solve the compatibility problem between the server development platform and the Web end;

[0010] S2, analyzing the file structure of GLTF, and parsing the GLTF file through the Web-side 3D display module;

[0011] S3, the function call adopts an asynchronous call mechanism, and after the asynchronous operation is completed, a synchronous call is used for parsing and rendering;

[0012] S4, after reading the cache file, parse the data into the cascade_render data structure;

[0013] S5, parse the image from the GLTF binary file and store it as an independent image file, obtain and map the material texture;

[0014] S6. Determine the data storage format, name the cache file, and parse the file locally in conjunction with the model import processing mechanism.

[0015] Furthermore, the configuration of the virtual browser environment is to construct a virtual Web environment in the server-side environment, and complete the parsing and extraction of data through the Web-side 3D display module;

[0016] The configuration of the virtual browser environment requires modifying the FileLoader module, reading the file into the memory and encapsulating it into the global object cache, reading the local file through the readFileSync function of the server-side development platform and importing it into the cache, and parsing the local file in the Web-side 3D display module.

[0017] Furthermore, the GLTF file includes two formats, JSON and binary GLB. The file is read and parsed by the Web-side 3D display module to extract the model and animation data. After the Web-side 3D display module reads and parses the data, it can directly obtain the required information in the GLTF through the obtained data structure.

[0018] Furthermore, the Web-side 3D display module adopts an asynchronous call method during the parsing process, uses Promise and Promise.all methods to manage asynchronous functions, and needs to use the result parsed by DCiPGLTFParser as input for synchronous calling during rendering, and then makes another synchronous call after the asynchronous operation is completed.

[0019] When the DCiPGLTFParser is executed, Promise.all is used to monitor the status of other asynchronous functions. When all asynchronous functions are completed, that is, in the Fullfilled state, Promise.all also returns to the Fullfilled state, and then cascade_render is executed through the then method.

[0020] Furthermore, the data structure of the GLTF animation display design includes model information and animation information. When parsing the cache file, the data needs to be converted into a cascade_render data structure and input into the OpenGL kernel.

[0021] Furthermore, the relevant information parsing module in the server-side environment extracts the material image file from the GLTF binary file and stores it as an independent image file, and the OpenGL kernel obtains the material texture for rendering.

[0022] Furthermore, the array storage format includes conventional storage and cross storage; the cache file naming is used to correspond the GLTF file to the corresponding animation cache file one by one, and the MD5 hash algorithm is used to generate a unique signature of the file, and the cache file is named with the signature;

[0023] The model import processing mechanism parses the file locally through a cache mechanism, and can selectively load the parts required for animation display according to actual needs, thereby realizing on-demand loading.

[0024] Compared with the prior art, the present invention has the following advantages:

[0025] The local parsing method of large-scale GLTF models provided by the present invention uses a 3D display module based on the Web end, which has rich 3D rendering functions and can run in the browser to create a variety of three-dimensional scenes, including objects such as cameras, lights and shadows, and materials, and supports the reading and output of GLTF models and the display of animations. The team's current solution is to use specific functional modules in the library to implement the parsing of GLTF files, as well as the generation and extraction of intermediate frames of animations, and then pass the cached data to the OpenGL display engine of DCiP to achieve the final loading of models and animations.

[0026] The local parsing method of the large-scale GLTF model provided by the present invention, the server-side development platform is a modular unit of JavaScript code, which can be reused and shared. It usually includes information such as code, related configuration files, metadata, and dependencies. Its advantages mainly include: modular development, that is, improving the maintainability and reusability of the code; dependency management, that is, the dependency relationship of the project is clearly visible, which is convenient for version management and upgrading; development efficiency, that is, by using existing package management tools, developers can save a lot of time and energy and focus on solving specific problems. And according to needs, the existing modules in the package management tool can be used to complete the programming work.

[0027] The local parsing method of large-scale GLTF models provided by the present invention uses the lightweight software development tool DCiP, which can be run on the desktop and is applicable to Windows, MacOS and Linux, and can quickly develop cross-platform software. The display module it contains uses the OpenGL engine to display the control of the 3D stereo model, which can complete the function of model rendering.

[0028] Based on the above reasons, the present invention can be widely promoted in the fields of computer technology and the like. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative labor.

[0030] Figure 1 This is a GLTF file structure diagram in the present invention.

[0031] Figure 2 This is a diagram of the main data structure information of the GLTF file parsed by the JavaScript 3D display module based on WebGL technology in the present invention.

[0032] Figure 3 This is the main data structure diagram of the skeletal animation in the present invention.

[0033] Figure 4 A diagram of how to get vertices on the skin for skeletal animation.

[0034] Figure 5 This is the main data structure diagram of GLTFMesh.

[0035] Figure 6 This is the main data structure diagram of GLTFAnimation.

[0036] Figure 7 This is the main data structure diagram of GLTFFrame.

[0037] Figure 8 This is the GLTF workflow diagram under DCIP.

[0038] Fig. 9 Dialog box for parsing and selecting components for importing GLTF.

[0039] Fig.10 Examples of the results of importing all components and selecting some components.

[0040] Fig.11 Display the results for the animation. DETAILED DESCRIPTION

[0041] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0042] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0043] like Figure 1 As shown, the present invention provides a local parsing method for a large-scale GLTF model, and the specific steps include:

[0044] S1. Configure a virtual browser environment in the server environment to solve the compatibility problem between the server development platform and the Web end;

[0045] In specific implementation, as a preferred embodiment of the present invention, the configuration of the virtual browser environment is to construct a virtual Web environment in the server-side environment, and complete the parsing and extraction of data through the Web-side 3D display module;

[0046] The configuration of the virtual browser environment requires modifying the FileLoader module, reading the file into the memory and encapsulating it into the global object cache, reading the local file through the readFileSync function of the server-side development platform and importing it into the cache, and parsing the local file in the Web-side 3D display module.

[0047] During implementation, in the browser environment in the Browser / Server Architecture model, the required data can be obtained, including the initial data of the model, the data of each frame of the animation, etc. However, in some server-side environments, there is no top-level Window object in the web environment, that is, the window class.

[0048] The server-side development platform has a development kit that meets current needs, and it can provide a simulated browser environment to meet the needs of current development. Therefore, the present invention is also based on this development kit. The tool can basically achieve the expected goal, but there are still some problems that need to be solved, such as obtaining the operating environment of the display engine, and processing the reading of local files. For security reasons, the Web end generally does not support the reading of local files, so the Web end 3D display module used by default can only complete the reading of files on the network. The method adopted for this problem is to modify the FileLoader module (the part of the Web end 3D display module responsible for reading files) to support the reading of local files. Because the first step of the FileLoader module to read the file is to encapsulate the file into a global object cache after reading it into the memory, it is only necessary to read the local file through the readFileSync function of the server end and import it into the cache, and then the Web end 3D display module will continue to parse the data in the cache, and this process is independent of the way of reading the data. Because reading GLTF files is an independent function in the DCiP environment, the related programs can be separated and a DCiPGLTFParser module can be defined separately. If the subsequently developed programs need to read and parse GLTF files, they only need to load the DCiPGLTFParser module.

[0049] S2, analyzing the file structure of GLTF, and parsing the GLTF file through the Web-side 3D display module;

[0050] In specific implementation, as a preferred embodiment of the present invention, the GLTF file includes two formats, JSON and binary GLB. The file is read and parsed by the Web-side 3D display module to extract the model and animation data. After the Web-side 3D display module reads and parses the data, it can directly obtain the required information in the GLTF through the obtained data structure.

[0051] In implementation, synchronous calling means that when the caller calls a function or method, it needs to wait for the function or method to complete execution and return results before continuing to execute subsequent code.

[0052] Asynchronous call means that when the caller calls a function or method, it does not need to wait for the function or method to complete execution, but can continue to execute subsequent code. The called function or method will be executed asynchronously in the background, and the caller will be notified through callback functions and other methods after execution.

[0053] Under the scheme adopted by the server side, the function call adopts the asynchronous call method by default, and the 3D display module on the Web side is also carried out under the asynchronous call mechanism during parsing. For example, the output of the parsed file and other processes are all carried out through asynchronous functions. This is because the output cache files are not related to each other, so a lot of time can be saved when they are carried out in parallel. The overall control of the DCiP program operation is carried out under the scheme adopted by the server side, so the DCiPGLTFParser parsing work and the subsequent rendering module cascade_render are also executed asynchronously, but in practice the rendering work needs to use the result of the DCiPGLTFParser parsing as input, so the program needs to be called synchronously at this time. For this problem, it can be solved by combining callback functions and Promises.

[0054] Promise is a solution for asynchronous programming, which is essentially a container. Promise is an asynchronous programming solution introduced by ES6. The asynchronous programming method provided by promise can be used to write asynchronous implementation code with clearer structure and solve the problem of callback hell.

[0055] One of the core ideas of the asynchronous programming solution provided by Promise is to separate asynchronous tasks from callback functions. When the first asynchronous request in the Promise object is completed, the event callback function in the subsequent then or catch method is called according to whether the asynchronous request is successful or not. In this way, the nested callback function can be converted into a chain call to avoid the callback hell problem.

[0056] S3, the function call adopts an asynchronous call mechanism, and after the asynchronous operation is completed, a synchronous call is used for parsing and rendering;

[0057] In specific implementation, as a preferred embodiment of the present invention, the Web-side 3D display module adopts an asynchronous call method during the parsing process, and uses Promise and Promise.all methods to manage asynchronous functions. When rendering, the result parsed by DCiPGLTFParser is required as input for synchronous calling, and a synchronous call is made again after the asynchronous operation is completed.

[0058] When the DCiPGLTFParser is executed, Promise.all is used to monitor the status of other asynchronous functions. When all asynchronous functions are completed, that is, in the Fullfilled state, Promise.all also returns to the Fullfilled state, and then cascade_render is executed through the then method.

[0059] In implementation, model data is stored in Mesh. There are two main types of Mesh: ordinary mesh for ordinary models and SkinnedMesh, which is mainly used to define mesh for skeletal animation skin models. Since the role of SkinnedMesh is different from that of ordinary mesh, the object contains not only some information of ordinary mesh, but also a skeleton object that defines skeletal animation, as well as skeletal animation joint index information and weight influence factors.

[0060] Figure 2 It shows the key information of Mesh including SkinnedMesh objects, and lists the structure of the main model data of a Mesh in a GLTF file parsed by a Web-side 3D display module. Among them, the model information is stored under Geometry, the initial position information of the model vertices is stored in the position array of attributes, and the index stores the triangle information.

[0061] There are three main animation formats supported by GLTF: Transformation (transformation animation), Morph (deformation animation) and Skeleton (skeleton animation).

[0062] The web-side 3D display module parses the Transformation animation through the node's matrix attribute and the rotation, scale, and translation attributes (i.e., defines the transformation of the space). The rotation attribute is a unit quaternion value (x, y, z, w), and the scale and translation attributes are unit ternary values. After obtaining the original position of the model, the result of the animation for each frame can be obtained by storing the transformation coordinate matrix of each frame. Since the amount of node position information data is very large, only the initial position information is saved, and the position information of each frame can be obtained by multiplying the coordinate transformation matrix of each frame with the initial position. This work can be done during rendering, thereby ensuring that relatively less data is transferred when reading and writing the cache.

[0063] Deformation animation can be understood as the process of multiple sets of vertex data changing from one state to another, such as a person's facial expression. The crying expression is represented by a series of vertices, and the smiling expression is represented by a series of vertices. The transition from crying expression to smiling expression is the transition between the two sets of vertices corresponding to the expression. The position coordinates of the vertices of the geometric body change, and the transition from one state to another produces a deformation animation.

[0064] The real-time position of the animation is calculated by the surface formula:

[0065] renderedPrimitive.POSITION = primitive.POSITION (original position) + weights[0] (influence weight) * primitive.targets[0].POSITION (position of the first target) + weights[1] (influence weight) * primitive.targets[1].POSITION (position of the second target);

[0066] Here, primitive.targets refers to the target position of the vertex. Since it is an array, it can be considered that this vertex can have multiple target positions, and the weight corresponding to each target position is the weight of the influence of the target position. From the above, it can be obtained that the final position of the vertex is the final synthesis result after the influence of multiple targets.

[0067] In the GLTF data structure, the two most important objects for defining deformation animation are morphAttributes and morphTargetInfluence, where morphAttributes stores the information of the target position, and morphTargetInfluence stores the deformation program at a certain moment, that is, the weight of the influence of the Target target position.

[0068] Another major parameter that affects the position calculation is morphTargetsRelative.

[0069] morphTargetsRelative is a property that defines whether the morph target data is a relative adjustment to the original mesh data. Usually, when using morph targets to implement deformation animation of a model, each morph target contains a set of offsets to the vertex positions. When the value of morphTargetsRelative is true, it means that these offsets are relative to the vertex positions of the original mesh; if it is false (the default), it means that these offsets are absolute positions. For example, suppose a vertex position of the original mesh is (x0, y0, z0), and the offset of the corresponding vertex in a morph target is (dx, dy, dz). If morphTargetsRelative is true, then when the deformation is applied, the final position of the vertex will be (x0+dx, y0+dy, z0+dz); if morphTargetsRelative is false, the final position of the vertex is directly (dx, dy, dz), which will cause the overall position of the model to be incorrectly offset instead of deforming based on the original shape.

[0070] Skeletal animation divides a character into two parts: a surface representation used to draw the character (called a mesh or skin) and a set of interconnected partial bones that together form a skeleton or rig, which is a virtual skeleton used to animate the mesh (poses and keyframes). The skeleton structure composed of interconnected "bones" directly determines the movement of the animation. That is, the operation is defined on the bones, and the bones determine the movement of the skin.

[0071] There are two key elements to analyzing skeletal animation: bones and skins. The vertex positions of the skin are affected by one or more (up to four) bones, and each bone has a different degree of influence (weight) on the skin, thus determining the motion state of the animation.

[0072] The skeletal animation data parsed by the Web-side 3D display module is stored in SkinnedMesh. The skinning-related information is stored under the geometry object. The skinWeight four-dimensional array under its attributes object stores the weight information of each skin point. The relevant information of the bone points is placed under skeleton, where bones is the pre-defined skeleton information.

[0073] The main data structure that defines skeletal animation is as follows Figure 3As shown in the figure, there are mainly three bone-related classes: bone joint Bone, skeletal mesh model SkinnedMesh, and skeleton object Skeleton. In addition, there are vertex data related to geometry Geometry and skeletal animation. The Bone class is an object that instantiates a bone joint, and then a bone hierarchy system can be formed through multiple bone joint objects. The Bone base class is Object3D; the Skeleton class contains all bone joint objects Bone; the properties .skinWeights and .skinIndices of the geometry Geometry are mainly used to set the degree of correlation between the vertex position of the geometry and the influence of bone joint movement. If the vertex position data of the geometry Geometry is a point on the skin, then when the bone joint moves, the skin shape will also change. Similarly, the vertex coordinates of Geometry also need to change with the bone joint. It is worth noting that the skin wrapped outside the joint has different deformation degrees in different areas, that is, when the bone joint Bone changes, the vertices of the geometry Geometry should also be like the skin, that is, the degree of change of the vertices in different areas is different. This is also the reason why the .skinWeights and .skinIndices properties are defined. .skinWeights is to set the weight of the skeleton skin. SkinnedMesh is a skeletal mesh model. It is worth emphasizing that the base class of the skeletal mesh model SkinnedMesh is the ordinary mesh model Mesh. SkinnedMesh and Mesh are both mesh models. The difference between them is whether they have the function of skeletal animation.

[0074] like Figure 4 , the position information of the vertices on the skin is obtained through the following steps.

[0075] First, you need to obtain the coordinate transformation information of the bone joint points, so that you can get the position information of the bone joint points, which can be found in the bones array under the skeleton object; then get the joint point and weight information corresponding to the skin vertex, and its position information is stored in skinWeight; then, with the above information, you can calculate the coordinate transformation matrix of each vertex on the skin. The calculation formula of the coordinate transformation matrix of the skin is as follows:

[0076] skinMatrix=

[0077] weight.x*u_jointMat[int(a_joint.x)]+weight.y*u_jointMat[int(a_joint.y)]+

[0078] weight.z*u_jointMat[int(a_joint.z)]+weight.w*u_jointMat[int(a_joint.w)];

[0079] Among them, weight.x, weight.y, weight.z, and weight.w are weight values, which are usually specified in the model data. Each weight value indicates the degree to which the vertex is affected by the corresponding bone. The sum of the weight values ​​is usually 1, indicating that the total influence of the vertex by all related bones is 100%; for example, if a vertex is mainly affected by the first bone, then weight.x may be relatively large, while the other weight values ​​are relatively small.

[0080] u_jointMat is an array that stores bone transformation matrices. Each bone has a corresponding transformation matrix that describes the position, rotation, and scale of the bone in the animation.

[0081] a_joint.x, a_joint.y, a_joint.z, a_joint.w are the bone index values ​​associated with the vertex. These index values ​​are usually specified in the model data, indicating which bones affect the vertex.

[0082] Finally, the position of the deformed vertex can be obtained. From this process, it can be concluded that for each frame of animation, only the coordinate transformation matrix after bones deformation is transmitted, which ensures that less data is transmitted, and there is no need to transmit the coordinates of each skin point after calculation as data. Therefore, the entire process of calculating skin vertices can be completed in the rendering display engine.

[0083] S4, after reading the cache file, parse the data into the cascade_render data structure;

[0084] In specific implementation, as a preferred embodiment of the present invention, the data structure of the GLTF animation display design includes model information and animation information. When parsing the cache file, the data needs to be converted into a cascade_render data structure and input into the OpenGL kernel.

[0085] In implementation, after reading the cache file, the data needs to be parsed into a data structure acceptable to the OpenGL kernel. Currently, the data structure designed for GLTF animation display mainly includes three objects: GLTFMesh, GLTFAnimation and GLTFFrame.

[0086] The main data structures of GLTFMesh are summarized as follows: Figure 5Since there are cases where a GLTF animation file contains multiple animations, animations is defined as an array to store animations.

[0087] GLTFAnimation stores animation related information. Its main data structure is as follows Figure 6 , where frames stores the data of each frame of the animation. GLTFFrame stores the relevant information of the animation frame. Its main data structure is as follows Figure 7 , that is, through the GetPosition function in this object, the calculation of the node position of the corresponding frame is completed.

[0088] S5, parse the image from the GLTF binary file and store it as an independent image file, obtain and map the material texture;

[0089] In specific implementation, as a preferred embodiment of the present invention, the relevant information parsing module in the server-side environment extracts the material image file from the GLTF binary file and stores it as an independent image file, and the OpenGL kernel obtains the material texture for rendering.

[0090] In implementation, since the GLTF format integrates material images into a binary file through BASE64 encoding, when using the OpenGL display engine, these images need to be parsed from the GLTF binary file and stored as independent image files. In this way, OpenGL can correctly obtain and map material textures. The server-side development platform currently has a relevant information parsing module that can efficiently complete this task, simplify the processing workflow of the GLTF model, improve the rendering efficiency and effect of the OpenGL engine, ensure that the material images are correctly extracted and stored, and ensure the perfect presentation of the model in OpenGL.

[0091] S6. Determine the data storage format, name the cache file, and parse the file locally in conjunction with the model import processing mechanism.

[0092] In specific implementation, as a preferred embodiment of the present invention, the array storage format includes conventional storage and cross storage;

[0093] Conventional storage (BufferAttribute), each attribute is stored as an array separately. If there are multiple attributes, they are stored as multiple arrays. For example, when the data of the coordinate and color attributes need to be stored, conventional storage will store the data in two arrays respectively; the other is cross storage (InterleavedBufferAttribute), which is to combine the data of several different attributes into a group in a certain order, and then put them into the same array, that is, share the same buffer, and then define the relevant index parameters. When accessing the array, the corresponding data is obtained through the index value. The cross storage method obtains the index value (i.e., array subscript) of the array through the three parameters of stride, offset, and itemSize, where offset is the offset of the first value, through which the first value of each vector can be found; itemSize represents the number of each element vector.

[0094] For example, in skeletal animation, a cross array is composed of coordinate values ​​and weight coefficients. Then itemSize is 3, weight coefficient in skeletal animation, itemSize is 4; stride indicates the step length, that is, the number of bits occupied by a group of elements.

[0095] The cache file naming is used to match the GLTF file with the corresponding animation cache file one by one, and the MD5 hash algorithm is used to generate a unique signature of the file, and the cache file is named with the signature;

[0096] During implementation, since parsing animation is a very time-consuming process, for an animation that has been parsed, retaining its parsed model and animation can save the time of reading the model again. Therefore, it is necessary to determine the one-to-one correspondence between the gltf file and the animation cache file, that is, the cache needs to be regenerated after the animation file is changed. In response to this requirement, our team uses the cache file name to determine the correspondence. As for the naming of the cache file, the Md5 method is adopted to avoid the problem of not being able to update the cache after the file is changed.

[0097] MD5 is Message-Digest Algorithm 5, a hash algorithm widely used in information science. This algorithm is compressible, that is, for input of any length, the output length is always the same; it is easy to calculate, with linear time complexity; it is also resistant to modification, even a small modification to the original data will lead to a huge change in the final result; it is collision-resistant, and it is difficult to generate data that is different from the original data but has the same MD5 value as the original data. That is, MD5 can generate a "digital fingerprint" for any file, and a small change to the file will directly lead to a huge change in the digital fingerprint.

[0098] The program will calculate the MD5 file signature of the file based on the input file, and use the signature characters to name the file name in the generated cache. This avoids the uncertainty of the cache file caused by the same file name in different files, such as two files with the same name but different models using the same cache.

[0099] The model import processing mechanism parses the file locally through a cache mechanism, and can selectively load the parts required for animation display according to actual needs, thereby realizing on-demand loading.

[0100] In traditional WebGL, the loading of GLTF files is usually completed at one time, and it is not possible to partially load parts of the model. However, the present invention introduces a new model import processing mechanism, which makes partial loading possible.

[0101] The model import processing mechanism parses the file locally through a cache mechanism. Users can choose to load the parts required for animation display according to their needs, thereby avoiding loading the entire model at once. The introduction of this mechanism is crucial to improving system performance and user experience. Especially when processing large files, this on-demand loading capability is particularly important. It avoids the waste of resources when traditional WebGL loads GLTF files, making the system more efficient and smarter. Fig.10 The two pictures shown show the comparison between full display and partial display.

[0102] Example 1

[0103] like Figure 1 As shown, the present invention provides a local parsing method for large-scale GLTF models.

[0104] For a single asynchronous task, you can easily use Promise, an asynchronous programming solution, to build asynchronous code blocks:

[0105] The asynchronous task logic is placed in new Promise, and the callback function is placed in the then method.

[0106] Promise has three states: Pending, Fulfilled, and Rejected, which determine when resolve or reject calls the then method, or the callback function in the catch method. A new Promise object A is initialized, and the state of A is Pending. In the future, it will have only one trend: if the asynchronous task succeeds, the state of A changes to Fulfilled and the resolve function is executed; if the asynchronous task fails, the state of A changes to Rejected and the reject function is executed.

[0107] With the help of the three internal states of Promise, we can re-examine the idea of ​​Promise asynchronous programming, that is, Promise guarantees to the JavaScript engine that no matter whether the asynchronous task succeeds or fails, it will eventually return a state: Fulfilled (success) or Rejected (failure). Based on this final state, the corresponding callback function can be executed, and these callback functions are placed in then or catch respectively.

[0108] Therefore, the Promise asynchronous programming scheme is as follows:

[0109] 1. Separation of asynchronous tasks and callback functions:

[0110] (1) The asynchronous task is placed in the Promise instance object.

[0111] (2) The callback function is placed in the 'then' method of the instance object.

[0112] 2.Promise state management:

[0113] (1) The initial status is 'Pending'.

[0114] (2) There will be two states: 'Fulfilled' (success) or 'Rejected' (failure).

[0115] (3) Once the status is changed, it will not be modified again.

[0116] 3. State change and callback execution:

[0117] (1) Fulfilled status

[0118] ①Asynchronous success.

[0119] ②The Promise object stores the task result as the final value.

[0120] ③'resolve' passes the result to the 'then' method and triggers the 'onfulfilled' callback function.

[0121] (2) Rejected status:

[0122] ①Asynchronous task failed.

[0123] ②The Promise object stores the error information as the final value.

[0124] ③'reject' passes the error message to the 'then' method or the 'catch' method and triggers the callback function in 'onrejected' or 'catch'.

[0125] Based on the introduction of Promise asynchronous programming solution, we analyze how DCiP solves the problem that cascade_render requires the result of DCiPGLTFParser parsing as input: First, the functions inside DCiPGLTFParser, such as writing files, are asynchronous, so the key to solving this problem is to make synchronous calls to the program, that is, when DCiPGLTFParser is parsed, it is necessary to make sure that all its internal functions are completed, and then perform cascade_render through then, thus completing the transformation from asynchronous to synchronous. And to make sure that all the internal functions of DCiPGLTFParser are completed, the Promise.all method is required.

[0126] What Promise.all does:

[0127] (1) Promise.all can monitor the status of multiple asynchronous functions at the same time until all functions are completed.

[0128] (2) When all asynchronous functions are completed, the next step of the program is executed through the then method.

[0129] Therefore, the solution can be obtained as follows:

[0130] When DCiPGLTFParser is executed, Promise.all is used to monitor the status of other asynchronous functions. When all asynchronous functions are completed (Fullfilled), Promise.all also returns to the Fullfilled status, and then cascade_render is executed through the then method. Through the above steps, DCiP can effectively manage internal asynchronous functions and ensure that the next step is executed after all asynchronous operations are completed, ensuring the reliability and stability of the program.

[0131] Example 2

[0132] like Figure 1 As shown, the present invention provides a local parsing method for a large-scale GLTF model. In order to make the problem solved by the present invention, the method scheme adopted and the effect achieved clearer, this embodiment combines the DCiP parsing GLTF file workflow and the attached Figure 8 The present invention is described in further detail.

[0133] First import the gltf file and configure the parameters for parsing gltf.

[0134] DCiP reads the file to be parsed in the server environment. Here, the following parameters need to be entered:

[0135] FilePath, the path of the file, is used to specify the path of the imported file, and the subsequent program will create a cache directory in the directory where the gltf file is located to store the cache files for subsequent parsing of gltf animations;

[0136] Duration, animation duration, used to define the duration of the animation;

[0137] Fps, which contains the number of frames per second of animation;

[0138] Secondly, the DCiPGLTFParser module (server-side environment) is called according to the input parameters to complete the animation parsing.

[0139] The program uses an asynchronous call method, so the module is called through Promise. The function for parsing gltf is gltfLoader.load(), and its main functions include: defining the cache file name, as described in the eighth item of the invention content, using the MD5 algorithm to name the cache file, avoiding the problem of file uncertainty when different cache files have the same file name. The server side builds a simulated Web environment, runs the Web-side 3D display module, reads the gltf file, and parses the relevant information according to the configuration parameters, mainly including model geometry information, position information of each frame of the animation, material information corresponding to the model, image of the model corresponding to the texture mapping, and parameter information, etc., and stores these data in an animationFrameData object for subsequent cache file output. According to the data stored in the animationFrameData object, the output of the cache file is completed.

[0140] The name of the cache file consists of the following parts: hash code (MD5 file signature calculated from the file), animation time and frames per second.

[0141] For example: 5a37c00462d77641ef18d02214bdf46a.8.10 (the parsed gltf file), its MD5 signature is 5a37c00462d77641ef18d02214bdf46a, the animation duration is 8 seconds, and 10 frames of animation are output per second;

[0142] The cache file also uses the suffix name to identify the output model information. It mainly includes prop files, which are used to record the material, texture mapping and other information corresponding to each part in the model; material files are used to record the material model information defined in the model; texture files are used to record the texture model information. For example, the material information file of the above model is named:

[0143] 5a37c00462d77641ef18d02214bdf46a.8.10.material.

[0144] Normally, a model will contain multiple parts. For each part, its topological information is output separately according to its id in the model. The position file is used to define the part node information, the index file is used to define the part triangle information, morphTargetInfluences is used to output the influence factor information of the deformation animation, morphAttributes is used to output the target position information of the deformation animation, skinWeight is used to output the weight information of the part skeleton animation, and skinIndex is used to output the associated node information of the skeleton animation, etc. For example, for a part with an id of 978 in the model, the position file after parsing is named 5a37c00462d77641ef18d02214bdf46a.8.10.position.978 according to the naming convention. Depending on the model, the output files are also different, but the output process is the same.

[0145] The output of animationFrameData is completed in the above manner. Since the data corresponding to different files are independent when writing files, the asynchronous call method is also used to complete the file writing operation at the same time, thereby saving the time of writing files.

[0146] For some binary gltf files, the images are stored in glb files. At this time, the DCiPGLTFParser module will call the gltf-pipeline method to extract the image file and store it in the cache directory for subsequent texture mapping.

[0147] After parsing is complete, the program will display all parsed components in the reading interface, such as Fig. 9 As shown, users can select the components to be displayed according to their needs. For example, the model in this example is composed of two components. Users can display the model they are interested in according to their needs. Fig.10 shown.

[0148] After the parsed cache file is generated, it enters the cascade_render (C++ environment) rendering module of DCiP. DCiP will call the RenderToBufferGLTF() function, which will read the model and animation data parsed by DCiPGLTFParser and complete the subsequent OpenGL data construction and conversion.

[0149] From the above, we can see that the RenderToBufferGLTF() function has two main functions: reading the model and animation data parsed by DCiPGLTFParser, and converting it into data that can be received by the DCiP OpenGL engine.

[0150] The program creates a vector <gltfmesh>The data structure of gltfMeshes.

[0151] gltfMeshes: used to store all parsed part animation information.

[0152] GLTFMesh class: stores the model, material, texture mapping, and animation information of a part. GLTFMesh mainly contains the following member variables:

[0153] vector <double>Position: stores node coordinate position information;

[0154] vector <int>index: triangle vertex information;

[0155] vector <gltfanimation>animations: animation information of each frame;

[0156] Perform the conversion work, that is, read the parsed cache data of each part and put it into the gltfMeshes vector according to the requirements of cascade_render.

[0157] The data structure of the gltfMeshes vector is established, which means that the rendering data conversion required by DCiP's rendering module cascade_render is completed. The RenderToBufferGLTF() function will pass gltfMeshes to the display engine according to the requirements of DCiP's built-in OpenGL data. After receiving the data to be rendered, DCiP OpenGL (server side) calls the rendering kernel to complete the rendering and finally displays it on the canvas. Fig.11 As shown, these are 80 frames of the corresponding animation, and each frame is displayed as a picture.

[0158] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0159] In the above embodiments of the present invention, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0160] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic. For example, the division of the units can be a logical function division. There may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0161] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0162] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.

[0163] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, in essence, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server or a network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk and other media that can store program codes.

[0164] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, rather than to limit it. Although the present invention has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present invention.< / gltfanimation> < / int> < / double> < / gltfmesh>

Claims

1. A local parsing method for large-scale GLTF models, characterized in that: The specific steps include: S1. Configure a virtual browser environment in the server environment to solve the compatibility problem between the server development platform and the Web end; S2, analyzing the file structure of GLTF, and parsing the GLTF file through the Web-side 3D display module; S3, the function call adopts an asynchronous call mechanism, and after the asynchronous operation is completed, a synchronous call is used for parsing and rendering; S4, after reading the cache file, parse the data into the cascade_render data structure; S5, parse the image from the GLTF binary file and store it as an independent image file, obtain and map the material texture; S6. Determine the data storage format, name the cache file, and parse the file locally in conjunction with the model import processing mechanism.

2. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The configuration of the virtual browser environment is to construct a virtual Web environment in the server-side environment, and complete the parsing and extraction of data through the Web-side 3D display module; The configuration of the virtual browser environment requires modifying the FileLoader module, reading the file into the memory and encapsulating it into the global object cache, reading the local file through the readFileSync function of the server-side development platform and importing it into the cache, and parsing the local file in the Web-side 3D display module.

3. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The GLTF file includes two formats, JSON and binary GLB. The file is read and parsed by the Web-side 3D display module to extract the model and animation data. After the Web-side 3D display module reads and parses the data, the required information in the GLTF can be directly obtained through the obtained data structure.

4. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The Web-side 3D display module adopts an asynchronous call mode during the parsing process, uses Promise and Promise.all methods to manage asynchronous functions, and needs to use the result parsed by DCiPGLTFParser as input for synchronous calling during rendering, and then makes a synchronous call after the asynchronous operation is completed; When the DCiPGLTFParser is executed, Promise.all is used to monitor the status of other asynchronous functions. When all asynchronous functions are completed, that is, in the Fullfilled state, Promise.all also returns to the Fullfilled state, and then cascade_render is executed through the then method.

5. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The data structure of the GLTF animation display design includes model information and animation information. When parsing the cache file, the data needs to be converted into a cascade_render data structure and input into the OpenGL kernel.

6. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The related information parsing module in the server-side environment extracts the material image file from the GLTF binary file and stores it as an independent image file, and the OpenGL kernel obtains the material texture for rendering.

7. The local parsing method of a large-scale GLTF model according to claim 1, characterized in that: The array storage format includes conventional storage and cross storage; the cache file naming is used to correspond the GLTF file to the corresponding animation cache file one by one, and the MD5 hash algorithm is used to generate a unique signature of the file, and the cache file is named with the signature; The model import processing mechanism parses the file locally through a cache mechanism, and can selectively load the parts required for animation display according to actual needs, thereby realizing on-demand loading.

Images