Browser webpage spatialization method and device

Abstract

The invention relates to the technical field of computers, and provides a browser webpage spatialization method and device which are applied to a server side or augmented reality equipment to determine a first target element from webpage elements of a two-dimensional webpage. Configuring style attribute information of the first target element in the three-dimensional space, and obtaining a spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element; and sending the spatialized webpage code to the augmented reality device. The augmented reality device analyzes the spatialized webpage code and renders the spatialized webpage code to obtain a texture picture; extracting attribute information of the first target element in the texture picture and style attribute information of the first target element from the spatialized webpage code; and according to the texture picture, the attribute information of the first target element in the texture picture and the style attribute information of the first target element, drawing and displaying a spatialized webpage. According to the invention, the three-dimensional space can be fully utilized, the user interaction range can be dispersed, and the interaction precision and experience can be improved.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a browser web page spatialization method and device. Background Art

[0002] In the prior art, when browsing the web in an extended reality device (such as XR glasses), the two-dimensional web page is often displayed as a whole directly on a surface in the three-dimensional space. This method of displaying the two-dimensional web page in a plane form in the three-dimensional space has the problems of poor user viewing effect, limited display content, and is not conducive to user interaction. Summary of the invention

[0003] The present invention is used to solve the problems in the prior art of displaying two-dimensional content in a three-dimensional space in a plane form, such as poor viewing effect for users, limited display content, and disadvantageous for user interaction.

[0004] In order to solve the above technical problems, the first aspect of the present invention provides a browser webpage spatialization method, which is applied to a server or an extended reality device, comprising: Determine a first target element from the web page elements of the two-dimensional web page; Configuring style attribute information of the first target element in three-dimensional space, obtaining a spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes three-dimensional position information; Send spatialized web page code to the extended reality device for rendering and display.

[0005] As a further embodiment of the present invention, before determining the first target element from the webpage elements of the two-dimensional webpage, the method includes: Extract web page elements from two-dimensional web pages; Non-essential elements in the web page elements are filtered out.

[0006] As a further embodiment of the present invention, determining the first target element from the webpage elements of the two-dimensional webpage includes: Generate a first web page configuration interface according to the web page elements of the two-dimensional web page, and receive a first target element input by a user through the first web page configuration interface; and / or A first target element configured by a developer of the two-dimensional web page from web page elements of the two-dimensional web page; and / or Dividing the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; screening the web page elements in each region according to a first preset rule of each region to obtain a first target element; and / or The two-dimensional attribute information of the web page elements of the two-dimensional web page is input into the element weight prediction model to obtain the weight of each web page element, and the web page element with a weight greater than a first preset weight is set as the first target element; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

[0007] As a further embodiment of the present invention, the style attribute information further includes: one or more of: mark information, background information, rotation information, size information, transparency information, fillet information, surface effect, three-dimensional model and decoration information.

[0008] As a further embodiment of the present invention, the method further includes: Determine a second target element from the first target element or the webpage element; configuring three-dimensional association information of the second target element; Obtaining the spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element further includes: obtaining the spatialized webpage code according to the code of the two-dimensional webpage, the style attribute information of the first target element and the three-dimensional association information of the second target element.

[0009] As a further embodiment of the present invention, determining the second target element from the first target element or the webpage element includes: Generate a second web page configuration interface according to the first target element or the web page element, and receive a second target element input by the user through the second web page configuration interface; and / or a second target element configured by the developer of the two-dimensional web page from the first target element or the web page element; and / or determining a second target element according to the triggering amount of the first target element or the webpage element within a preset time period; and / or Dividing the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; screening the web page elements in each region according to a second preset rule of each region to obtain a second target element; and / or The two-dimensional attribute information of the web page elements of the two-dimensional web page is input into the element weight prediction model to obtain the weight of each web page element, and the web page elements with a weight greater than a second preset weight are set as second target elements; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

[0010] As a further embodiment of the present invention, the three-dimensional association information includes: marking information, target element position information, associated three-dimensional object information, associated three-dimensional object position information and associated three-dimensional object attribute information.

[0011] As a further embodiment of the present invention, the method further includes: Determine whether the position information in the style attribute information and / or the three-dimensional association information overlaps or has the same position; If the overlapping area exceeds a preset range or there is a same position, an alarm process and / or adaptive layout adjustment is performed on the overlapping position exceeding the preset threshold range or the target element at the same position to avoid overlap.

[0012] A second aspect of the present invention provides a browser webpage spatialization method, which is applied to an extended reality device, comprising: Receiving spatialized web page code; Parsing the spatialized webpage code and rendering to obtain a texture image; Extracting attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code; A spatialized webpage is drawn and displayed according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

[0013] As a further embodiment of the present invention, drawing and displaying a spatialized webpage according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element includes: According to the attribute information of the first target element in the texture picture, extracting information associated with the first target element from the texture picture; The picture associated with the first target element is drawn using the style attribute information of the first target element.

[0014] As a further embodiment of the present invention, it also includes: Extracting three-dimensional association information of a second target element from the spatialized webpage code; Drawing and displaying a spatialized web page according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element is further as follows: drawing and displaying a spatialized web page according to the texture image, the attribute information of the first target element in the texture image, the style attribute information of the first target element, and the three-dimensional association information of the second target element.

[0015] As a further embodiment of the present invention, it also includes: Receive operation events in three-dimensional space; Converting the operation event into an event of a two-dimensional web page; Driving the code of the two-dimensional web page to change according to the event of the two-dimensional web page; A new texture image is obtained by rendering according to the changed two-dimensional web page code, and the attribute information of the first target element in the texture image and subsequent steps are extracted repeatedly.

[0016] As a further embodiment of the present invention, converting the operation event into an event of a two-dimensional web page includes: Determine the web page element corresponding to the operation event; Determining the position of the web page element on the two-dimensional page according to the position of the web page element corresponding to the operation event in the three-dimensional space; An event in the two-dimensional web page is determined according to the position of the web page element in the two-dimensional page and the operation event.

[0017] A third aspect of the present invention provides a browser webpage spatialization device, which is applied to a server or an extended reality device, comprising: An element determination unit, used to determine a first target element from the webpage elements of the two-dimensional webpage; an attribute adding unit, configured to configure style attribute information of the first target element in three-dimensional space, and obtain a spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes three-dimensional position information; The sending unit is used to send the spatialized web page code to the extended reality device for rendering and display.

[0018] A fourth aspect of the present invention provides a browser webpage spatialization device, which is applied to an extended reality device, comprising: A receiving unit, used for receiving a spatialized webpage code; A parsing unit, used for parsing the spatialized webpage code and rendering to obtain a texture image; An extraction unit, used to extract attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code; The drawing unit is used to draw and display the spatialized web page according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

[0019] A fifth aspect of the present invention provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method described in any of the foregoing embodiments when executing the computer program.

[0020] A sixth aspect of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor of a computer device, the method described in any of the above embodiments is implemented.

[0021] A seventh aspect of the present invention provides a computer program product, which includes a computer program. When the computer program is executed by a processor of a computer device, the method described in any of the above embodiments is implemented.

[0022] The browser webpage spatialization method and device provided by the present invention determine the first target element from the webpage elements of the two-dimensional webpage on the server side or the extended reality device side, configure the style attribute information of the first target element in the three-dimensional space, obtain the spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, and the style attribute information at least includes three-dimensional position information; send the spatialized webpage code to the extended reality device; receive the spatialized webpage code by the extended reality device; parse the spatialized webpage code and render to obtain a texture image; extract the attribute information of the first target element in the texture image and the style attribute information of the first target element from the spatialized webpage code; draw and display the spatialized webpage according to the texture image, the attribute information of the first target element in the texture image and the style attribute information of the first target element, so as to realize the spatial processing of the two-dimensional webpage and improve the user's viewing effect. The independent display of the target element can realize the full use of the three-dimensional space. At the same time, the spatialized display can also disperse the user's interaction range, facilitate user interaction, and improve the interaction accuracy and interaction experience.

[0023] In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, preferred embodiments are specifically cited below and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0025] Figure 1 A structural diagram of a browser webpage spatialization system according to an embodiment of the present invention is shown; Figure 2 A schematic diagram of displaying web pages in two-dimensional space in the prior art is shown; Figure 3 A schematic diagram of a three-dimensional spatialized web page according to an embodiment of the present invention is shown; Figure 4 A flowchart of a method for spatializing a browser webpage applied to a server or an extended reality device according to an embodiment of the present invention is shown; Figure 5 Another flow chart of the method for spatializing a browser webpage applied to a server or an extended reality device according to an embodiment of the present invention is shown; Figure 6 Another flow chart of the method for spatializing a browser webpage applied to a server or an extended reality device according to an embodiment of the present invention is shown; Figure 7 A flow chart showing a method for spatializing a browser webpage applied to an extended reality device according to an embodiment of the present invention is shown; Figure 8 Another flow chart of the method for spatializing a browser webpage applied to an extended reality device according to an embodiment of the present invention is shown; Fig. 9 Another flow chart of the method for spatializing a browser webpage in an extended reality device according to an embodiment of the present invention is shown; Fig.10 A structural diagram showing a browser webpage spatialization device applied to a server or an extended reality device according to an embodiment of the present invention; Fig.11 A structural diagram showing a browser webpage spatialization device applied to an extended reality device according to an embodiment of the present invention; Fig.12 A structural diagram of a computer device according to an embodiment of the present invention is shown.

[0026] Description of the accompanying symbols: 101. Server; 102. Extended reality devices; 1001. Element determination unit; 1002. Attribute adding unit; 1003, sending unit; 1004, verification unit; 1101, receiving unit; 1102, parsing unit; 1103, extraction unit; 1104, drawing unit; 1105, interactive unit; 1202. Computer equipment; 1204, processor; 1206. Memory; 1208, driving mechanism; 1210, input / output module; 1212. Input device; 1214. Output device; 1216. Presentation equipment; 1218. Graphical user interface; 1220, network interface; 1222, communication link; 1224. Communication bus. DETAILED DESCRIPTION

[0027] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0028] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, device, product or equipment that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or equipment.

[0029] This specification provides method operation steps as described in the embodiments or flow charts, but more or fewer operation steps may be included based on routine or non-creative work. The order of steps listed in the embodiments is only one way of executing the order of many steps and does not represent the only execution order. When the system or device product is executed in practice, it can be executed in the order of the method shown in the embodiments or the drawings or in parallel.

[0030] It should be noted that the data involved in this application (including but not limited to data used for analysis, stored data, displayed data, etc.) are all information and data authorized by the user or fully authorized by all parties, and the acquisition, transmission, storage, use and processing of relevant data comply with the relevant laws, regulations and standards of relevant countries and regions.

[0031] It should be noted that in the embodiments of the present application, certain software, components, models and other existing solutions in the industry may be mentioned, and they should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present application, but it does not mean that the applicant has or will necessarily use the solution.

[0032] The current display and layout of web page content are designed based on the browsing characteristics of computer devices or smart devices to adapt to different screens and interactive characteristics. Based on this, when browsing web pages in existing extended reality devices (such as XR glasses), the two-dimensional web page is often displayed as a whole directly on a surface in three-dimensional space. This method of displaying a two-dimensional web page in a plane form in three-dimensional space has the following specific problems: (1) For two-dimensional web pages on mobile terminals, the displayed content is mostly in vertical screen. However, in XR glasses, since the human field of vision is larger in the horizontal direction, the existing vertical screen display method still has the problem of being not conducive to user viewing.

[0033] (2) The content displayed on two-dimensional web pages is relatively dense, and each element is small, which makes it inconvenient to view in three-dimensional space. In addition, all content can only be confined to one plane, and the three-dimensional space is not fully utilized. There is a large amount of blank space, which is not conducive to user viewing.

[0034] (3) Furthermore, since the accuracy of interaction in three-dimensional space is somewhat lower than that of a mouse, directly displaying two-dimensional web pages in three-dimensional space is also inconvenient for interaction.

[0035] In order to solve the above technical problems, in one embodiment of the present invention, a browser webpage spatialization system is provided, such as Figure 1 As shown, it includes: a server 101 and an extended reality device 102.

[0036] The server 101 is used to determine a first target element from the web page elements of a two-dimensional web page; configure style attribute information of the first target element in three-dimensional space, obtain a spatialized web page code according to the code of the two-dimensional web page and the style attribute information of the first target element, wherein the style attribute information at least includes three-dimensional position information; and send the spatialized web page code to an extended reality device for rendering and display.

[0037] Specifically, the server 101 is a server of an application website, and is used to provide a two-dimensional web page or a three-dimensional web page. In specific implementation, the server 101 can also be used to provide only a two-dimensional web page, and the extended reality device 102 identifies the two-dimensional web page to determine the spatialized web page code, and sends the spatialized web page code to the extended reality device 102 for rendering and display.

[0038] Web page elements are all elements defined in the HTML specification that can be displayed on a web page, such as etc., wherein div is used to divide different parts of a page, and the specific content of the web page elements may refer to the existing definition, and the present invention does not limit this.

[0039] The first target element is at least a part of the elements selected from the web page elements according to a certain principle. The method for determining the first target element will refer to the subsequent embodiments and will not be described in detail here.

[0040] The style attribute information of the first target element can be represented by a class tag, and any number of clsss of each first target element can be set, for example ,for The element sets the class attributes named city1 and city2. The definition of city can be set elsewhere, for example: city ​​1 background-color: tomato; } The above statement sets the background color of all web page elements named city1 to the color of tomato.

[0041] The three-dimensional position information in the style attribute information is used to indicate the position of the element in the three-dimensional space. The target element with the class tag (i.e., the target element with the style attribute information) will be displayed as an independent element in the three-dimensional space, and the class tag will not affect the two-dimensional display effect of the web page in the original browser. It will only take effect in the three-dimensional browser and split a two-dimensional web page content into multiple elements in the three-dimensional space, and rearrange and display them in the three-dimensional space.

[0042] When implemented, the marked element will have a copy of the content displayed in the 3D space. Regardless of whether the element has a special mark, its position in the original web page remains unchanged, and the entire web page can be customized to display in the 3D space.

[0043] The extended reality device 102 can be any extended reality device available on the market, and the present invention does not limit the manufacturer, model, etc. of the extended reality device. The extended reality device 102 is installed with a three-dimensional browser for receiving spatialized web page code; parsing the spatialized web page code and rendering to obtain a texture image; extracting attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized web page code; and drawing and displaying the spatialized web page according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

[0044] Specifically, the texture image includes a portion that is temporarily invisible in the web page viewport, such as a portion that can only be seen after scrolling. The attribute information of the first target element in the texture image includes the position (i.e., texture coordinates (x, y)) and size of the first target element in the texture image. In specific implementation, the 3D browser extracts the positions of all elements with class identifiers in the texture image to obtain the attribute information of the first target element in the texture image.

[0045] After displaying the spatialized web page, the extended reality device 102 can receive an operation event from the operator, thereby implementing web page operation. For the specific interaction process, please refer to the subsequent embodiments.

[0046] In this embodiment, the web page (such as Figure 2 ) to achieve spatial display in three-dimensional space (as shown in Figure 3 As shown in the figure, it can realize the spatial processing of two-dimensional web pages, improve the user's viewing effect, and independently display the target elements to fully utilize the three-dimensional space, support the arrangement method that is more suitable for three-dimensional space viewing and interaction, and at the same time, through spatial display, it can disperse the user's interaction range, facilitate user interaction, and improve the interaction accuracy and interaction experience. In terms of implementation, it is only a non-destructive expansion of the existing web page content, which is compatible with the effects of the original web page on other platforms, and can be simply and quickly expanded in space.

[0047] In one embodiment of the present invention, a browser webpage spatialization method applied to a server or an extended reality device is provided. Figure 4 As shown, including: Step 401: determine a first target element from web page elements of a two-dimensional web page.

[0048] Step 402, configure the style attribute information of the first target element in the three-dimensional space, and obtain the spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes the three-dimensional position information.

[0049] In some implementations, taking a video element as an example, the coordinates (x, y, z) of the video element in three-dimensional space are (0, 1, 0), and the three-dimensional position information of the video element can be expressed as <video src="xxxx.mp4" class="iris3D" position3D="0 1 0">< / video> .

[0050] In some embodiments, in order to enrich the effect of spatial display, the style attribute information also includes: one or more of the following information: marking information, background information, rotation information, size information, transparency information, fillet information, curved surface effect, three-dimensional model and decoration information. Among them, the marking information is used to locate the spatial customized element (i.e., the first target element). The background information is used to indicate the background displayed by the first target element. The rotation information is used to indicate the rotation of the first target element. The size information is used to indicate the size of the first target element. The transparency information is used to indicate the transparency of the first target element. The fillet information and curved surface effect are used to indicate the surrounding display effect of the first target element. The three-dimensional model is used to indicate the three-dimensional display effect of the first target element. The device information includes but is not limited to the border, etc. It is used to decorate the first target element. The setting of the style attribute information can refer to the existing common web page layout classification, such as Weibo, Douban, Zhihu, etc.

[0051] Step 403: Send the spatialized web page code to an extended reality device for rendering and display.

[0052] In some implementations, before determining the first target element from the web page elements of the two-dimensional web page in step 401, the steps include: extracting web page elements from the two-dimensional web page; filtering non-essential elements from the web page elements. The non-essential elements may be pre-set web page elements, or the non-essential elements may be determined by counting the number of times each element in the two-dimensional web page is triggered (specifically, elements with a triggering number less than a preset value are set as non-essential elements).

[0053] This implementation can improve the efficiency of determining the first target element by filtering non-essential elements, and avoid the situation where there are too many web page elements, which is not conducive to quickly determining the first target element. In specific implementation, the step of filtering network elements in this implementation is not a necessary step, and the user can determine whether to perform it.

[0054] In one embodiment of the present invention, determining the first target element from the webpage elements of the two-dimensional webpage includes the following implementation methods: Method 1: Generate a first web page configuration interface according to the web page elements of the two-dimensional web page, and receive a first target element input by a user through the first web page configuration interface.

[0055] The first web page configuration interface at least includes a web page element list, each row in the web page element list has a selection control, and the user completes the configuration of the first target element by triggering the selection control. The number of the first target elements includes one or more, and the present invention does not limit this. In addition, the present invention does not limit the layout form of the first web page configuration interface, as long as it can enable the user to complete the configuration of the first target element.

[0056] Method 2: The developer of the two-dimensional webpage configures the first target element from the webpage elements of the two-dimensional webpage. In this implementation mode, the configuration of the first target element is completed when the two-dimensional webpage is developed.

[0057] Method three: Divide the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; and screen the web page elements in each region according to the first preset rule of each region to obtain the first target element.

[0058] Different areas of the second network webpage are used to focus on displaying different content, for example, in a search webpage, the left side displays the searched webpage brief information, and the right side displays the hot search information. The first preset rule can be formulated by the developer or set by the user, and the first target element can be screened out from the webpage elements in each area through the first preset rule.

[0059] Method 4: Input the two-dimensional attribute information of the web page elements of the two-dimensional web page into the element weight prediction model to obtain the weight of each web page element, and set the web page element with a weight greater than a first preset weight as the first target element; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

[0060] In detail, the two-dimensional attribute information includes information such as element type, position, size, etc. The greater the element weight, the more important the element is, for example, the more it is needed by the user or the more it needs to attract the user's attention.

[0061] One or more of the above four methods may be selected for use in combination, and the present invention is not limited thereto.

[0062] In one embodiment of the present invention, in order to improve user experience, the browser webpage spatialization method applied to the server or the augmented reality device includes the above steps 401 to 402, such as Figure 5 As shown, it also includes: Step 501: determine a second target element from the first target element or the webpage element.

[0063] The second target element is a web page element that needs to be displayed in association. Specifically, when this type of element is displayed, a three-dimensional associated element will be displayed, such as Figure 4 The collection control shown (shown as a three-dimensional five-pointed star) Step 502, configure the three-dimensional association information of the second target element. The three-dimensional association information includes: marking information, target element position information, associated three-dimensional object information, associated three-dimensional object position information and associated three-dimensional object attribute information. Specifically, the associated three-dimensional object attribute information includes three-dimensional object rotation information, three-dimensional object size information, etc.

[0064] In a specific implementation, the tag information in the three-dimensional association information of the second target element may be different from the tag information in the style attribute information of the first target element, and the first target element and the second target element can be identified by distinguishing the tag information. The three-dimensional object can be specified by the user or the developer, and the three-dimensional object can be the same as the second target element, or can be an object different from the second target element, such as a true three-dimensional entity of the second target element.

[0065] Step 503 , obtaining a spatialized webpage code according to the code of the two-dimensional webpage, the style attribute information of the first target element, and the three-dimensional association information of the second target element.

[0066] This embodiment can display richer effects by displaying three-dimensional content in association with the second target element. At the same time, it can also enable the associated displayed three-dimensional content to operate in conjunction with the second target element, thereby facilitating user control of the second target element and improving user experience.

[0067] In one embodiment of the present invention, the above step 501 of determining the second target element from the first target element or the webpage element includes the following implementation methods: Method 1: Generate a second web page configuration interface according to the first target element or the web page element, and receive a second target element input by the user through the second web page configuration interface.

[0068] The display format of the second web page configuration interface is the same as that of the first web page configuration interface.

[0069] Method 2: The developer of the two-dimensional webpage configures the second target element from the first target element or the webpage element. In this embodiment, the configuration of the second target element is completed when the two-dimensional webpage is developed.

[0070] Method 3: Determine the second target element according to the triggering amount of the first target element or the webpage element within a preset time period. This embodiment can display the elements that are frequently triggered by the user in a three-dimensional manner to facilitate user operation.

[0071] Method 4: Divide the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; and screen the web page elements in each region according to the second preset rule of each region to obtain the second target element.

[0072] Method 5: Input the two-dimensional attribute information of the web page elements of the two-dimensional web page into the element weight prediction model to obtain the weight of each web page element, and set the web page elements with a weight greater than a second preset weight as the second target element; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

[0073] The second preset rule may be formulated by a developer or set by a user, and the second target element may be screened out from the web page elements in each region through the second preset rule.

[0074] In one embodiment of the present invention, Figure 6 As shown, the browser webpage spatialization method applied to the server or the extended reality device also includes: Step 601: determine whether the position information in the style attribute information and / or the three-dimensional association information overlaps or has the same position.

[0075] Step 602: If the overlapping area exceeds a preset range or there is a same position, an alarm process is performed on the overlapping position exceeding a preset threshold range or the target element at the same position and / or an adaptive layout adjustment is performed to avoid overlap.

[0076] This embodiment can avoid overlapping display of elements by checking style attribute information and position information in three-dimensional association information, facilitate user operation, and improve user experience.

[0077] In one embodiment of the present invention, a method for spatializing a browser webpage applied to an extended reality device is also provided. Figure 7 As shown, including: Step 701, receiving spatialized web page code.

[0078] Step 702, parse the spatialized webpage code and render to obtain a texture image.

[0079] Step 703: extracting attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code.

[0080] Step 704 : drawing and displaying a spatialized webpage according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

[0081] In detail, step 704 specifically includes: according to the attribute information of the first target element in the texture image, intercepting the information associated with the first target element from the texture image; and drawing the image associated with the first target element using the style attribute information of the first target element.

[0082] This embodiment extracts the style attribute information of the spatially customized element (ie, the first target element) based on the logic of the original browser parsing the spatialized web page DOM tree, and performs layout, arrangement and display in the space according to the spatially customized element style attribute information.

[0083] In this embodiment, independently displaying the first target element can achieve full utilization of the three-dimensional space. At the same time, spatial display can also disperse the user's interaction range, facilitate user interaction, and improve interaction accuracy and interaction experience.

[0084] Specifically, Figure 2 To display the web page as a whole plane in space, Figure 3 In order to achieve the display effect in space after spatialization, the element structure of the web page is split into independent planes in space, and supports setting the position, rotation, size, style and other information in three-dimensional space to re-layout the web page content in three dimensions. In specific implementation, three-dimensional layout can be performed according to the style attribute information of the target element, and the system can be specified to provide three-dimensional local information in advance, such as three-dimensional linear layout, curved waterfall layout, grid layout, etc. It is also possible to specify the omission of some areas (for example, the navigation bar only crops and displays a logo, and no mark is equivalent to omission) to achieve a simpler display effect. By setting the position of key content (such as video content), the key content can be highlighted. In specific implementation, unnecessary information can also be hidden and displayed only when needed (for example, hidden information is displayed when the mouse moves to certain positions) to improve the display and interactive experience. At the same time, in addition to the rearrangement of existing content on the web page, three-dimensional content can also be added (for example Figure 3 The five-pointed star model in the lower right corner is the associated favorite video button) as an expansion of the content style.

[0085] In one embodiment of the present invention, Figure 8 As shown, the browser webpage spatialization method applied to the extended reality device includes, in addition to the above steps 701 to 703, further including: Step 801: extract three-dimensional association information of a second target element from the spatialized webpage code.

[0086] Step 802 : drawing and displaying a spatialized web page according to the texture image, the attribute information of the first target element in the texture image, the style attribute information of the first target element, and the three-dimensional association information of the second target element.

[0087] This embodiment can display the three-dimensional content associated with the element, thereby enriching the display effect. At the same time, it can also enable the associated displayed three-dimensional content to be operated in conjunction with the second target element, thereby facilitating the user's control over the second target element and improving the user experience.

[0088] In one embodiment of the present invention, Fig. 9 As shown, the browser webpage spatialization method applied to the extended reality device also includes: Step 901: Receive an operation event in a three-dimensional space.

[0089] Among them, the operation events in the three-dimensional space can be implemented through a handle, user gestures, etc., and the details can be referred to the existing technology, and the present invention is not limited to this.

[0090] Step 902: Convert the operation event into an event of the two-dimensional web page.

[0091] In detail, step 902 includes: determining the web page element corresponding to the operation event; determining the position of the web page element in the two-dimensional page according to the position of the web page element corresponding to the operation event in the three-dimensional space; determining the event in the two-dimensional web page according to the position of the web page element in the two-dimensional page and the operation event. In one embodiment, the collision point is calculated by finding the intersection of the ray and the object. After the collision point is calculated, the collision point can be normalized to [0,1] and returned according to the position size of the web page element in the three-dimensional space, and then converted to the corresponding event (such as a mouse event) according to the pixel size of the original web page. In specific implementation, in addition to the above-mentioned position information conversion, it is also necessary to convert the operation events in the spatial interaction, such as handle buttons or gestures, into unified abstract UI events, and further converted into events required by the web page, such as mouse events.

[0092] Step 903: driving the two-dimensional web page code to change according to the event of the two-dimensional web page.

[0093] When this step is implemented, the event of the two-dimensional web page is dispatched to the corresponding element of the web page, thereby triggering the interactive logic of the web page itself and completing the interactive operation.

[0094] Step 904, rendering a new texture image according to the changed two-dimensional web page code, and repeating the steps of extracting the attribute information of the first target element in the texture image and the steps thereafter.

[0095] Based on the same inventive concept, the present invention also provides a browser webpage spatialization device applied to a server or an extended reality device, and a browser webpage spatialization device applied to an extended reality device, as described in the following embodiments. Since the principle of solving the problem by the browser webpage spatialization device is similar to that of the browser webpage spatialization method, the implementation of the browser webpage spatialization device can refer to the browser webpage spatialization method, and the repeated parts will not be repeated.

[0096] Specifically, Fig.10 As shown, the browser webpage spatialization device applied to the server or the extended reality device includes: An element determination unit 1001 is used to determine a first target element from web page elements of a two-dimensional web page; The attribute adding unit 1002 is used to configure the style attribute information of the first target element in the three-dimensional space, and obtain the spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes the three-dimensional position information; The sending unit 1003 is used to send the spatialized web page code to the extended reality device for rendering and display.

[0097] The element determination unit 1001 and the attribute adding unit 1002 may constitute a browser web page content spatialization module, which is responsible for parsing the spatialized customized content in the web page and providing spatialized customization related development APIs.

[0098] In a further embodiment, the element determination unit 1001 is further configured to determine a second target element from the first target element or the web page element.

[0099] The attribute adding unit 1002 is further used to configure the three-dimensional association information of the second target element, and obtain the spatialized web page code according to the two-dimensional web page code, the style attribute information of the first target element and the three-dimensional association information of the second target element.

[0100] In a further embodiment, the browser webpage spatialization apparatus applied to the server or the extended reality device further includes: The verification unit 1004 is used to determine whether there is overlap or the same position in the position information of the style attribute information and / or the three-dimensional association information; if the overlapping area exceeds a preset range or the same position exists, an alarm is processed and / or the layout is adaptively adjusted for the overlapping position or the target element at the same position exceeding the preset threshold range to avoid overlap.

[0101] like Fig.11 As shown, the browser webpage spatialization device applied to the extended reality device includes: The receiving unit 1101 is used to receive the spatialized webpage code; A parsing unit 1102, used for parsing the spatialized webpage code and rendering to obtain a texture image; An extraction unit 1103 is used to extract attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code; The drawing unit 1104 is used to draw and display the spatialized webpage according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

[0102] The parsing unit 1102 , the extracting unit 1103 and the drawing unit 1104 may constitute a spatialized web page display synthesis module for synthesizing and displaying the spatialized web page content in a three-dimensional space.

[0103] In a further embodiment, the extraction unit 1103 is further used to extract the three-dimensional association information of the second target element from the spatialized webpage code. The drawing unit 1104 is further used to draw and display the spatialized webpage according to the texture image, the attribute information of the first target element in the texture image, the style attribute information of the first target element and the three-dimensional association information of the second target element.

[0104] In a further embodiment, the browser webpage spatialization apparatus applied to the extended reality device further includes: The interaction unit 1105 is used to receive operation events in the three-dimensional space; convert the operation events into events of the two-dimensional web page; and drive the change of the two-dimensional web page code according to the events of the two-dimensional web page.

[0105] The parsing unit 1102 is further used to render a new texture image according to the changed two-dimensional web page code, the extraction unit 1103 re-extracts the attribute information of the first target element in the texture image, and the drawing unit 1104 re-draws and displays the spatialized web page.

[0106] Fig.10 and Fig.11 The devices shown can make full use of the three-dimensional space, realize spatial processing of two-dimensional web pages, improve user viewing effects, and independently display target elements to realize full use of the three-dimensional space. At the same time, spatial display can also disperse the user's interaction range, facilitate user interaction, and improve interaction accuracy and interaction experience.

[0107] The present invention can break through the limitation that web pages are confined to the same plane, and realize an arrangement mode that is more suitable for viewing and interacting in three-dimensional space based on existing two-dimensional web pages, and support web pages to be designed with more freedom and more appropriate layout according to the characteristics of three-dimensional space. In terms of implementation, according to web page standards, the browser will automatically ignore the unknown element style attribute information (specifically, class and other attributes). Based on this, the spatialized web page code obtained by the present invention based on the two-dimensional web page code will be ignored by the existing browser, so as not to affect the display effect of the original web page. It is only a non-destructive expansion of the existing two-dimensional web page content, which can be compatible with the effects of the original web page on other platforms, and can also be simply and quickly spatially expanded.

[0108] In one embodiment of the present invention, a computer device is also provided, such as Fig.12 As shown, the computer device 1202 may include one or more processors 1204, such as one or more central processing units (CPUs), each of which may implement one or more hardware threads. The computer device 1202 may also include any memory 1206, which is used to store any kind of information such as code, settings, data, etc. Non-limitingly, for example, the memory 1206 may include any one or more combinations of the following: any type of RAM, any type of ROM, flash memory device, hard disk, optical disk, etc. More generally, any memory may use any technology to store information. Further, any memory may provide volatile or non-volatile retention of information. Further, any memory may represent a fixed or removable component of the computer device 1202. In one case, when the processor 1204 executes an associated instruction stored in any memory or a combination of memories, the computer device 1202 may perform any operation of the associated instruction. The computer device 1202 also includes one or more drive mechanisms 1208 for interacting with any memory, such as a hard disk drive mechanism, an optical disk drive mechanism, etc.

[0109] The computer device 1202 may also include an input / output module 1210 (I / O) for receiving various inputs (via input devices 1212) and for providing various outputs (via output devices 1214). A specific output mechanism may include a presentation device 1216 and an associated graphical user interface 1218 (GUI). In other embodiments, the input / output module 1210 (I / O), input device 1212, and output device 1214 may not be included, and the computer device 1202 may be used as a computer device in a network. The computer device 1202 may also include one or more network interfaces 1220 for exchanging data with other devices via one or more communication links 1222. One or more communication buses 1224 couple the components described above together.

[0110] The communication link 1222 may be implemented in any manner, for example, through a local area network, a wide area network (e.g., the Internet), a point-to-point connection, etc., or any combination thereof. The communication link 1222 may include any combination of hardwired links, wireless links, routers, gateway functions, name servers, etc. governed by any protocol or combination of protocols.

[0111] An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the above method are executed.

[0112] An embodiment of the present invention further provides a computer-readable instruction, wherein when a processor executes the instruction, the program therein causes the processor to execute the method described in any of the aforementioned embodiments.

[0113] It should be understood that in various embodiments of the present invention, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0114] It should also be understood that in the embodiments of the present invention, the term "and / or" is only a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent three situations: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in the present invention generally indicates that the associated objects before and after are in an "or" relationship.

[0115] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in the present invention can be implemented by electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0116] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

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

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

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

[0120] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk and other media that can store program codes.

[0121] The present invention uses specific embodiments to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A method for spatializing a browser web page, characterized in that: Applied to the server or extended reality device, including: Determine a first target element from the web page elements of the two-dimensional web page; Configuring style attribute information of the first target element in three-dimensional space, obtaining a spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes three-dimensional position information; Send spatialized web page code to the extended reality device for rendering and display.

2. The method according to claim 1, characterized in that Determining the first target element from the web page elements of the two-dimensional web page includes: Extract web page elements from two-dimensional web pages; Non-essential elements in the web page elements are filtered out.

3. The method according to claim 1, characterized in that Determining the first target element from the webpage elements of the two-dimensional webpage includes: Generate a first web page configuration interface according to the web page elements of the two-dimensional web page, and receive a first target element input by a user through the first web page configuration interface; and / or A first target element configured by a developer of the two-dimensional web page from web page elements of the two-dimensional web page; and / or Dividing the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; screening the web page elements in each region according to a first preset rule of each region to obtain a first target element; and / or The two-dimensional attribute information of the web page elements of the two-dimensional web page is input into the element weight prediction model to obtain the weight of each web page element, and the web page element with a weight greater than a first preset weight is set as the first target element; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

4. The method according to claim 1, characterized in that The style attribute information also includes: one or more of: mark information, background information, rotation information, size information, transparency information, fillet information, curved surface effect, three-dimensional model and decoration information.

5. The method according to claim 1, characterized in that The method further comprises: Determine a second target element from the first target element or the webpage element; configuring three-dimensional association information of the second target element; Obtaining the spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element further includes: obtaining the spatialized webpage code according to the code of the two-dimensional webpage, the style attribute information of the first target element and the three-dimensional association information of the second target element.

6. The method according to claim 5, characterized in that Determining the second target element from the first target element or the webpage element includes: Generate a second web page configuration interface according to the first target element or the web page element, and receive a second target element input by the user through the second web page configuration interface; and / or a second target element configured by the developer of the two-dimensional web page from the first target element or the web page element; and / or determining a second target element according to the triggering amount of the first target element or the webpage element within a preset time period; and / or Dividing the web page elements according to the layout of the two-dimensional web page to obtain web page elements in multiple regions; screening the web page elements in each region according to a second preset rule of each region to obtain a second target element; and / or The two-dimensional attribute information of the web page elements of the two-dimensional web page is input into the element weight prediction model to obtain the weight of each web page element, and the web page elements with a weight greater than a second preset weight are set as second target elements; wherein the element weight prediction model is trained using the two-dimensional attribute information and annotation weights of the annotated elements.

7. The method according to claim 5, characterized in that The three-dimensional association information includes: marking information, target element position information, associated three-dimensional object information, associated three-dimensional object position information and associated three-dimensional object attribute information.

8. The method according to claim 7, characterized in that The method further comprises: Determine whether the position information in the style attribute information and / or the three-dimensional association information overlaps or has the same position; If the overlapping area exceeds a preset range or there is a same position, an alarm process and / or adaptive layout adjustment is performed on the overlapping position exceeding the preset threshold range or the target element at the same position to avoid overlap.

9. A method for spatializing a browser web page, characterized in that: Applied to extended reality devices, including: Receiving spatialized web page code; Parsing the spatialized webpage code and rendering to obtain a texture image; Extracting attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code; A spatialized webpage is drawn and displayed according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

10. The method according to claim 9, characterized in that Drawing and displaying a spatialized webpage according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element includes: According to the attribute information of the first target element in the texture picture, extracting information associated with the first target element from the texture picture; The picture associated with the first target element is drawn using the style attribute information of the first target element.

11. The method according to claim 9, characterized in that Also includes: Extracting three-dimensional association information of a second target element from the spatialized webpage code; Drawing and displaying a spatialized web page according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element is further as follows: drawing and displaying a spatialized web page according to the texture image, the attribute information of the first target element in the texture image, the style attribute information of the first target element, and the three-dimensional association information of the second target element.

12. The method according to claim 9, characterized in that Also includes: Receive operation events in three-dimensional space; Converting the operation event into an event of a two-dimensional web page; Driving the code of the two-dimensional web page to change according to the event of the two-dimensional web page; A new texture image is obtained by rendering according to the changed two-dimensional web page code, and the attribute information of the first target element in the texture image and subsequent steps are extracted repeatedly.

13. The method according to claim 12, characterized in that The event of converting the operation event into a two-dimensional web page includes: Determine the web page element corresponding to the operation event; Determining the position of the web page element on the two-dimensional page according to the position of the web page element corresponding to the operation event in the three-dimensional space; An event in the two-dimensional web page is determined according to the position of the web page element in the two-dimensional page and the operation event.

14. A browser webpage spatialization device, characterized in that: Applied to the server or extended reality device, including: An element determination unit, used to determine a first target element from the webpage elements of the two-dimensional webpage; an attribute adding unit, configured to configure style attribute information of the first target element in three-dimensional space, and obtain a spatialized webpage code according to the code of the two-dimensional webpage and the style attribute information of the first target element, wherein the style attribute information at least includes three-dimensional position information; The sending unit is used to send the spatialized web page code to the extended reality device for rendering and display.

15. A browser webpage spatialization device, characterized in that: Applied to extended reality devices, including: A receiving unit, used for receiving a spatialized webpage code; A parsing unit, used for parsing the spatialized webpage code and rendering to obtain a texture image; An extraction unit, used to extract attribute information of the first target element in the texture image and style attribute information of the first target element from the spatialized webpage code; The drawing unit is used to draw and display the spatialized web page according to the texture image, the attribute information of the first target element in the texture image, and the style attribute information of the first target element.

16. The browser webpage spatialization device according to claim 15, characterized in that: Also includes: An interaction unit, used for receiving operation events in three-dimensional space; Convert operation events into events of two-dimensional web pages; Drive the code changes of the 2D web page according to the events of the 2D web page; The parsing unit is further used to render a new texture image according to the changed two-dimensional web page code, the extraction unit re-extracts the attribute information of the first target element in the texture image, and the drawing unit re-draws and displays the spatialized web page.

17. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 13 is implemented.

18. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor of a computer device, the method according to any one of claims 1 to 13 is implemented.

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

Images