Page generation method, electronic equipment and computer readable storage medium
Through a page generation method, 3D UI components are loaded and drawn on demand, solving the problems of high hardware requirements and slow loading speed in the prior art, and realizing 3D application deployment on different devices.
Patent Information
- Application Number
- CN202410574685.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Priority Date
- 2023-09-28
- Filing Date
- 2024-05-10
- Publication Date
- 2025-03-28
AI Technical Summary
In the prior art, 3D deployment requires high hardware requirements on electronic devices, and the loading speed of 3D engine resources is slow, making it difficult to deploy 3D applications on different types of electronic devices.
Through a page generation method, the source file of the page to be displayed is parsed in response to user operations, the required UI components and 3D engine resource list is obtained, the required resources are loaded as needed, the 3D engine resources are used to draw 3D UI components, and rasterize them to obtain texture pictures, and finally the texture picture is displayed.
Reduces memory overhead during application runtime and reduces the impact on application performance, thereby deploying 3D applications on different types of electronic devices.
Smart Images

Figure CN119719529A_ABST
Abstract
Description
Technical Field
[0001] The embodiments of the present application relate to the field of intelligent terminal technology, and in particular to a page generation method, an electronic device, and a computer-readable storage medium. Background Art
[0002] As the capabilities of electronic devices (eg, smartphones or tablet computers) increase, rendering of three-dimensional (3D) content is a development trend.
[0003] For 3D content rendering, from the perspective of the development of the graphics technology stack, it is necessary to provide easy-to-use, high-performance 3D rendering open capabilities. However, in the existing related technologies, 3D deployment has high hardware requirements for electronic devices, and the loading speed of 3D engine resources is slow, making it difficult to deploy 3D applications on different types of electronic devices. Summary of the invention
[0004] The present application provides a page generation method, an electronic device, and a computer-readable storage medium, so as to enable the electronic device to load UI components and 3D engine resources on demand according to the page to be displayed, reduce the memory overhead during application runtime, reduce the impact on application performance, and thus deploy 3D applications on different types of electronic devices.
[0005] In a first aspect, the present application provides a page generation method, comprising: in response to a user operation on an application, parsing a source file corresponding to a page to be displayed of the application, and obtaining a list of user interface components and a list of 3D engine resources that the page to be displayed depends on according to the source file; loading the user interface components and 3D engine resources required for the page to be displayed according to the list of user interface components and the list of 3D engine resources that the page to be displayed depends on; drawing a 3D user interface component on the page to be displayed according to the 3D engine resources and the user interface components required for the page to be displayed; rasterizing the drawn 3D user interface component to obtain a texture image of the 3D user interface component; and displaying the texture image.
[0006] In one possible implementation, obtaining the list of user interface components and the list of 3D engine resources that the page to be displayed depends on according to the source file includes: obtaining information about the user interface components and the 3D resource library that the page to be displayed depends on from the source file; generating a user interface component list file and a 3D engine resource list file according to the information about the user interface components and the 3D resource library that the page to be displayed depends on; and obtaining the list of user interface components and the list of 3D engine resources that the application depends on according to the user interface component list file and the 3D engine resource list file.
[0007] In one possible implementation manner, drawing a 3D user interface component on the page to be displayed according to the user interface component required by the page to be displayed includes: parsing the page to be displayed to obtain events, properties and methods of the page; creating a 3D object corresponding to the page, and binding the events, properties and methods of the page to the 3D object; creating a 3D user interface component in the 3D object according to the user interface component required by the page to be displayed, and calculating the position and size of the 3D user interface component in the page; generating a drawing instruction according to the position and size of the 3D user interface component in the page; and executing the drawing instruction to draw the 3D user interface component in the page.
[0008] In one possible implementation, rasterizing the drawn 3D user interface component to obtain a texture image of the 3D user interface component includes: in the process of rasterizing the drawn 3D user interface component, generating textures of different resolutions according to the distance between pixels at different positions of the 3D user interface component and a camera in a 3D scene.
[0009] In one possible implementation, the closer the pixel points in the 3D user interface component are to the camera in the 3D scene, the higher the resolution of the generated texture; and the farther the pixel points in the 3D user interface component are from the camera in the 3D scene, the lower the resolution of the generated texture.
[0010] In one possible implementation manner, displaying the texture image includes: dividing the texture image into a plurality of texture blocks according to a predetermined size, and displaying the texture blocks within a field of view of the corresponding electronic device.
[0011] In one possible implementation, in response to the user closing the page, the electronic device may also release the loaded user interface components and 3D engine resources.
[0012] In a second aspect, the present application provides an electronic device comprising: one or more processors; a memory; multiple applications; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs include instructions, which, when executed by the electronic device, enable the electronic device to perform the method provided in the first aspect.
[0013] It should be understood that the second aspect of the present application is consistent with the technical solution of the first aspect of the present application, and the beneficial effects achieved by each aspect and the corresponding feasible implementation methods are similar and will not be repeated here.
[0014] In a third aspect, the present application provides a computer-readable storage medium, in which a computer program is stored. When the computer-readable storage medium is run on a computer, the computer executes the method provided in the first aspect.
[0015] In a fourth aspect, the present application provides a computer program, which, when executed by a computer, is used to execute the method provided in the first aspect.
[0016] In one possible design, the program in the fourth aspect may be stored in whole or in part on a storage medium packaged together with the processor, or may be stored in whole or in part on a memory not packaged together with the processor. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] Figure 1 A schematic diagram of the structure of an electronic device provided by an embodiment of the present application;
[0018] Figure 2 A flowchart of a page generation method provided by an embodiment of the present application;
[0019] Figure 3 A schematic diagram of dynamically loading UI components provided by an embodiment of the present application;
[0020] Figure 4 A schematic structural diagram of an electronic device provided in another embodiment of the present application. DETAILED DESCRIPTION
[0021] The terms used in the implementation section of this application are only used to explain the specific embodiments of this application and are not intended to limit this application.
[0022] For the loading of 3D engine resources, the existing related technologies provide two loading solutions for 3D engine resources. In one loading solution, no plug-in mode is provided, and 3D engine resources cannot be loaded on demand. Even a simple 3D scene needs to load the full amount of 3D engine resources, and the resource occupation is unreasonable; while the other loading solution does not provide a native 3D engine. If a third-party engine (for example: unity or Fliament) is loaded, it will occupy more read-only memory (ROM), which is more difficult to cut. In summary, the existing loading solutions for 3D engine resources have the problems that 3D deployment has high requirements for electronic equipment hardware and the loading speed of 3D engine resources is slow.
[0023] To sum up, in the existing related technologies, when loading UI components and 3D engine resources, all UI components and all 3D resources will be loaded in. At the same time, when rendering the page, all texture images will be loaded into the GPU memory, which will cause huge memory overhead and redundant display, and ultimately affect the performance of the application.
[0024] Based on the above problems, an embodiment of the present application provides a page generation method, which can progressively load 3D engine resources on demand based on the page to be displayed, reduce memory overhead during application runtime, and reduce application resource consumption, so that 3D applications can be deployed on different types of devices; in addition, an embodiment of the present application can also identify user interface (UI) components required for the page to be displayed, and load the components used by the page to be displayed into the memory on demand, thereby further reducing memory overhead during application runtime.
[0025] The page generation method provided in the embodiment of the present application can be applied to electronic devices, wherein the above-mentioned electronic devices can be smart phones, tablet computers, wearable devices, vehicle-mounted devices, augmented reality (AR) / virtual reality (VR) devices, laptop computers, ultra-mobile personal computers (UMPC), netbooks or personal digital assistants (PDA) and other devices; the embodiment of the present application does not impose any restrictions on the specific type of electronic devices.
[0026] For example, Figure 1 A schematic diagram of the structure of an electronic device provided by an embodiment of the present application is shown as follows: Figure 1As shown, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.
[0027] It is to be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or split some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.
[0028] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.
[0029] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.
[0030] The processor 110 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.
[0031] The electronic device 100 implements the display function through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.
[0032] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, a quantum dot light-emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.
[0033] For ease of understanding, the following embodiments of the present application will be described in detail with Figure 1 Taking the electronic device with the structure shown as an example, the page generation method provided in the embodiment of the present application is specifically described in combination with the accompanying drawings and application scenarios.
[0034] Figure 2 A flowchart of a page generation method provided by an embodiment of the present application, such as Figure 2 As shown, the above page generation method may include:
[0035] Step 201 , in response to a user operation on an application, the electronic device 100 parses a source file corresponding to a page to be displayed of the application, and obtains a list of UI components and a list of 3D engine resources that the page to be displayed depends on according to the source file.
[0036] Among them, the above-mentioned application can be an application that can provide 3D page display, such as: shopping application or decoration application, etc.; taking the above-mentioned application as a shopping application as an example, the user's operation on the application can be: the user clicks on the product link in the page displayed by the above-mentioned application. In response to the user's click operation, the electronic device 100 can display the product details page of the clicked product link, and the above-mentioned product details page can be a 3D page. In the 3D page, the details of the product are displayed in a 3D image, so that the user can view the details of the product more intuitively and clearly. That is to say, in this step, in response to the user's operation on the application, the electronic device 100 can know that the page to be displayed by the above-mentioned application is the product details page of the clicked product link, so the electronic device 100 can parse the source file corresponding to the above-mentioned page to be displayed, and obtain the information of using UI and 3D resource library in the above-mentioned source file.
[0037] In some examples, the electronic device 100 parses the source file corresponding to the page to be displayed of the above-mentioned application, and obtains the UI component list and 3D engine resource list on which the page to be displayed depends based on the above-mentioned source file. This can be: the electronic device 100 parses the source file corresponding to the page to be displayed of the above-mentioned application, obtains the information of the UI components and 3D resource library on which the page to be displayed depends from the above-mentioned source file, generates a UI component list file and a 3D engine resource list file based on the information of the UI components and 3D resource library on which the page to be displayed depends, and then obtains the UI component list and the 3D engine resource list on which the page to be displayed depends based on the above-mentioned UI component list file and the above-mentioned 3D engine resource list file.
[0038] In some examples, the electronic device 100 parses the source file corresponding to the page to be displayed by the above application, and obtains the information of the UI components and 3D resource library that the page to be displayed depends on from the above source file: the 3D package parsing module in the electronic device 100 parses the source file in the application project corresponding to the above application through the tool chain based on the application code written by the developer of the above application, and obtains the information of the UI and 3D resource library used in the above source file; wherein the above source file can be the SourceFile file in the ets file. When parsing the source file in the application project corresponding to the above application through the tool chain, the following code can be used to implement it:
[0039]
[0040]
[0041] After the 3D package parsing module in the electronic device 100 obtains the information of the UI and 3D resource library used in the above source file, the 3D package parsing module transmits the information of the UI and 3D resource library used in the above source file to the 3D front-end module in the electronic device 100. The 3D front-end module generates a UI component list file and a 3D engine resource list file according to the information of the UI and 3D resource library used in the above source file; then the 3D front-end module packages the UI component list file and the 3D engine resource list file to obtain the UI component list and the 3D engine resource list that the page to be displayed depends on.
[0042] In some examples, when packaging the UI component list file and the 3D engine resource list file, the 3D front-end module can package the above UI component list file and the 3D engine resource list file into the ets directory of the hap package, so as to realize the packaging of the UI component list file and the 3D engine resource list file that the page to be displayed depends on, avoid additional memory overhead, and realize memory optimization; wherein, the hap package is a module package generated by packaging code, resources, third-party libraries, and application configuration files, and the hap package is mainly divided into two types: entry and feature. The entry hap package is the main module of the application, as the entrance of the OpenHarmony application, it provides the basic functions of the application; the feature hap package is the dynamic feature module of the application, as an extension of the application capability, it can be selectively installed according to the needs of the user and the type of device. In an application, there must be one and only one entry type hap package for the same device type, and the entry type hap package can be installed and run independently; an application can include at least one feature type hap package, or it may not. Of course, this example takes the hap package and the OpenHarmony application as an example for illustration, but this embodiment is not limited to this, and the method provided in this embodiment can also be correspondingly applicable to applications in other operating systems.
[0043] Among them, the 3D front-end module generates the UI component list file and the 3D engine resource list file according to the information of the UI and 3D resource library used in the above source files, which can be implemented by the following code:
[0044] const componentContent:string=
[0045] Array.from(appComponentCollection).join(',');
[0046] writeFileSync(path.resolve(projectConfig.cachePath,
[0047] 'component_collection.txt'),componentContent);
[0048] An example of the 3D front-end module packaging the above UI component list file and 3D engine resource list file into the ets directory of the hap package can be shown as follows:
[0049]
[0050] Step 202: the electronic device 100 loads the UI components and 3D engine resources required for the page to be displayed according to the UI component list and 3D engine resource list that the page to be displayed depends on.
[0051] In some examples, the UI components and 3D engine resources can be compiled into independent dynamic libraries. When the system is running, the component on-demand loading module in the electronic device 100 can obtain the UI component list and 3D engine resource list that the page to be displayed depends on by reading the component_collection.txt file generated in step 202, and dynamically load the UI components and / or 3D engine resources required for the page to be displayed. If the UI components or 3D engine resources are independent plug-ins, the plug-in library can be dynamically loaded first, and then the UI components or 3D engine resources can be loaded.
[0052] See also Figure 3 When the system is running, the component on-demand loading module (Components Loader) in the electronic device 100 reads the component_collection.txt file and obtains the UI components that the page to be displayed depends on, which are the Row component and the Video component. Therefore, the component on-demand loading module loads the basic component Row from the basic component (Basic Components) library, and then dynamically loads the Video component. Figure 3 A schematic diagram of a dynamically loaded UI component provided for an embodiment of the present application. The Row component is a basic layout element, and its main function is to arrange its internal subcomponents or elements horizontally so that they are displayed in a row; the Video component is a UI component for displaying video content, and can implement the video playback function in an application or page. The Video component usually supports the playback of video files in multiple formats and has a series of control functions to provide a good user experience.
[0053] The process of dynamically loading UI components is described below. In some examples, the process of dynamically loading UI components may include:
[0054] Step a: Implement dynamic library loading of UI components based on requireInternal. The code to implement this step can be as follows:
[0055]
[0056] Step b, the interface parameter parsing of the UI component can be implemented through the native application program interface (NAPI) or non-NAPI, and finally transferred to the 3D engine interface. Among them, the interface parameters of the above UI component may include: setting background color, setting camera parameters and / or setting camera coordinates, etc. The code to implement this step can be as follows:
[0057]
[0058]
[0059] Step c: Compile the UI components and 3D engine independently. When implementing, you can provide a template to compile the UI components independently with SourceSet. The code to implement this step can be as follows:
[0060]
[0061] Step d: Load the compiled UI components on demand according to the UI component list generated by the toolchain and import them through the standard requireNapi method. The code to implement this step can be as follows:
[0062]
[0063] Step 203: the electronic device 100 uses the 3D engine resources to draw 3D UI components on the page to be displayed according to the UI components required by the page to be displayed.
[0064] In this embodiment, the above-mentioned 3D UI component can be a 3D UI component instance; in some examples, the electronic device 100 uses the above-mentioned 3D engine resources to draw the 3D UI component on the page to be displayed according to the UI component required by the above-mentioned page to be displayed: the 3D component creation module in the electronic device 100 parses the above-mentioned page to be displayed, obtains the events, properties and methods of the above-mentioned page, and then creates a 3D object corresponding to the above-mentioned page, and binds the events, properties and methods of the above-mentioned page to the above-mentioned 3D object; next, the above-mentioned 3D component creation module creates a 3D UI component instance in the above-mentioned 3D object according to the UI component required for the page to be displayed, calculates the position and size of the above-mentioned 3D UI component instance in the above-mentioned page, and then generates a drawing instruction according to the position and size of the above-mentioned 3D UI component instance in the above-mentioned page; finally, the 3D component creation module executes the above-mentioned drawing instruction to draw the above-mentioned 3D UI component instance in the above-mentioned page.
[0065] In some examples, after the component on-demand loading module in the electronic device 100 dynamically loads the UI components and 3D engine resources on demand, the 3D component creation module in the electronic device 100 parses the page to be displayed, obtains the events, properties and methods of the above page, and then creates a 3D object corresponding to the above page, and binds the events, properties and methods (including camera parameters, lighting, animation parameters and / or general properties, etc.) of the above page obtained by parsing to the above 3D object; the code to implement the above steps can be as follows:
[0066]
[0067] In this embodiment, the 3D component creation module may generate drawing instructions including drawText, drawImage and / or drawLine, etc. according to the position and size of the above-mentioned 3D UI component instance in the above-mentioned page. Then, the 3D component creation module may distribute the generated drawing instructions to the drawing instruction queue in the GPU thread, and the GPU thread executes the above-mentioned drawing instructions to draw the above-mentioned 3D UI component instance in the above-mentioned page.
[0068] In step 204 , the electronic device 100 rasterizes the drawn 3D UI component to obtain a texture image of the 3D UI component.
[0069] Rasterization is the process of converting geometric figures (such as points, lines, surfaces or three-dimensional models, etc.) into pixel representations (i.e., texture images) in computer graphics. It is a key process for converting complex 3D geometric data into two-dimensional pixel images on the display screen of the electronic device 100, and is an important step in the graphics rendering pipeline. The goal of rasterization is to determine the color and attributes of each pixel on the screen so that it can eventually be presented as a visible image. Rasterization may include the following steps:
[0070] Step 1, projection and viewport transformation: First, the geometric objects in the 3D scene are transformed into shapes in the two-dimensional view space through projection transformation (e.g., orthogonal projection or perspective projection). Then, the view space coordinates are mapped to the screen coordinate system (also called pixel coordinate system) through viewport transformation to determine the position and size of the graphics on the display screen of the electronic device 100.
[0071] Step 2, scan conversion: For each geometric object to be rasterized (e.g., a line or triangle), its boundary information in the screen coordinate system is converted into a set of pixel points covering its shape through a specific algorithm. The specific algorithm can be: using the Bresenham algorithm for lines; using the edge table method, scan line algorithm, or vertex cache method for triangles.
[0072] Step 3, pixel shading: For each generated pixel (or fragment), calculate the color, depth (for depth testing and depth buffer), texture coordinates (if there is a texture map) and / or transparency (Alpha value) of each pixel. This usually involves applying material properties, texture sampling, lighting model calculation, shadow processing and other steps. In modern graphics pipelines, pixel shading is usually performed in the fragment shader of the GPU.
[0073] Step 4, pixel processing: For each pixel after coloring, a series of tests and operations are performed to determine whether and how it will eventually be presented on the display screen of the electronic device 100. These tests and operations may generally include:
[0074] 1) Depth test: Compare the depth value of the pixel with the depth value of the corresponding pixel in the current depth buffer to decide whether to write the pixel (i.e. whether it is blocked by the front object).
[0075] 2) Stencil test: Based on the contents of the stencil buffer and the set test conditions, decide whether to allow the pixel to be written to the color buffer and depth buffer.
[0076] 3) Blending: If the pixel has transparent or semi-transparent properties (that is, the Alpha value is less than 1), it needs to be blended with the color of the same pixel already in the color buffer to generate the final pixel color.
[0077] 4) Dithering: When quantizing colors or reducing color depth, color errors are randomly distributed between adjacent pixels to improve visual effects and reduce color banding or mosaic phenomena.
[0078] 5) Pixel writing: For each valid pixel point determined by the above steps, its color and / or depth information is written into the corresponding frame buffer (including color buffer, depth buffer and / or template buffer, etc.).
[0079] In some examples, the rendering engine in the electronic device 100 generates textures of different resolutions according to the distance between the pixels at different positions of the 3D UI component instance and the camera in the 3D scene during the process of rasterizing the drawn 3D UI component. Specifically, the closer the distance between the pixels in the 3D UI component instance and the camera in the 3D scene is, the higher the resolution of the generated texture is, and the farther the distance between the pixels in the 3D UI component instance and the camera in the 3D scene is, the lower the resolution of the generated texture is, thereby reducing the memory occupied by the display texture image.
[0080] Step 205: the electronic device 100 displays the texture image.
[0081] In some examples, the electronic device 100 may display the texture image as follows: the electronic device 100 divides the texture image into a plurality of texture blocks according to a predetermined size, and displays the texture blocks within the field of view of the corresponding electronic device 100. In specific implementation, in the GPU memory, the electronic device 100 may divide the entire texture image into smaller texture blocks (e.g., 4×4 or 8×8, etc.), and then when displaying, the electronic device 100 displays the portion of the texture blocks within the field of view, thereby removing the texture redundancy sent for display to the greatest extent and saving more memory space.
[0082] Among them, the above-mentioned field of view (FOV) refers to the field of view that can be observed or captured by an optical system (such as a telescope, camera, microscope or human eye, etc.) under specific conditions. The field of view defines the maximum angle or widest spatial area of the scene that can be seen through the optical system at a given moment. The field of view is an important performance parameter that directly affects the amount of information and visual experience that the user can perceive when observing through an optical instrument. In this embodiment, the field of view of the electronic device 100 can be the field of view that can be captured by a 3D camera in the electronic device 100.
[0083] In addition, in some examples of this embodiment, in response to the user closing the above page, the electronic device 100 releases the loaded UI components and 3D engine resources, thereby avoiding redundant memory occupation.
[0084] It should be noted that, in this embodiment, if the user operates the 3D image in the currently displayed page, for example, moves or rotates the 3D image, then the electronic device 100 can re-execute steps 204 to 206 to display the page after the user operates the 3D image. During this process, the UI components and 3D engine resources that have been loaded on the page do not need to be reloaded.
[0085] In the above page generation method, in response to the user's operation on the application, the electronic device 100 parses the source file corresponding to the page to be displayed of the above application, obtains the UI component list and 3D engine resource list that the page to be displayed depends on according to the above source file, and then loads the UI components and 3D engine resources required for the page to be displayed according to the UI component list and 3D engine resource list that the page to be displayed depends on, and uses the above 3D engine resources to draw 3D UI components on the page to be displayed according to the UI components required by the page to be displayed. Finally, the electronic device 100 rasterizes the drawn 3D UI components, obtains the texture image of the above 3D UI components, and displays the above texture image, so that the electronic device 100 can load UI components and 3D engine resources on demand according to the page to be displayed, reduce the memory overhead when the application is running, and reduce the impact on the application performance, so that 3D applications can be deployed on different types of electronic devices.
[0086] It is to be understood that some or all of the steps or operations in the above embodiments are merely examples, and the present application embodiments may also perform other operations or variations of various operations. In addition, the various steps may be performed in different orders presented in the above embodiments, and it is possible that not all of the operations in the above embodiments need to be performed.
[0087] It is understandable that, in order to realize the above functions, the electronic device includes hardware and / or software modules corresponding to the execution of each function. In combination with the algorithm steps of each example described in the embodiments disclosed in this application, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in combination with the embodiments, but such implementation should not be considered to exceed the scope of this application.
[0088] This embodiment can divide the electronic device into functional modules according to the above method embodiment. For example, each functional module can be divided according to each function, or two or more functions can be integrated into one module. The above integrated module can be implemented in the form of hardware. It should be noted that the division of modules in this embodiment is schematic and is only a logical function division. There may be other division methods in actual implementation.
[0089] Figure 4 A schematic diagram of the structure of an electronic device provided in another embodiment of the present application, in which each functional module is divided according to each function, Figure 4 A possible schematic diagram of the composition of the electronic device 400 involved in the above embodiment is shown. Figure 4 As shown, the electronic device 400 may include: a receiving unit 401, a processing unit 402 and a sending unit 403;
[0090] The processing unit 402 may be used to support the electronic device 400 in executing steps 201 to 206, etc., and / or other processes of the technical solution described in the embodiments of the present application.
[0091] It should be noted that this application Figure 2 All relevant contents of each step involved in the illustrated method embodiment can be referred to the functional description of the corresponding functional module and will not be repeated here.
[0092] The electronic device 400 provided in this embodiment is used to execute the page generation method provided in the embodiment of the present application, and thus can achieve the same effect as the above method.
[0093] It should be understood that the electronic device 400 may correspond to Figure 1 The electronic device 100 shown in FIG. The functions of the receiving unit 401 and the sending unit 403 can be Figure 1 The processor 110, antenna 1 and mobile communication module 150 in the electronic device 100 shown in the figure, and / or, are implemented by the processor 110, antenna 2 and wireless communication module 160; the function of the processing unit 402 can be implemented by Figure 1 The processor 110 and the display screen 194 in the electronic device 100 are shown to be implemented.
[0094] In the case of adopting an integrated unit, the electronic device 400 may include a processing module, a storage module, and a communication module.
[0095] The processing module can be used to control and manage the actions of the electronic device 400, for example, it can be used to support the electronic device 400 to execute the steps performed by the above-mentioned receiving unit 401, processing unit 402 and sending unit 403. The storage module can be used to support the electronic device 400 to store program codes and data, etc. The communication module can be used to support the communication between the electronic device 400 and other devices.
[0096] Among them, the processing module can be a processor or a controller, which can implement or execute various exemplary logic boxes, modules and circuits described in conjunction with the disclosure of this application. The processor can also be a combination that implements computing functions, such as a combination of one or more microprocessors, a combination of digital signal processing (DSP) and a microprocessor, and so on. The storage module can be a memory. The communication module can specifically be a device that interacts with other electronic devices, such as a radio frequency circuit, a Bluetooth chip and / or a Wi-Fi chip.
[0097] In one embodiment, when the processing module is a processor and the storage module is a memory, the electronic device 400 involved in this embodiment can be a Figure 1 Device of the structure shown.
[0098] The present application also provides a computer-readable storage medium, in which a computer program is stored. When the computer-readable storage medium is run on a computer, the computer executes the present application. Figure 2-3 The method provided by the illustrated embodiment.
[0099] The present application also provides a computer program product, which includes a computer program, which, when executed on a computer, enables the computer to execute the present application. Figure 2-3 The method provided by the illustrated embodiment.
[0100] In the embodiments of the present application, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent the existence of A alone, the existence of A and B at the same time, and the existence of B alone. Among them, A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following" and similar expressions refer to any combination of these items, including any combination of single or plural items. For example, at least one of a, b and c can be represented by: a, b, c, a and b, a and c, b and c, or a and b and c, where a, b, c can be single or multiple.
[0101] Those of ordinary skill in the art will appreciate that the various units and algorithm steps described in the embodiments disclosed herein can be implemented in a combination of electronic hardware, computer software, and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.
[0102] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.
[0103] In several embodiments provided in the present application, any function can be stored in a computer-readable storage medium if it is implemented in the form of a software functional unit and sold or used as an independent product. Based on this understanding, the technical solution of the present application can be embodied in the form of a software product in essence or in other words, the part that contributes to the prior art or the part of the technical solution. The computer software product is stored in a storage medium, including several 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 application. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.
[0104] The above is only a specific implementation of the present application. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. The protection scope of the present application should be based on the protection scope of the claims.
Claims
1. A page generation method, characterized in that: include: In response to a user operation on an application, a source file corresponding to a page to be displayed of the application is parsed, and a user interface component list and a 3D engine resource list on which the page to be displayed depends are obtained according to the source file; Loading the user interface components and 3D engine resources required by the page to be displayed according to the user interface component list and 3D engine resource list that the page to be displayed depends on; Using the 3D engine resources, and according to the user interface components required by the page to be displayed, drawing a 3D user interface component on the page to be displayed; Rasterizing the drawn 3D user interface component to obtain a texture image of the 3D user interface component; The texture image is displayed.
2. The method according to claim 1, characterized in that The step of obtaining the user interface component list and the 3D engine resource list that the page to be displayed depends on according to the source file includes: Obtaining information of the user interface component and the 3D resource library on which the page to be displayed depends from the source file; Generate a user interface component list file and a 3D engine resource list file according to the information of the user interface component and the 3D resource library on which the page to be displayed depends; According to the user interface component list file and the 3D engine resource list file, the user interface component list and the 3D engine resource list on which the page to be displayed depends are obtained.
3. The method according to claim 1, characterized in that: Drawing a 3D user interface component on the page to be displayed according to the user interface component required by the page to be displayed includes: Parsing the page to be displayed, and obtaining events, properties and methods of the page; Creating a 3D object corresponding to the page, and binding the events, properties and methods of the page to the 3D object; Creating a 3D user interface component in the 3D object according to the user interface component required by the page to be displayed, and calculating the position and size of the 3D user interface component in the page; Generate a drawing instruction according to the position and size of the 3D user interface component in the page; The drawing instruction is executed to draw the 3D user interface component.
4. The method according to claim 1, characterized in that: The step of rasterizing the drawn 3D user interface component to obtain a texture image of the 3D user interface component includes: In the process of rasterizing the drawn 3D user interface component, textures with different resolutions are generated according to the distances between the pixels at different positions of the 3D user interface component and the camera in the 3D scene.
5. The method according to claim 4, characterized in that The closer the pixel points in the 3D user interface component are to the camera in the 3D scene, the higher the resolution of the generated texture; the farther the pixel points in the 3D user interface component are from the camera in the 3D scene, the lower the resolution of the generated texture.
6. The method according to claim 1, characterized in that The displaying of the texture picture comprises: The texture image is divided into a plurality of texture blocks according to a predetermined size, and the texture blocks are displayed within the field of view of the corresponding electronic device.
7. The method according to any one of claims 1 to 6, characterized in that: Also includes: In response to the user closing the page, the loaded user interface components and 3D engine resources are released.
8. An electronic device, characterized in that: include: one or more processors; Memory; Multiple applications; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and the one or more computer programs include instructions, which, when executed by the electronic device, enable the electronic device to perform the method as described in any one of claims 1-7.
9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which, when executed on a computer, enables the computer to execute the method according to any one of claims 1 to 7.