Page display method and device, equipment and storage medium

Abstract

Embodiments of the invention disclose a page display method, apparatus and device, and a storage medium, and related embodiments can be applied to various scenes such as cloud technology and smart traffic, and are used for improving a page display effect. The method comprises the following steps: when a switching instruction of a model animation is received, obtaining a model identifier carried by the switching instruction, and taking the model identifier as a current layer attribute value of a scene camera; when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, rendering the model animation to obtain a first model animation, and displaying the first model animation in a first display area of the page; pre-loading animation resources of a next model animation of the first model animation, and pre-rendering the next model animation based on the animation resources to obtain a second model animation; and when a switching instruction of the next model animation is received, switching the first model animation in the first display area of the page to the second model animation for display.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of data processing technology, and in particular to a page display method, device, equipment and storage medium. Background Art

[0002] With the rapid development of Internet technology, the speed of information dissemination is also getting faster and faster. Merchants can promote their products on the Internet in various ways. Among them, banner ads have been favored by many merchants for their unique advantages. Banner ads, also known as flag ads, are the earliest form of online advertising and are currently the most common form. They are rectangular billboards across web pages. When users click on these banners, they can usually link to the advertiser's web page. At the same time, people's requirements for them are getting higher and higher. Banner ads should not only spread information, but also have a sense of design to attract more clickers, thereby enriching the display effect of the page.

[0003] Currently, the market usually uses multiple dynamic banner ads for carousel to better display content and enrich the display effect of the page. However, the carousel of multiple dynamic banner ads requires creating a canvas for each dynamic banner ad to draw the banner element, and then controlling the carousel of the banner elements through the Cascading Style Sheet (CSS). Since creating a canvas to draw a banner element requires a lot of resource overhead, the carousel of multiple dynamic banner ads requires creating multiple canvases, resulting in increased resource overhead, which can easily cause the page of the carousel of multiple dynamic banner ads to freeze or even crash. Summary of the invention

[0004] The embodiments of the present application provide a page display method, apparatus, device and storage medium, which are used to include the model animation in the rendering process for rendering only when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and the animation models corresponding to different layer attribute values ​​do not need to be included in the rendering process for rendering. It is not necessary to render all model animations every time the page is refreshed, and it is not necessary to set the transparency of the model animation to zero to control the model animation from being displayed on the page. The cost of rendering resources and invalid overhead can be reduced. At the same time, after the current animation model is rendered, the next model animation can be pre-loaded with resources and pre-rendered with models. When switching to the next model animation, the switching model animation will no longer cause serious frame drops and freezes, so that the switching of the entire model animation is smooth and silky, thereby improving the display effect of the page.

[0005] On the one hand, an embodiment of the present application provides a page display method, including:

[0006] The model identifier of each model animation is used as the model layer attribute value of each model animation;

[0007] When a switching instruction of a model animation is received, the model identifier carried in the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera;

[0008] When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page;

[0009] Preloading animation resources of a next model animation of the first model animation, and pre-rendering the next model animation based on the animation resources to obtain a second model animation;

[0010] When a switching instruction for the next model animation is received, the first model animation in the first display area of ​​the page is switched to the second model animation for display.

[0011] On the other hand, the present application provides a page display method device, including:

[0012] A processing unit, used for using the model identifier of each model animation as a model layer attribute value of each model animation;

[0013] An acquisition unit, configured to acquire a model identifier carried in the switching instruction when receiving a switching instruction of the model animation, and use the model identifier as a current layer attribute value of the scene camera;

[0014] A display unit, configured to render the model animation to obtain a first model animation when a model layer attribute value of the model animation is the same as a current layer attribute value of the scene camera, and display the first model animation in a first display area of ​​the page;

[0015] The processing unit is further used to preload the animation resources of the next model animation of the first model animation, and pre-render the next model animation based on the animation resources to obtain the second model animation;

[0016] The display unit is further configured to switch the first model animation in the first display area of ​​the page to the second model animation for display when receiving a switching instruction for the next model animation.

[0017] In a possible design, in an implementation of another aspect of the embodiment of the present application,

[0018] The processing unit is further configured to pause the first model animation and record the paused animation state of the first model animation when detecting that the display area on the page is converted from the first display area to the second display area.

[0019] In a possible design, in an implementation of another aspect of the embodiment of the present application,

[0020] The processing unit is further configured to restore the recorded paused animation state of the first model animation to continue when detecting that the display area on the page is switched from the second display area to the first display area.

[0021] In a possible design, in an implementation of another aspect of the embodiment of the present application,

[0022] The processing unit is further used for not rendering the model animation when the model layer attribute value of the model animation is different from the current layer attribute value of the scene camera.

[0023] In a possible design, in an implementation of another aspect of the embodiment of the present application, the display unit may be specifically used for:

[0024] Loading the animation resources of the first model animation to obtain first animation element resources and animation cache resources, wherein the first animation element resources include a first animation background, a first animation text, animation rendering canvas data, and a first animation model, and the animation cache resources include a depth cache, a color cache, and a template cache;

[0025] Based on the first animation element resource and the first animation cache resource, the model animation is rendered to obtain the first model animation, and the first model animation is displayed in the first display area of ​​the page.

[0026] In a possible design, in an implementation of another aspect of the embodiment of the present application, the processing unit may be specifically used for:

[0027] Preloading the animation resources of the next model animation of the first model animation to obtain second animation element resources and animation cache resources, wherein the second animation element resources include a second animation background, a second animation text, animation rendering canvas data and a second animation model;

[0028] Based on the second animation element resource and the animation cache resource, the model animation is pre-rendered to obtain the second model animation.

[0029] In a possible design, in an implementation of another aspect of the embodiment of the present application, the processing unit may be specifically used for:

[0030] Pre-rendering the initial frame of the model animation based on the second animation element resource and the animation cache resource to obtain an initial frame image of the second model animation;

[0031] The display unit can be used for:

[0032] When receiving a switching instruction for the next model animation, switching the first model animation in the first display area of ​​the page to the initial frame image;

[0033] Based on the second animation element resource and the animation cache resource, the next frame of the initial frame of the model animation is rendered frame by frame, and the rendered image is displayed frame by frame to display the second model animation.

[0034] In a possible design, in an implementation of another aspect of the embodiment of the present application,

[0035] The acquisition unit is further used to acquire the rendering acceleration rate supported by the page, and compare the rendering acceleration rate with the rate threshold to obtain a comparison result;

[0036] The processing unit is further configured to create a corresponding rendering scene for each display area of ​​the page if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold.

[0037] In a possible design, in an implementation of another aspect of the embodiment of the present application, the processing unit may be specifically used for:

[0038] If the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, then the animation rendering canvas data corresponding to each display area is obtained, wherein the animation rendering canvas data at least includes scene camera, scene environment information, scene lighting information and scene drawing information;

[0039] The animation model corresponding to each model animation in each display area is obtained, and the animation rendering canvas data and the animation model are encapsulated into a rendering scene corresponding to each display area.

[0040] In a possible design, in an implementation of another aspect of the embodiment of the present application, the display unit may be specifically used for:

[0041] When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, based on the rendering scene corresponding to the first display area, obtaining animation rendering canvas data and a first animation model corresponding to the first model animation;

[0042] Obtain a first animation background, a first animation text, and an animation cache resource corresponding to the first model animation;

[0043] The model animation is rendered based on the animation cache resources, and the animation rendering canvas data and the first animation model corresponding to the first model animation are overlaid on the first animation background and above the first animation text to render the first model animation, and the first model animation is displayed in the first display area of ​​the page.

[0044] In a possible design, in an implementation of another aspect of the embodiment of the present application, the processing unit may be specifically used for:

[0045] Preloading animation rendering canvas data and a second animation model corresponding to a next model animation of the first model animation based on a rendering scene corresponding to the first display area;

[0046] Obtain the second animation background, second animation text, and animation cache resources corresponding to the second model animation;

[0047] The next model animation is pre-rendered based on the animation cache resource, and the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation are covered on the second animation background and the second animation text to obtain the second model animation.

[0048] In a possible design, in an implementation of another aspect of the embodiment of the present application, the display unit may be specifically used for:

[0049] Rendering the model animation based on the first animation element resource and the first animation cache resource to obtain a first model animation;

[0050] Obtaining a page refresh rate of the page, and comparing the page refresh rate with a refresh rate threshold to obtain a comparison result;

[0051] If the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, a first model animation is displayed in a first display area of ​​the page based on the page refresh rate.

[0052] In a possible design, in an implementation of another aspect of the embodiment of the present application, the processing unit may be specifically used for:

[0053] When the next model animation switching instruction is received as a click switching instruction or an automatic carousel switching instruction, when the model animation switching instruction is received, the model identifier carried by the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera.

[0054] On the other hand, the present application provides a computer device, including: a memory, a processor, and a bus system;

[0055] Wherein, the memory is used to store programs;

[0056] The processor is used to implement the above-mentioned methods when executing the program in the memory;

[0057] The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.

[0058] Another aspect of the present application provides a computer-readable storage medium, in which instructions are stored. When the computer-readable storage medium is run on a computer, the computer is enabled to execute the above-mentioned methods.

[0059] It can be seen from the above technical solutions that the embodiments of the present application have the following beneficial effects:

[0060] By using the model identifier of each model animation as the model layer attribute value of each model animation, when a switching instruction of the model animation is received, the model identifier carried by the switching instruction can be obtained, and the model identifier is used as the current layer attribute value of the scene camera. Furthermore, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain the first model animation, and the first model animation is displayed in the first display area of ​​the page. Then, the animation resources of the next model animation of the first model animation are preloaded, and based on the animation resources, the next model animation is pre-rendered to obtain the second model animation, so that when the switching instruction of the next model animation is received, the first model animation in the first display area of ​​the page is switched to the second model animation for display. Through the above method, by setting the model layer attribute value for the model animation and setting the layer attribute value for the scene camera, the model animation is included in the rendering process for rendering only when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and the animation models corresponding to different layer attribute values ​​do not need to be included in the rendering process for rendering. It is not necessary to render all model animations every time the page is refreshed, and it is not necessary to set the transparency of the model animation to zero to control the model animation from being displayed on the page. The cost of rendering resources and invalid overhead can be reduced. At the same time, after the current animation model is rendered, the next model animation can be preloaded with resources and pre-rendered with the model. When switching to the next model animation, the switching model animation will no longer cause serious frame drops and freezes, so that the switching of the entire model animation is smooth and silky, thereby improving the display effect of the page. BRIEF DESCRIPTION OF THE DRAWINGS

[0061] Figure 1 This is a schematic diagram of the architecture of a data object control system in an embodiment of the present application;

[0062] Figure 2 This is a flow chart of an embodiment of the page display method in the embodiment of the present application;

[0063] Figure 3 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0064] Figure 4 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0065] Figure 5 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0066] Figure 6 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0067] Figure 7 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0068] Figure 8 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0069] Fig. 9 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0070] Fig.10 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0071] Fig.11 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0072] Fig.12 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0073] Fig.13 is another embodiment flow chart of the page display method in the embodiment of the present application;

[0074] Fig.14 It is a schematic diagram of a display page of a model of the page display method in an embodiment of the present application;

[0075] Fig.15 It is a schematic diagram of a principle flow of a page display method in an embodiment of the present application;

[0076] Fig.16 It is a schematic diagram of another principle process of the page display method in the embodiment of the present application;

[0077] Fig.17 It is a schematic diagram of the principle flow of a canvas body of the page display method in the embodiment of the present application;

[0078] Fig.18 This is a schematic diagram of an embodiment of a page display device in an embodiment of the present application;

[0079] Fig.19 It is a schematic diagram of an embodiment of a computer device in an embodiment of the present application. DETAILED DESCRIPTION

[0080] The embodiments of the present application provide a page display method, apparatus, and device storage medium, which are used to include the model animation in the rendering process for rendering only when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and the animation models corresponding to different layer attribute values ​​do not need to be included in the rendering process for rendering. It is not necessary to render all model animations every time the page is refreshed, and it is not necessary to set the transparency of the model animation to zero to control the model animation from being displayed on the page. The cost of rendering resources and invalid overhead can be reduced. At the same time, after the current animation model is rendered, the next model animation can be pre-loaded with resources and pre-rendered with models. When switching to the next model animation, the switching model animation will no longer cause serious frame drops and freezes, so that the switching of the entire model animation is smooth and silky, thereby improving the display effect of the page.

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

[0082] To facilitate understanding, some terms or concepts involved in the embodiments of the present application are first explained.

[0083] 1. 3D model: refers to a model with three-dimensional data constructed through a virtual three-dimensional space using three-dimensional production software.

[0084] 2. Dynamic banner texture element mesh: refers to the elements that make up the 3D model, usually composed of materials and geometry.

[0085] 3. Map: refers to the component of the material, also known as "texture".

[0086] 4. Dynamic textures: Textures generated by code that change in real time over time;

[0087] 5. HyperText Markup Language (HTML): It is a standard markup language used to create web pages. You can use HTML to build web sites. HTML can run on a browser and be parsed by the browser.

[0088] 6. Cascading Style Sheet (CSS): It is a standard style sheet language used to describe the presentation of a web page (for example, the position, size, and color of web page elements). The main function of CSS is to define the style of a web page (i.e., beautify the web page) and to precisely control the position, font, color, background, and other attributes of elements in the web page.

[0089] 7. Central Processing Unit (CPU): The central processing unit is one of the main devices of a computer. Its main function is to interpret computer instructions and process data in computer software.

[0090] 8. Graphics processing unit (GPU): Graphics processor, also known as display core, visual processor, display chip, is a microprocessor used to perform image and graphics related calculations on personal computers, workstations, game consoles and some mobile devices (such as tablets, smart phones and other devices).

[0091] 9. Shader: In the field of computer graphics, a shader is a computer program that was originally used to perform image shading processing (for example, calculating the lighting, brightness, color and other information in the image). It is also used to complete tasks in many different fields, such as processing CG special effects, performing film post-processing that is not related to shading processing, and even used in some other fields that are not related to computer graphics.

[0092] 10. Canvas: <canvas>An HTML element that can use scripts (usually JavaScript, for example) to draw graphics.

[0093] 11. Index: A separate, physical storage structure that sorts the values ​​of one or more columns in a database table. The function of an index is equivalent to the catalog of a book, and you can quickly find the required content based on the page numbers in the catalog.

[0094] 12. Scene: refers to the 3D model scene, which is used to store all objects in the 3D model in the scene.

[0095] 13. Web Graphics Library Context (WebGL Context): used to interact with the drawing buffer of the Web Graphics Library WebGL program and can be used to call methods in the Web Graphics Library WebGL program.

[0096] 14. Layer: refers to the layer in three.js (a third-party WebGL library written in JavaScript), which can be used to control the layer of the dynamic banner element mesh and the camera camera to achieve whether the mesh is visible.

[0097] 15. Environment: refers to the environment in the 3D scene, that is, the objects in the 3D scene are rendered based on the environment. It can be understood that different environments will have different rendering effects.

[0098] 16. Light: refers to the light in the 3D scene, which is the same lighting effect as the light in the real world and is used to illuminate the entire 3D scene.

[0099] It is understandable that in the specific implementation of this application, related data such as model layer attribute values ​​are involved. When the above embodiments of this application are applied to specific products or technologies, user permission or consent is required, and the collection, use and processing of relevant data need to comply with relevant laws, regulations and standards of relevant countries and regions.

[0100] It can be understood that the page display method disclosed in the present application specifically involves an Intelligent Vehicle Infrastructure Cooperative System (IVICS), and the Intelligent Vehicle Infrastructure Cooperative System is further introduced below. The Intelligent Vehicle Infrastructure Cooperative System is referred to as the Vehicle Infrastructure Cooperative System, which is a development direction of the Intelligent Transportation System (ITS). The vehicle-road cooperative system adopts advanced wireless communications and new generation Internet technologies to implement dynamic real-time information interaction between vehicles and roads in all directions, and carries out active vehicle safety control and road cooperative management based on the collection and integration of dynamic traffic information in all time and space, fully realizing the effective coordination of people, vehicles and roads, ensuring traffic safety, and improving traffic efficiency, thereby forming a safe, efficient and environmentally friendly road traffic system.

[0101] It is understandable that the page display method disclosed in the present application also involves cloud technology. The following further introduces cloud technology. Cloud technology refers to a hosting technology that unifies a series of resources such as hardware, software, and network in a wide area network or a local area network to realize the calculation, storage, processing, and sharing of data. Cloud technology is a general term for network technology, information technology, integration technology, management platform technology, application technology, etc. based on the cloud computing business model application. It can form a resource pool, which is used on demand and is flexible and convenient. Cloud computing technology will become an important support. The background services of the technical network system require a large amount of computing and storage resources, such as video websites, picture websites, and more portal websites. With the high development and application of the Internet industry, each item may have its own identification mark in the future, and all need to be transmitted to the background system for logical processing. Data of different levels will be processed separately, and all kinds of industry data require strong system backing support, which can only be achieved through cloud computing.

[0102] Cloud computing is a computing model that distributes computing tasks across a resource pool consisting of a large number of computers, enabling various application systems to obtain computing power, storage space and information services as needed. The network that provides resources is called a "cloud". From the user's perspective, the resources in the "cloud" are infinitely scalable and can be obtained at any time, used on demand, expanded at any time, and paid for by use.

[0103] As a provider of basic cloud computing capabilities, a cloud computing resource pool (referred to as a cloud platform, generally referred to as an IaaS (Infrastructure as a Service) platform) will be established, and various types of virtual resources will be deployed in the resource pool for external customers to choose to use. The cloud computing resource pool mainly includes: computing devices (virtualized machines, including operating systems), storage devices, and network devices.

[0104] According to the logical function division, the PaaS (Platform as a Service) layer can be deployed on the IaaS (Infrastructure as a Service) layer, and the SaaS (Software as a Service) layer can be deployed on the PaaS layer. SaaS can also be deployed directly on IaaS. PaaS is a platform for software operation, such as databases, web containers, etc. SaaS is a variety of transaction software, such as web portals, SMS mass senders, etc. Generally speaking, SaaS and PaaS are upper layers relative to IaaS.

[0105] Secondly, cloud security refers to the general term for security software, hardware, users, organizations, and security cloud platforms based on cloud computing business model applications. Cloud security integrates emerging technologies and concepts such as parallel processing, grid computing, and unknown virus behavior judgment. Through a large number of networked clients, it monitors abnormal software behavior in the network, obtains the latest information on Trojans and malicious programs on the Internet, and sends it to the server for automatic analysis and processing, and then distributes virus and Trojan solutions to each client.

[0106] Secondly, cloud storage is a new concept extended and developed from the concept of cloud computing. A distributed cloud storage system (hereinafter referred to as storage system) refers to a storage system that uses cluster applications, grid technology, and distributed storage file systems to bring together a large number of different types of storage devices (storage devices are also called storage nodes) in the network through application software or application interfaces to work together and provide external data storage and transaction access functions.

[0107] At present, the storage method of the storage system is: create a logical volume, and when creating a logical volume, allocate physical storage space for each logical volume. The physical storage space may be composed of disks of a storage device or several storage devices. The client stores data on a logical volume, that is, stores the data on the file system. The file system divides the data into many parts, each of which is an object. The object contains not only data but also additional information such as data identification (ID, ID entity). The file system writes each object into the physical storage space of the logical volume, and the file system records the storage location information of each object, so that when the client requests to access the data, the file system can allow the client to access the data according to the storage location information of each object.

[0108] The process of the storage system allocating physical storage space to a logical volume is as follows: based on the estimated capacity of the objects stored in the logical volume (this estimate often has a large margin relative to the actual capacity of the objects to be stored) and the grouping of independent redundant disk arrays (RAID, Redundant Array of Independent Disks), the physical storage space is pre-divided into stripes. A logical volume can be understood as a stripe, thereby allocating physical storage space to the logical volume.

[0109] It should be understood that the page display method provided in the present application can be applied to various scenarios, including but not limited to cloud technology, artificial intelligence, maps, smart transportation, etc., and is used to set model layer attribute values ​​for model animation and set layer attribute values ​​for scene cameras, so that when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is included in the rendering process for rendering and displayed on the page, so as to be applied to scenarios such as application advertising push scenarios, web page advertising or information push scenarios, game advertising recommendation scenarios, map recommendation scenarios, and the like.

[0110] In order to solve the above problems, this application proposes a page display method, which is applied to Figure 1 The data object control system shown is shown in Figure 1 , Figure 1 FIG. 1 is a schematic diagram of an architecture of a data object control system in an embodiment of the present application. Figure 1 As shown, the server uses the model identifier of each model animation as the model layer attribute value of each model animation, so that when a switching instruction of the model animation is received, the model identifier carried by the switching instruction can be obtained, and the model identifier is used as the current layer attribute value of the scene camera. Furthermore, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain the first model animation, and the first model animation is displayed in the first display area of ​​the page. Then, the animation resources of the next model animation of the first model animation are preloaded, and based on the animation resources, the next model animation is pre-rendered to obtain the second model animation, so that when the switching instruction of the next model animation is received, the first model animation in the first display area of ​​the page is switched to the second model animation for display. Through the above method, by setting the model layer attribute value for the model animation and setting the layer attribute value for the scene camera, the model animation is included in the rendering process for rendering only when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and the animation models corresponding to different layer attribute values ​​do not need to be included in the rendering process for rendering. It is not necessary to render all model animations every time the page is refreshed, and it is not necessary to set the transparency of the model animation to zero to control the model animation from being displayed on the page. The cost of rendering resources and invalid overhead can be reduced. At the same time, after the current animation model is rendered, the next model animation can be preloaded with resources and pre-rendered with the model. When switching to the next model animation, the switching model animation will no longer cause serious frame drops and freezes, so that the switching of the entire model animation is smooth and silky, thereby improving the display effect of the page.

[0111] Understandably, Figure 1 Only one type of terminal device is shown in the figure. In actual scenarios, more types of terminal devices may participate in the data processing process. Terminal devices include but are not limited to mobile phones, computers, intelligent voice interaction devices, smart home appliances, car terminals, etc. The specific number and type depend on the actual scenario and are not limited here. Figure 1 One server is shown in the figure, but in actual scenarios, multiple servers may also be involved, especially in the scenario of multi-model training interaction. The number of servers depends on the actual scenario and is not limited here.

[0112] It should be noted that in this embodiment, the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms. The terminal device and the server can be directly or indirectly connected through wired or wireless communication, and the terminal device and the server can be connected to form a blockchain network, which is not limited in this application.

[0113] Combined with the above introduction, the following will introduce the page display method in this application, please refer to Figure 2 In the embodiment of the present application, one embodiment of the page display method includes:

[0114] In step S101, the model identifier of each model animation is used as the model layer attribute value of each model animation;

[0115] It is understandable that in the switching display scenario of multiple model animations, since the page usually only displays one model animation at a time when displaying the model animation in the corresponding display area, other model animations are not displayed, that is, other model animations need to be hidden.

[0116] Among them, unlike the conventional scenario where each model animation needs to be rendered, the transparency of the material of the rendered model animation is controlled. For example, the transparency of the material of the model animation is set to 0 to hide the model animation that does not need to be displayed, and the transparency of the material of the model animation is set to non-0 to display the model animation. Therefore, this embodiment uses the model identifier of each model animation as the model layer attribute value of each model animation, so that the model animation that needs to be displayed for rendering and the model animation that does not need to be displayed can be judged or screened out by controlling the model layer attribute value. Not only can the rendering cost be saved, but the transparency of the material of the model animation can also be set to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0117] The model layer attribute value of the model animation refers to the model layer value in three.js, which can be used to represent the layer position of each model animation in the scene.

[0118] Specifically, Fig.14 For example, when the model animations corresponding to A1 to A3 are switched or automatically rotated, only one model animation is displayed at a time, such as Fig.14 A model animation in a display area S2 shown, such as displaying an A1 model animation (for example, a banner advertisement, or a news information, etc., which is not specifically limited here), includes the model animation title on the left side of the display area S2 and the text content and three-dimensional animation model of the model animation on the right side of the display area S2.

[0119] Furthermore, in order to subsequently determine or filter out the model animations that need to be displayed for rendering by controlling the model layer attribute values, the model identifier of each model animation can be used as the model layer attribute value of each model animation. For example, 1 in the model identifier A1 is set as the model layer attribute value of the model animation A1, that is, model layer = 1.

[0120] In step S102, when a switching instruction of a model animation is received, a model identifier carried in the switching instruction is obtained, and the model identifier is used as a current layer attribute value of the scene camera;

[0121] It can be understood that when a switching instruction for a model animation is received, the model identifier carried by the switching instruction can be obtained, and the model identifier can be used as the current layer attribute value of the scene camera, so that the model layer attribute value and the current layer attribute value of the scene camera can be used to judge or filter out the model animation that needs to be displayed for rendering, and the model animation that does not need to be displayed can be not rendered. This can not only save rendering costs, but also set the transparency of the material of the model animation to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0122] Among them, the scene camera refers to the shooting camera in three.js (a third-party WebGL library written in JavaScript). The role of the scene camera is to face the scene (that is, the scene in three.js is a container of objects. Developers can put the required characters into the scene, such as environment, lighting, and camera, etc. At the same time, these characters themselves also manage their positions in the scene). The scene camera can take a suitable scene in the scene and take a picture of it, so that the pictures taken by the camera can be rendered by the renderer later and displayed in the browser.

[0123] Among them, the current layer attribute value of the scene camera refers to the camera layer value in three.js, which can be used to represent a suitable scene that the current scene camera can obtain in the scene, that is, the layer position of the model animation that can be captured.

[0124] Specifically, Fig.14 For example, when the model animations corresponding to A1 to A3 are switched or automatically rotated, only one model animation is displayed at a time, such as Fig.14 A model animation in a display area S2 shown, such as displaying an A1 model animation (for example, a banner advertisement, or a news information, etc., which is not specifically limited here), includes the model animation title on the left side of the display area S2 and the text content and three-dimensional animation model of the model animation on the right side of the display area S2.

[0125] Furthermore, the model identifier of each model animation is used as the model layer attribute value of each model animation. For example, 2 in the model identifier A2 is set as the model layer attribute value of the model animation A2, that is, model layer=2. Then, when a switching instruction of the model animation is received, for example, switching the model animation A1 to the model animation A2, the model identifier carried by the switching instruction such as 2 in A2 can be obtained, and the current layer attribute value of the scene camera can be set to 2, that is, camera layer=2.

[0126] In step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page;

[0127] In an embodiment of the present application, when it is detected that the model vehicle layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation can be rendered to obtain a first model animation, and then the first model animation can be displayed in the first display area of ​​the page. The model animation that does not need to be displayed can be not rendered, which not only saves rendering costs, but also can set the transparency of the material of the model animation to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0128] It is understandable that when a developer or user wants to render or display a page (for example, an advertising page, news or e-commerce multimedia information page) of a target product (such as a game, music album or clothing, etc.) on a web page, browser or application, then the page can be displayed in the form of a banner advertisement banner (for example, a web page banner banner, e-commerce banner, etc.), or dynamic icon information, or local dynamic combined with local static information, etc. The page can also be displayed in other forms, which are not specifically limited here.

[0129] Therefore, when performing a carousel display of multiple model animations (such as banner ads of multiple advertising products), developers or users can first obtain the model information of the 3D model to be rendered corresponding to the target scene or target product pre-designed by the designer, and then parse the model information of the 3D model to be rendered to obtain the dynamic map elements corresponding to the 3D model to be rendered.

[0130] Among them, banner refers to web banners, banner ads, etc., which can be simply described as pictures showing the content of the merchant's advertisement, or as a simple horizontal poster. Dynamic banners can refer to banners that change in real time, not static images, or to the fact that the texture of some dynamic texture elements mesh is real-time flowing, or to the fact that the entire banner is interactive, and there is no specific restriction here.

[0131] The 3D model to be rendered refers to the model with 3D data (for example, the 3D white model of the representative character of Game A, or the 3D white model of the icon of Album B or the singer, etc.) that the designer pre-builds using 3D production software through virtual 3D space for the corresponding target scene (for example, the promotional advertising scene of Game A, or the recommendation scene of Album B on the music playback platform, etc.) or the target product. The dynamic map element mesh refers to the elements that make up the 3D model, which is usually composed of materials and geometric bodies.

[0132] Specifically, after determining the current layer attribute value of the scene camera, the current layer attribute value of the scene camera can be compared with the model layer attribute value of each model animation respectively. When the model layer attribute value of a model animation is the same as the current layer attribute value of the scene camera, it can be understood that the layer position of the model animation is the layer position of the model animation that can be captured by the scene camera in the scene, so the model animation can be included in the rendering process.

[0133] For example, assuming that the current layer attribute value of the scene camera is 2, which is the same as the model layer attribute value of model animation A2, the animation resources required by model animation A2 can be loaded to obtain animation element resources and animation cache resources. For example, Fig.16 As shown, the animation element resources required by the model animation A2 (such as banner2) include the animation background (such as Fig.16 The background corresponding to banner2), animated text (such as Fig.16 The text corresponding to banner2 as shown), animation rendering canvas data (such as Fig.16 The canvas body corresponding to banner2 as shown in the figure) and the animation model (such as the 3D animation model corresponding to banner2), wherein the animation cache resources include a depth buffer (depthBuffer), a color buffer (colorBuffer) and a stencil buffer (stencil buffer), etc. Then, based on the obtained animation element resources and animation cache resources, the model animation can be rendered to obtain a first model animation (for example, model animation banner2), and displayed in the first display area of ​​the page (such as Fig.14 The first model animation is displayed in the illustrated area S2).

[0134] On the contrary, when the model layer attribute value of a model animation is different from the current layer attribute value of the scene camera, it can be understood that the layer position of the model animation is the layer position of the model animation that cannot be captured by the scene camera in the scene. Therefore, these model animations do not need to be included in the rendering process for rendering, thereby reducing resource consumption.

[0135] In step S104, the animation resources of the next model animation of the first model animation are preloaded, and based on the animation resources, the next model animation is pre-rendered to obtain a second model animation;

[0136] It is understandable that each time a model animation's initial frame is rendered, it is necessary to apply to the server for a series of important resource overheads such as the animation resources required for rendering, which is greater than the rendering overhead of subsequent frames. Therefore, if the next model animation is rendered only when the model animation in the browser page switches, then in a three-dimensional scene with multiple model animations in a carousel, the initial rendering of the initial frame of each model animation is very expensive, and the resource consumption accounts for a large proportion, which makes it easy for resource squeezes to occur on low-configuration terminal devices, resulting in serious frame drops in some animations, thereby affecting the page display effect and user experience.

[0137] Therefore, after rendering the first model animation and displaying it in the first display area, this embodiment can preload the animation resources of the next model animation of the first model animation to obtain the animation element resources and the animation cache resources, for example, Fig.16 As shown, the animation element resources required by the model animation A3 (such as banner3) include the animation background (such as Fig.16 The background corresponding to banner3), animated text (such as Fig.16 The text corresponding to banner3 shown in the figure), animation rendering canvas data (such as Fig.16 The canvas body corresponding to banner3 as shown) and the animation model (such as the 3D animation model corresponding to banner3), wherein the animation cache resources include depth buffer, color buffer and stencil buffer, etc. Then, based on the obtained animation element resources and animation cache resources, the model animation can be pre-rendered (such as only rendering the initial frame of the second model animation separately) to obtain the initial animation frame of the second model animation (for example, model animation banner3), wherein the pre-rendering is not a frame-by-frame rendering of the second model animation and does not need to be displayed in the first display area.

[0138] In step S105, when a switching instruction for the next model animation is received, the first model animation in the first display area of ​​the page is switched to the second model animation for display.

[0139] Specifically, when a switching instruction for the next model animation is received, the initial animation frame of the pre-rendered second model animation (for example, model animation banner 3) can be displayed in the first display area. At the same time, based on the pre-loaded animation element resources and animation cache resources, the model animation continues to be rendered frame by frame, and the rendered model animation is displayed in the first display area, thereby realizing a quick switch from the current model animation to the next model animation. When there is no need to switch the model animation, resources are loaded and the model is rendered for the next model animation (i.e., the second model animation), which can stagger resource consumption and avoid resource squeeze and severe animation frame drops when the model animation switches.

[0140] In an embodiment of the present application, a page display method is provided. Through the above-mentioned method, by setting model layer attribute values ​​for model animation and layer attribute values ​​for scene camera, the model animation is included in the rendering process for rendering only when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and the animation models corresponding to different layer attribute values ​​do not need to be included in the rendering process for rendering. It is not necessary to render all model animations every time the page is refreshed, and it is not necessary to set the transparency of the model animation to zero to control the model animation from being displayed on the page. The cost of rendering resources and invalid overhead can be reduced. At the same time, it is also possible to preload resources and pre-render models for the next model animation immediately after rendering the current animation model. When switching to the next model animation, the switching model animation will no longer cause serious frame drops and freezes, so that the switching of the entire model animation is smooth and silky, thereby improving the display effect of the page.

[0141] Optionally, in the above Figure 2 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 3 As shown, in step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in the first display area of ​​the page. The method also includes

[0142] In step S301, when it is detected that the display area on the page is converted from the first display area to the second display area, the first model animation is paused, and the paused animation state of the first model animation is recorded.

[0143] In an embodiment of the present application, when it is detected that the display area of ​​the page moves or switches from the first display area to the second display area, the rendering of the first model animation can be paused to reduce the overhead of rendering resources. At the same time, the paused animation state of the first model animation is recorded so that when the display area can be returned to the first display area later, the first model animation can continue to be displayed.

[0144] The second display area is another display area on the browser page that is different from the first display area, for example, Fig.14 As shown, on the browser page, another display area different from the first display area S2, such as the second display area S6, is used to display model animation, text information or image content, etc. It can also be other display areas on the page, or, it can be a display area of ​​other pages, and there is no specific limitation here.

[0145] Specifically, when it is detected that the display area of ​​the page moves or switches from the first display area to the second display area, for example, Fig.14 As shown, when the page is slid down from the first display area S2 on the page of the browser to the second display area S6, or when jumping from the first display area S2 on the page of the browser to the second display area of ​​other pages, so that the first display area S2 is not visible in the field of vision of the developer or user object, the rendering of the first model animation can be paused, specifically, the clearing of the canvas (that is, the canvas data corresponding to the previous frame image will be deleted before rendering the current frame image through the canvas each time) and the drawing (that is, drawing the current frame image) can be paused to reduce the overhead of rendering resources. At the same time, the paused animation state of the first model animation is recorded (that is, the current rotation angle of the dynamic three-dimensional model in the first model animation is recorded).

[0146] Optionally, in the above Figure 3 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 4 As shown, in step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in the first display area of ​​the page. The method further includes:

[0147] In step S401, when it is detected that the display area on the page is converted from the second display area to the first display area, the paused animation state of the recorded first model animation is restored and continued.

[0148] In an embodiment of the present application, when it is detected that the display area of ​​the page moves or switches from the second display area to the first display area, the rendering of the first model animation can be resumed, and at the same time, the first model animation can continue to be displayed based on the paused animation state of the first model animation recorded last time.

[0149] Specifically, when it is detected that the display area of ​​the page moves, switches or returns from the second display area to the first display area, for example, Fig.14 As shown, when sliding from the second display area S6 on the page of the browser to the first display area S2, or when jumping back from the second display area S6 on other pages of the browser to the first display area S2, Fig.14 The first display area S2 of the original page S1 shown in the figure allows the developer or user object to see the first display area S2 again in their field of vision, and then re-render the first model animation. Specifically, the canvas that was last paused and cleared (that is, the canvas data corresponding to the previous frame image will be deleted before each rendering of the current frame image through the canvas) and drawn (that is, the current frame image is drawn) can be re-processed, so that the first model animation can continue to be displayed in the first display area of ​​the page in the paused animation state of the first model animation that was last recorded (that is, the current rotation angle of the dynamic three-dimensional model in the first model animation is recorded).

[0150] Optionally, in the above Figure 2 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 5 As shown, in step S102, when a switching instruction of a model animation is received, a model identifier carried in the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera. The method further includes:

[0151] In step S501 , when the model layer attribute value of the model animation is different from the current layer attribute value of the scene camera, the model animation is not rendered.

[0152] In an embodiment of the present application, when it is detected that the model vehicle layer attribute value of the model animation is different from the current layer attribute value of the scene camera, the model animation may not be rendered, that is, the model animation that does not need to be displayed may not be rendered, which not only saves rendering costs, but also can set the transparency of the material of the model animation to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0153] Specifically, after determining the current layer attribute value of the scene camera, the current layer attribute value of the scene camera can be compared with the model layer attribute value of each model animation. When the model layer attribute value of a model animation is different from the current layer attribute value of the scene camera, it can be understood that the layer position of the model animation is not the layer position of the model animation that can be captured by the scene camera in the scene, so the model animation is not included in the rendering process.

[0154] For example, Fig.14 As shown, assuming that the current layer attribute value of the scene camera is 1, which is different from the model layer attribute value of model animation A2, the model layer attribute value of model animation A2, the model layer attribute value of model animation A3, and the model layer attribute value of model animation An, n, so model animation A2, model animation A3, model animation An, etc. can be excluded from the rendering process, and there is no need to render these model animations.

[0155] Optionally, in the above Figure 2 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 6 As shown, in step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in the first display area of ​​the page, including

[0156] In step S601, the animation resources of the first model animation are loaded to obtain first animation element resources and animation cache resources, wherein the first animation element resources include a first animation background, a first animation text, animation rendering canvas data and a first animation model, and the animation cache resources include a depth cache, a color cache and a template cache;

[0157] In step S602, the model animation is rendered based on the first animation element resource and the first animation cache resource to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page.

[0158] In an embodiment of the present application, when it is detected that the model car layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the animation resources of the first model animation can be loaded to obtain the first animation element resources and the animation cache resources. Then, based on the first animation element resources and the first animation cache resources, the model animation can be rendered to obtain the first model animation and display the first model animation in the first display area of ​​the page. The model animation that does not need to be displayed can be not rendered, which not only saves rendering costs, but also can set the transparency of the material of the model animation to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0159] Among them, Fig.15 As shown, the first animation element resource includes a first animation background (such as Fig.15 The background 1) and the first animated text (such as Fig.15 The text shown in 1), animation rendering canvas data (such as Fig.15 The canvas main body data of the banner 3D scene shown in the figure) and the first animation model (such as the three-dimensional animation model corresponding to each banner, for example, Fig.14 The three-dimensional animation model S4 is shown in the figure); the animation buffer resources include a depth buffer (depthBuffer), a color buffer (colorBuffer) and a stencil buffer (stencil buffer), and may also include other buffer resources, such as a coordinate buffer (z-buffer), etc., which are not specifically limited here.

[0160] Specifically, after determining the current layer attribute value of the scene camera, the current layer attribute value of the scene camera can be compared with the model layer attribute value of each model animation respectively. When the model layer attribute value of a model animation is the same as the current layer attribute value of the scene camera, it can be understood that the layer position of the model animation is the layer position of the model animation that can be captured by the scene camera in the scene, so the model animation can be included in the rendering process.

[0161] For example, assuming that the current layer attribute value of the scene camera is 2, which is the same as the model layer attribute value of the model animation A2, the animation resources required by the model animation A2 can be loaded to obtain the first animation element resource and the animation cache resource. For example, Fig.16 As shown, the first animation element resource required by the model animation A2 (such as banner2) includes the first animation background (such as Fig.16 The background corresponding to banner2 as shown), the first animated text (such as Fig.16 The text corresponding to banner2 as shown), animation rendering canvas data (such as Fig.16 The canvas body corresponding to banner2 as shown in the figure) and the first animation model (such as the 3D animation model corresponding to banner2), wherein the animation cache resources include a depth buffer (depthBuffer), a color buffer (colorBuffer) and a stencil buffer (stencil buffer), etc. Then, based on the obtained first animation element resources and animation cache resources, the first model animation can be rendered to obtain the first model animation (for example, model animation banner2), and displayed in the first display area of ​​the page (such as Fig.14 The first model animation is displayed in the illustrated area S2).

[0162] On the contrary, when the model layer attribute value of a model animation is different from the current layer attribute value of the scene camera, it can be understood that the layer position of the model animation is the layer position of the model animation that cannot be captured by the scene camera in the scene. Therefore, these model animations do not need to be included in the rendering process for rendering, thereby reducing resource consumption.

[0163] Optionally, in the above Figure 2 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 7 As shown, step S104 preloads the animation resources of the next model animation of the first model animation, and pre-renders the next model animation based on the animation resources to obtain the second model animation, including:

[0164] In step S701, the animation resource of the next model animation of the first model animation is preloaded to obtain the second animation element resource and the animation cache resource, wherein the second animation element resource includes the second animation background, the second animation text, the animation rendering canvas data and the second animation model;

[0165] In step S702, the model animation is pre-rendered based on the second animation element resource and the animation cache resource to obtain the second model animation.

[0166] It is understandable that each time a model animation's initial frame is rendered, it is necessary to apply to the server for a series of important resource overheads such as the animation resources required for rendering, which is greater than the rendering overhead of subsequent frames. Therefore, if the next model animation is rendered only when the model animation in the browser page switches, then in a three-dimensional scene with multiple model animations in a carousel, the initial rendering of the initial frame of each model animation is very expensive, and the resource consumption accounts for a large proportion, which makes it easy for resource squeezes to occur on low-configuration terminal devices, resulting in serious frame drops in some animations, thereby affecting the page display effect and user experience.

[0167] Among them, Fig.15 As shown, the second animation element resource includes a second animation background (ie, a background different from the first animation background, such as Fig.15 2 or 3, etc.), the first animated text (i.e., other texts different from the first animated text, such as Fig.15 2 or 3, etc.), animation rendering canvas data (such as Fig.15 The canvas body data of the banner 3D scene shown) and the second animation model (ie, another three-dimensional animation model different from the first animation model).

[0168] Therefore, after rendering the first model animation and displaying it in the first display area, this embodiment can preload the animation resources of the next model animation of the first model animation to obtain the second animation element resources and the animation cache resources, for example, Fig.16 As shown, the second animation element resources required by the model animation A3 (such as banner3) include the animation background (such as Fig.16 The background corresponding to banner3 shown in the figure), the second animated text (such as Fig.16 The text corresponding to banner3 shown in the figure), animation rendering canvas data (such as Fig.16 The canvas body corresponding to banner3 as shown in the figure) and the second animation model (such as the 3D animation model corresponding to banner3), wherein the animation cache resources include a depth buffer (depthBuffer), a color buffer (colorBuffer) and a stencil buffer (stencil buffer), etc. Then, based on the acquired second animation element resources and animation cache resources, the second model animation can be pre-rendered (such as only rendering the initial frame of the second model animation separately) to obtain the initial animation frame of the second model animation (for example, the model animation banner3), wherein the pre-rendering is not a frame-by-frame rendering of the second model animation and does not need to be displayed in the first display area.

[0169] Optionally, in the above Figure 7 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Figure 8 As shown, step S702 pre-renders the model animation based on the second animation element resource and the animation cache resource to obtain the second model animation, including: step S801; step S105 includes: steps S802 to S803;

[0170] In step S801, based on the second animation element resource and the animation cache resource, the initial frame of the model animation is pre-rendered to obtain the initial frame image of the second model animation;

[0171] In step S802, when a switching instruction for the next model animation is received, the first model animation in the first display area of ​​the page is switched to the initial frame image;

[0172] In step S803, based on the second animation element resource and the animation cache resource, the next frame of the model animation is rendered frame by frame, and the rendered image is displayed frame by frame to display the second model animation.

[0173] In an embodiment of the present application, after obtaining the second animation element resources and the animation cache resources, the initial frame of the model animation can be pre-rendered to obtain the initial frame image of the second model animation, so that when the switching instruction of the next model animation is received, the first model animation in the first display area of ​​the page can be switched to the initial frame image. At the same time, based on the second animation element resources and the animation cache resources, frame-by-frame rendering can be continued starting from the next frame of the initial frame of the model animation, and the rendered image can be displayed frame by frame to display the second model animation.

[0174] Specifically, after rendering the first model animation and displaying it in the first display area, this embodiment can preload the animation resources of the next model animation of the first model animation to obtain the second animation element resources and the animation cache resources, for example, Fig.16 As shown, the second animation element resources required by the model animation A3 (such as banner3) include the animation background (such as Fig.16 The background corresponding to banner3 shown in the figure), the second animated text (such as Fig.16 The text corresponding to banner3 shown in the figure), animation rendering canvas data (such as Fig.16 The canvas body corresponding to banner3 as shown in the figure) and the second animation model (such as the three-dimensional animation model corresponding to banner3), wherein the animation cache resources include depth buffer (depthBuffer), color buffer (colorBuffer) and template buffer (stencil buffer), etc. Then, based on the acquired second animation element resources and animation cache resources, the second model animation can be pre-rendered (such as only rendering the initial frame of the second model animation separately) to obtain the initial frame image of the second model animation (for example, model animation banner3), wherein the pre-rendering is not a frame-by-frame rendering of the second model animation and does not need to be displayed in the first display area.

[0175] Furthermore, when a switching instruction for the next model animation is received, the initial frame image of the pre-rendered second model animation (for example, model animation banner 3) can be displayed in the first display area. At the same time, based on the pre-loaded animation element resources and animation cache resources, the model animation continues to be rendered frame by frame starting from the next frame of the initial frame of the model animation, and the rendered frame-by-frame images are displayed in the first display area to achieve dynamic display of the second model animation in the first display area. It can quickly switch from the current model animation to the next model animation, and there is no need to load resources and render the model for the next model animation (i.e., the second model animation) when the model animation is switched. It can stagger resource consumption and avoid resource squeeze and severe animation frame drops when the model animation is switched.

[0176] Optionally, in the above Figure 2 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Fig. 9 As shown, in step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and before the first model animation is displayed in the first display area of ​​the page, the method further includes:

[0177] In step S901, the rendering acceleration rate supported by the page is obtained, and the rendering acceleration rate is compared with the rate threshold to obtain a comparison result;

[0178] In step S902, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, a corresponding rendering scene is created for each display area of ​​the page.

[0179] In an embodiment of the present application, after entering a page of a browser, the rendering acceleration rate supported by the page can be obtained first, and the rendering acceleration rate can be compared with the rate threshold to obtain a comparison result. Then, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, a corresponding rendering scene can be created for each display area of ​​the page.

[0180] The rate threshold is set according to the hardware acceleration rate of the page supported by the browser of the actual terminal device, and is not specifically limited here.

[0181] Specifically, after entering the browser page, you can first obtain the rendering acceleration rate supported by the page. Specifically, you can obtain whether the browser supports the webGL renderer and turn on the browser's hardware acceleration rate, that is, the rendering acceleration rate, from the hardware properties of the page supported by the browser of the terminal device.

[0182] Furthermore, when the browser supports the webGL renderer, the obtained hardware acceleration rate of the browser (i.e., the rendering acceleration rate) is compared with the rate threshold to obtain a comparison result. Then, if the comparison result is that the hardware acceleration rate of the browser (i.e., the rendering acceleration rate) is greater than or equal to the rate threshold, it can be determined that the page of the browser supports high frame rate rendering, that is, dynamic display of three-dimensional animation models can be performed, so a corresponding rendering scene can be created for each display area of ​​the page. Conversely, it can be understood that if the comparison result is that the hardware acceleration rate of the browser (i.e., the rendering acceleration rate) is less than the rate threshold, it can be determined that the page of the browser does not support high frame rate rendering, and frame drops are prone to occur, so generally only static images can be displayed.

[0183] Optionally, in the above Fig. 9 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Fig.10 As shown, in step S902, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, a corresponding rendering scene is created for each display area of ​​the page, including:

[0184] In step S1001, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, the animation rendering canvas data corresponding to each display area is obtained, wherein the animation rendering canvas data at least includes a scene camera, scene environment information, scene lighting information, and scene drawing information;

[0185] In step S1002, the animation model corresponding to each model animation in each display area is obtained, and the animation rendering canvas data and the animation model are encapsulated into a rendering scene corresponding to each display area.

[0186] In an embodiment of the present application, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, the animation rendering canvas data corresponding to each display area can be obtained, and the animation model corresponding to each model animation in each display area can be obtained, and then the animation rendering canvas data and the animation model are encapsulated into a rendering scene corresponding to each display area.

[0187] Among them, the rendering scene (that is, the scene in three.js is a container of objects, and developers can put the required characters into the scene, such as the environment, lights, and cameras, etc.). The animation rendering canvas data at least includes the scene camera (such as Fig.17 camera), scene environment information (such as Fig.17 environment), scene lighting information (such as Fig.17 light) and scene drawing information (such as Fig.17 Render as shown).

[0188] Among them, scene environment information (such as Fig.17 The environment in the 3D scene refers to the environment in the 3D scene. That is, when rendering objects in the 3D scene, they are rendered based on the environment. It is understandable that different environments will have different rendering effects. Fig.17 The light in the 3D scene is the same as the light in the real world, which is used to illuminate the entire 3D scene. Fig.17 The render method shown here refers to the various parameters of the shader used for image processing.

[0189] Specifically, if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, it can be determined that the browser page supports high frame rate rendering, that is, dynamic display of 3D animation models can be performed, so a renderer can be created through the WebGLRenderer of three.js, and a renderer is created for each display area (such as Fig.14 The first display area S2) shown creates a rendering scene scene.

[0190] Further, the animation rendering canvas data corresponding to each display area is obtained, that is, the scene camera (such as Fig.17 camera), scene environment information (such as Fig.17 environment), scene lighting information (such as Fig.17 light) and scene drawing information (such as Fig.17 The render) and other rendering-related global factors are taken into consideration, and the 3D animation model corresponding to each model animation in each display area is obtained. Then, the animation rendering canvas data and the animation model are encapsulated into the rendering scene corresponding to each display area, so as to be reused for each subsequent model animation rendering. This can avoid the need to re-create the corresponding animation rendering canvas data for each model animation each time a model animation is rendered, can reduce resource overhead, improve the smoothness of page switching, and thus improve the display effect of the page.

[0191] Optionally, in the above Fig.10 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Fig.11 As shown, step S103, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in the first display area of ​​the page, including:

[0192] In step S1101, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, based on the rendering scene corresponding to the first display area, the animation rendering canvas data and the first animation model corresponding to the first model animation are obtained;

[0193] In step S1102, a first animation background, a first animation text, and an animation cache resource corresponding to the first model animation are obtained;

[0194] In step S1103, the model animation is rendered based on the animation cache resources, and the animation rendering canvas data and the first animation model corresponding to the first model animation are overlaid on the first animation background and the first animation text to render the first model animation, and the first model animation is displayed in the first display area of ​​the page.

[0195] In an embodiment of the present application, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the animation rendering canvas data and the first animation model corresponding to the first model animation can be first obtained based on the rendering scene corresponding to the first display area, and the first animation background, first animation text and animation cache resources corresponding to the first model animation can be loaded. Then, the model animation can be rendered based on the animation cache resources, and the animation rendering canvas data and the first animation model corresponding to the first model animation can be overlaid on the first animation background and above the first animation text to render the first model animation, and the first model animation can be displayed in the first display area of ​​the page. By overlaying the animation rendering canvas data and the first animation model corresponding to the first model animation on the first animation background and above the first animation text, the animation background and animation text can be rendered and displayed in a rendering order from bottom to top. Then, by reusing the animation rendering canvas data corresponding to each display area without affecting the overall rendering effect of the model animation, flexible rendering and display of the three-dimensional animation model can be achieved.

[0196] Specifically, when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, based on the rendering scene corresponding to the first display area (such as Fig.16 The canvas body shown in the figure), obtains the animation rendering canvas data (such as Fig.17 The scene camera camera, scene environment information environment, scene lighting information light and scene rendering information render and other rendering-related global factors) and the first model animation (such as Fig.16 The first animation model (such as banner2) corresponding to Fig.17 The model shown in FIG. 1 is a first animation model (such as Fig.17 The model shown in the figure includes a model texture mesh (such as Fig.17 mesh1 and mesh2, etc.) and the attribute information corresponding to each model texture (such as Fig.17 The material information (such as metal, glass or plastic, etc.) and geometric information (such as UV coordinate data, shape, height and width, etc.) shown are properties.

[0197] Further, based on the model identifier, a first animation background (such as Fig.15 The background shown in Figure 2), the first animated text (such as Fig.15 The text 2) and animation cache resources are shown.

[0198] Furthermore, based on the obtained animation cache resources such as depth buffer, color buffer and stencil buffer, the obtained Fig.17 The global factors related to rendering, such as the scene camera camera, scene environment information environment, scene lighting information light, and scene rendering information render, as well as the model texture mesh (such as Fig.17 mesh1 and mesh2, etc.) and the attribute information corresponding to each model texture (such as Fig.17 The material information (such as metal, glass or plastic, etc.) and geometric information (such as UV coordinate data, shape, height and width, etc.) shown are overlaid on the first animation background and the first animation text, and then the image data is processed by the shader in a bottom-up order of the layers to obtain the first model animation.

[0199] Optionally, in the above Fig.10 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Fig.12 As shown, step S104 preloads the animation resources of the next model animation of the first model animation, and pre-renders the next model animation based on the animation resources to obtain the second model animation, including:

[0200] In step S1201, based on the rendering scene corresponding to the first display area, preload the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation;

[0201] In step S1202, a second animation background, second animation text, and animation cache resources corresponding to the second model animation are obtained;

[0202] In step S1203, the next model animation is pre-rendered based on the animation cache resource, and the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation are overlaid on the second animation background and the second animation text to obtain the second model animation.

[0203] In an embodiment of the present application, in the idle time after rendering the first model animation, the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation can be preloaded based on the rendering scene corresponding to the first display area, and the second animation background, second animation text and animation cache resources corresponding to the second model animation can be preloaded. Then, the second model animation can be pre-rendered based on the animation cache resources, and the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation can be overlaid on the second animation background and above the second animation text to render the second model animation. The animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation can be overlaid on the second animation background and above the second animation text in a rendering order from bottom to top, and the animation background and animation text can be rendered and displayed preferentially. Then, the animation rendering canvas data corresponding to each display area can be reused without affecting the overall rendering effect of the model animation, thereby realizing flexible rendering and display of the three-dimensional animation model.

[0204] Specifically, in the automatic carousel scene of multiple model animations, in the idle time after rendering the first model animation, the rendering scene corresponding to the first display area (such as Fig.16 The canvas body shown in the figure), preload the animation rendering canvas data (such as Fig.17 The global factors related to rendering (such as the scene camera camera, scene environment information environment, scene lighting information light, and scene drawing information render) are used to reuse canvas data in the same rendering scene to reduce the overhead of rendering resources.

[0205] At the same time, based on the model identifier, the first model animation (such as Fig.16 The next model animation of the shown banner2 (e.g. Fig.16 The second animation model (such as banner3) corresponding to Fig.17 The model shown in FIG. 1 is a schematic diagram of a second animation model (such as Fig.17 The model shown in the figure includes a model texture mesh (such as Fig.17 mesh1 and mesh2, etc.) and the attribute information corresponding to each model texture (such as Fig.17 The material information (such as metal, glass or plastic, etc.) and geometric information (such as UV coordinate data, shape, height and width, etc.) shown are properties.

[0206] Further, based on the model identifier, a second animation background (such as Fig.15 The background shown in 3), the second animation text (such as Fig.15 The text 3) and animation cache resources are shown.

[0207] Furthermore, based on the obtained animation cache resources such as depth buffer, color buffer and stencil buffer, the obtained Fig.17 The global factors related to rendering, such as the scene camera camera, scene environment information environment, scene lighting information light, and scene rendering information render, as well as the model texture mesh (such as Fig.17 mesh1 and mesh2, etc.) and the attribute information corresponding to each model texture (such as Fig.17 The material information (such as metal, glass or plastic, etc.) and geometric information (such as UV coordinate data, shape, height and width, etc.) shown in the figure are covered on the second animation background and the second animation text, and then the image pre-rendering processing of the initial frame of the second model animation is performed in the order of layers from bottom to top through the shader to obtain the initial frame image of the second model animation.

[0208] Optionally, in the above Figure 6 Based on the corresponding embodiment, in another optional embodiment of the page display method provided in the embodiment of the present application, as Fig.13 As shown, step S602 renders the model animation based on the first animation element resource and the first animation cache resource to obtain the first model animation, and displays the first model animation in the first display area of ​​the page, including:

[0209] In step S1301, based on the first animation element resource and the first animation cache resource, the model animation is rendered to obtain the first model animation;

[0210] In step S1302, a page refresh rate of the page is obtained, and the page refresh rate is compared with a refresh rate threshold to obtain a comparison result;

[0211] In step S1303, if the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, a first model animation is displayed in a first display area of ​​the page based on the page refresh rate.

[0212] In an embodiment of the present application, after obtaining the first animation element resource and the first animation cache resource, the model animation can be rendered based on the first animation element resource and the first animation cache resource to obtain the first model animation, and then, the page refresh rate of the page is obtained, and the page refresh rate is compared with the refresh rate threshold to obtain a comparison result, and then, if the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, the first model animation can be displayed in the first display area of ​​the page based on the page refresh rate.

[0213] The page refresh rate of a page refers to the screen refresh rate fps of the page (usually 50fps-90fps, etc., not specifically limited here).

[0214] Specifically, after obtaining the first animation element resource and the first animation cache resource, the model animation can be rendered based on the first animation element resource and the first animation cache resource. Specifically, the model animation can be rendered based on the obtained animation cache resources such as depth buffer, color buffer and stencil buffer. Fig.17 The global factors related to rendering, such as the scene camera camera, scene environment information environment, scene lighting information light, and scene rendering information render, as well as the model texture mesh (such as Fig.17 mesh1 and mesh2, etc.) and the attribute information corresponding to each model texture (such as Fig.17 The material information (such as metal, glass or plastic, etc.) and geometric information (such as UV coordinate data, shape, height and width, etc.), animation background and animation text are processed to obtain the first model animation.

[0215] Furthermore, the page refresh rate of the page is obtained (that is, the screen refresh rate of the page, such as 50fps), so the page refresh rate can be compared with the refresh rate threshold to obtain a comparison result. Then, if the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, it can be understood that the browser page supports high frame rate rendering, that is, dynamic display of three-dimensional animation models can be performed, so based on the page refresh rate, the first model animation can be dynamically displayed frame by frame in the first display area of ​​the page.

[0216] Optionally, in the above Figure 2 On the basis of the corresponding embodiment, in another optional embodiment of the page display method provided by the embodiment of the present application, when a switching instruction of the model animation is received, step S102 obtains the model identifier carried by the switching instruction, and uses the model identifier as the current layer attribute value of the scene camera, including:

[0217] When the next model animation switching instruction is received as a click switching instruction or an automatic carousel switching instruction, when the model animation switching instruction is received, the model identifier carried by the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera.

[0218] It can be understood that when a switching instruction for a model animation is received, the model identifier carried by the switching instruction can be obtained, and the model identifier can be used as the current layer attribute value of the scene camera, so that the model layer attribute value and the current layer attribute value of the scene camera can be used to judge or filter out the model animation that needs to be displayed for rendering, and the model animation that does not need to be displayed can be not rendered. This can not only save rendering costs, but also set the transparency of the material of the model animation to control the hiding of the model animation, thereby reducing the overhead of page rendering resources and display resources.

[0219] Among them, the scene camera refers to the shooting camera in three.js (a third-party WebGL library written in JavaScript). The role of the scene camera is to face the scene (that is, the scene in three.js is a container of objects. Developers can put the required characters into the scene, such as environment, lighting, and camera, etc. At the same time, these characters themselves also manage their positions in the scene). The scene camera can take a suitable scene in the scene and take a picture of it, so that the pictures taken by the camera can be rendered by the renderer later and displayed in the browser.

[0220] Among them, the current layer attribute value of the scene camera refers to the camera layer value in three.js, which can be used to represent a suitable scene that the current scene camera can obtain in the scene, that is, the layer position of the model animation that can be captured.

[0221] Specifically, Fig.16 As shown, when starting a page, it can be determined whether the current switching instruction is a switching instruction based on the order of cursor clicks or a switching instruction for automatic rotation according to a preset time interval. For example, when switching or automatically rotating the model animations corresponding to A1 to A3, only one model animation is displayed at a time, such as Fig.14 A model animation in a display area S2 shown, such as displaying an A1 model animation (for example, a banner advertisement, or a news information, etc., which is not specifically limited here), includes the model animation title on the left side of the display area S2 and the text content and three-dimensional animation model of the model animation on the right side of the display area S2.

[0222] Furthermore, the model identifier of each model animation is used as the model layer attribute value of each model animation. For example, 2 in the model identifier A2 is set as the model layer attribute value of the model animation A2, that is, model layer=2. Then, when a switching instruction of the model animation is received, for example, switching the model animation A1 to the model animation A2, the model identifier carried by the switching instruction such as 2 in A2 can be obtained, and the current layer attribute value of the scene camera can be set to 2, that is, camera layer=2.

[0223] The following is a detailed description of the page display device in this application. Fig.18 , Fig.18 This is a schematic diagram of an embodiment of a page display device in an embodiment of the present application. The page display device 20 includes:

[0224] The processing unit 201 is used to use the model identifier of each model animation as the model layer attribute value of each model animation;

[0225] The acquisition unit 202 is used to acquire the model identifier carried in the switching instruction when receiving the switching instruction of the model animation, and use the model identifier as the current layer attribute value of the scene camera;

[0226] The display unit 203 is used to render the model animation to obtain a first model animation when the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, and display the first model animation in a first display area of ​​the page;

[0227] The processing unit 201 is further used to preload the animation resources of the next model animation of the first model animation, and pre-render the next model animation based on the animation resources to obtain the second model animation;

[0228] The display unit 203 is further configured to switch the first model animation in the first display area of ​​the page to the second model animation for display when receiving a switching instruction for the next model animation.

[0229] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application,

[0230] The processing unit 201 is further configured to pause the first model animation and record the paused animation state of the first model animation when it is detected that the display area on the page is switched from the first display area to the second display area.

[0231] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application,

[0232] The processing unit 201 is further configured to restore the recorded paused animation state of the first model animation to continue when it is detected that the display area on the page is switched from the second display area to the first display area.

[0233] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application,

[0234] The processing unit 201 is further configured to not render the model animation when the model layer attribute value of the model animation is different from the current layer attribute value of the scene camera.

[0235] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the display unit 203 can be specifically used for:

[0236] Loading the animation resources of the first model animation to obtain first animation element resources and animation cache resources, wherein the first animation element resources include a first animation background, a first animation text, animation rendering canvas data, and a first animation model, and the animation cache resources include a depth cache, a color cache, and a template cache;

[0237] Based on the first animation element resource and the first animation cache resource, the model animation is rendered to obtain the first model animation, and the first model animation is displayed in the first display area of ​​the page.

[0238] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the processing unit 201 can be specifically used for:

[0239] Preloading the animation resources of the next model animation of the first model animation to obtain second animation element resources and animation cache resources, wherein the second animation element resources include a second animation background, a second animation text, animation rendering canvas data and a second animation model;

[0240] Based on the second animation element resource and the animation cache resource, the model animation is pre-rendered to obtain the second model animation.

[0241] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the processing unit 201 can be specifically used for:

[0242] Pre-rendering the initial frame of the model animation based on the second animation element resource and the animation cache resource to obtain an initial frame image of the second model animation;

[0243] The display unit 203 can be specifically used for:

[0244] When receiving a switching instruction for the next model animation, switching the first model animation in the first display area of ​​the page to the initial frame image;

[0245] Based on the second animation element resource and the animation cache resource, the next frame of the initial frame of the model animation is rendered frame by frame, and the rendered image is displayed frame by frame to display the second model animation.

[0246] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application,

[0247] The acquisition unit 202 is further used to acquire the rendering acceleration rate supported by the page, and compare the rendering acceleration rate with the rate threshold to obtain a comparison result;

[0248] The processing unit 201 is further configured to create a corresponding rendering scene for each display area of ​​the page if the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold.

[0249] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the processing unit 201 can be specifically used for:

[0250] If the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, then the animation rendering canvas data corresponding to each display area is obtained, wherein the animation rendering canvas data at least includes scene camera, scene environment information, scene lighting information and scene drawing information;

[0251] The animation model corresponding to each model animation in each display area is obtained, and the animation rendering canvas data and the animation model are encapsulated into a rendering scene corresponding to each display area.

[0252] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the display unit 203 can be specifically used for:

[0253] When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, based on the rendering scene corresponding to the first display area, obtaining animation rendering canvas data and a first animation model corresponding to the first model animation;

[0254] Obtain a first animation background, a first animation text, and an animation cache resource corresponding to the first model animation;

[0255] The model animation is rendered based on the animation cache resources, and the animation rendering canvas data and the first animation model corresponding to the first model animation are overlaid on the first animation background and above the first animation text to render the first model animation, and the first model animation is displayed in the first display area of ​​the page.

[0256] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the processing unit 201 can be specifically used for:

[0257] Preloading animation rendering canvas data and a second animation model corresponding to a next model animation of the first model animation based on a rendering scene corresponding to the first display area;

[0258] Obtain the second animation background, second animation text, and animation cache resources corresponding to the second model animation;

[0259] The next model animation is pre-rendered based on the animation cache resource, and the animation rendering canvas data and the second animation model corresponding to the next model animation of the first model animation are covered on the second animation background and the second animation text to obtain the second model animation.

[0260] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the display unit 203 can be specifically used for:

[0261] Rendering the model animation based on the first animation element resource and the first animation cache resource to obtain a first model animation;

[0262] Obtaining a page refresh rate of the page, and comparing the page refresh rate with a refresh rate threshold to obtain a comparison result;

[0263] If the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, a first model animation is displayed in a first display area of ​​the page based on the page refresh rate.

[0264] Optionally, in the above Fig.18 On the basis of the corresponding embodiment, in another embodiment of the page display device provided by the embodiment of the present application, the processing unit 201 can be specifically used for:

[0265] When the next model animation switching instruction is received as a click switching instruction or an automatic carousel switching instruction, when the model animation switching instruction is received, the model identifier carried by the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera.

[0266] On the other hand, the present application provides another schematic diagram of a computer device, such as Fig.19 As shown, Fig.19 3 is a schematic diagram of a computer device structure provided in an embodiment of the present application. The computer device 300 may have relatively large differences due to different configurations or performances, and may include one or more central processing units (CPU) 310 (for example, one or more processors) and a memory 320, and one or more storage media 330 (for example, one or more mass storage devices) storing application programs 331 or data 332. Among them, the memory 320 and the storage medium 330 may be temporary storage or permanent storage. The program stored in the storage medium 330 may include one or more modules (not shown in the figure), and each module may include a series of instruction operations in the computer device 300. Furthermore, the central processing unit 310 may be configured to communicate with the storage medium 330 to execute a series of instruction operations in the storage medium 330 on the computer device 300.

[0267] The computer device 300 may also include one or more power supplies 340, one or more wired or wireless network interfaces 350, one or more input and output interfaces 360, and / or one or more operating systems 333, such as Windows Server 2000, Windows Server 2003, Windows Server 2003E, Windows Server 2003R ... TM , Mac OS X TM , Unix TM ,Linux TM , FreeBSD TM etc.

[0268] The computer device 300 is also used to execute the following steps: Figures 2 to 13 The steps in the corresponding embodiments.

[0269] Another aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the following Figures 2 to 13 The illustrated embodiments describe steps in a method.

[0270] Another aspect of the present application provides a computer program product comprising a computer program, which, when executed by a processor, implements the following Figures 2 to 13 The illustrated embodiments describe steps in a method.

[0271] 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.

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

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

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

[0275] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable 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: U disk, mobile hard disk, read-only memory (ROM), random access memory (RAM), disk or optical disk and other media that can store program code.< / canvas>

Claims

1. A page display method, characterized in that: include: The model identifier of each model animation is used as the model layer attribute value of each model animation; When a switching instruction of a model animation is received, a model identifier carried in the switching instruction is obtained, and the model identifier is used as a current layer attribute value of the scene camera; When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page; Preloading animation resources of a model animation next to the first model animation, and pre-rendering the next model animation based on the animation resources to obtain a second model animation; When a switching instruction for the next model animation is received, the first model animation is switched to the second model animation for display in the first display area of ​​the page.

2. The method according to claim 1, characterized in that When the model layer attribute value of the model animation is the same as the current layer attribute value of the camera, the model animation is rendered to obtain a first model animation, and after the first model animation is displayed in the first display area of ​​the page, the method further includes: When it is detected that the display area on the page is converted from the first display area to the second display area, the first model animation is paused, and the paused animation state of the first model animation is recorded.

3. The method according to claim 2, characterized in that When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and after the first model animation is displayed in the first display area of ​​the page, the method further includes: When it is detected that the display area on the page is converted from the second display area to the first display area, the paused animation state of the first model animation recorded is restored and continued.

4. The method according to claim 1, characterized in that: When a switching instruction of the model animation is received, the model identifier carried in the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera, and the method further includes: When the model layer attribute value of the model animation is different from the current layer attribute value of the scene camera, the model animation is not rendered.

5. The method according to claim 1, characterized in that When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page, including: Loading the animation resources of the first model animation to obtain first animation element resources and animation cache resources, wherein the first animation element resources include a first animation background, a first animation text, animation rendering canvas data, and a first animation model, and the animation cache resources include a depth cache, a color cache, and a template cache; The model animation is rendered based on the first animation element resource and the first animation cache resource to obtain a first model animation, and the first model animation is displayed in a first display area of ​​the page.

6. The method according to claim 1, characterized in that The preloading of the animation resource of the next model animation of the first model animation, and pre-rendering of the next model animation based on the animation resource to obtain the second model animation, comprises: Preloading the animation resources of the next model animation of the first model animation to obtain second animation element resources and animation cache resources, wherein the second animation element resources include a second animation background, a second animation text, animation rendering canvas data, and a second animation model; The model animation is pre-rendered based on the second animation element resource and the animation cache resource to obtain the second model animation.

7. The method according to claim 6, characterized in that The pre-rendering of the model animation based on the second animation element resource and the animation cache resource to obtain the second model animation includes: Pre-rendering the initial frame of the model animation based on the second animation element resource and the animation cache resource to obtain an initial frame image of the second model animation; When receiving a switching instruction for the next model animation, switching the first model animation to the second model animation for display in the first display area of ​​the page includes: When receiving a switching instruction for the next model animation, switching the first model animation in the first display area of ​​the page to the initial frame image; Based on the second animation element resource and the animation cache resource, frame-by-frame rendering is performed from the next frame of the initial frame of the model animation, and the rendered image is displayed frame-by-frame to display the second model animation.

8. The method according to claim 1, characterized in that When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, the model animation is rendered to obtain a first model animation, and before the first model animation is displayed in the first display area of ​​the page, the method further includes: Obtaining a rendering acceleration rate supported by the page, and comparing the rendering acceleration rate with a rate threshold to obtain a comparison result; If the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, a corresponding rendering scene is created for each display area of ​​the page.

9. The method according to claim 8, characterized in that If the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, creating a corresponding rendering scene for each display area of ​​the page, including: If the comparison result is that the rendering acceleration rate is greater than or equal to the rate threshold, obtaining the animation rendering canvas data corresponding to each display area, wherein the animation rendering canvas data at least includes the scene camera, scene environment information, scene lighting information and scene drawing information; The animation model corresponding to each model animation in each display area is obtained, and the animation rendering canvas data and the animation model are encapsulated into a rendering scene corresponding to each display area.

10. The method according to claim 9, characterized in that When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, rendering the model animation to obtain a first model animation, and displaying the first model animation in a first display area of ​​the page, comprises: When the model layer attribute value of the model animation is the same as the current layer attribute value of the scene camera, acquiring the animation rendering canvas data and the first animation model corresponding to the first model animation based on the rendering scene corresponding to the first display area; Obtaining a first animation background, a first animation text, and the animation cache resource corresponding to the first model animation; The model animation is rendered based on the animation cache resources, and the animation rendering canvas data and the first animation model corresponding to the first model animation are overlaid on the first animation background and above the first animation text to render the first model animation, and the first model animation is displayed in a first display area of ​​the page.

11. The method according to claim 9, characterized in that The preloading of the animation resource of the next model animation of the first model animation, and pre-rendering of the next model animation based on the animation resource to obtain the second model animation, comprises: Preloading the animation rendering canvas data and a second animation model corresponding to the next model animation of the first model animation based on the rendering scene corresponding to the first display area; Obtaining a second animation background, a second animation text, and the animation cache resource corresponding to the second model animation; The next model animation is pre-rendered based on the animation cache resource, and the animation rendering canvas data and a second animation model corresponding to the next model animation of the first model animation are overlaid on the second animation background and above the second animation text to obtain the second model animation.

12. The method according to claim 5, characterized in that The rendering of the model animation based on the first animation element resource and the first animation cache resource to obtain a first model animation, and displaying the first model animation in a first display area of ​​the page includes: Rendering the model animation based on the first animation element resource and the first animation cache resource to obtain a first model animation; Obtaining a page refresh rate of the page, and comparing the page refresh rate with a refresh rate threshold to obtain a comparison result; If the comparison result is that the page refresh rate is greater than or equal to the refresh rate threshold, the first model animation is displayed in a first display area of ​​the page based on the page refresh rate.

13. The method according to claim 1, characterized in that When a switching instruction of the model animation is received, the model identifier carried in the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera, including: When the next model animation switching instruction received is a click switching instruction or an automatic carousel switching instruction, when the model animation switching instruction is received, the model identifier carried by the switching instruction is obtained, and the model identifier is used as the current layer attribute value of the scene camera.

14. A page display method and device, characterized in that: include: A processing unit, used for using the model identifier of each model animation as a model layer attribute value of each model animation; an acquisition unit, configured to, when receiving a switching instruction of a model animation, acquire a model identifier carried in the switching instruction, and use the model identifier as a current layer attribute value of the scene camera; A display unit, configured to render the model animation to obtain a first model animation when a model layer attribute value of the model animation is the same as a current layer attribute value of the scene camera, and display the first model animation in a first display area of ​​the page; The processing unit is further used to preload animation resources of a next model animation of the first model animation, and pre-render the next model animation based on the animation resources to obtain a second model animation; The display unit is further configured to switch the first model animation to the second model animation for display in the first display area of ​​the page when receiving a switching instruction for the next model animation.

15. A computer device comprising a memory, a processor and a bus system, wherein the memory stores a computer program, characterized in that: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 13 are implemented; The bus system is used to connect the memory and the processor so that the memory and the processor can communicate with each other.

16. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 13 are implemented.

17. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 13 are implemented.

Images