Method, device and equipment for generating dynamic visual rendering file through static scene data
By converting static scene data into the data format of the target visualization component and embedding it into the hypertext markup language page for rendering, the problem that the existing technology cannot effectively process three-dimensional spatial data is solved, and efficient and flexible dynamic visual rendering effect is achieved.
Patent Information
- Application Number
- CN202311146642.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-09-06
- Publication Date
- 2025-03-07
AI Technical Summary
The existing dynamic visual rendering technology cannot effectively process and display data and scenes in three-dimensional space, and lacks data interaction and transmission capabilities with 3D scenes, which limits its application effect in real-world scene simulation and complex data presentation.
It provides a method to generate dynamic visual rendering files for static scene data. By obtaining static scene data and displaying configuration parameters, it converts it into a data format readable by the target visualization component, encapsulates the target visualization component, and embeds it into a hypertext markup language page, visual rendering according to the preset rendering configuration file, and outputs dynamic scenes.
While maintaining efficient rendering effects, simplify the asset update process, improve the material performance ability, avoid resource waste, and have higher flexibility to adapt to changing rendering needs.
Smart Images

Figure CN119576450A_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to the field of computing information processing technology, and in particular to a method, device and equipment for generating dynamic visualization rendering files from static scene data. Background Art
[0002] Existing dynamic visualization rendering technology is mainly focused on generating flat images. The core feature of this technology is to use various visualization tools and techniques to dynamically visually represent data and scenes. It can effectively transform abstract data information into intuitive graphics to help people better understand and interpret data. However, this technology can often only operate on a two-dimensional plane, unable to fully utilize depth and spatial information, and unable to create realistic images with three-dimensional effects.
[0003] Although existing technologies have made certain achievements in data visualization, there are still some shortcomings. First, this technology cannot process and display data and scenes in three-dimensional space, which limits its effectiveness in application scenarios such as real-world scene simulation and complex data presentation. Second, this technology lacks the ability to interact and transmit data with 3D scenes, which limits its effectiveness in conveying dynamic changes in data and scenes. Summary of the invention
[0004] The technical problem to be solved by the present disclosure is how to provide a method, device and equipment for generating dynamic visualization rendering files from static scene data, which can simplify the asset update process, improve the performance of materials, avoid waste of resources, and have higher flexibility to adapt to ever-changing rendering needs while maintaining efficient rendering effects.
[0005] In a first aspect, an embodiment of the present disclosure provides a method for generating a dynamic visualization rendering file from static scene data, comprising:
[0006] Obtain static scene data and corresponding display configuration parameters;
[0007] Convert the display configuration parameters of the static scene data into a data format readable by the target visualization component to obtain the target static scene data format;
[0008] Encapsulate the target visualization component based on the data format of the static scene data;
[0009] Embed the static scene data and the encapsulated target visualization component into a target hypertext markup language page;
[0010] According to the preset rendering configuration file, the target HTML page is visually rendered to output the dynamic scene.
[0011] Optionally, the above-mentioned converting the display configuration parameters of the static scene data into a data format readable by the target visualization component to obtain the target static scene data format includes:
[0012] Analyze the static scene data and the corresponding display configuration parameters to determine the data structure information, data format information, and data type information;
[0013] Generate a corresponding conversion script according to a preset data conversion tool, and convert the static scene data and corresponding display configuration parameters into a target format according to the conversion script;
[0014] Find the corresponding item in the target format for each attribute or parameter of the static scene data;
[0015] If the original display configuration parameters do not match the parameter granularity supported by the target visualization component, a parameter-level conversion is performed.
[0016] Optionally, if the original display configuration parameters do not match the parameter granularity supported by the target visualization component, a parameter level conversion is performed, including:
[0017] Analyze the original display configuration parameters to determine the fine-grainedness of the target parameter structure;
[0018] If the granularity is smaller than the preset parameter, multiple parameters are merged into one target parameter; if the source parameter is greater than or equal to the preset parameter, one parameter is split into multiple target parameters.
[0019] Optionally, the data format based on the static scene data encapsulates the target visualization component, including:
[0020] Analyze the structure and characteristics of static scene data and determine the value range or restrictions;
[0021] Determine the interactive functions and interfaces of the visualization components based on the value range or restrictions;
[0022] Based on the preset development framework, encode the visualization components to ensure that they can correctly read, interpret and display static scene data;
[0023] The packaging is completed after testing the coded visual components.
[0024] Optionally, the above-mentioned embedding of the static scene data and the encapsulated target visualization component into the target hypertext markup language page includes:
[0025] analyzing and determining the structure of a target hypertext markup language page to locate an optimal embedding location for the component;
[0026] Create specific placeholder elements in the HTML page and assign them identifiers to facilitate subsequent positioning and component rendering;
[0027] Linking the static resources and static scene data files required by the encapsulated visualization component to the hypertext markup language page;
[0028] Initialize and start the target visual component when the page is loaded, so that it reads and renders according to the static scene data in the specified placeholder element;
[0029] Adjust the style of the target visual component to ensure it is consistent with the overall design style of the target HTML page.
[0030] Optionally, the above-mentioned creation of a specific placeholder element in the hypertext markup language page and assigning an identifier to it for subsequent positioning and component rendering include:
[0031] Analyze the target HTML page, reserve space for the visual component to be embedded, and select appropriate HTML elements to occupy the space;
[0032] Set a predetermined width and height size as a placeholder element to ensure the stability of the page layout when the visual components are loaded;
[0033] Set alternative content or loading indicators in placeholder elements to indicate the loading status or abnormal conditions of the component;
[0034] Assign a unique identifier to the placeholder element to ensure that subsequent operations can accurately locate the element.
[0035] Optionally, the above initialization and startup of the target visualization component when the page is loaded, so that it reads and renders according to the static scene data in the specified placeholder element, includes:
[0036] Initialize the visualization component and configure it with the required initial state and settings;
[0037] Read the preset static scene data and accurately locate the reserved placeholder elements according to the assigned identifiers;
[0038] Use the target rendering method to render the initialized visual component into the placeholder element;
[0039] Add event listeners to the rendered visual component to complete the interaction or response.
[0040] In a second aspect, an embodiment of the present disclosure further provides a device for generating a dynamic visualization rendering file from static scene data, comprising:
[0041] An acquisition module is used to acquire static scene data and corresponding display configuration parameters;
[0042] A conversion module converts the display configuration parameters of the static scene data into a data format readable by the target visualization component to obtain the target static scene data format;
[0043] The encapsulation module encapsulates the target visualization component based on the data format of the static scene data;
[0044] An embedding module embeds the static scene data and the encapsulated target visualization components into a target hypertext markup language page;
[0045] The rendering module performs visual rendering on the target HTML page according to the preset rendering configuration file and outputs a dynamic scene.
[0046] Optionally, the conversion module is specifically used for:
[0047] Analyze the static scene data and the corresponding display configuration parameters to determine the data structure information, data format information, and data type information;
[0048] Generate a corresponding conversion script according to a preset data conversion tool, and convert the static scene data and corresponding display configuration parameters into a target format according to the conversion script;
[0049] Find the corresponding item in the target format for each attribute or parameter of the static scene data;
[0050] If the original display configuration parameters do not match the parameter granularity supported by the target visualization component, a parameter-level conversion is performed.
[0051] Optionally, the conversion module is further used for:
[0052] Analyze the original display configuration parameters to determine the fine-grainedness of the target parameter structure;
[0053] If the granularity is smaller than the preset parameter, multiple parameters are merged into one target parameter; if the source parameter is greater than or equal to the preset parameter, one parameter is split into multiple target parameters.
[0054] Optionally, the encapsulation module is specifically used for:
[0055] Analyze the structure and characteristics of static scene data and determine the value range or restrictions;
[0056] Determine the interactive functions and interfaces of the visualization components based on the value range or restrictions;
[0057] Based on the preset development framework, encode the visualization components to ensure that they can correctly read, interpret and display static scene data;
[0058] The packaging is completed after testing the coded visual components.
[0059] Optionally, the above embedded module is specifically used for:
[0060] analyzing and determining the structure of a target hypertext markup language page to locate an optimal embedding location for the component;
[0061] Create specific placeholder elements in the HTML page and assign them identifiers to facilitate subsequent positioning and component rendering;
[0062] Linking the static resources and static scene data files required by the encapsulated visualization component to the hypertext markup language page;
[0063] Initialize and start the target visual component when the page is loaded, so that it reads and renders according to the static scene data in the specified placeholder element;
[0064] Adjust the style of the target visual component to ensure it is consistent with the overall design style of the target HTML page.
[0065] Optionally, the above embedded module is specifically used for:
[0066] Analyze the target HTML page, reserve space for the visual component to be embedded, and select appropriate HTML elements to occupy the space;
[0067] Set a predetermined width and height size as a placeholder element to ensure the stability of the page layout when the visual components are loaded;
[0068] Set alternative content or loading indicators in placeholder elements to indicate the loading status or abnormal conditions of the component;
[0069] Assign a unique identifier to the placeholder element to ensure that subsequent operations can accurately locate the element.
[0070] Optionally, the above embedded module is specifically used for:
[0071] Initialize the visualization component and configure it with the required initial state and settings;
[0072] Read the preset static scene data and accurately locate the reserved placeholder elements according to the assigned identifiers;
[0073] Use the target rendering method to render the initialized visual component into the placeholder element;
[0074] Add event listeners to the rendered visual component to complete the interaction or response.
[0075] In a third aspect, an embodiment of the present disclosure provides an electronic device, including a processor, a memory, and a program or instruction stored in the memory and executable on the processor, which, when executed by the processor, implements the steps of the method for generating a dynamic visualization rendering file from static scene data as described above.
[0076] In a fourth aspect, an embodiment of the present disclosure provides a readable storage medium, on which a program or instruction is stored, and when the program or instruction is executed by a processor, the steps of the method for generating a dynamic visualization rendering file from static scene data as described above are implemented.
[0077] The above solution of the present disclosure includes at least the following beneficial effects:
[0078] By acquiring static scene data and corresponding display configuration parameters; converting the display configuration parameters of the static scene data into a data format readable by the target visualization component, obtaining the target static scene data format; encapsulating the target visualization component based on the data format of the static scene data; embedding the static scene data and the encapsulated target visualization component into a target hypertext markup language page; and visually rendering the target hypertext markup language page according to a preset rendering configuration file to output a dynamic scene. The disclosed solution can simplify the asset update process while maintaining an efficient rendering effect, and has higher flexibility to adapt to changing rendering requirements. BRIEF DESCRIPTION OF THE DRAWINGS
[0079] Figure 1 A method for generating dynamic visualization rendering files from static scene data provided by an embodiment of the present disclosure;
[0080] Figure 2 It is a schematic diagram of the steps of a method for converting a static scene data format provided by an embodiment of the present disclosure;
[0081] Figure 3 It is a schematic diagram of the steps of a method for encapsulating a visualization component provided by an embodiment of the present disclosure;
[0082] Figure 4 It is a schematic diagram of the steps of a method for embedding a visualization component into a hypertext markup language page provided by an embodiment of the present disclosure;
[0083] Figure 5 It is a structural schematic diagram of a device for generating dynamic visual rendering files from static scene data provided by an embodiment of the present disclosure;
[0084] Figure 6 A schematic diagram of the structure of an electronic device provided by an embodiment of the present disclosure is shown;
[0085] Figure 7 A schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present disclosure is shown. DETAILED DESCRIPTION
[0086] The following will be combined with the drawings in the embodiments of the present disclosure to clearly describe the technical solutions in the embodiments of the present disclosure. Obviously, the described embodiments are part of the embodiments of the present disclosure, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present disclosure are within the scope of protection of the present disclosure.
[0087] The terms "first", "second", etc. in the specification and claims of the present disclosure are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable when appropriate, so that the embodiments of the present disclosure can be implemented in an order other than those illustrated or described herein, and the objects distinguished by "first", "second", etc. are generally of the same type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.
[0088] In conjunction with the accompanying drawings, a method, device and electronic device for generating a dynamic visualization rendering file from static scene data provided by the embodiments of the present disclosure are described in detail below through specific embodiments and their application scenarios.
[0089] Figure 1 This is a method for generating dynamic visualization rendering files from static scene data provided by the embodiment of the present disclosure, see Figure 1 , the method may include the following steps:
[0090] Step 101, obtaining static scene data and corresponding display configuration parameters.
[0091] In one embodiment of the present disclosure, the above steps are mainly reflected in the data preparation stage, which specifically includes:
[0092] (1) Data source identification:
[0093] Determine the data source: Static scene data may come from a database, API, file system, or other external data sources.
[0094] Verify data integrity: Ensure that the static scene data source provides all required information and is up to date.
[0095] (2) Data extraction:
[0096] Design a static scene data extraction process and use tools or programming languages to pull data from the selected data source.
[0097] For large datasets, you may need to ingest them in batches or use stream processing.
[0098] (3) Data cleaning:
[0099] Identify and handle missing or inconsistent static scene data.
[0100] Convert static scene data to a uniform format or unit.
[0101] Eliminate outlier or irrelevant data points.
[0102] (4) Data conversion:
[0103] Convert raw static scene data into a format that can be read by visualization components. For example, convert from CSV to JSON.
[0104] For more complex data structures, design a data model or use data transformation tools.
[0105] (5) Data verification:
[0106] Use statistical methods or data visualization tools to check the cleaned and transformed data to ensure the accuracy and completeness of static scene data.
[0107] (6) Data structuring:
[0108] Classify and group static scene data to make it more organized.
[0109] Create indexes for static scene data to facilitate subsequent query and retrieval.
[0110] (7) Data optimization:
[0111] For large data sets, data compression can be performed to reduce storage space and increase loading speed.
[0112] If possible, precompute or aggregate data so that visualization components can load and render faster.
[0113] (8) Data backup and storage:
[0114] Back up the processed static scene data to ensure data security.
[0115] Choose the appropriate storage method and location, which may be cloud storage, local server, or other medium.
[0116] (9) Data update strategy:
[0117] Design a data update strategy based on the timeliness and change frequency of static scene data.
[0118] Automate the data update process to ensure that visualization components always use the latest data.
[0119] Through the above preparation steps, it is ensured that the static scene data has been fully prepared and processed before entering the visualization component, which not only meets the needs of the visualization component but also ensures the accuracy and reliability of the data.
[0120] Step 102: Convert the display configuration parameters of the static scene data into a data format readable by the target visualization component to obtain the target static scene data format.
[0121] In one embodiment of the present disclosure, the display configuration parameters of the static scene data may be converted into a data format readable by the target visualization component by the following method:
[0122] (1) Definition of source data and target data formats:
[0123] Source data format: Static scene data describes a 3D object in the form of attributes and parameters, including its size (width, height, depth), position (x, y, z coordinates), and color (such as a hexadecimal code). Target data format: The 3D visualization component requires a model description, which contains a continuous array of dimensions (such as [width, height, depth]), an array of coordinates (such as [x, y, z]), and a color code without the "#" symbol.
[0124] (2) Data mapping strategy:
[0125] The "dimensions" property of the static scene will be mapped to the "size" property of the visual component. We need to combine the separate width, height, and depth values into a continuous array. Similarly, the "x", "y", and "z" coordinates of the position will be combined into the "coords" array. The color codes will be stripped of the "#" symbol from the original format and mapped to the "paint" property.
[0126] (3) Conversion process:
[0127] Read the "dimensions" and "position" attributes from the static scene data. Restructure these attributes to create "size" and "coords" arrays that match the target format. Extract the color code, remove the "#" prefix, and map to the "paint" attribute.
[0128] (4) Data Verification: To ensure the accuracy of the conversion process, we will check the converted data. We can confirm that the "size" and "coords" arrays have three elements and that the "paint" attribute has the "#" prefix removed correctly.
[0129] (5)Automatic conversion:
[0130] Establish a standardized data conversion process to ensure that each time new static scene data is received, it can be converted according to the above method. This process can be a separate service or module, which automatically converts new data whenever it comes in and provides the required format for the 3D visualization component.
[0131] Through the above-mentioned processing flows, efficient conversion of static scene data to target visualization component formats is achieved, thereby improving data interoperability and consistency. This not only enhances 3D visualization capabilities and optimizes user experience, but also reduces redundant work and repeated efforts, bringing significant benefits to enterprises and developers.
[0132] Figure 2 This is a schematic diagram of a method for converting static scene data format provided by an embodiment of the present disclosure. Figure 2 , step 102 may include the following steps:
[0133] Step 1021, analyzing the static scene data and the corresponding display configuration parameters to determine data structure information, data format information, and data type information;
[0134] In one embodiment of the present disclosure, consider a static scene data, which contains 3D model data of a building. This data may be provided in .obj format and also contains texture and material data. First, the file is analyzed to determine its data structure (e.g., vertices, faces, normals, etc.), data format (.obj) and data type (e.g., 3D model, texture, etc.). For display configuration parameters, there may be information such as "the building color is blue", "the window is translucent", etc., which also need to be analyzed in detail.
[0135] Step 1022, generating a corresponding conversion script according to a preset data conversion tool, and converting the static scene data and the corresponding display configuration parameters into a target format according to the conversion script;
[0136] In one embodiment of the present disclosure, a predefined conversion script from .obj format to .glTF format can be generated using the preset tool of "3DConverter". This conversion script will not only handle the conversion of the 3D model, but also the conversion of the map and material data associated with it. At the same time, the script will also read the display configuration parameters, such as color and transparency, and apply these parameters during the conversion process.
[0137] Step 1023, finding a corresponding item in the target format for each attribute or parameter of the static scene data;
[0138] In one embodiment of the present disclosure, in the .obj file, there is an attribute named mtlColor, which describes the main color of the object. When converting to the .glTF format, it is necessary to determine how this attribute is mapped. In .glTF, the corresponding attribute may be named baseColor. Therefore, the conversion script needs to contain a mapping to convert mtlColor to baseColor.
[0139] Step 1024: If the original display configuration parameters do not match the parameter granularity supported by the target visualization component, a parameter level conversion is performed.
[0140] In one embodiment of the present disclosure, consider the transparency setting in the original display configuration parameters. It is possible that in the original data, the transparency is an integer between 0 and 100, but the target visualization component may require the transparency to be a floating point number between 0 and 1. In this case, the conversion script needs to perform a parameter-level conversion to divide the original transparency parameter value by 100 to match the requirements of the target component.
[0141] In one embodiment of the present disclosure, the above step 1024 may specifically include: analyzing the original display configuration parameters to determine the granularity of the target parameter structure; if the granularity is smaller than the preset parameter, merging multiple parameters into one target parameter; if the source parameter is greater than or equal to the preset parameter, splitting one parameter into multiple target parameters.
[0142] In one embodiment of the present disclosure, the original display configuration parameters may be composed of multiple sub-parameters or attributes that control various details of the visualization component. In some cases, one component may require a higher level of parameter detail than another component. Fine-grained parameters provide higher customization and control capabilities for visualization, but they may also increase complexity. In some cases, in order to simplify and reduce the complexity of data transmission or processing, it may be necessary to merge multiple original parameters into a simpler target parameter. This merger can be based on preset rules, such as taking an average, selecting a maximum value, a minimum value, or other statistical methods. When the target component requires a higher level of fine-grained parameters than the original data, it may be necessary to split a single original parameter into multiple more specific target parameters. Such splitting can be based on preset rules or algorithms, for example, splitting the original parameter based on different attribute values or value ranges.
[0143] In one embodiment of the present disclosure, assume that we have an original display configuration parameter of "color", which gives an RGB value, such as red is (255,0,0). But the target visualization component may prefer to use separate "red", "green", and "blue" parameters. In this case, the original "color" parameter is split into three target parameters. On the other hand, if the target component only accepts an overall "brightness" parameter, and our original data contains three parameters of "red", "green", and "blue", then we may need to combine these three original parameters to calculate a "brightness" value (for example, by taking the average) as the target parameter. Such a conversion ensures that the visual representation from the original data to the target component is always consistent and optimized in different environments or platforms.
[0144] Step 103: encapsulate the target visualization component based on the data format of the static scene data.
[0145] In one embodiment of the present disclosure, the above steps may specifically include:
[0146] (1) Data adaptation layer creation:
[0147] First, the structure and format of the static scene data need to be identified. This includes analyzing data types, hierarchies, relationships, and attributes. Then, a data adaptation layer is established, which is responsible for converting the static scene data into the format required by the target visualization component. For example, if the static data is in XML format, but the target component requires JSON format, this layer will be responsible for format conversion.
[0148] (2) Component interface definition:
[0149] To ensure that the encapsulated target visualization component interacts seamlessly with external systems or applications, clear interfaces need to be defined. These interfaces may include data input / output, event monitoring, callback functions, etc.
[0150] (3) Custom property settings of components:
[0151] According to the characteristics of static scene data, set default properties or styles for visualization components, such as color, size, animation effects, etc. This ensures that the components can intuitively present the characteristics of the scene when loading data.
[0152] (4) Guarantee of component scalability:
[0153] Considering that there may be new data formats or new data characteristics in the future, it is necessary to ensure that the encapsulated components have good extensibility. This can be achieved through plug-in mechanisms, modular design, or the use of open APIs.
[0154] (5) Error handling and exception management:
[0155] Considering that data may be missing or in the wrong format, it is necessary to add error handling and exception management mechanisms to the encapsulated components to ensure that the components can gracefully degrade or provide clear error messages when encountering problems.
[0156] Through the above processing flows, the difference between static scene data and target visualization components is effectively bridged. Through data adaptation and component encapsulation, smooth and intuitive web rendering capabilities are provided for complex 3D scenes, thereby greatly improving data readability and user experience.
[0157] Figure 3 is a schematic diagram of the steps of the method for encapsulating a visualization component provided by an embodiment of the present disclosure, see Figure 3 , specifically including the following steps:
[0158] Step 1031, analyzing the structure and characteristics of the static scene data to determine the value range or limit;
[0159] In one embodiment of the present disclosure, it is first necessary to have an in-depth understanding of the source and meaning of the static scene data. Static scene data may come from different data sources, such as databases, external APIs, or other services. Analyze the key attributes, hierarchical structures, types, etc. of the data, and determine the value ranges or other potential constraints of these data attributes. : Assume that the static scene data is a 3D building model of a city. After analysis, it is known that each building has attributes such as height, material, and age. The value range of the height is determined to be 0-300 meters, and the possible values of the material are steel, concrete, glass, etc.
[0160] Step 1032, determining the interactive function and interface of the visualization component according to the value range or restriction;
[0161] In one embodiment of the present disclosure, based on the value range of the data, it is possible to determine which interactive functions are meaningful to the user. For example, a slider may be provided to the user to filter the value range of a certain attribute, or a drop-down menu may be provided to select. For example, a slider may be provided for the height attribute of a city building model, allowing the user to select which buildings within the height range are displayed; a drop-down menu may be provided for the material attribute, allowing the user to filter buildings by material.
[0162] Step 1033, based on the preset development framework, encode the visualization component to ensure that it can correctly read, interpret and display the static scene data;
[0163] In one embodiment of the present disclosure, a suitable front-end development framework, such as Three.js or WebGL, is selected to write the core code of the visualization component to ensure that the component can correctly parse static scene data and render according to the user's interaction needs. For example, using the Three.js framework, a 3D building rendering component is written that can read urban building data and dynamically render the scene according to the user's selection through a slider or a drop-down menu.
[0164] Step 1034, testing the encoded visualization component and completing the packaging.
[0165] In one embodiment of the present disclosure, after the component is developed, comprehensive unit testing and integration testing are performed to ensure that the component can run stably under various conditions. After the test is completed, the component is encapsulated as an independent module or library to facilitate reuse in subsequent projects. For example, a functional test is performed on the 3D building rendering component to ensure that the component can work correctly and smoothly under various data inputs and user interactions. After the test passes, the component is encapsulated as an NPM module to facilitate direct reference and use in subsequent projects.
[0166] Through the above steps, we can deeply analyze the structure and characteristics of static scene data to ensure the high adaptability and interactivity of visualization components. By clarifying the value range and constraints of data, components can provide users with more intuitive and targeted interaction methods. With the help of the preset development framework, the component development process is more efficient and easy to maintain. After rigorous testing and packaging, the component not only ensures stability and reliability, but also has good reusability, greatly improving development efficiency and user experience.
[0167] Step 104: embed the static scene data and the encapsulated target visualization component into the target hypertext markup language page.
[0168] In one embodiment of the present disclosure, the above steps specifically include:
[0169] (1) Data integration and organization: During the design phase of an HTML page, it is necessary to determine the specific content of the static scene data to be displayed, such as the various attributes, parameters, and elements of the scene, and organize this data into a structured format, such as JSON and XML, to facilitate subsequent processing and embedding.
[0170] (2) Determine the location of the component: In the page layout, determine the specific location of the target visual component to ensure its compatibility and coordination with other page elements. Design placeholders or containers, such as ` `or` `, to reserve space for subsequent component loading and rendering.
[0171] (3) Embedding data and components: directly embed the above structured static scene data into the HTML page, or introduce it through external links. Load the encapsulated target visualization component to a predetermined location through HTML tags or specific scripts (such as JavaScript). This can be achieved by directly linking to the source file of the component or using a specific API or library.
[0172] (4) Compatibility and adaptability: Ensure that the target visualization component can correctly parse and display static scene data on a variety of browsers and devices. Ensure that the component is responsive and can adapt to various display requirements for different devices and screen sizes.
[0173] (5) Integration of user interaction: According to the characteristics of static scene data, design appropriate user interaction interfaces and functions, such as zooming, rotating, filtering, etc. Ensure that the user's interactive behavior can be smoothly transmitted to the visualization component, thereby achieving effective control and operation of static scene data.
[0174] (6) Optimization and maintenance: After the initial embedding, continuously optimize the component loading speed, display effect, and interactive experience based on user feedback and page performance. Maintain regular updates to static scene data to ensure that it is synchronized with the visualization components to meet the continuous needs of users.
[0175] Through the above series of steps, the static scene data and target visualization components are successfully integrated and embedded into the target HTML page, providing users with a new and intuitive data display and interactive experience.
[0176] Figure 4 is a schematic diagram of the steps of the method for embedding a visualization component into a hypertext markup language page provided by an embodiment of the present disclosure, see Figure 4 , specifically including the following steps:
[0177] Step 1041, analyzing and determining the structure of the target hypertext markup language page to locate the best embedding position of the component;
[0178] In one embodiment of the present disclosure, the overall structure and layout of the target hypertext markup language page is deeply analyzed to identify the main page elements and content areas, as well as the layout and fluidity of other interactive elements. For example, for a museum's web page display, the three-dimensional scene may be a three-dimensional scan of a cultural relic. Ensure that this three-dimensional scene is placed in a position that the user can immediately see when entering the page for the first time, perhaps just below or next to the introduction text.
[0179] Step 1042, creating a specific placeholder element in the hypertext markup language page and assigning an identifier to it to facilitate subsequent positioning and component rendering;
[0180] In one embodiment of the present disclosure, in order to ensure that the component can be loaded in the correct location, it is necessary to create a specific placeholder element in HTML and assign it a unique ID or class name. For example, in a museum page, create a element, assign it an ID such as id="3dArtifactDisplay" so that subsequent scripts or styles can be applied to it accurately.
[0181] Step 1043, linking the static resources and static scene data files required by the encapsulated visualization component to a hypertext markup language page;
[0182] In one embodiment of the present disclosure, all static resources related to the visualization component, such as JS libraries, CSS files, and static scene data files, should be linked to the HTML page to ensure the normal operation of the component. <link> and <script>标签链接到必要的CSS样式表和JavaScript文件,如3DRenderer.css和3DRenderer.js,这些文件包含渲染和展示三维场景的代码。
[0183] 步骤1044,在页面加载时初始化并启动目标可视化组件,使其读取并在指定的占位元素中根据静态场景数据进行渲染;
[0184] 在本公开的一个实施例中,当页面加载时,使用JavaScript或相应的框架调用组件的初始化函数,确保其在预定的占位元素中加载并开始渲染数据。当页面加载完毕,JavaScript脚本查询ID为3dArtifactDisplay的元素,并使用预先加载的三维渲染库在该元素内展示文物的三维扫描图。
[0185] 步骤1045,调整目标可视化组件的样式以确保其与目标超文本标记语言页面的整体设计风格一致。
[0186] 在本公开的一个实施例中,为了保证页面的一致性和协调性,组件的样式可能需要进行调整。可以直接修改组件的CSS文件或在HTML页面中覆盖其默认样式。例如如果博物馆网站的主题色是深蓝色,那么可以设置三维场景的背景为深蓝,控制按钮使用金色,以确保其与整个网站的设计风格和色彩协调一致。
[0187] 在本公开的一个实施例中,上述在超文本标记语言页面中创建特定的占位元素,为其分配标识以便于后续定位和组件渲染,包括:
[0188] 分析目标超文本标记语言页面,为即将嵌入的可视化组件预留空间,选择合适的超文本标记语言元素进行占位;设定预定的宽度和高度尺寸为占位元素,确保在可视化组件加载时页面布局的稳定性;在占位元素内设置备用内容或加载指示器,用于指示组件的加载状态或异常情况;为占位元素分配一个独特的标识,确保后续操作可以准确地定位到该元素。
[0189] 在本公开的一个实施例中,首先,在准备嵌入可视化组件之前,要对整个页面的内容布局、用户交互流程以及页面的设计风格进行分析,以确定最合适的位置放置可视化组件。其次,在选择的位置为可视化组件预留足够的空间,这是为了确保可视化组件可以完整地展示其内容,同时不影响页面的其他部分。再次选择合适的元素进行占位,常用的占位元素包括,<section>,或<figure>,这些元素提供了块级布局,适合嵌入各种类型的内容。然后设定预定的宽度和高度,为了确保页面在加载组件时的布局稳定性,为占位元素设定一个固定的宽度和高度是很重要的。然后设置备用内容或加载指示器,在组件尚未加载完成之前,可以在占位元素中放置一些备用内容或加载指示器,如旋转的加载图标或"正在加载”文字,以提高用户体验。最后为占位元素分配一个独特的标识,为了后续操作的方便,如通过JavaScript对其进行操作或应用特定的CSS样式,为占位元素分配一个独特的ID或class是很有必要的。
[0190] 例如:以开发一个都市规划的网站为例,其中一个页面的主要内容是展示某个城市的三维模型。
[0191] 1.分析页面:页面的顶部有网站的导航,接下来是关于都市规划的简介文字,而页面的中心和下方区域预留给了三维城市场景。
[0192] 2.预留空间:页面的中心预留了一个大块的空间,确保三维城市模型可以完整且清晰地展示。
[0193] 3.选择元素进行占位:在预留的中心位置创建一个元素。
[0194] 4.设定预定的宽度和高度:设定宽度为100%(响应式设计)和固定高度为700px。
[0195] 5.设置备用内容:在内部放置一个旋转的加载图标和文字提示"城市场景正在加载中...”。
[0196] 6.分配标识:为该分配一个ID为city3DModel。
[0197] 因此,当用户访问此页面时,他们首先会看到一个提示,表明城市的三维模型正在加载。加载完成后,整个三维城市场景将在预留的空间中展现出来,用户可以进行各种交互,如缩放、旋转和浏览。
[0198] 在本公开的一个实施例中,上述在页面加载时初始化并启动目标可视化组件,使其读取并在指定的占位元素中根据静态场景数据进行渲染,包括:
[0199] 初始化可视化组件,并为其配置所需的初始状态及设置;读取预设的静态场景数据,并根据所分配的标识,精确定位至预留的占位元素;使用目标渲染方法,将初始化后的可视化组件渲染到占位元素中;在渲染完成的可视化组件上,为其添加事件监听器以完成交互或响应。
[0200] 具体的,初始化可视化组件:根据具体的三维渲染框架或库,你需要初始化渲染器、摄像机、场景等基础组件。这些组件提供了一个基础的渲染环境。
[0201] 配置初始状态及设置:可以为摄像机设置一个初始位置,确保首次加载时城市模型位于视口的中心。同时,也可以配置其他属性,如灯光、阴影、渲染质量等,确保三维场景的最佳视觉效果。
[0202] 读取预设的静态场景数据:从服务器或其他数据源加载预设的城市场景模型数据。
[0203] 精确定位至预留的占位元素:使用先前分配的标识(例如ID为`city3DModel`的``元素)来定位并为三维渲染提供一个HTML容器。
[0204] 使用目标渲染方法:采用适当的渲染技术和方法,将三维城市模型渲染到预留的占位元素中。
[0205] 添加事件监听器:为渲染完成的城市模型添加事件监听器,这样用户可以与其进行交互,例如旋转模型、缩放或点击建筑物获取信息。
[0206] 以基于三维城市场景为例,使用三维渲染库Three.js来实现上述步骤:
[0207] 1.初始化可视化组件:
[0208] 创建一个Three.js的场景(Scene),摄像机(Camera)和WebGL渲染器(Renderer)。
[0209] 2.配置初始状态及设置:
[0210] 设置摄像机位置以确保首次加载时城市位于视口中心,同时添加环境光和平行光来模拟日光。
[0211] 3.读取预设的静态场景数据:
[0212] 使用Three.js的加载器,从服务器加载一个预先制作的三维城市模型。
[0213] 4.精确定位至预留的占位元素:
[0214] 获取ID为`city3DModel`的``元素,将WebGL渲染器的大小设置为此元素的大小,并将渲染器的DOM元素添加到此``中。
[0215] 5.使用目标渲染方法:
[0216] 在动画循环中,使用Three.js渲染器渲染场景和摄像机。
[0217] 6.添加事件监听器:
[0218] 使用Three.js的Raycaster和事件监听器,在用户点击或悬停在建筑物上时显示该建筑的信息。
[0219] 最终,当用户访问该页面时,他们会看到一个完整的三维城市模型,可以自由地旋转、缩放,并点击建筑物来获取详细信息。
[0220] 步骤105,根据预设的渲染配置文件,对目标超文本标记语言页面进行可视化渲染,输出动态场景。
[0221] 具体的,解析渲染配置文件:读取预设的渲染配置文件,该文件可能包括场景属性(如背景色、灯光设置、雾效应等)、摄像机属性(如位置、焦点、视角)、对象属性(如材质、纹理、动画路径等)和交互配置(如响应方式、动作触发点等)。
[0222] 准备动态场景资源:基于渲染配置文件,预加载必要的纹理、3D模型、音效等资源。确保所有资源在渲染开始前都已经加载完成,以确保流畅的用户体验。
[0223] 设置场景属性:根据解析出的场景属性,配置超文本标记语言页面上的3D渲染环境。例如,根据配置设置背景色、添加场景内的灯光,或调整雾的密度和颜色等。
[0224] 对象属性配置与加载:遍历配置文件中定义的对象属性,对于每个3D对象,应用其对应的材质、纹理和动画。如果配置文件指定了动画路径,还需要确保3D对象能够按照预定的路径移动或执行其他动作。
[0225] 设置交互响应:根据配置文件中的交互设置,为场景中的3D对象添加交互响应。例如,当用户点击某个建筑物时,可以根据配置文件播放特定的动画或显示信息面板。
[0226] 启动渲染循环:在浏览器中启动一个持续的渲染循环,确保3D场景持续动态地显示,并根据配置文件的设置响应用户的交互。
[0227] 以一基于三维动态城市场景具体实施例,对上述步骤进行进一步阐述:
[0228] 以创建一个表示未来城市的动态三维场景为目标,已有一个渲染配置文件,其中详细描述了天空的颜色、路边的广告屏幕动画、飞车的飞行路径等。具体步骤包括:
[0229] 解析渲染配置文件:使用一个JSON格式的配置文件,其中包含场景背景色、飞车的飞行路径和路边广告屏幕的动画信息。
[0230] 准备动态场景资*:预加载城市的3D模型、飞车模型、广告视频纹理和背景音乐。
[0231] 设置场景属性:根据配置文件,将场景背景设置为深蓝色,并添加亮白色的平行光来模拟月光。
[0232] 对象属性配置与加载:将飞车模型放置在预定的起始位置,并根据配置文件设置其飞行路径。同时,为路边的广告屏幕应用视频纹理,使其播放广告动画。
[0233] 设置交互响应:当用户点击某个广告屏幕时,根据配置文件中的指令,飞车可能会改变其飞行路径并飞往该广告屏幕。
[0234] 启动渲染循环:使用Three.js或其他3D库,在浏览器中启动渲染循环,动态显示这个未来的城市场景,并实时响应用户的交互。
[0235] 这样,用户在访问该超文本标记语言页面时,将会看到一个动态的三维未来城市,飞车在空中飞翔,广告屏幕上播放广告,整个场景都根据预设的渲染配置文件进行配置和渲染。
[0236] 本公开的上述实施例,通过获取静态场景数据和对应的显示配置参数;将静态场景数据的显示配置参数转换为目标可视化组件可读的数据格式,获得目标静态场景数据格式;基于静态场景数据的数据格式,对目标可视化组件进行封装;将静态场景数据和封装后的目标可视化组件嵌入至目标超文本标记语言页面;根据预设的渲染配置文件,对目标超文本标记语言页面进行可视化渲染,输出动态场景。本公开的方案能够在保持高效渲染效果的同时,简化资产的更新过程,具有更高的灵活性,以适应不断变化的渲染需求。
[0237] 图5是本公开实施例提供的一种静态场景数据生成动态可视化渲染文件的装置50的结构示意图,参见图5,该装置50包括:
[0238] 获取模块501,获取静态场景数据和对应的显示配置参数;
[0239] 转换模块502,将静态场景数据的显示配置参数转换为目标可视化组件可读的数据格式,获得目标静态场景数据格式;
[0240] 封装模块503,基于静态场景数据的数据格式,对目标可视化组件进行封装;
[0241] 嵌入模块504,将静态场景数据和封装后的目标可视化组件嵌入至目标超文本标记语言页面;
[0242] 渲染模块505,根据预设的渲染配置文件,对目标超文本标记语言页面进行可视化渲染,输出动态场景。
[0243] 可选地,上述转换模块502具体用于:
[0244] 对静态场景数据和对应的显示配置参数进行分析,确定出数据结构信息、数据格式信息、数据类型信息;
[0245] 根据预设的数据转换工具,生成对应的转换脚本,根据转换脚本将静态场景数据和对应的显示配置参数转换为目标格式;
[0246] 为静态场景数据的每一个属性或参数找到在目标格式中的对应项;
[0247] 如果原始显示配置参数与目标可视化组件支持的参数粒度不匹配,进行参数级别的转换。
[0248] 可选地,上述转换模块502还用于:
[0249] 分析原始显示配置参数,确定出目标参数结构的细粒度;
[0250] 如果细粒度小于预设参数,将多个参数合并为一个目标参数;如果源参数大于等于预设参数,将一个参数拆分为多个目标参数。
[0251] 可选地,上述封装模块503具体用于:
[0252] 分析静态场景数据的结构和特性,确定取值范围或限制;
[0253] 根据取值范围或限制,确定可视化组件的交互功能和接口;
[0254] 基于预设的开发框架,对可视化组件进行编码,确保其能正确地读取、解释及显示静态场景数据;
[0255] 对编码后的可视化组件进行测试后完成封装。
[0256] 可选地,上述嵌入模块504具体用于:
[0257] 分析并确定目标超文本标记语言页面的结构以定位组件的最佳嵌入位置;
[0258] 在超文本标记语言页面中创建特定的占位元素,为其分配标识以便于后续定位和组件渲染;
[0259] 将封装后的可视化组件所需的静态资源和静态场景数据文件链接到超文本标记语言页面;
[0260] 在页面加载时初始化并启动目标可视化组件,使其读取并在指定的占位元素中根据静态场景数据进行渲染;
[0261] 调整目标可视化组件的样式以确保其与目标超文本标记语言页面的整体设计风格一致。
[0262] 可选地,上述嵌入模块504具体用于:
[0263] 分析目标超文本标记语言页面,为即将嵌入的可视化组件预留空间,选择合适的超文本标记语言元素进行占位;
[0264] 设定预定的宽度和高度尺寸为占位元素,确保在可视化组件加载时页面布局的稳定性;
[0265] 在占位元素内设置备用内容或加载指示器,用于指示组件的加载状态或异常情况;
[0266] 为占位元素分配一个独特的标识,确保后续操作可以准确地定位到该元素。
[0267] 可选地,上述嵌入模块504具体用于:
[0268] 初始化可视化组件,并为其配置所需的初始状态及设置;
[0269] 读取预设的静态场景数据,并根据所分配的标识,精确定位至预留的占位元素;
[0270] 使用目标渲染方法,将初始化后的可视化组件渲染到占位元素中;
[0271] 在渲染完成的可视化组件上,为其添加事件监听器以完成交互或响应。
[0272] 本公开实施例提供的装置,获取静态场景数据和对应的显示配置参数;将静态场景数据的显示配置参数转换为目标可视化组件可读的数据格式,获得目标静态场景数据格式;基于静态场景数据的数据格式,对目标可视化组件进行封装;将静态场景数据和封装后的目标可视化组件嵌入至目标超文本标记语言页面;根据预设的渲染配置文件,对目标超文本标记语言页面进行可视化渲染,输出动态场景。本公开的方案能够在保持高效渲染效果的同时,简化资产的更新过程,具有更高的灵活性,以适应不断变化的渲染需求。
[0273] 需要说明的是:上述实施例提供的处理装置仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的处理装置与处理方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
[0274] 本公开实施例中的处理装置可以是虚拟装置,也可以是服务器或者终端中的部件、集成电路或芯片。该装置可以是移动电子设备,也可以为非移动电子设备。示例性的,移动电子设备可以为手机、平板电脑、笔记本电脑、掌上电脑、车载电子设备、可穿戴设备、超级移动个人计算机(ultra-mobile personal computer,UMPC)、上网本或者个人数字助理(personal digital assistant,PDA)等,非移动电子设备可以为服务器、网络附属存储器(Network Attached Storage,NAS)、个人计算机(personal computer,PC)、电视机(television,TV)、柜员机或者自助机等,本公开实施例不作具体限定。
[0275] 本公开实施例中的处理装置可以为具有操作系统的装置。该操作系统可以为安卓(Android)操作系统,可以为ios操作系统,还可以为其他可能的操作系统,本公开实施例不作具体限定。
[0276] 本公开实施例提供的处理装置能够实现图1至图4的方法实施例实现的各个过程,为避免重复,这里不再赘述。
[0277] 可选地,如图6所示,本公开实施例还提供一种电子设备600,包括处理器601,存储器602,存储在存储器602上并可在处理器601上运行的程序或指令,该程序或指令被处理器601执行时实现上述处理方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。需要说明的是,本公开实施例中的电子设备包括上述的移动电子设备和非移动电子设备。
[0278] 图7为实现本公开实施例的一种电子设备的硬件结构示意图。
[0279] 该电子设备700包括但不限于:射频单元701、网络模块702、音频输出单元703、输入单元704、传感器705、显示单元706、用户输入单元707、接口单元708、存储器709、以及处理器710等部件。
[0280] 本领域技术人员可以理解,电子设备700还可以包括给各个部件供电的电源(比如电池),电源可以通过电源管理系统与处理器710逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。图7中示出的电子设备结构并不构成对电子设备的限定,电子设备可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置,在此不再赘述。
[0281] 应理解的是,本公开实施例中,输入单元704可以包括图形处理器(GraphicsProcessing Unit,GPU)7041和麦克风7042,图形处理器7041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。显示单元706可包括显示面板7061,可以采用液晶显示器、有机发光二极管等形式来配置显示面板7061。用户输入单元707包括触控面板7071以及其他输入设备7072。触控面板7071,也称为触摸屏。触控面板7071可包括触摸检测装置和触摸控制器两个部分。其他输入设备7072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆,在此不再赘述。存储器709可用于存储软件程序以及各种数据,包括但不限于应用程序和操作系统。处理器710可集成应用处理器和调制解调处理器,其中,应用处理器主要处理操作系统、用户界面和应用程序等,调制解调处理器主要处理无线通信。可以理解的是,上述调制解调处理器也可以不集成到处理器710中。
[0282] 本公开实施例还提供一种可读存储介质,可读存储介质上存储有程序或指令,该程序或指令被处理器执行时实现上述处理方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
[0283] 其中,处理器为上述实施例中的电子设备中的处理器。可读存储介质,包括计算机可读存储介质,如计算机只读存储器(Read-Only Memory,ROM)、随机存取存储器(RandomAccess Memory,RAM)、磁碟或者光盘等。
[0284] 本公开实施例另提供了一种芯片,芯片包括处理器和通信接口,通信接口和处理器耦合,处理器用于运行程序或指令,实现上述处理方法实施例的各个过程,且能达到相同的技术效果,为避免重复,这里不再赘述。
[0285] 应理解,本公开实施例提到的芯片还可以称为系统级芯片、系统芯片、芯片系统或片上系统芯片等。
[0286] 需要说明的是,在本文中,术语"包括”、"包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下,由语句"包括一个……”限定的要素,并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。此外,需要指出的是,本公开实施方式中的方法和装置的范围不限按示出或讨论的顺序来执行功能,还可包括根据所涉及的功能按基本同时的方式或按相反的顺序来执行功能,例如,可以按不同于所描述的次序来执行所描述的方法,并且还可以添加、省去、或组合各种步骤。另外,参照某些示例所描述的特征可在其他示例中被组合。
[0287] 通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本公开的技术方案本质上或者说对现有技术做出贡献的部分可以以计算机软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM / RAM、磁碟、光盘)中,包括若干指令用以使得一台终端(可以是手机,计算机,服务器,或者网络设备等)执行本公开各个实施例的方法。
[0288] 上面结合附图对本公开的实施例进行了描述,但是本公开并不局限于上述的具体实施方式,上述的具体实施方式仅仅是示意性的,而不是限制性的,本领域的普通技术人员在本公开的启示下,在不脱离本公开宗旨和权利要求所保护的范围情况下,还可做出很多形式,均属于本公开的保护之内。< / script>
Claims
1. A method for generating dynamic visualization rendering files from static scene data, characterized in that: include: Obtain static scene data and corresponding display configuration parameters; Converting the display configuration parameters of the static scene data into a data format readable by a target visualization component to obtain a target static scene data format; Based on the data format of the static scene data, encapsulating the target visualization component; Embedding the static scene data and the encapsulated target visualization component into a target hypertext markup language page; According to a preset rendering configuration file, the target hypertext markup language page is visually rendered to output a dynamic scene.
2. The method for generating dynamic visualization rendering files from static scene data according to claim 1, characterized in that: The step of converting the display configuration parameters of the static scene data into a data format readable by a target visualization component to obtain a target static scene data format comprises: Analyze the static scene data and corresponding display configuration parameters to determine data structure information, data format information, and data type information; Generate a corresponding conversion script according to a preset data conversion tool, and convert the static scene data and the corresponding display configuration parameters into a target format according to the conversion script; Finding a corresponding item in the target format for each attribute or parameter of the static scene data; If the original display configuration parameters do not match the parameter granularity supported by the target visualization component, a parameter level conversion is performed.
3. The method for generating dynamic visual rendering files from static scene data according to claim 2, characterized in that: If the original display configuration parameter does not match the parameter granularity supported by the target visualization component, performing parameter level conversion includes: Analyze the original display configuration parameters to determine the fine granularity of the target parameter structure; If the granularity is smaller than the preset parameter, multiple parameters are merged into one target parameter; if the source parameter is greater than or equal to the preset parameter, one parameter is split into multiple target parameters.
4. The method for generating dynamic visualization rendering files from static scene data according to claim 1, characterized in that: The encapsulating the target visualization component based on the data format of the static scene data comprises: Analyzing the structure and characteristics of the static scene data to determine a value range or limit; Determining the interactive function and interface of the visualization component according to the value range or restriction; Based on a preset development framework, encode the visualization component to ensure that it can correctly read, interpret and display the static scene data; The packaging is completed after testing the coded visual components.
5. The method for generating dynamic visualization rendering files from static scene data as claimed in claim 4, characterized in that: The step of embedding the static scene data and the encapsulated target visualization component into a target hypertext markup language page includes: analyzing and determining the structure of a target hypertext markup language page to locate an optimal embedding location for the component; Creating a specific placeholder element in the hypertext markup language page and assigning it an identifier to facilitate subsequent positioning and component rendering; Linking the static resources and static scene data files required by the encapsulated visualization component to the hypertext markup language page; Initialize and start the target visualization component when the page is loaded, so that it reads and renders according to the static scene data in the specified placeholder element; The style of the target visual component is adjusted to ensure that it is consistent with the overall design style of the target hypertext markup language page.
6. The method for generating dynamic visualization rendering files from static scene data as claimed in claim 5, characterized in that: The step of creating a specific placeholder element in the hypertext markup language page and assigning an identifier to the placeholder element to facilitate subsequent positioning and component rendering includes: Analyze the target hypertext markup language page, reserve space for the visual component to be embedded, and select a suitable hypertext markup language element for placeholder; Set a predetermined width and height size as a placeholder element to ensure the stability of the page layout when the visual components are loaded; Setting backup content or a loading indicator in the placeholder element to indicate the loading status or abnormal situation of the component; Assign a unique identifier to the placeholder element to ensure that subsequent operations can accurately locate the element.
7. The method for generating dynamic visualization rendering files from static scene data as claimed in claim 5, characterized in that: Initializing and starting the target visualization component when the page is loaded, so that it reads and renders according to the static scene data in the specified placeholder element, includes: Initialize the visualization component and configure the required initial state and settings for it; Read the preset static scene data and accurately locate the reserved placeholder elements according to the assigned identifiers; Using the target rendering method, rendering the initialized visual component into the placeholder element; Add event listeners to the rendered visual component to complete the interaction or response.
8. A device for generating dynamic visual rendering files from static scene data, characterized in that: include: An acquisition module is used to acquire static scene data and corresponding display configuration parameters; A conversion module, converting the display configuration parameters of the static scene data into a data format readable by a target visualization component, to obtain a target static scene data format; A packaging module, which packages the target visualization component based on the data format of the static scene data; An embedding module, embedding the static scene data and the encapsulated target visualization component into a target hypertext markup language page; The rendering module performs visual rendering on the target hypertext markup language page according to a preset rendering configuration file, and outputs a dynamic scene.
9. A computing device, characterized in that include: A processor and a memory storing a computer program, wherein when the computer program is executed by the processor, the method according to any one of claims 1 to 7 is performed.
10. A computer-readable storage medium, characterized in that: Instructions are stored, and when the instructions are executed on a computer, the computer is caused to execute the method according to any one of claims 1 to 7.