CN117876639A - Label rendering method, device, equipment and readable storage medium - Google Patents
Label rendering method, device, equipment and readable storage medium Download PDFInfo
- Publication number
- CN117876639A CN117876639A CN202410073331.1A CN202410073331A CN117876639A CN 117876639 A CN117876639 A CN 117876639A CN 202410073331 A CN202410073331 A CN 202410073331A CN 117876639 A CN117876639 A CN 117876639A
- Authority
- CN
- China
- Prior art keywords
- label
- tag
- skin
- rendering
- request
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating three-dimensional [3D] models or images for computer graphics
- G06T19/20—Editing of three-dimensional [3D] images, e.g. changing shapes or colours, aligning objects or positioning parts
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—Three-dimensional [3D] image rendering
- G06T15/10—Geometric effects
- G06T15/20—Perspective computation
- G06T15/205—Image-based rendering
-
- G—PHYSICS
- G06—COMPUTING OR CALCULATING; COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
- G06T2219/004—Annotating, labelling
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- Computer Graphics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Geometry (AREA)
- Architecture (AREA)
- Computer Hardware Design (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Processing Or Creating Images (AREA)
Abstract
Description
技术领域Technical Field
本申请实施例涉及数字孪生技术领域,特别涉及一种标签渲染方法、装置、设备及可读存储介质。Embodiments of the present application relate to the field of digital twin technology, and in particular, to a label rendering method, apparatus, device, and readable storage medium.
背景技术Background technique
随着互联网技术的飞速发展,数字孪生(Digital Twin)的热度与日俱增。基于数字孪生技术,能够将现实世界中的物理实体映射到数字世界中,一个物理实体在数字世界中的虚拟表示称之为孪生体。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.
数字世界中,存在大量起标注作用的标签,如2D标签或3D标签等。In the digital world, there are a large number of labels that serve as annotations, such as 2D labels or 3D labels.
然而,目前的标签渲染方式仅支持2D标签的渲染,并不支持3D标签的渲染。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
本申请实施例提供一种标签渲染方法、装置、设备及可读存储介质,仅需设计少量的样式,基于九宫格渲染方式和少量的样式,在数字世界的界面上渲染出3D标签,设计成本低,实现3D标签渲染的同时,极大程度上提升了数字世界的视觉效果。The embodiments of the present application provide a label rendering method, apparatus, device and readable storage medium, which only require the design of a small number of styles, and based on the nine-square grid rendering method and a small number of styles, render a 3D label 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.
第一方面,本申请实施例提供一种标签渲染方法,应用于终端设备,该方法包括: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:
识别请求渲染目标界面的渲染指令;Identify a rendering instruction requesting a rendering target interface;
响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;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;
对于所述标签集合中的每个3D标签,根据所述3D标签的皮肤ID获取渲染所述3D标签所需的皮肤配置;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;
对于所述标签集合中的每个3D标签,根据所述标签的尺寸和九宫格渲染方式处理所述皮肤配置以渲染出所述3D标签,处理后的皮肤配置中背景板的尺寸与所述标签的尺寸相匹配。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.
第二方面,本申请实施例提供一种标签渲染方法,应用于服务器,所述方法包括: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:
接收来自终端设备的第一请求,所述第一请求为终端设备识别到请求渲染目标界面的渲染指令后发送的;Receiving a first request from a terminal device, where the first request is sent after the terminal device recognizes a rendering instruction requesting a rendering target interface;
根据所述第一请求确定标签集合,以及所述标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;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;
向所述终端设备发送第一响应,所述第一响应用于指示所述标签集合以及所述标签集合中各标签的皮肤ID。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.
第三方面,本申请实施例提供一种标签渲染装置,集成在终端设备上,该标签渲染装置包括: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:
识别模块,用于识别请求渲染目标界面的渲染指令;An identification module, used for identifying a rendering instruction requesting a rendering target interface;
收发模块,用于响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;a transceiver module, configured to send a first request to a server in response to the rendering instruction to request a skin ID of each tag in a 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 includes at least a 3D tag;
获取模块,用于对于所述标签集合中的每个3D标签,根据所述3D标签的皮肤ID获取渲染所述3D标签所需的皮肤配置;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 the skin ID of the 3D tag;
处理模块,用于对于所述标签集合中的每个3D标签,根据所述标签的尺寸和九宫格渲染方式处理所述皮肤配置以渲染出所述3D标签,处理后的皮肤配置中背景板的尺寸与所述标签的尺寸相匹配。The 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.
第四方面,本申请实施例提供一种标签渲染装置,集成在服务器,该装置包括: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:
接收模块,用于接收来自终端设备的第一请求,所述第一请求为终端设备识别到请求渲染目标界面的渲染指令后发送的;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;
处理模块,用于根据所述第一请求确定标签集合,以及所述标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;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;
发送模块,用于向所述终端设备发送第一响应,所述第一响应用于指示所述标签集合以及所述标签集合中各标签的皮肤ID。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.
第五方面,本申请实施例提供一种电子设备,包括:处理器和存储器;其中,所述存储器存储有计算机程序,所述计算机程序适于由所述处理器加载并执行如上第一方面或第一方面各种可能的实现方式所述的方法;或者,所述计算机程序适于由所述处理器加载并执行如上第二方面或第二方面各种可能的实现方式所述的方法。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.
第六方面,本申请实施例提供一种计算机可读存储介质,所述计算机可读存储介质中存储有计算机指令,所述计算机指令在被处理器执行时用于实现如上第一方面或第一方面各种可能的实现方式所述的方法;或者,所述计算机指令在被处理器执行时用于实现如上第二方面或第二方面各种可能的实现方式所述的方法。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.
第七方面,本申请实施例提供一种包含计算程序的计算机程序产品,所述计算机程序被处理器执行时实现如上第一方面或第一方面各种可能的实现方式所述的方法;或者,所述计算机程序被处理器执行时实现如上第二方面或第二方面各种可能的实现方式所述的方法。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.
本申请实施例提供的标签渲染方法、装置、设备及可读存储介质,终端设备识别到请求渲染目标界面的渲染指令后,向服务器发送第一请求以请求标签集合和标签集合中各标签的皮肤ID,对于标签集合中的每个3D标签,根据该3D标签的皮肤ID获取皮肤配置,并根据3D标签的尺寸和九宫格渲染方式处理皮肤配置以渲染出3D标签。采用该种方案,终端设备根据3D标签的尺寸和九宫格渲染方式处理皮肤配置,以渲染出3D标签,实现3D标签渲染的同时,极大程度上提升了数字世界的视觉效果。而且,由于不同皮肤ID对应不同的样式,基于同一个样式能够渲染出多个不同尺寸的3D标签,无需针对每种尺寸都设计3D标签,极大程度上节约了设计成本。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
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。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 paying any creative work.
图1是本申请实施例提供的标签渲染方法所适用的实施环境示意图;FIG1 is a schematic diagram of an implementation environment applicable to the label rendering method provided in an embodiment of the present application;
图2是本申请实施例提供的渲染方法的流程图;FIG2 is a flow chart of a rendering method provided in an embodiment of the present application;
图3是本申请实施例提供的标签渲染方法中数字世界界面示意图;FIG3 is a schematic diagram of a digital world interface in a label rendering method provided in an embodiment of the present application;
图4A~图4E为本申请实施例提供的标签渲染方法中不同样式的示意图;4A to 4E are schematic diagrams of different styles in the label rendering method provided in an embodiment of the present application;
图5为本申请实施例提供的标签渲染方法中标签结构的示意图;FIG5 is a schematic diagram of a label structure in a label rendering method provided in an embodiment of the present application;
图6是本申请实施例提供的标签渲染方法中九宫格的示意图;FIG6 is a schematic diagram of a nine-square grid in a label rendering method provided in an embodiment of the present application;
图7是本申请实施例提供的渲染方法中3D标签的渲染流程图;FIG7 is a flowchart of rendering a 3D tag in a rendering method provided in an embodiment of the present application;
图8是本申请实施例提供的标签渲染方法中同一标签的不同状态的示意图;FIG8 is a schematic diagram of different states of the same tag in the tag rendering method provided in an embodiment of the present application;
图9是本申请实施例提供的标签渲染方法中的编辑界面示意图;9 is a schematic diagram of an editing interface in a label rendering method provided in an embodiment of the present application;
图10是本申请实施例提供的标签渲染方法的另一个流程图;FIG10 is another flow chart of the label rendering method provided in an embodiment of the present application;
图11是本申请实施例提供的一种标签渲染装置的示意图;FIG11 is a schematic diagram of a label rendering device provided in an embodiment of the present application;
图12是本申请实施例提供的一种标签渲染装置的示意图;FIG12 is a schematic diagram of a label rendering device provided in an embodiment of the present application;
图13是本申请实施例提供的电子设备的结构示意图。FIG. 13 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application.
具体实施方式Detailed ways
当前,基于数字孪生技术能够在虚拟世界中打造出与真实的物理世界1:1复刻的数字世界。物理世界中的每个物理实体,在数字世界中都存在与之对应的孪生体。孪生体例如为教学楼、摄像头、广场、操场等。同时,数字世界中还包括大量起标注作用的标签。例如,三维地理信息系统(Geographic Information System,GIS)地图是一种常见的数字世界,三维GIS地图中存在大量的3D标签和2D标签。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.
当用户刷新地图时,不可避免的需要渲染并显示大量的3D标签。然而,业界并没有3D标签的渲染方式。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.
对于2D标签,传统的渲染方式中,需要设计师预先设计好各种尺寸和形状的标签。渲染时,终端设备按照标签的尺寸和形状渲染出标签并显示。例如,一个标签的标签名称为未来数字图书馆,另一个标签的名称为教学楼A,虽然这两个标签除了长度不一样其他属性都一样,但是设计师得设计出两个标签。再如,一个标签的标签名称为摄像头B,另一个标签的名称为报警器C,这两个标签除了字号不同其他属性都一样,摄像头B的字号为小五号,报警器C的字号为四号字体,视觉效果上摄像头B这一标签大一些。同理,设计师也得设计出两个标签。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.
显然,上述的标签渲染方式,设计成本高。Obviously, the above label rendering method has high design cost.
为解决设计成本高的问题,常见的方式是拉伸,即不同尺寸的标签基于同一个样本拉伸得到。例如,未来数字图书馆和教学楼A这两个标签,基于同一个样本拉伸得到。这种渲染方式虽然节约了设计成本,但是容易发生变形,整体效果很差。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.
基于此本申请实施例提供一种标签渲染方法、装置、设备及可读存储介质,仅需设计少量的样式,基于九宫格渲染方式和少量的样式,在数字世界的界面上渲染出3D标签,实现3D标签渲染的同时,极大程度上提升了数字世界的视觉效果。而且,无论是2D标签还是3D标签的渲染,无需对样式进行拉伸,不会产生形变。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.
图1是本申请实施例提供的标签渲染方法所适用的实施环境示意图。请参照图1,该实施环境包括渲染端11、编辑端12和服务器13。渲染端11、编辑端12分别与服务器13之间建立网络连接。Fig. 1 is a schematic diagram of an implementation environment applicable to the tag rendering method provided in an embodiment of the present application. Referring to Fig. 1, the 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.
渲染端11例如是智能交互平板、笔记本电脑、台式机、手机、平板电脑等,本申请实施例并不限制。渲染端11具有显示屏,用于显示渲染好的目标界面。例如,数字世界的界面上有两个按钮,一个按钮的名称为技术介绍,用于进入技术介绍界面,另一个按钮的名称为校园导览,用于进入校园导览界面,技术介绍界面和校园导览界面上各自有很多个标签。用户点击“技术介绍”按钮,则目标界面为技术介绍界面,渲染端11渲染并显示技术介绍界面,该界面至少具有孪生体以及孪生体的标签。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.
一个目标界面上可以有很多个标签,这些标签仅对应少量的样式。例如,目标界面上有200个标签,但是实际上只有6个样式。也就是说,设计师只需要设计6个样式,渲染端11就能基于该6个样式渲染出200个标签。以未来数字图书馆和教学楼A这两个标签为例,这两个标签用同一种样式,但是渲染出的视觉效果不一样:未来数字图书馆的标签要长一些,而教学楼A的标签要短一些。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.
编辑端12例如是智能交互平板、笔记本电脑、台式机、手机、平板电脑等,本申请实施例并不限制。编辑端12用于显示编辑界面,该编辑界面上显示孪生体和多种样式。用户在编辑界面上进行操作,以为用户选中的目标孪生体配置标签的样式。不同样式对应不同的皮肤ID,当为一个标签配置好样式后,编辑端12将该标签的样式对应的皮肤ID和标签标识等发送给服务器13,相当于在服务器13中录入标签和该标签的皮肤ID的对应关系。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 of a label is configured, 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.
每个皮肤ID具有唯一标识符如poi-label-0、poi-label-1等。不同皮肤ID对应不同的样式,每个样式又有多种不同的状态,如默认(default)状态、低级(low)状态、中级(middle)状态、高级(high)状态、超高级(superhigh)状态,不同状态的显示效果不同。每种状态具有对应的渲染资源和渲染规则。渲染资源包括渲染标签用到的背景板等,渲染规则用于指示标签的各个组成部分如何排版。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.
另外,一个标签具有2D展示风格或3D展示风格,因此,一个皮肤ID对应的样式除了上述的各种状态外,还具有2D展示样式的配置和3D展示样式的配置。其中,2D展示样式用于基于皮肤ID对应的样式渲染出2D展示风格的2D标签,3D展示样式用于基于皮肤ID对应的样式渲染出3D展示风格的3D标签。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.
服务器13预先根据皮肤ID各状态下的渲染资源、不同展示样式的配置等生成配置表并存储。渲染端11从服务器13获取并缓存该配置表。The server 13 generates and stores a configuration table in advance according to the rendering resources in each state of the skin ID, the configuration of different display styles, etc. The rendering terminal 11 obtains and caches the configuration table from the server 13 .
当需要在目标界面上显示该标签时,服务器13向渲染端11发送该标签的皮肤ID,渲染端11收到皮肤ID(默认是default状态)后,根据皮肤ID查询配置表即可确定出渲染标签所需的渲染资源和渲染规则。之后,渲染端11根据标签类型、标签的尺寸和九宫格渲染方式处理渲染资源,并根据渲染规则排版处理后的渲染资源,从而渲染出3D标签或2D标签标签。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 determine the rendering resources and rendering rules required for rendering the label by querying the configuration table according to the skin ID. 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.
服务器13可以是独立的物理服务器,也可以是多台服务器构成的服务器集群,还可以是具有云计算能力的云服务器等,本申请实施例并不限制。服务器13保持每个目标界面上待显示的标签、各标签的皮肤ID、配置表等。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.
需要说明的是,虽然图1中渲染端11和编辑端12是两个独立的终端设备,然而,本申请实施例并不限制。其他可行的实现方式中,渲染端11和编辑端12也可以是同一个终端设备,即用户在同一个终端设备上为孪生体设置标签的样式等,并在该终端设备上渲染目标界面并显示。It should be noted that although the rendering end 11 and the editing end 12 in FIG. 1 are two independent terminal devices, the embodiment of the present application is not limited thereto. 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.
应当理解的是,图1中的渲染端11、编辑端12和服务器13的数量仅仅是示意性的。实际实现中,根据实际需求部署任意数量的渲染端11、编辑端12和服务器13。It should be understood that the number of rendering terminals 11, editing terminals 12 and servers 13 in Figure 1 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.
下面,基于图1所示实施环境,对本申请实施例所述的渲染方法进行详细说明。示例性的,请参照图2,图2是本申请实施例提供的渲染方法的流程图。本实施例是从终端设备和服务器交互的角度说明,本实施例包括:Below, based on the implementation environment shown in FIG1, the rendering method described in the embodiment of the present application is described in detail. For example, please refer to FIG2, which is a flow chart of the rendering method provided by the embodiment of the present application. This embodiment is described from the perspective of the interaction between the terminal device and the server, and this embodiment includes:
201、终端设备识别请求渲染目标界面的渲染指令。201. The terminal device identifies a rendering instruction requesting rendering of a target interface.
终端设备例如为上述的渲染端。终端设备的显示屏上显示数字世界界面,用户在数字世界界面上进行操作从而下发渲染指令。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.
图3是本申请实施例提供的标签渲染方法中数字世界界面示意图。请参照图3,数字世界界面上有按钮31~按钮37。其中,按钮31~按钮34为切换按钮,用于切换到不同的数字世界界面;按钮35为向下还原按钮,按钮36和按钮37分别为后退按钮和前进按钮。用户点击任意一个按钮,从而向终端设备发送渲染指令。终端设备识别该渲染指令。该渲染指令用于请求渲染并显示目标界面。FIG3 is a schematic diagram of a digital world interface in a label rendering method provided in an embodiment of the present application. Referring to FIG3 , 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.
例如,用户点击按钮32,终端设备识别出用户期望切换至园区导览这一按钮对应的目标界面;再如,当当前的数字世界界面最大化时,用户点击按钮35,终端设备识别出用户期望向下还原当前的数字世界界面,即目标界面为当前数字世界界面的缩小版。此时,虽然触发了标签渲染,但是由于向下还原前后数字世界界面上显示同一批标签,且渲染速度很快,给用户的感觉就像没发生标签渲染一样。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 Guide"; 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.
需要说明的是,图3实际上是一个3D示意图,图3中没有弹窗,图3中的各个标签为3D标签。It should be noted that FIG3 is actually a 3D schematic diagram. There is no pop-up window in FIG3 , and each label in FIG3 is a 3D label.
202、终端设备响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID。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.
相应的,服务器接收第一请求。所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,标签集合中至少包含3D标签。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.
本申请实施例中,将目标界面上所有标签构成的集合称之为标签集合,一个标签集合包含几个、几十个、成百上千甚至更多的标签。标签集合中至少包含3D标签。例如,若目标界面上没有弹窗,则标签集合中的标签均为3D标签,若目标界面上有弹窗,且弹窗内有标签,则弹窗内的标签为2D标签,弹窗外的标签为3D标签。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.
203、服务器根据所述第一请求确定标签集合,以及标签集合中各标签的皮肤ID。203. The server determines a tag set and a skin ID of each tag in the tag set according to the first request.
服务器上预先存储每个目标界面对应的标签集合。服务器接收到第一请求后,根据第一请求携带的页面标识等确定标签集合。进一步的,对于标签集合中的每个标签,服务器确定该标签的皮肤ID。不同皮肤ID对应不同的样式。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.
图4A~图4E为本申请实施例提供的标签渲染方法中不同样式的示意图,图5为本申请实施例提供的标签渲染方法中标签结构的示意图。图5所示标签采用图4E所示样式。请参照图4A~图4E,不同样式的视觉效果不同,如背景板的形状不同、标签图标不同、标签图标的位置不同等。例如,图4A中,标签图标位于六边形内和背景板独立,而图4B中标签图标位于背景板内。Figures 4A to 4E are schematic diagrams of different styles in the label rendering method provided in an embodiment of the present application, and Figure 5 is a schematic diagram of the label structure in the label rendering method provided in an embodiment of the present application. The label shown in Figure 5 adopts the style shown in Figure 4E. Please refer to Figures 4A to 4E. Different styles have different visual effects, such as different shapes of background boards, different label icons, and different positions of label icons. For example, in Figure 4A, the label icon is located in the hexagon and is independent of the background board, while in Figure 4B, the label icon is located in the background board.
需要说明的是,图4A~图4E仅示意出5中不同的样式,实际中,样式可以是十几个、一百多甚至更多。不同样式对应不同的皮肤ID,例如,图4A~图4E所示样式的皮肤ID分别为poi-label-0、poi-label-1、poi-label-2、poi-label-3、poi-label-4。基于该些标签样式,能够渲染出大量的2D标签和/或3D标签。It should be noted that Figures 4A to 4E only illustrate 5 different styles. In practice, there can be more than a dozen, more than a hundred or even more styles. Different styles correspond to different skin IDs. For example, the skin IDs of the styles shown in Figures 4A to 4E are poi-label-0, poi-label-1, poi-label-2, poi-label-3, and poi-label-4, respectively. Based on these label styles, a large number of 2D labels and/or 3D labels can be rendered.
上述的标签集合中,很有可能部分标签的样式相同,即皮肤ID相同。例如,图3中,星光球场和运动场的皮肤ID相同,其余标签的皮肤ID相同。服务器确定出标签集合后,进一步的确定出标签集合中每个标签的皮肤ID。In the above tag set, it is very likely that some tags have the same style, that is, the same skin ID. For example, in Figure 3, 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.
204、服务器向终端设备发送第一响应。204. The server sends a first response to the terminal device.
相应的,终端设备接收来自服务器的第一响应。第一响应用于指示所述标签集合以及所述标签集合中各标签的皮肤ID。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.
205、终端设备获取标签的皮肤配置。205. The terminal device obtains the skin configuration of the label.
对于标签集合中的每个标签,终端设备根据该标签的皮肤ID获取渲染所述标签所需的皮肤配置。皮肤配置通常包含渲染资源和渲染规则,渲染资源包括背景板等,渲染规则用于指示标签的各个构成部分的排版方式,如标签图标位于背景板内或背景板外等。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.
206、对于所述标签集合中的每个3D标签,根据所述3D标签的尺寸和九宫格渲染方式处理所述皮肤配置以渲染出所述3D标签,处理后的皮肤配置中背景板的尺寸与所述3D标签的尺寸相匹配。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.
请参照图5,3D标签的尺寸和标签名称的长度、标签名称的字号等有关。例如,未来数字图书馆和教学楼A这两个3D标签的长度不同,因此尺寸不同,但是这两个3D标签的皮肤ID相同,即样式相同。再如,星光球场和运动场这两个3D标签的字号不同,因此尺寸不同,但是这两个3D标签的皮肤ID相同,即样式相同。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.
本申请实施例中,终端设备能够基于同一个样式,根据不同3D标签的尺寸,利用九宫格渲染方式得到不同尺寸的3D标签。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.
九宫格渲染方式具有自适应性强、保持图像质量、灵活性高、支持多态等优势。自适应性强是指:九宫格渲染能够根据容器的尺寸自动调整背景板的大小,使其适应不同屏幕和设备,以及标签名称的大小。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.
保持图像质量是指:通过将背景板分成九个区域,确保背景板在缩放时不会出现拉伸或失真。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.
灵活性高是指:九宫格渲染方式能够应用于各种场景,包括背景板、按钮或面板等的渲染,使他们能适应不同的尺寸需求。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.
支持多态是指:通过配置多种状态的皮肤效果,实时检测标签状态,不同状态渲染与之对应的皮肤效果,从而让标签支持多态。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.
本申请实施例提供的标签渲染方式,终端设备识别到请求渲染目标界面的渲染指令后,向服务器发送第一请求以请求标签集合和标签集合中各标签的皮肤ID,对于标签集合中的每个3D标签,根据该3D标签的皮肤ID获取皮肤配置,并根据3D标签的尺寸和九宫格渲染方式处理皮肤配置以渲染出3D标签。采用该种方案,终端设备根据3D标签的尺寸和九宫格渲染方式处理皮肤配置,以渲染出3D标签,实现3D标签渲染的同时,极大程度上提升了数字世界的视觉效果。而且,由于不同皮肤ID对应不同的样式,基于同一个样式能够渲染出多个不同尺寸的3D标签,无需针对每种尺寸都设计3D标签,极大程度上节约了设计成本。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.
可选的,上述实施例中,对于所述标签集合中的每个3D标签,终端设备根据所述3D标签的尺寸和九宫格渲染方式处理所述皮肤配置,以渲染出所述3D标签之前,首先,对于标签集合中的每个标签,终端设备确定标签类型,标签类型指示该标签是2D标签或3D标签。对于所述标签集合中的每个标签,当所述标签位于所述目标界面上的弹窗外时,确定所述标签为3D标签,当所述标签位于所述弹窗内时,确定所述标签为2D标签。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.
本申请实施例中,数字世界是在虚拟世界中打造出的、与真实的物理世界1:1复刻的世界。因此,数字世界界面是3D界面,3D界面上的标签为3D标签,如图3所示。但是,数字世界界面上,还会显示一些弹窗等,弹窗内的标签是2D标签。终端设备请求渲染目标界面时,该目标界面有可能是一个纯3D的界面,也有可能是包含弹窗的3D界面。当目标界面是纯3D界面时,标签集合中的各个标签为3D标签,九宫格渲染方式为3D渲染。当目标界面是包含弹窗的3D界面时,标签集合中包含位于弹窗内的2D标签和位于弹窗外的3D标签。其中,2D标签的九宫格渲染方式为2D渲染。In an 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, as shown in Figure 3. However, some pop-up windows will also be displayed on the digital world interface, and the labels in the pop-up windows 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 a pop-up window. 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 a pop-up window, the label set includes a 2D label located in the pop-up window and a 3D label located outside the pop-up window. Among them, the nine-square rendering method of the 2D label is 2D rendering.
终端设备获取标签集合后,对于每个标签,终端设备根据标签和弹窗的相对位置关系,确定标签的标签类型。当一个标签位于弹窗内时,终端设备确定该标签为2D标签,当一个标签位于弹窗外时,终端设备确定该标签为3D标签。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.
采用该种方案,终端设备根据标签相对于目标界面上弹窗的位置,确定标签类型和渲染类型进而渲染标签,实现提高标签渲染效果的目的。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.
可选的,上述实施例中,对于所述标签集合中的每个2D标签,终端设备根据所述2D标签的尺寸将所述皮肤配置转换为边框语法。之后,终端设备根据所述标签在所述目标界面上的位置挂载所述边框语法,以渲染出所述2D标签。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.
示例性的,图6是本申请实施例提供的标签渲染方法中九宫格的示意图。请参照图6,背景板如图中粗黑实线所示矩形。基于九宫格渲染方式,终端设备将背景板分成九个区域:四个角、四条边和一个中心区域。四个角如图中的左上角、左下角、右上角和右下角所示,即图6中的区域1~区域4。四个角又称作角区域(corner region),每一个角区域都被用于组成最终渲染出的标签的四个角。Exemplarily, Figure 6 is a schematic diagram of the nine-square grid in the label rendering method provided in an embodiment of the present application. Please refer to Figure 6, the background plate is a rectangle as shown by the thick black solid line in the figure. Based on the nine-square grid rendering method, the terminal device divides the background plate into nine areas: four corners, four sides and a center 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, areas 1 to 4 in Figure 6. The four corners are also called corner regions, and each corner region is used to form the four corners of the final rendered label.
四条边如图中的左部区域、右侧区域、顶部区域和底部区域所示,即图6中的区域5~区域8。四条边又称作边区域(edge region),在最终染出的标签中重复、缩放或修改他们以匹配标签的大小。The four edges are shown as the left region, right region, top region and bottom region in the figure, namely, regions 5 to 8 in Figure 6. The four edges are also called edge regions, which are repeated, scaled or modified in the final dyed label to match the size of the label.
中心区域(middle region)如图中的区域9,默认情况下被丢弃。但是如果设置了关键字fill则会将其用于标签显示。中心区域是可伸缩的,而角和边是固定的。终端设备通过根据容器的尺寸和九个区域的大小,来计算和调整每个区域的位置和尺寸,从而实现背景板的自适应缩放。其中,可以将容器理解为标签名称中字符的数量的总和等。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.
对于2D标签,终端设备基于层叠样式表(Cascading Style Sheets,CSS)边框图片(Border-image),将皮肤配置转换为边框语法。边框语法包括下属参数中的至少一个: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:
边框图片切片(Border-image-slice),用来设置边框图片的切割尺寸;Border-image-slice, used to set the cutting size of the border image;
边框图片宽度(Border-image-width),用来设置边框图片的宽度;Border-image-width: used to set the width of the border image.
边框图片超界幅度(Border-image-outset),用于指示边框图片超出区域的量;Border-image-outset: indicates the amount by which the border image exceeds the area.
边框图片重复(Border-image-repeat),用来设置上下左右四边的重复形式;Border-image-repeat is used to set the repeating form of the top, bottom, left, and right sides;
边框图片路径(Border-image-source),表示是否使用图片。Border-image-source: indicates whether to use an image.
终端设备确定出边框语法后,将皮肤ID对应的样式通过脚本(JavaScript,JS)文档对象模型(Document Object Model,DOM)挂载到目标界面上标签所在的位置,从而渲染出标签。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.
采用该种方案,终端设备通过挂载边框语法的方式实现2D标签的渲染,实现提高数字世界界面弹窗中2D标签的显示效果的目的。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.
图7是本申请实施例提供的渲染方法中3D标签的渲染流程图。本实施例包括:FIG7 is a flowchart of rendering a 3D tag in a rendering method provided in an embodiment of the present application. This embodiment includes:
701、根据所述3D标签的尺寸确定所述皮肤配置中背景板的九宫格尺寸。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.
对于标签集合中任意一个标签,当所述标签类型指示所述标签为3D标签、渲染类型为3D渲染时,电子设备基于Three.js中实现九宫格几何体(NinePalaceGridGeometry)的类实现3D渲染。Three.js中实现九宫格几何体的类继承自THREE.BufferGeometry,并重写了构造函数和update方法。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.
本步骤中,终端设备通过更新(update)方法更新九宫格几何体的属性,例如九宫格的拉伸区域和图像的尺寸,并根据传入的渲染规则参数中的拉伸区域和图像尺寸计算出九宫格的左、右、上、下边界,即九宫格尺寸。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.
702、根据所述九宫格尺寸,确定九宫格的UV坐标。702. Determine the UV coordinates of the nine-square grid according to the size of the nine-square grid.
示例性的,终端设备根据九宫格的尺寸和图像的尺寸确定九宫格的UV坐标。V坐标是指所有的图象文件都是二维的一个平面。水平方向是U,垂直方向是V。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.
703、根据所述九宫格尺寸和所述UV坐标更新顶点数组和坐标数组。703. Update the vertex array and the coordinate array according to the size of the nine-grid and the UV coordinates.
示例的,终端设备根据九宫格的尺寸确定九宫格的边界,根据九宫格的边界和UV坐标更新顶点数组mVtx和UV坐标数组nUVs。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.
704、根据更新后的顶点数组和坐标数组处理所述背景板,以使得所述背景板的尺寸自适应所述标签的尺寸。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.
示例性的,终端设备使用设置属性(set Attribute)方式,将更新后的顶点数组和坐标数组分别设置为几何体的属性,即处理背景板,从而使得背景板的尺寸自适应所述标签的尺寸。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.
705、展示3D渲染效果。705. Show 3D rendering effect.
示例性的,终端设备根据匹配配置中的渲染规则排版处理后的背景板等,渲染出3D标签并展示。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.
采用该种方案,通过九宫格渲染方式实现2D标签的渲染,实现提高数字世界界面弹窗中3D标签的显示效果的目的。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.
可选的,上述实施例中,终端设备响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID之前,还向所述服务器发送第二请求以获取配置表。相应的,服务器接收第二请求。服务器接收到第二请求后,向终端设备发送携带配置表的第二响应。终端设备接收到第二响应后缓存配置表。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.
示例性的,服务器预先创建并存储配置表,该配置表保持所有样式的皮肤ID的皮肤配置。第二请求例如为超文本传输协议(Hypertext Transfer Protocol,HTTP)请求等。用户通过终端设备漫游于数字世界时,终端设备从服务器下载配置表。这样一来,终端设备每次请求渲染目标界面时,获取到标签集合以及标签集合中各标签的皮肤ID后,对于每一个皮肤ID,终端设备利用该皮肤ID查表即可确定出皮肤ID对应的皮肤配置。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.
本申请实施例中,皮肤配置例如是一个JSON对象,其中包含了一个皮肤ID的配置信息。每个皮肤ID都有一个唯一的标识符,如poi-lable-0.、poi-lable-1等。当所述皮肤ID对应的样式包含多种状态时,所述皮肤ID的皮肤配置包含各种状态各自的渲染资源和渲染规则。皮肤配置的结构例如如下: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:
POI:顶级建,表示下面为各皮肤ID的皮肤配置。POI: Top-level building, indicating the skin configuration for each skin ID below.
Poi-lable-0:一个皮肤ID,可根据需要为每个POI添加更多的皮肤ID,如Poi-lable-1、Poi-lable-2等,样本越多,皮肤ID越多。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.
资产(assets):表示一个皮肤ID不同状态下渲染资源的URL。例如,一个皮肤ID的样本有四种状态,分别为:默认(default)、低级(low)、中级(low)、高级(high),每种状态都有渲染资源,渲染资源包括背景板(plane)、线(line)、图标(icon)和AR标签(ar Tag)等资源的统一资源定位符(Uniform Resource Locator,URL)。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).
2D:包含2D展示样式的配置。该配置包含背景板(plane)、线(line)、图标(icon)和AR标签(ar Tag)元素,每种元素都有对应的属性,如高度、宽度和位置等。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.
3D:包含3D展示样式的配置。该配置包含背景板(plane)、线(line)、图标(icon)和AR标签(ar Tag)元素,每种元素都有对应的属性,如尺寸、偏移量和中心点等。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.
采用该种方案,终端设备预先获取并缓存配置表,渲染目标界面时,根据皮肤ID查配置表即可确定出皮肤配置,速度快、准确率高。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.
可选的,上述实施例中,服务器还监听标签集合中是否存在从第一状态切换为第二状态的3D标签。当服务器确定出标签集合中存在从第一状态切换为第二状态的3D标签时,向终端设备发送状态变更消息,该状态变更消息指示状态发生变化的3D标签以及3D标签的第二状态。终端设备监听到状态变更消息后,获取状态发生变化的3D标签的第二状态对应的渲染资源。之后,根据第二状态对应的渲染资源重新渲染3D标签。Optionally, in the above embodiment, the server further monitors whether there is a 3D tag that switches from the first state to the second state in the tag set. When the server determines that there is a 3D tag that switches from the first state to the second state in the tag set, 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.
本申请实施例中,标签状态是在九宫格渲染的基础上增加的一种区分标签不同状态的机制。皮肤ID对应的样式包含多种状态时,所述皮肤ID的皮肤配置包含各种状态各自的渲染资源,例如,这些渲染资源分别对应默认(default)状态、低级(low)状态、中级(middle)状态、高级(high)状态和超高级(super high)状态。每个标签具有一个皮肤ID,即一个标签具有一个与之对应的样本,相同皮肤ID的标签对应相同的样本,基于同一个样本,能够渲染出2D标签或3D标签。当一个标签为3D标签时,该3D标签可以具有多种状态,即上述的default状态、low状态、middle状态、high状态和super high状态。不同状态的显示效果不同代表的告警等级也不同。3D标签的状态和告警紧急程度有关。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-square 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.
图8是本申请实施例提供的标签渲染方法中同一3D标签的不同状态的示意图。请参照图8,图8示意出一个摄像头的3D标签,从左到右依次为low状态、middle状态、high状态和super high状态。Fig. 8 is a schematic diagram of different states of the same 3D tag in the tag rendering method provided by an embodiment of the present application. Please refer to Fig. 8, which illustrates a 3D tag of a camera, which is low state, middle state, high state and super high state from left to right.
例如,教学楼A设置一个监控摄像头,当监控摄像头拍摄到火灾时,监控摄像头的3D标签从default状态切换为high状态。服务器监听到3D标签从default状态切换为high状态后,向终端设备发送状态变更消息,如实时通信(Instant Messaging,IM)消息。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.
终端设备接收到IM消息后,根据IM消息携带的标签的皮肤ID和第二状态的标识,从配置表中获取第二状态对应的渲染资源并重新渲染3D标签,以将3D标签的状态变更为第二状态。例如,终端设备调用2D和3D的更新(update)方法,将IM消息中的第二状态作为参数传递给update方法以更新3D标签的状态。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.
采用该种方案,在九宫格渲染的基础上增加标签状态,更具自适应性、灵活性。This solution adds label status based on the nine-grid rendering, which is more adaptive and flexible.
可选的,上述实施例中,终端设备执行本申请实施例所述的标签渲染方法之前,还显示编辑界面,该编辑界面上显示所述目标界面和多种样式,不同样式对应不同的皮肤ID。之后,终端设备响应于用户的第一选中操作,从所述目标界面上显示的孪生体中识别出用户选中的目标孪生体,并响应于用户在所述编辑界面选中目标样式的第二选中操作,为所述目标孪生体配置所述目标样式的标签。最后,终端设备向所述服务器发送第三请求,该第三请求携带所述目标界面上的孪生体的标签与所述标签的皮肤ID的对应关系。服务器接收到第三请求后,保存该对应关系。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.
示例性的,终端设备执行本申请实施例所述的标签渲染方法之前,还对目标界面上的各个孪生体进行编辑,以为每个孪生体配置标签。编辑过程中,终端设备在目标界面上选择目标孪生体。之后,在编辑界面上显示的样式中为目标孪生体选中目标样式的标签。另外,用户还可以通过编辑界面为目标孪生体设置标签名称等。之后,终端设备根据用户输入的标签名称、用户选中的目标样式等,为目标孪生体配置目标样式的标签。目标孪生体是目标界面弹窗外的孪生体或弹窗内的孪生体。当目标孪生体为弹窗内的孪生体时,终端设备为该孪生体生成3D标签;当目标孪生体为弹窗内的孪生体时,终端设备为该孪生体生成2D标签。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.
图9是本申请实施例提供的标签渲染方法中的编辑界面示意图。请参照图9,用户从目标界面上选中一栋建筑作为目标孪生体,如图中黑色突出的孪生体所示。之后,用户从多种样式中为目标孪生体选中样式一,即将样式一作为目标样式。由于图9所示数字世界界面上没有弹窗,是一个纯3D的界面。因此,终端设备根据样式一等为目标孪生体生成一个3D标签。Figure 9 is a schematic diagram of the editing interface in the label rendering method provided in an embodiment of the present application. Referring to Figure 9, the user selects a building from the target interface as the target twin, as shown by the black highlighted twin in the figure. Afterwards, the user selects style one for the target twin from a variety of styles, that is, style one is used as the target style. Since there is no pop-up window on the digital world interface shown in Figure 9, it is a pure 3D interface. Therefore, the terminal device generates a 3D label for the target twin based on style one.
终端设备为目标孪生体配置标签后,将标签与皮肤ID的对应关系等发送给服务器。这样一来,终端设备请求渲染目标界面时,能够快速确定出每个标签的皮肤ID。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.
可选的,终端设备也可以将样式一、标签名称等发送给服务器,由服务器为目标孪生体生成一个标签。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.
采用该种方案,通过编辑界面,用户可灵活的为每个孪生体配置标签的样式,即为每个孪生体配置皮肤ID,灵活度高、配置方式简单。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.
可选的,上述实施例中,服务器还预先生成配置表。生成配置表的过程中,服务器加载每个皮肤ID各种状态下的渲染资源,对于每个皮肤ID的每种状态,根据对应的渲染资源生成背景板和脚线。之后,服务器根据背景板、所述脚线确定所述标签的2D展示样式和3D展示样式,并根据每个皮肤ID不同状态下的渲染资源、所述2D展示样式、所述3D展示样式、图标的高宽位置信息、AR指示的高宽位置信息生成所述配置表。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.
示例性的,服务器将一个皮肤ID的样本的各种状态的渲染资源,按照状态维度都加载到配置表的资产(assets)字段。之后,利用调试器依次生成背景板和脚线的CSS边框图片的值,并将生成的边框图片的值配置到配置表中2D展示样式的配置的背景板(plane)字段、线(line)字段;以及3D展示样式的配置的背景板(plane)字段、线(line)字段。之后,服务器根据用户界面(user interface,UI)设计稿将图标(icon)和AR标签(artag)的宽高位置信息配置到配置表,从而生成配置表。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.
采用该种方案,服务器预先生成包含每个皮肤ID的各种状态的配置表,标签渲染过程中,服务器将配置表发送给终端设备,使得终端设备缓存配置表,终端设备从配置表中获取渲染资源和渲染规则,速度快、准确率高。Using this solution, the server pre-generates 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.
图10是本申请实施例提供的标签渲染方法的另一个流程图,本实施例包括:FIG. 10 is another flow chart of a label rendering method provided in an embodiment of the present application. This embodiment includes:
1001、识别渲染指令。1001. Identify rendering instructions.
1002、响应于渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID。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.
1003、向服务器发送第二请求以获取配置表。1003. Send a second request to the server to obtain a configuration table.
配置表用于指示各皮肤ID对应的皮肤配置,皮肤配置包含渲染资源和渲染规则,当皮肤ID对应的样式包含多种状态时,皮肤ID的皮肤配置包含各种状态各自的渲染资源;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.
1004、缓存配置表。1004. Cache configuration table.
1005、对于标签集合中的每个标签,根据配置表和标签的皮肤ID获取渲染标签所需的皮肤配置。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.
1006、对于标签集合中的每个标签,判断该标签的标签类型,当标签类型指示标签为2D标签时,执行步骤1007;当标签类型指示标签为3D标签时,执行步骤1008。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.
1007、基于2D渲染类型的九宫格渲染方式渲染并显示2D标签。1007. Render and display the 2D label based on the nine-square grid rendering method of the 2D rendering type.
1008、基于3D渲染类型的九宫格渲染方式渲染并显示3D标签。1008. Render and display the 3D label based on the nine-square grid rendering method of the 3D rendering type.
下述为本申请装置实施例,可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节,请参照本申请方法实施例。The following are device embodiments of the present application, which can be used to execute the method embodiments of the present application. For details not disclosed in the device embodiments of the present application, please refer to the method embodiments of the present application.
图11是本申请实施例提供的一种标签渲染装置的示意图,该标签渲染装置1100集成在终端设备上,该标签渲染装置1100包括:识别模块111、收发模块112、获取模块113和处理模块114。11 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 .
识别模块111,用于识别请求渲染目标界面的渲染指令;An identification module 111 is used to identify a rendering instruction requesting a rendering target interface;
收发模块112,用于响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;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;
获取模块113,用于对于所述标签集合中的每个3D标签,根据所述3D标签的皮肤ID获取渲染所述3D标签所需的皮肤配置;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;
处理模块114,用于对于所述标签集合中的每个3D标签,根据所述标签的尺寸和九宫格渲染方式处理所述皮肤配置以渲染出所述3D标签,处理后的皮肤配置中背景板的尺寸与所述标签的尺寸相匹配。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.
一种可行的实现方式中,所述处理模块114,用于对于所述标签集合中的每个标签,当所述标签位于所述目标界面上的弹窗外时,确定所述标签为3D标签,当所述标签位于所述弹窗内时,确定所述标签为2D标签。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.
一种可行的实现方式中,所述处理模块114,还用于当所述标签集合中还包括2D标签时,对于所述标签集合中的每个2D标签,根据所述2D标签的尺寸将所述皮肤配置转换为边框语法;根据所述标签在所述目标界面上的位置挂载所述边框语法,以渲染出所述2D标签。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.
一种可行的实现方式中,所述处理模块114,用于根据所述3D标签的尺寸确定所述皮肤配置中背景板的九宫格尺寸,所述九宫格尺寸用于指示九宫格的左边界、右边界、上边界和下边界;根据所述九宫格尺寸,确定九宫格的UV坐标;根据所述九宫格尺寸和所述UV坐标更新顶点数组和坐标数组;根据更新后的顶点数组和坐标数组处理所述背景板,以使得所述背景板的尺寸自适应所述3D标签的尺寸;根据所述皮肤配置中的渲染规则排版处理后的背景板,以渲染出所述3D标签。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.
一种可行的实现方式中,所述收发模块112,在响应于所述渲染指令,向服务器发送第一请求以请求标签集合中各标签的皮肤ID之前,还用于向所述服务器发送第二请求以获取配置表,所述配置表用于指示各皮肤ID对应的皮肤配置,所述皮肤配置包含渲染资源和渲染规则,,所述渲染资源包含背景板,当所述皮肤ID对应的样式包含多种状态时,所述皮肤ID的皮肤配置包含各种状态各自的渲染资源;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;
所述处理模块114,还用于缓存所述配置表。The processing module 114 is further configured to cache the configuration table.
一种可行的实现方式中,所述处理模块114在对于所述标签集合中的每个3D标签,根据所述3D标签的尺寸和九宫格渲染方式处理所述皮肤配置,以渲染出所述3D标签之后,还用于监听状态变更消息;当所述状态变更消息指示所述3D标签从第一状态切换为第二状态时,获取所述第二状态对应的渲染资源;根据所述第二状态对应的渲染资源更新所述3D标签。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.
一种可行的实现方式中,所述处理模块114,还用于控制终端设备显示编辑界面,所述编辑界面上显示所述目标界面和多种样式,不同样式对应不同的皮肤ID,响应于用户的第一选中操作,从所述目标界面上显示的孪生体中识别出用户选中的目标孪生体;响应于用户在所述编辑界面选中目标样式的第二选中操作,为所述目标孪生体配置所述目标样式的标签;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;
所述收发模块112,还用于向所述服务器发送第三请求,以使得所述服务器保存所述标签与所述标签的皮肤ID的对应关系。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.
本申请实施例提供的标签渲染装置,可以执行上述实施例中终端设备的动作,其实现原理和技术效果类似,在此不再赘述。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.
图12是本申请实施例提供的一种标签渲染装置的示意图,该标签渲染装置1200集成在服务器上,该标签渲染装置1200包括:接收模块121、处理模块122和发送模块123。FIG12 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 .
接收模块121,用于接收来自终端设备的第一请求,所述第一请求为终端设备识别到请求渲染目标界面的渲染指令后发送的;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;
处理模块122,用于根据所述第一请求确定标签集合,以及所述标签集合中各标签的皮肤ID,所述标签集合中的各标签为所述目标界面上待显示的标签,不同皮肤ID对应不同的样式,所述标签集合中至少包含3D标签;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;
发送模块123,用于向所述终端设备发送第一响应,所述第一响应用于指示所述标签集合以及所述标签集合中各标签的皮肤ID。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.
一种可行的实现方式中,所述接收模块121,还用于接收来自终端设备的第二请求,所述第二请求用于请求配置表,所述配置表用于指示各皮肤ID对应的皮肤配置,所述皮肤配置包含渲染资源和渲染规则,当所述皮肤ID对应的样式包含多种状态时,所述皮肤ID的皮肤配置包含各种状态各自的渲染资源;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 rendering resources for each state;
所述发送模块123,还用于向所述终端设备发送携带所述配置表的第二响应。The sending module 123 is further configured to send a second response carrying the configuration table to the terminal device.
一种可行的实现方式中,所述处理模块122,还用于确定所述标签集合中是否存在从第一状态切换为第二状态的3D标签;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;
所述发送模块123,还用于当所述标签集合中存在状态发生变化的3D标签时,向所述终端设备发送状态变更消息,所述状态变更消息用于指示所述标签的状态变更为第二状态。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.
一种可行的实现方式中,所述处理模块122在所述接收模块121接收来自终端设备的第二请求之前,还用于加载每个皮肤ID各种状态下的渲染资源;对于每个皮肤ID的每种状态,根据对应的渲染资源生成背景板和脚线;根据所述背景板、所述脚线确定所述标签的2D展示样式和3D展示样式;根据每个皮肤ID不同状态下的渲染资源、所述2D展示样式、所述3D展示样式、图标的高宽位置信息、AR指示的高宽位置信息生成所述配置表。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.
一种可行的实现方式中,所述接收模块121接收来自终端设备的第一请求之前,还用于接收来自所述终端设备的第三请求,所述第三请求携带所述目标界面上的孪生体的标签与所述标签的皮肤ID的对应关系;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;
所述处理模块122,还用于保存所述对应关系。The processing module 122 is further configured to store the corresponding relationship.
本申请实施例提供的标签渲染装置,可以执行上述实施例中服务器的动作,其实现原理和技术效果类似,在此不再赘述。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.
图13是本申请实施例提供的电子设备的结构示意图,该电子设备例如是上述的终端设备或服务器。请参照图13,本申请实施例所述的电子设备1300包括:至少一个处理器131,至少一个网络接口134,用户接口133,存储器135,至少一个通信总线132。FIG13 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 terminal device or server described above. Referring to FIG13 , the 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.
其中,通信总线132用于实现这些组件之间的连接通信。The communication bus 132 is used to realize the connection and communication between these components.
其中,用户接口133可以包括显示屏(Display)等,可选的,用户接口133还可以包括标准的有线接口、无线接口等。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.
其中,网络接口134可以包括标准的有线接口、无线接口(如WI-FI接口)。The network interface 134 may include a standard wired interface and a wireless interface (such as a WI-FI interface).
其中,处理器131可以包括一个或者多个处理核心。处理器131利用各种接口和线路连接整个电子设备1300内的各个部分,通过运行或执行存储在存储器135内的指令、程序、代码集或指令集,以及调用存储在存储器135内的数据,执行电子设备1300的各种功能和处理数据。可选的,处理器131可以采用数字信号处理(Digital Signal Processing,DSP)、现场可编程门阵列(Field-Programmable Gate Array,FPGA)、可编程逻辑阵列(Programmable Logic Array,PLA)中的至少一种硬件形式来实现。处理器131可集成中央处理器(Central Processing Unit,CPU)、图像处理器(Graphics Processing Unit,GPU)和调制解调器等中的一种或几种的组合。其中,CPU主要处理操作系统、用户界面和应用程序等;GPU用于负责显示屏所需要显示的内容的渲染和绘制;调制解调器用于处理无线通信。可以理解的是,上述调制解调器也可以不集成到处理器131中,单独通过一块芯片进行实现。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.
其中,存储器135可以包括随机存储器(Random Access Memory,RAM),也可以包括只读存储器(Read-Only Memory)。可选的,该存储器135包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器135可用于存储指令、程序、代码、代码集或指令集。存储器135可包括存储程序区和存储数据区,其中,存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等;存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器135可选的还可以是至少一个位于远离前述处理器131的存储装置。如图13所示,作为一种计算机存储介质的存储器135中可以包括操作系统、网络通信模块、用户接口模块以及应用程序等。Among them, the memory 135 may include a random access memory (RAM) or 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 at least one storage device located away from the aforementioned processor 131. As shown in Figure 13, 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, etc.
本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。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 contain computer-usable program code.
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。The present application is described with reference to the flowchart and/or block diagram of the method, device (system) and computer program product according to the embodiment of the present application. It should be understood that each process and/or box in the flowchart and/or block diagram, and the combination of the process and/or box in the flowchart and/or block diagram can be realized 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 produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device produce a device for realizing the function specified in one process or multiple processes in the flowchart and/or one box or multiple boxes in the block diagram.
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured product including an instruction device that implements the functions specified in one or more processes in the flowchart and/or one or more boxes in the block diagram.
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。These computer program instructions may also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, whereby the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in one or more processes in the flowchart and/or one or more boxes in the block diagram.
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。In a typical configuration, a computing device includes one or more processors (CPU), input/output interfaces, network interfaces, and memory.
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。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.
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。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.
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。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.
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。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 (16)
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410073331.1A CN117876639B (en) | 2024-01-17 | 2024-01-17 | Label rendering method, device, equipment and readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202410073331.1A CN117876639B (en) | 2024-01-17 | 2024-01-17 | Label rendering method, device, equipment and readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117876639A true CN117876639A (en) | 2024-04-12 |
| CN117876639B CN117876639B (en) | 2024-12-24 |
Family
ID=90588212
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202410073331.1A Active CN117876639B (en) | 2024-01-17 | 2024-01-17 | Label rendering method, device, equipment and readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117876639B (en) |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180322174A1 (en) * | 2017-05-04 | 2018-11-08 | Yandex Europe Ag | Method for rendering search results on a map displayable on an electronic device |
| CN110866204A (en) * | 2018-08-10 | 2020-03-06 | 阿里巴巴集团控股有限公司 | A kind of page processing method and device |
| CN111061414A (en) * | 2019-11-28 | 2020-04-24 | 北京奇艺世纪科技有限公司 | Skin replacement method and device, electronic equipment and readable storage medium |
| CN111443910A (en) * | 2020-03-24 | 2020-07-24 | 北京奇艺世纪科技有限公司 | Skin rendering method and device, electronic equipment and computer storage medium |
| CN111833454A (en) * | 2020-06-30 | 2020-10-27 | 北京市商汤科技开发有限公司 | Presentation method, presentation device, presentation equipment and computer-readable storage medium |
| CN113656518A (en) * | 2020-05-12 | 2021-11-16 | 奇安信科技集团股份有限公司 | Map rendering method and device, electronic equipment and storage medium |
| CN115311395A (en) * | 2021-04-20 | 2022-11-08 | 华为云计算技术有限公司 | Three-dimensional scene rendering method, device and equipment |
| CN115965731A (en) * | 2022-12-02 | 2023-04-14 | 达闼科技(北京)有限公司 | Rendering interaction method, device, terminal, server, storage medium and product |
| CN116402937A (en) * | 2023-03-30 | 2023-07-07 | 中国舰船研究设计中心 | A simplified development method for 3D visualization of complex data based on web |
| CN116777756A (en) * | 2022-03-10 | 2023-09-19 | 中国移动通信集团设计院有限公司 | AR rendering method and device based on Jiugongge |
-
2024
- 2024-01-17 CN CN202410073331.1A patent/CN117876639B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20180322174A1 (en) * | 2017-05-04 | 2018-11-08 | Yandex Europe Ag | Method for rendering search results on a map displayable on an electronic device |
| CN110866204A (en) * | 2018-08-10 | 2020-03-06 | 阿里巴巴集团控股有限公司 | A kind of page processing method and device |
| CN111061414A (en) * | 2019-11-28 | 2020-04-24 | 北京奇艺世纪科技有限公司 | Skin replacement method and device, electronic equipment and readable storage medium |
| CN111443910A (en) * | 2020-03-24 | 2020-07-24 | 北京奇艺世纪科技有限公司 | Skin rendering method and device, electronic equipment and computer storage medium |
| CN113656518A (en) * | 2020-05-12 | 2021-11-16 | 奇安信科技集团股份有限公司 | Map rendering method and device, electronic equipment and storage medium |
| CN111833454A (en) * | 2020-06-30 | 2020-10-27 | 北京市商汤科技开发有限公司 | Presentation method, presentation device, presentation equipment and computer-readable storage medium |
| CN115311395A (en) * | 2021-04-20 | 2022-11-08 | 华为云计算技术有限公司 | Three-dimensional scene rendering method, device and equipment |
| CN116777756A (en) * | 2022-03-10 | 2023-09-19 | 中国移动通信集团设计院有限公司 | AR rendering method and device based on Jiugongge |
| CN115965731A (en) * | 2022-12-02 | 2023-04-14 | 达闼科技(北京)有限公司 | Rendering interaction method, device, terminal, server, storage medium and product |
| CN116402937A (en) * | 2023-03-30 | 2023-07-07 | 中国舰船研究设计中心 | A simplified development method for 3D visualization of complex data based on web |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117876639B (en) | 2024-12-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10540744B2 (en) | Flexible control in resizing of visual displays | |
| CN107066430B (en) | Picture processing method and device, server and client | |
| CN111951356B (en) | Animation rendering method based on JSON data format | |
| CN108279966A (en) | Webpage capture method, apparatus, terminal and storage medium | |
| CN104850388A (en) | Method and apparatus for drafting webpage | |
| HK1221320A1 (en) | Method and apparatus for processing image in mobile terminal device | |
| CN110750664B (en) | Picture display method and device | |
| CN105630267A (en) | View interface resource management method and apparatus | |
| CN108228816A (en) | A kind of loading method and device of waterfall flow graph piece | |
| CN113268303A (en) | Interface element configuration method and device, storage medium and electronic equipment | |
| CN115469870A (en) | Method, device, electronic equipment and medium for online file processing | |
| CN117093386B (en) | Page screenshot method, device, computer equipment and storage medium | |
| CN114118045A (en) | Report form access method, device, storage medium and computer equipment | |
| CN116010736B (en) | Methods, devices, equipment, and storage media for processing vector icons. | |
| CN114461960A (en) | Page generation method, page display method and device | |
| CN113282852A (en) | Method and device for editing webpage | |
| US20150339277A1 (en) | Systems and methods for programming behavior of a website to respond to capabilities of different devices | |
| CN112445394A (en) | Screenshot method and device | |
| CN116775916A (en) | Multimedia content playing method, device, equipment and storage medium | |
| CN117876639A (en) | Label rendering method, device, equipment and readable storage medium | |
| CN104793837A (en) | Picture generation method and device | |
| CN113032696A (en) | Display method and display device of page picture | |
| CN112286576A (en) | Cross-platform rendering method, client and medium | |
| CN114896011B (en) | Method and device for playing dynamic content in page, electronic equipment and storage medium | |
| CN113703890B (en) | Display control method, display control device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |