Label rendering method, device, equipment and readable storage medium

Abstract

The embodiments of the present application provide a tag rendering method, apparatus, device and readable storage medium. After the terminal device recognizes the rendering instruction requesting the rendering of the target interface, it sends a first request to the server to request a tag set and the skin ID of each tag in the tag set. For each 3D tag in the tag set, the skin configuration is obtained according to the skin ID of the 3D tag, and the skin configuration is processed according to the size of the 3D tag and the nine-square rendering method to render the 3D tag. With this solution, the terminal device processes the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag, which greatly improves the visual effect of the digital world while achieving 3D tag rendering. Moreover, since different skin IDs correspond to different styles, multiple 3D tags of different sizes can be rendered based on the same style, and there is no need to design 3D tags for each size, which greatly saves design costs.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of digital twin technology, and in particular to a label rendering method, device, equipment and readable storage medium. Background Art

[0002] With the rapid development of Internet technology, the popularity of digital twins is increasing day by day. Based on digital twin technology, physical entities in the real world can be mapped to the digital world. The virtual representation of a physical entity in the digital world is called a twin.

[0003] In the digital world, there are a large number of labels that serve as annotations, such as 2D labels or 3D labels.

[0004] However, the current label rendering method only supports the rendering of 2D labels, and does not support the rendering of 3D labels. Summary of the invention

[0005] The embodiments of the present application provide a label rendering method, apparatus, device and readable storage medium. Only a small number of styles need to be designed. Based on the nine-square grid rendering method and a small number of styles, 3D labels are rendered on the interface of the digital world. The design cost is low, and while realizing 3D label rendering, the visual effect of the digital world is greatly improved.

[0006] In a first aspect, an embodiment of the present application provides a label rendering method, which is applied to a terminal device, and the method includes:

[0007] Identify a rendering instruction requesting a rendering target interface;

[0008] In response to the rendering instruction, a first request is sent to a server to request a skin ID of each tag in a tag set, each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag;

[0009] For each 3D tag in the tag set, acquiring a skin configuration required for rendering the 3D tag according to the skin ID of the 3D tag;

[0010] For each 3D tag in the tag set, the skin configuration is processed according to the size of the tag and the nine-square rendering method to render the 3D tag, and the size of the background plate in the processed skin configuration matches the size of the tag.

[0011] In a second aspect, an embodiment of the present application provides a label rendering method, which is applied to a server, and the method includes:

[0012] Receiving a first request from a terminal device, where the first request is sent after the terminal device recognizes a rendering instruction requesting rendering of a target interface;

[0013] Determine a tag set and a skin ID of each tag in the tag set according to the first request, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag;

[0014] A first response is sent to the terminal device, where the first response is used to indicate the tag set and the skin ID of each tag in the tag set.

[0015] In a third aspect, an embodiment of the present application provides a label rendering device, which is integrated in a terminal device, and the label rendering device includes:

[0016] An identification module, used to identify a rendering instruction requesting a rendering target interface;

[0017] a transceiver module, configured to send a first request to the server in response to the rendering instruction to request a skin ID of each tag in the tag set, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set at least includes a 3D tag;

[0018] An acquisition module, configured to acquire, for each 3D tag in the tag set, a skin configuration required for rendering the 3D tag according to a skin ID of the 3D tag;

[0019] A processing module is used to process the skin configuration according to the size of the tag and the nine-square rendering method to render the 3D tag for each 3D tag in the tag set, and the size of the background plate in the processed skin configuration matches the size of the tag.

[0020] In a fourth aspect, an embodiment of the present application provides a label rendering device, which is integrated in a server, and the device includes:

[0021] A receiving module, configured to receive a first request from a terminal device, wherein the first request is sent after the terminal device identifies a rendering instruction requesting rendering of a target interface;

[0022] a processing module, configured to determine a tag set and a skin ID of each tag in the tag set according to the first request, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag;

[0023] The sending module is used to send a first response to the terminal device, where the first response is used to indicate the tag set and the skin ID of each tag in the tag set.

[0024] In a fifth aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the method described in the first aspect or various possible implementations of the first aspect; or, the computer program is suitable for being loaded by the processor and executing the method described in the second aspect or various possible implementations of the second aspect.

[0025] In a sixth aspect, an embodiment of the present application provides a computer-readable storage medium, in which computer instructions are stored. When the computer instructions are executed by a processor, they are used to implement the method described in the first aspect or various possible implementations of the first aspect; or, when the computer instructions are executed by a processor, they are used to implement the method described in the second aspect or various possible implementations of the second aspect.

[0026] In the seventh aspect, an embodiment of the present application provides a computer program product comprising a computing program, wherein when the computer program is executed by a processor, the method described in the first aspect or various possible implementations of the first aspect is implemented; or, when the computer program is executed by a processor, the method described in the second aspect or various possible implementations of the second aspect is implemented.

[0027] The label rendering method, apparatus, device and readable storage medium provided in the embodiments of the present application, after the terminal device recognizes the rendering instruction requesting the rendering of the target interface, sends a first request to the server to request a label set and the skin ID of each label in the label set, and for each 3D label in the label set, obtains the skin configuration according to the skin ID of the 3D label, and processes the skin configuration according to the size of the 3D label and the nine-square rendering method to render the 3D label. With this solution, the terminal device processes the skin configuration according to the size of the 3D label and the nine-square rendering method to render the 3D label, and while achieving the 3D label rendering, it greatly improves the visual effect of the digital world. Moreover, since different skin IDs correspond to different styles, multiple 3D labels of different sizes can be rendered based on the same style, and there is no need to design 3D labels for each size, which greatly saves the design cost. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0029] Figure 1 It is a schematic diagram of an implementation environment applicable to the label rendering method provided in the embodiment of the present application;

[0030] Figure 2 is a flowchart of a rendering method provided in an embodiment of the present application;

[0031] Figure 3 It is a schematic diagram of a digital world interface in a label rendering method provided in an embodiment of the present application;

[0032] Figure 4A to Figure 4E A schematic diagram of different styles in the label rendering method provided in an embodiment of the present application;

[0033] Figure 5 A schematic diagram of a label structure in a label rendering method provided in an embodiment of the present application;

[0034] Figure 6 is a schematic diagram of a nine-square grid in a label rendering method provided in an embodiment of the present application;

[0035] Figure 7 is a rendering flow chart of a 3D label in a rendering method provided in an embodiment of the present application;

[0036] Figure 8 is a schematic diagram of different states of the same label in the label rendering method provided in an embodiment of the present application;

[0037] Fig. 9 It is a schematic diagram of the editing interface in the label rendering method provided in the embodiment of the present application;

[0038] Fig.10 is another flow chart of the label rendering method provided in an embodiment of the present application;

[0039] Fig.11 is a schematic diagram of a label rendering device provided in an embodiment of the present application;

[0040] Fig.12 is a schematic diagram of a label rendering device provided in an embodiment of the present application;

[0041] Fig.13 It is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0042] Currently, based on digital twin technology, a digital world that is a 1:1 replica of the real physical world can be created in the virtual world. Every physical entity in the physical world has a corresponding twin in the digital world. Twins include teaching buildings, cameras, squares, playgrounds, etc. At the same time, the digital world also includes a large number of labels that serve as annotations. For example, a three-dimensional Geographic Information System (GIS) map is a common digital world, and there are a large number of 3D labels and 2D labels in the three-dimensional GIS map.

[0043] When users refresh the map, it is inevitable to render and display a large number of 3D labels. However, there is no rendering method for 3D labels in the industry.

[0044] For 2D labels, in the traditional rendering method, designers are required to pre-design labels of various sizes and shapes. When rendering, the terminal device renders and displays the label according to the size and shape of the label. For example, the label name of one label is Future Digital Library, and the name of the other label is Teaching Building A. Although the two labels have the same attributes except for the length, the designer has to design two labels. For another example, the label name of one label is Camera B, and the name of the other label is Alarm C. The two labels have the same attributes except for the font size. The font size of Camera B is size 5, and the font size of Alarm C is size 4. Visually, the label of Camera B is larger. Similarly, the designer also has to design two labels.

[0045] Obviously, the above label rendering method has high design cost.

[0046] To solve the problem of high design costs, a common method is stretching, that is, labels of different sizes are stretched based on the same sample. For example, the two labels of Future Digital Library and Teaching Building A are stretched based on the same sample. Although this rendering method saves design costs, it is prone to deformation and the overall effect is very poor.

[0047] Based on this, the embodiments of the present application provide a label rendering method, device, equipment and readable storage medium, which only need to design a small number of styles, based on the nine-grid rendering method and a small number of styles, to render a 3D label on the interface of the digital world, and realize the 3D label rendering, while greatly improving the visual effect of the digital world. Moreover, whether it is the rendering of a 2D label or a 3D label, there is no need to stretch the style, and no deformation will occur.

[0048] Figure 1 This is a schematic diagram of the implementation environment applicable to the label rendering method provided in the embodiment of the present application. Figure 1The implementation environment includes a rendering terminal 11, an editing terminal 12 and a server 13. The rendering terminal 11 and the editing terminal 12 respectively establish network connections with the server 13.

[0049] The rendering end 11 is, for example, a smart interactive tablet, a laptop computer, a desktop computer, a mobile phone, a tablet computer, etc., and the embodiments of the present application are not limited. The rendering end 11 has a display screen for displaying a rendered target interface. For example, there are two buttons on the interface of the digital world, one button is named "Technology Introduction", which is used to enter the Technology Introduction interface, and the other button is named "Campus Tour", which is used to enter the Campus Tour interface. The Technology Introduction interface and the Campus Tour interface each have many labels. When the user clicks the "Technology Introduction" button, the target interface is the Technology Introduction interface, and the rendering end 11 renders and displays the Technology Introduction interface, which has at least a twin and a label of the twin.

[0050] There can be many labels on a target interface, and these labels only correspond to a small number of styles. For example, there are 200 labels on the target interface, but there are actually only 6 styles. In other words, the designer only needs to design 6 styles, and the rendering end 11 can render 200 labels based on the 6 styles. Taking the two labels of Future Digital Library and Teaching Building A as an example, these two labels use the same style, but the rendered visual effects are different: the label of Future Digital Library is longer, while the label of Teaching Building A is shorter.

[0051] The editing terminal 12 is, for example, an intelligent interactive tablet, a laptop computer, a desktop computer, a mobile phone, a tablet computer, etc., which is not limited by the embodiments of the present application. The editing terminal 12 is used to display an editing interface, on which twins and multiple styles are displayed. The user operates on the editing interface to configure the style of the label for the target twin selected by the user. Different styles correspond to different skin IDs. After the style is configured for a label, the editing terminal 12 sends the skin ID and label identification corresponding to the style of the label to the server 13, which is equivalent to entering the correspondence between the label and the skin ID of the label in the server 13.

[0052] Each skin ID has a unique identifier such as poi-label-0, poi-label-1, etc. Different skin IDs correspond to different styles, and each style has multiple different states, such as default state, low state, middle state, high state, and superhigh state. Different states have different display effects. Each state has corresponding rendering resources and rendering rules. Rendering resources include the background board used for rendering labels, and rendering rules are used to indicate how to layout the various components of the label.

[0053] In addition, a tag has a 2D display style or a 3D display style. Therefore, in addition to the various states mentioned above, the style corresponding to a skin ID also has a 2D display style configuration and a 3D display style configuration. Among them, the 2D display style is used to render a 2D tag with a 2D display style based on the style corresponding to the skin ID, and the 3D display style is used to render a 3D tag with a 3D display style based on the style corresponding to the skin ID.

[0054] The server 13 generates and stores a configuration table in advance according to rendering resources in various states of the skin ID, configurations of different display styles, etc. The rendering terminal 11 obtains and caches the configuration table from the server 13 .

[0055] When the label needs to be displayed on the target interface, the server 13 sends the skin ID of the label to the rendering terminal 11. After receiving the skin ID (default state), the rendering terminal 11 can query the configuration table according to the skin ID to determine the rendering resources and rendering rules required for rendering the label. After that, the rendering terminal 11 processes the rendering resources according to the label type, label size and nine-square rendering method, and typesets the processed rendering resources according to the rendering rules, thereby rendering a 3D label or a 2D label.

[0056] The server 13 may be an independent physical server, a server cluster composed of multiple servers, or a cloud server with cloud computing capabilities, etc., which is not limited in the present embodiment. The server 13 maintains the labels to be displayed on each target interface, the skin ID of each label, the configuration table, etc.

[0057] It should be noted that although Figure 1 The rendering end 11 and the editing end 12 are two independent terminal devices, however, the embodiment of the present application is not limited. In other feasible implementations, the rendering end 11 and the editing end 12 can also be the same terminal device, that is, the user sets the label style for the twin on the same terminal device, and renders and displays the target interface on the terminal device.

[0058] It should be understood that Figure 1 The number of rendering terminals 11, editing terminals 12, and servers 13 in the figure is only for illustration. In actual implementation, any number of rendering terminals 11, editing terminals 12, and servers 13 may be deployed according to actual needs.

[0059] Below, based on Figure 1 The rendering method described in the embodiment of the present application is described in detail in the implementation environment shown. For example, please refer to Figure 2 , Figure 2 : is a flowchart of a rendering method provided by an embodiment of the present application. This embodiment is described from the perspective of interaction between a terminal device and a server, and this embodiment includes:

[0060] 201. The terminal device identifies a rendering instruction requesting rendering of a target interface.

[0061] The terminal device is, for example, the above-mentioned rendering terminal. The display screen of the terminal device displays a digital world interface, and the user operates on the digital world interface to issue rendering instructions.

[0062] Figure 3 This is a schematic diagram of the digital world interface in the label rendering method provided in the embodiment of the present application. Figure 3 , there are buttons 31 to 37 on the digital world interface. Among them, buttons 31 to 34 are switching buttons for switching to different digital world interfaces; button 35 is a downward restore button, and buttons 36 and 37 are back buttons and forward buttons respectively. The user clicks any button to send a rendering instruction to the terminal device. The terminal device recognizes the rendering instruction. The rendering instruction is used to request rendering and displaying the target interface.

[0063] For example, when the user clicks button 32, the terminal device recognizes that the user wants to switch to the target interface corresponding to the button "Park Tour"; for another example, when the current digital world interface is maximized, the user clicks button 35, and the terminal device recognizes that the user wants to restore the current digital world interface downward, that is, the target interface is a reduced version of the current digital world interface. At this time, although label rendering is triggered, the same batch of labels are displayed on the digital world interface before and after the downward restoration, and the rendering speed is very fast, which gives the user the feeling that no label rendering has occurred.

[0064] It should be noted that Figure 3 It is actually a 3D schematic diagram. Figure 3 There are no pop-ups. Figure 3 Each label in is a 3D label.

[0065] 202. In response to the rendering instruction, the terminal device sends a first request to the server to request the skin ID of each tag in the tag set.

[0066] Correspondingly, the server receives the first request. Each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set at least includes a 3D tag.

[0067] In the embodiment of the present application, the set consisting of all tags on the target interface is called a tag set, and a tag set contains several, dozens, hundreds, thousands or even more tags. The tag set contains at least 3D tags. For example, if there is no pop-up window on the target interface, the tags in the tag set are all 3D tags. If there is a pop-up window on the target interface and there is a tag in the pop-up window, the tag in the pop-up window is a 2D tag, and the tag outside the pop-up window is a 3D tag.

[0068] 203. The server determines a tag set and a skin ID of each tag in the tag set according to the first request.

[0069] The server pre-stores a tag set corresponding to each target interface. After receiving the first request, the server determines the tag set according to the page identifier carried by the first request. Further, for each tag in the tag set, the server determines the skin ID of the tag. Different skin IDs correspond to different styles.

[0070] Figure 4A to Figure 4E Schematic diagram of different styles in the label rendering method provided in the embodiment of the present application, Figure 5 A schematic diagram of a label structure in a label rendering method provided in an embodiment of the present application. Figure 5 The labels shown are Figure 4E Please refer to the style shown. Figure 4A to Figure 4E Different styles have different visual effects, such as different background shapes, different label icons, and different positions of label icons. For example, Figure 4A In the , the label icon is located in the hexagon and is independent of the background plate, while Figure 4B The middle label icon is located in the background plate.

[0071] It should be noted that Figure 4A to Figure 4E Only five different styles are shown. In practice, there may be more than a dozen, a hundred, or even more styles. Different styles correspond to different skin IDs. For example, Figure 4A to Figure 4E The skin IDs of the styles shown are poi-label-0, poi-label-1, poi-label-2, poi-label-3, and poi-label-4. Based on these label styles, a large number of 2D labels and / or 3D labels can be rendered.

[0072] In the above tag set, it is very likely that some tags have the same style, that is, the same skin ID. For example, Figure 3 In the example, the skin IDs of the Starlight Stadium and the Sports Field are the same, and the skin IDs of the other tags are the same. After the server determines the tag set, it further determines the skin ID of each tag in the tag set.

[0073] 204. The server sends a first response to the terminal device.

[0074] Correspondingly, the terminal device receives a first response from the server. The first response is used to indicate the tag set and the skin ID of each tag in the tag set.

[0075] 205. The terminal device obtains the skin configuration of the label.

[0076] For each tag in the tag set, the terminal device obtains the skin configuration required to render the tag according to the skin ID of the tag. The skin configuration usually includes rendering resources and rendering rules. The rendering resources include the background board, etc. The rendering rules are used to indicate the layout of each component of the tag, such as whether the tag icon is located inside or outside the background board.

[0077] 206. For each 3D tag in the tag set, process the skin configuration according to the size of the 3D tag and the nine-square grid rendering method to render the 3D tag, and the size of the background plate in the processed skin configuration matches the size of the 3D tag.

[0078] Please refer to Figure 5 ,The size of the 3D tag is related to the length of the tag name, the font size of the tag name, etc. For example, the lengths of the two 3D tags Future Digital Library and Teaching Building A are different, so the sizes are different, but the skin IDs of the two 3D tags are the same, that is, the style is the same. For another example, the font sizes of the two 3D tags Starlight Stadium and Sports Field are different, so the sizes are different, but the skin IDs of the two 3D tags are the same, that is, the style is the same.

[0079] In an embodiment of the present application, the terminal device can obtain 3D labels of different sizes based on the same style and according to the sizes of different 3D labels using a nine-square grid rendering method.

[0080] The nine-grid rendering method has the advantages of strong adaptability, image quality maintenance, high flexibility, and support for polymorphism. Strong adaptability means that the nine-grid rendering can automatically adjust the size of the background board according to the size of the container to adapt it to different screens and devices, as well as the size of the label name.

[0081] Maintaining image quality means ensuring that the background plate does not appear stretched or distorted when it is scaled by dividing it into nine areas.

[0082] High flexibility means that the nine-grid rendering method can be applied to various scenes, including the rendering of background boards, buttons or panels, so that they can adapt to different size requirements.

[0083] Supporting polymorphism means: by configuring skin effects in multiple states, detecting the label state in real time, and rendering the corresponding skin effects in different states, so that the label supports polymorphism.

[0084] The tag rendering method provided in the embodiment of the present application is that after the terminal device recognizes the rendering instruction requesting the rendering of the target interface, it sends a first request to the server to request a tag set and the skin ID of each tag in the tag set. For each 3D tag in the tag set, the skin configuration is obtained according to the skin ID of the 3D tag, and the skin configuration is processed according to the size of the 3D tag and the nine-square rendering method to render the 3D tag. With this solution, the terminal device processes the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag, which greatly improves the visual effect of the digital world while achieving 3D tag rendering. Moreover, since different skin IDs correspond to different styles, multiple 3D tags of different sizes can be rendered based on the same style, and there is no need to design 3D tags for each size, which greatly saves design costs.

[0085] Optionally, in the above embodiment, for each 3D tag in the tag set, the terminal device processes the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag. First, for each tag in the tag set, the terminal device determines the tag type, and the tag type indicates whether the tag is a 2D tag or a 3D tag. For each tag in the tag set, when the tag is outside the pop-up window on the target interface, the tag is determined to be a 3D tag, and when the tag is inside the pop-up window, the tag is determined to be a 2D tag.

[0086] In the embodiment of the present application, the digital world is a world created in the virtual world that is a 1:1 replica of the real physical world. Therefore, the digital world interface is a 3D interface, and the labels on the 3D interface are 3D labels, such as Figure 3 As shown. However, some pop-ups will also be displayed on the digital world interface, and the labels in the pop-ups are 2D labels. When the terminal device requests to render the target interface, the target interface may be a pure 3D interface or a 3D interface containing pop-ups. When the target interface is a pure 3D interface, each label in the label set is a 3D label, and the nine-square rendering method is 3D rendering. When the target interface is a 3D interface containing pop-ups, the label set includes 2D labels located in the pop-up window and 3D labels located outside the pop-up window. Among them, the nine-square rendering method of 2D labels is 2D rendering.

[0087] After the terminal device obtains the tag set, for each tag, the terminal device determines the tag type according to the relative position relationship between the tag and the pop-up window. When a tag is located in the pop-up window, the terminal device determines that the tag is a 2D tag, and when a tag is located outside the pop-up window, the terminal device determines that the tag is a 3D tag.

[0088] With this solution, the terminal device determines the label type and rendering type according to the position of the label relative to the pop-up window on the target interface, and then renders the label, thereby achieving the purpose of improving the label rendering effect.

[0089] Optionally, in the above embodiment, for each 2D tag in the tag set, the terminal device converts the skin configuration into a frame syntax according to the size of the 2D tag. Afterwards, the terminal device mounts the frame syntax according to the position of the tag on the target interface to render the 2D tag.

[0090] For example, Figure 6 This is a schematic diagram of the nine-square grid in the label rendering method provided in the embodiment of the present application. Figure 6 , the background is a rectangle as shown by the thick black solid line in the figure. Based on the nine-grid rendering method, the terminal device divides the background into nine areas: four corners, four sides and a central area. The four corners are shown as the upper left corner, lower left corner, upper right corner and lower right corner in the figure, that is, Figure 6 Regions 1 to 4 in the image. The four corners are also called corner regions, and each corner region is used to form the four corners of the final rendered label.

[0091] The four edges are shown as the left area, right area, top area and bottom area in the figure, that is, Figure 6 The four edges are also called edge regions, which are repeated, scaled or modified in the final rendered label to match the size of the label.

[0092] The middle region, such as region 9 in the figure, is discarded by default. However, if the keyword fill is set, it will be used for label display. The middle region is scalable, while the corners and sides are fixed. The terminal device calculates and adjusts the position and size of each region according to the size of the container and the size of the nine regions, thereby achieving adaptive scaling of the background board. Among them, the container can be understood as the sum of the number of characters in the label name, etc.

[0093] For 2D tags, the terminal device converts the skin configuration into border syntax based on the Cascading Style Sheets (CSS) border-image. The border syntax includes at least one of the following parameters:

[0094] Border-image-slice, used to set the cutting size of the border image;

[0095] Border-image-width: used to set the width of the border image.

[0096] Border-image-outset: indicates the amount by which the border image exceeds the area.

[0097] Border-image-repeat is used to set the repeating form of the top, bottom, left, and right sides;

[0098] Border-image-source: indicates whether to use an image.

[0099] After the terminal device determines the frame syntax, it mounts the style corresponding to the skin ID to the location of the label on the target interface through the script (JavaScript, JS) document object model (Document Object Model, DOM), thereby rendering the label.

[0100] By adopting this solution, the terminal device realizes the rendering of the 2D label by mounting the border syntax, thereby achieving the purpose of improving the display effect of the 2D label in the pop-up window of the digital world interface.

[0101] Figure 7 This is a flowchart of the rendering of a 3D tag in the rendering method provided in an embodiment of the present application. This embodiment includes:

[0102] 701. Determine the size of the nine-square grid of the background plate in the skin configuration according to the size of the 3D tag.

[0103] For any tag in the tag set, when the tag type indicates that the tag is a 3D tag and the rendering type is 3D rendering, the electronic device implements 3D rendering based on a class implementing NinePalaceGridGeometry in Three.js. The class implementing NinePalaceGridGeometry in Three.js inherits from THREE.BufferGeometry and rewrites a constructor and an update method.

[0104] In this step, the terminal device updates the properties of the nine-square grid geometry, such as the stretching area of ​​the nine-square grid and the size of the image, through the update method, and calculates the left, right, top and bottom boundaries of the nine-square grid, that is, the size of the nine-square grid, according to the stretching area and image size in the input rendering rule parameters.

[0105] 702. Determine the UV coordinates of the nine-square grid according to the size of the nine-square grid.

[0106] Exemplarily, the terminal device determines the UV coordinates of the nine-square grid according to the size of the nine-square grid and the size of the image. The V coordinate means that all image files are a two-dimensional plane. The horizontal direction is U and the vertical direction is V.

[0107] 703. Update the vertex array and the coordinate array according to the size of the nine-grid and the UV coordinates.

[0108] For example, the terminal device determines the boundary of the nine-square grid according to the size of the nine-square grid, and updates the vertex array mVtx and the UV coordinate array nUVs according to the boundary and UV coordinates of the nine-square grid.

[0109] 704. Process the background plate according to the updated vertex array and coordinate array, so that the size of the background plate adapts to the size of the label.

[0110] Exemplarily, the terminal device uses a set attribute method to set the updated vertex array and coordinate array as attributes of the geometric body, that is, to process the background plate, so that the size of the background plate is adaptive to the size of the label.

[0111] 705. Display 3D rendering effect.

[0112] Exemplarily, the terminal device renders and displays the 3D label according to the background board etc. that has been processed by the rendering rules in the matching configuration.

[0113] By adopting this solution, the rendering of 2D labels is realized through the nine-square grid rendering method, so as to improve the display effect of 3D labels in the pop-up window of the digital world interface.

[0114] Optionally, in the above embodiment, before the terminal device sends a first request to the server to request the skin ID of each tag in the tag set in response to the rendering instruction, it also sends a second request to the server to obtain the configuration table. Accordingly, the server receives the second request. After receiving the second request, the server sends a second response carrying the configuration table to the terminal device. After receiving the second response, the terminal device caches the configuration table.

[0115] Exemplarily, the server pre-creates and stores a configuration table that maintains skin configurations for all styles of skin IDs. The second request is, for example, a Hypertext Transfer Protocol (HTTP) request. When a user roams in the digital world through a terminal device, the terminal device downloads the configuration table from the server. In this way, each time the terminal device requests to render the target interface, after obtaining the tag set and the skin ID of each tag in the tag set, for each skin ID, the terminal device can use the skin ID to look up the table to determine the skin configuration corresponding to the skin ID.

[0116] In the embodiment of the present application, the skin configuration is, for example, a JSON object, which contains the configuration information of a skin ID. Each skin ID has a unique identifier, such as poi-lable-0., poi-lable-1, etc. When the style corresponding to the skin ID contains multiple states, the skin configuration of the skin ID contains the rendering resources and rendering rules of each state. The structure of the skin configuration is as follows:

[0117] POI: Top-level building, indicating the skin configuration for each skin ID below.

[0118] Poi-lable-0: a skin ID. More skin IDs can be added for each POI as needed, such as Poi-lable-1, Poi-lable-2, etc. The more samples there are, the more skin IDs there are.

[0119] Assets: represents the URL of the rendering resources in different states of a skin ID. For example, a sample of a skin ID has four states: default, low, medium, and high. Each state has rendering resources, including the Uniform Resource Locator (URL) of resources such as the background plate (plane), line (line), icon (icon), and AR tag (ar tag).

[0120] 2D: Contains the configuration of 2D display style. This configuration includes background board (plane), line (line), icon (icon) and AR tag (ar Tag) elements. Each element has corresponding attributes, such as height, width and position.

[0121] 3D: Contains the configuration of 3D display style. This configuration includes background board (plane), line (line), icon (icon) and AR tag (ar Tag) elements. Each element has corresponding attributes, such as size, offset and center point.

[0122] With this solution, the terminal device pre-acquires and caches the configuration table. When rendering the target interface, the skin configuration can be determined by looking up the configuration table according to the skin ID, which is fast and accurate.

[0123] Optionally, in the above embodiment, the server further monitors whether there is a 3D tag in the tag set that switches from the first state to the second state. When the server determines that there is a 3D tag in the tag set that switches from the first state to the second state, a state change message is sent to the terminal device, where the state change message indicates the 3D tag whose state has changed and the second state of the 3D tag. After the terminal device monitors the state change message, it obtains the rendering resource corresponding to the second state of the 3D tag whose state has changed. After that, the 3D tag is re-rendered according to the rendering resource corresponding to the second state.

[0124] In an embodiment of the present application, the label state is a mechanism for distinguishing different states of labels added on the basis of the nine-grid rendering. When the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes rendering resources for each state, for example, these rendering resources correspond to the default state, low state, middle state, high state and super high state, respectively. Each label has a skin ID, that is, a label has a sample corresponding to it, and labels with the same skin ID correspond to the same sample. Based on the same sample, a 2D label or a 3D label can be rendered. When a label is a 3D label, the 3D label can have multiple states, namely the above-mentioned default state, low state, middle state, high state and super high state. The display effects of different states are different, and the alarm levels represented are also different. The state of the 3D label is related to the urgency of the alarm.

[0125] Figure 8 Schematic diagram of different states of the same 3D tag in the tag rendering method provided in the embodiment of the present application. Figure 8 , Figure 8 The 3D label of a camera is shown in Figure 1, which shows the low state, middle state, high state and super high state from left to right.

[0126] For example, a surveillance camera is set up in teaching building A. When the surveillance camera captures a fire, the 3D tag of the surveillance camera switches from the default state to the high state. After the server monitors that the 3D tag switches from the default state to the high state, it sends a state change message, such as an Instant Messaging (IM) message, to the terminal device.

[0127] After receiving the IM message, the terminal device obtains the rendering resource corresponding to the second state from the configuration table and re-renders the 3D tag according to the skin ID of the tag carried in the IM message and the identifier of the second state, so as to change the state of the 3D tag to the second state. For example, the terminal device calls the update method of 2D and 3D, and passes the second state in the IM message as a parameter to the update method to update the state of the 3D tag.

[0128] This solution adds label status based on the nine-grid rendering, making it more adaptive and flexible.

[0129] Optionally, in the above embodiment, before the terminal device executes the label rendering method described in the embodiment of the present application, it also displays an editing interface, on which the target interface and multiple styles are displayed, and different styles correspond to different skin IDs. Afterwards, the terminal device responds to the user's first selection operation, identifies the target twin selected by the user from the twins displayed on the target interface, and responds to the user's second selection operation of selecting the target style in the editing interface, configures the label of the target style for the target twin. Finally, the terminal device sends a third request to the server, and the third request carries the correspondence between the label of the twin on the target interface and the skin ID of the label. After receiving the third request, the server saves the correspondence.

[0130] Exemplarily, before the terminal device executes the label rendering method described in the embodiment of the present application, it also edits each twin on the target interface to configure a label for each twin. During the editing process, the terminal device selects the target twin on the target interface. Afterwards, a label of the target style is selected for the target twin in the style displayed on the editing interface. In addition, the user can also set a label name for the target twin through the editing interface. Afterwards, the terminal device configures a label of the target style for the target twin according to the label name entered by the user, the target style selected by the user, etc. The target twin is a twin outside the pop-up window of the target interface or a twin inside the pop-up window. When the target twin is a twin in the pop-up window, the terminal device generates a 3D label for the twin; when the target twin is a twin in the pop-up window, the terminal device generates a 2D label for the twin.

[0131] Fig. 9 This is a schematic diagram of the editing interface in the label rendering method provided in the embodiment of the present application. Fig. 9 , the user selects a building from the target interface as the target twin, as shown by the black highlighted twin in the figure. Then, the user selects style 1 from multiple styles for the target twin, that is, style 1 is used as the target style. Fig. 9There is no pop-up window on the digital world interface shown, which is a pure 3D interface. Therefore, the terminal device generates a 3D label for the target twin according to the style.

[0132] After the terminal device configures the tag for the target twin, it sends the corresponding relationship between the tag and the skin ID to the server. In this way, when the terminal device requests to render the target interface, it can quickly determine the skin ID of each tag.

[0133] Optionally, the terminal device can also send style 1, label name, etc. to the server, and the server generates a label for the target twin.

[0134] With this solution, through the editing interface, users can flexibly configure the label style for each twin, that is, configure a skin ID for each twin, which is highly flexible and simple to configure.

[0135] Optionally, in the above embodiment, the server also pregenerates a configuration table. In the process of generating the configuration table, the server loads the rendering resources in various states of each skin ID, and for each state of each skin ID, generates a background board and footer according to the corresponding rendering resources. Afterwards, the server determines the 2D display style and 3D display style of the label based on the background board and the footer, and generates the configuration table based on the rendering resources in different states of each skin ID, the 2D display style, the 3D display style, the height and width position information of the icon, and the height and width position information of the AR indication.

[0136] Exemplarily, the server loads the rendering resources of various states of a sample of a skin ID into the assets field of the configuration table according to the state dimension. Afterwards, the debugger is used to generate the values ​​of the CSS border images of the background plane and footer in sequence, and the values ​​of the generated border images are configured to the background plane field and line field of the 2D display style configuration in the configuration table; and the background plane field and line field of the 3D display style configuration. Afterwards, the server configures the width and height position information of the icon and AR tag to the configuration table according to the user interface (UI) design draft, thereby generating a configuration table.

[0137] Using this solution, the server pregenerates a configuration table containing various states of each skin ID. During the label rendering process, the server sends the configuration table to the terminal device, so that the terminal device caches the configuration table. The terminal device obtains rendering resources and rendering rules from the configuration table with fast speed and high accuracy.

[0138] Fig.10 is another flow chart of the label rendering method provided in an embodiment of the present application, and this embodiment includes:

[0139] 1001. Identify rendering instructions.

[0140] 1002. In response to the rendering instruction, send a first request to the server to request the skin ID of each tag in the tag set.

[0141] 1003. Send a second request to the server to obtain a configuration table.

[0142] The configuration table is used to indicate the skin configuration corresponding to each skin ID. The skin configuration includes rendering resources and rendering rules. When the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes the rendering resources of each state.

[0143] 1004. Cache configuration table.

[0144] 1005. For each tag in the tag set, obtain the skin configuration required for rendering the tag according to the configuration table and the skin ID of the tag.

[0145] 1006. For each tag in the tag set, determine the tag type of the tag. When the tag type indicates that the tag is a 2D tag, execute step 1007; when the tag type indicates that the tag is a 3D tag, execute step 1008.

[0146] 1007. Render and display the 2D label based on the nine-square grid rendering method of the 2D rendering type.

[0147] 1008. Render and display the 3D label based on the nine-square grid rendering method of the 3D rendering type.

[0148] The following is an embodiment of the device of the present application, which can be used to execute the embodiment of the method of the present application. For details not disclosed in the embodiment of the device of the present application, please refer to the embodiment of the method of the present application.

[0149] Fig.11 1 is a schematic diagram of a label rendering device provided in an embodiment of the present application. The label rendering device 1100 is integrated on a terminal device. The label rendering device 1100 includes: an identification module 111, a transceiver module 112, an acquisition module 113 and a processing module 114.

[0150] An identification module 111 is used to identify a rendering instruction requesting a rendering target interface;

[0151] The transceiver module 112 is used to send a first request to the server in response to the rendering instruction to request the skin ID of each tag in the tag set, each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set at least includes a 3D tag;

[0152] An acquisition module 113 is configured to acquire, for each 3D tag in the tag set, a skin configuration required for rendering the 3D tag according to the skin ID of the 3D tag;

[0153] The processing module 114 is used to process the skin configuration according to the size of the tag and the nine-square rendering method to render the 3D tag for each 3D tag in the tag set, and the size of the background plate in the processed skin configuration matches the size of the tag.

[0154] In a feasible implementation, the processing module 114 is used to determine, for each tag in the tag set, that the tag is a 3D tag when the tag is outside the pop-up window on the target interface, and to determine that the tag is a 2D tag when the tag is inside the pop-up window.

[0155] In a feasible implementation, the processing module 114 is also used to, when the tag set also includes 2D tags, for each 2D tag in the tag set, convert the skin configuration into border syntax according to the size of the 2D tag; and mount the border syntax according to the position of the tag on the target interface to render the 2D tag.

[0156] In a feasible implementation, the processing module 114 is used to determine the grid size of the background plate in the skin configuration according to the size of the 3D tag, and the grid size is used to indicate the left boundary, right boundary, upper boundary and lower boundary of the grid; determine the UV coordinates of the grid according to the grid size; update the vertex array and the coordinate array according to the grid size and the UV coordinates; process the background plate according to the updated vertex array and coordinate array to make the size of the background plate adapt to the size of the 3D tag; and layout the processed background plate according to the rendering rules in the skin configuration to render the 3D label.

[0157] In a feasible implementation, the transceiver module 112, before sending a first request to the server in response to the rendering instruction to request the skin ID of each tag in the tag set, is also used to send a second request to the server to obtain a configuration table, wherein the configuration table is used to indicate the skin configuration corresponding to each skin ID, wherein the skin configuration includes rendering resources and rendering rules, wherein the rendering resources include a background plate, and when the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes rendering resources for each state;

[0158] The processing module 114 is further configured to cache the configuration table.

[0159] In a feasible implementation, the processing module 114 processes the skin configuration according to the size of the 3D tag and the nine-square rendering method for each 3D tag in the tag set to render the 3D tag, and is further used to monitor state change messages; when the state change message indicates that the 3D tag switches from a first state to a second state, obtains rendering resources corresponding to the second state; and updates the 3D tag according to the rendering resources corresponding to the second state.

[0160] In a feasible implementation, the processing module 114 is further used to control the terminal device to display an editing interface, on which the target interface and multiple styles are displayed, and different styles correspond to different skin IDs; in response to a first selection operation of the user, the target twin selected by the user is identified from the twins displayed on the target interface; in response to a second selection operation of the user selecting a target style on the editing interface, a label of the target style is configured for the target twin;

[0161] The transceiver module 112 is further configured to send a third request to the server, so that the server saves the corresponding relationship between the tag and the skin ID of the tag.

[0162] The label rendering device provided in the embodiment of the present application can execute the actions of the terminal device in the above embodiment. Its implementation principle and technical effects are similar and will not be repeated here.

[0163] Fig.12 is a schematic diagram of a label rendering device provided in an embodiment of the present application. The label rendering device 1200 is integrated on a server. The label rendering device 1200 includes: a receiving module 121 , a processing module 122 and a sending module 123 .

[0164] The receiving module 121 is used to receive a first request from a terminal device, where the first request is sent after the terminal device recognizes a rendering instruction requesting to render a target interface;

[0165] A processing module 122 is used to determine a tag set and a skin ID of each tag in the tag set according to the first request, each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag;

[0166] The sending module 123 is used to send a first response to the terminal device, where the first response is used to indicate the tag set and the skin ID of each tag in the tag set.

[0167] In a feasible implementation, the receiving module 121 is further used to receive a second request from a terminal device, the second request is used to request a configuration table, the configuration table is used to indicate the skin configuration corresponding to each skin ID, the skin configuration includes rendering resources and rendering rules, when the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes the rendering resources of each state;

[0168] The sending module 123 is further configured to send a second response carrying the configuration table to the terminal device.

[0169] In a feasible implementation, the processing module 122 is further used to determine whether there is a 3D tag in the tag set that switches from the first state to the second state;

[0170] The sending module 123 is further configured to send a state change message to the terminal device when there is a 3D tag whose state has changed in the tag set, wherein the state change message is used to indicate that the state of the tag has changed to the second state.

[0171] In a feasible implementation, the processing module 122 is also used to load rendering resources in various states of each skin ID before the receiving module 121 receives the second request from the terminal device; for each state of each skin ID, a background board and a footer are generated according to the corresponding rendering resources; the 2D display style and the 3D display style of the label are determined according to the background board and the footer; the configuration table is generated according to the rendering resources in different states of each skin ID, the 2D display style, the 3D display style, the height and width position information of the icon, and the height and width position information of the AR indication.

[0172] In a feasible implementation, before the receiving module 121 receives the first request from the terminal device, it is also used to receive a third request from the terminal device, and the third request carries the corresponding relationship between the label of the twin on the target interface and the skin ID of the label;

[0173] The processing module 122 is further configured to store the corresponding relationship.

[0174] The label rendering device provided in the embodiment of the present application can execute the actions of the server in the above embodiment. Its implementation principle and technical effects are similar and will not be repeated here.

[0175] Fig.13 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application, and the electronic device is, for example, the above-mentioned terminal device or server. Fig.13The electronic device 1300 described in the embodiment of the present application includes: at least one processor 131, at least one network interface 134, a user interface 133, a memory 135, and at least one communication bus 132.

[0176] The communication bus 132 is used to realize the connection and communication between these components.

[0177] The user interface 133 may include a display screen (Display) and the like. Optionally, the user interface 133 may also include a standard wired interface, a wireless interface and the like.

[0178] The network interface 134 may include a standard wired interface and a wireless interface (such as a WI-FI interface).

[0179] Among them, the processor 131 may include one or more processing cores. The processor 131 uses various interfaces and lines to connect various parts within the entire electronic device 1300, and executes various functions and processes data of the electronic device 1300 by running or executing instructions, programs, code sets or instruction sets stored in the memory 135, and calling data stored in the memory 135. Optionally, the processor 131 can be implemented in at least one hardware form of digital signal processing (Digital Signal Processing, DSP), field programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). The processor 131 can integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU) and a modem. Among them, the CPU mainly processes the operating system, user interface and application programs; the GPU is responsible for rendering and drawing the content to be displayed on the display screen; the modem is used to process wireless communications. It can be understood that the above-mentioned modem may not be integrated into the processor 131, and it can be implemented separately through a chip.

[0180] Among them, the memory 135 may include a random access memory (Random Access Memory, RAM) and may also include a read-only memory (Read-Only Memory). Optionally, the memory 135 includes a non-transitory computer-readable storage medium. The memory 135 can be used to store instructions, programs, codes, code sets or instruction sets. The memory 135 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playback function, an image playback function, etc.), instructions for implementing the above-mentioned various method embodiments, etc.; the data storage area may store data involved in the above-mentioned various method embodiments, etc. The memory 135 may also be optionally at least one storage device located away from the aforementioned processor 131. As Fig.13 As shown, the memory 135 as a computer storage medium may include an operating system, a network communication module, a user interface module, and an application program.

[0181] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented in one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that include computer-usable program code.

[0182] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0183] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0184] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0185] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0186] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0187] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0188] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0189] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A label rendering method, characterized in that: Applied to a terminal device, the method comprises: Identify a rendering instruction requesting a rendering target interface; In response to the rendering instruction, a first request is sent to a server to request a skin ID of each tag in a tag set, each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag; For each 3D tag in the tag set, acquiring a skin configuration required for rendering the 3D tag according to the skin ID of the 3D tag; For each 3D tag in the tag set, the skin configuration is processed according to the size of the tag and the nine-square rendering method to render the 3D tag, and the size of the background plate in the processed skin configuration matches the size of the tag; For each 3D tag in the tag set, processing the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag includes: Determine the size of the nine-square grid of the background plate in the skin configuration according to the size of the 3D tag, where the size of the nine-square grid is used to indicate the left boundary, the right boundary, the upper boundary and the lower boundary of the nine-square grid; Determine the UV coordinates of the nine-square grid according to the size of the nine-square grid; Update the vertex array and the coordinate array according to the nine-grid size and the UV coordinates; Process the background plate according to the updated vertex array and coordinate array, so that the size of the background plate is adaptive to the size of the 3D label; The processed background plate is typeset according to the rendering rule in the skin configuration to render the 3D label.

2. The method according to claim 1, characterized in that Before processing the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag for each 3D tag in the tag set, the method further includes: For each tag in the tag set, when the tag is outside the pop-up window on the target interface, the tag is determined to be a 3D tag; when the tag is inside the pop-up window, the tag is determined to be a 2D tag.

3. The method according to claim 1, characterized in that The method further comprises: When the tag set further includes a 2D tag, for each 2D tag in the tag set, converting the skin configuration into a bounding box syntax according to a size of the 2D tag; The border syntax is mounted according to the position of the 2D label on the target interface to render the label.

4. The method according to any one of claims 1 to 3, characterized in that Before sending a first request to the server in response to the rendering instruction to request the skin ID of each tag in the tag set, the method further includes: Sending a second request to the server to obtain a configuration table, wherein the configuration table is used to indicate the skin configuration corresponding to each skin ID, wherein the skin configuration includes rendering resources and rendering rules, wherein the rendering resources include a background plate, and when the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes rendering resources for each state; The configuration table is cached.

5. The method according to claim 4, characterized in that After processing the skin configuration according to the size of the 3D tag and the nine-square rendering method to render the 3D tag for each 3D tag in the tag set, the method further includes: Listen for status change messages; When the state change message indicates that the 3D tag switches from the first state to the second state, acquiring rendering resources corresponding to the second state; The 3D tag is updated according to the rendering resource corresponding to the second state.

6. The method according to any one of claims 1 to 3, characterized in that: Displaying an editing interface, wherein the target interface and multiple styles are displayed on the editing interface, and different styles correspond to different skin IDs; In response to a first selection operation by the user, identifying a target twin selected by the user from the twins displayed on the target interface; In response to a second selection operation of a user selecting a target style in the editing interface, configuring a label of the target style for the target twin; A third request is sent to the server, so that the server saves the corresponding relationship between the tag and the skin ID of the tag.

7. A label rendering method, characterized in that: Applied to a server, the method comprises: Receiving a first request from a terminal device, where the first request is sent after the terminal device recognizes a rendering instruction requesting rendering of a target interface; Determine a tag set and a skin ID of each tag in the tag set according to the first request, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag; Sending a first response to the terminal device, where the first response is used to indicate the tag set and the skin ID of each tag in the tag set; receiving a second request from a terminal device, the second request being used to request a configuration table, the configuration table being used to indicate a skin configuration corresponding to each skin ID, the skin configuration including rendering resources and rendering rules, and when the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes rendering resources for each state; Sending a second response carrying the configuration table to the terminal device; Before receiving the second request from the terminal device, the method further includes: Load rendering resources in various states for each skin ID; For each state of each skin ID, generate background board and footer according to the corresponding rendering resources; Determine the 2D display style and the 3D display style of the label according to the background board and the foot line; The configuration table is generated according to the rendering resources in different states of each skin ID, the 2D display style, the 3D display style, the height and width position information of the icon, and the height and width position information of the AR indication.

8. The method according to claim 7, characterized in that Also includes: Determining whether there is a 3D tag in the tag set that switches from a first state to a second state; When there is a tag whose state has changed in the tag set, a state change message is sent to the terminal device, where the state change message is used to indicate that the state of the 3D tag is changed to the second state.

9. The method according to claim 7 or 8, characterized in that: Before receiving the first request from the terminal device, the method further includes: receiving a third request from the terminal device, the third request carrying a correspondence between a label of the twin on the target interface and a skin ID of the label; The corresponding relationship is saved.

10. A label rendering device, characterized in that: include: An identification module, used to identify a rendering instruction requesting a rendering target interface; a transceiver module, configured to send a first request to the server in response to the rendering instruction to request a skin ID of each tag in the tag set, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set at least includes a 3D tag; An acquisition module, configured to acquire, for each 3D tag in the tag set, a skin configuration required for rendering the 3D tag according to a skin ID of the 3D tag; A processing module, configured to process the skin configuration according to the size of the tag and the nine-square rendering method for each 3D tag in the tag set to render the 3D tag, wherein the size of the background plate in the processed skin configuration matches the size of the tag; The processing module is specifically used to determine the grid size of the background plate in the skin configuration according to the size of the 3D tag, and the grid size is used to indicate the left boundary, right boundary, upper boundary and lower boundary of the grid; determine the UV coordinates of the grid according to the grid size; update the vertex array and the coordinate array according to the grid size and the UV coordinates; process the background plate according to the updated vertex array and coordinate array to make the size of the background plate adapt to the size of the 3D tag; and layout the processed background plate according to the rendering rules in the skin configuration to render the 3D label.

11. A label rendering device, characterized in that: The device is integrated on a server, and comprises: A receiving module, configured to receive a first request from a terminal device, wherein the first request is sent after the terminal device recognizes a rendering instruction requesting rendering of a target interface; a processing module, configured to determine a tag set and a skin ID of each tag in the tag set according to the first request, wherein each tag in the tag set is a tag to be displayed on the target interface, different skin IDs correspond to different styles, and the tag set includes at least a 3D tag; A sending module, used for sending a first response to the terminal device, where the first response is used for indicating the tag set and the skin ID of each tag in the tag set; The sending module is further used to send a first response to the terminal device, where the first response is used to indicate the tag set and the skin ID of each tag in the tag set; The receiving module is further used to receive a second request from the terminal device, the second request is used to request a configuration table, the configuration table is used to indicate the skin configuration corresponding to each skin ID, the skin configuration includes rendering resources and rendering rules, when the style corresponding to the skin ID includes multiple states, the skin configuration of the skin ID includes the rendering resources of each state; The sending module is further used to send a second response carrying the configuration table to the terminal device; The processing module is also used to load rendering resources in various states of each skin ID before the receiving module receives the second request from the terminal device; for each state of each skin ID, a background board and a footer are generated according to the corresponding rendering resources; the 2D display style and the 3D display style of the label are determined according to the background board and the footer; the configuration table is generated according to the rendering resources in different states of each skin ID, the 2D display style, the 3D display style, the height and width position information of the icon, and the height and width position information of the AR indication.

12. An electronic device, characterized in that: include: A processor and a memory; wherein the memory stores a computer program, and the computer program is suitable for being loaded by the processor and executing the method steps as claimed in any one of claims 1 to 9.

13. A computer storage medium, characterized in that: The computer storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing the method steps as claimed in any one of claims 1 to 9.

Images