CN114513520A - Web 3D visualization technology based on synchronous rendering of client and server - Google Patents

Abstract

The invention discloses a Web three-dimensional visualization technology based on synchronous rendering of a client and a server; rendering of the rear-end server and rendering of the browser end are carried out synchronously, rendering and loading time is reduced by preprocessing three-dimensional geographic data, the front-end browser improves the first screen performance of the system in modes of rendering of first screen skeleton information, static file loading, lazy loading of second screen information and the like, the current three-dimensional system loading white screen problem is avoided, better use experience is brought to a user, meanwhile, the complexity of the front end is not too large, and meanwhile, system data safety can be guaranteed by using WebRTC peer-to-peer transmission.

Description

Web 3D visualization technology based on synchronous rendering of client and server

technical field

The invention relates to the technical field of three-dimensional visualization, in particular to a Web three-dimensional visualization technology based on synchronous rendering of a client and a server.

Background technique

In the early days of website development, the entire system was rendered by the server. The server directly produced and rendered the corresponding HTML page and returned it to the client for display, usually PHP or JSP. Here is an example of JSP. The server is loaded by parsing the template file stored on the server side. In this case, the browser only parses the HTML, and the role of the java code is to read the data from the database and dynamically place it on the page. With the emergence of front-end Ajax, with the development mode of front-end and back-end separation, the back-end only provides API to return data, the front-end obtains data through Ajax, and can be rendered into the page through js. The biggest advantage of this method is that the front-end and back-end are responsible for Clear, the back-end focuses on data, the front-end focuses on interaction and visualization, and when the mobile terminal (IOS/Android) appears, the back-end does not need to do any processing, and the previous set of APIs can still be used.

In recent years, with the rapid development of 3D visualization technology, applications need to achieve better rendering effects, and a development model of isomorphic rendering has emerged, where the server renders and the client is responsible for interaction. The server first renders through the server, generates HTML and initializes data, and after the client gets the code and initialization data, it activates the DOM by patching and event binding on the HTML DOM (client-side hydration). The process is called isomorphic rendering. WebGL is a 3D drawing standard. This drawing technology standard combines JavaScript and OpenGL ES 2.0. By adding a JavaScript binding of OpenGL ES 2.0, WebGL can provide hardware 3D rendering to HTML Canvas, and applications can use the system graphics card. Load 3D scenes and models in the browser, and create complex navigation and data visualizations. However, in one case, when the server renders the entire page, the module of the entire page is written and maintained by the back-end personnel; in the other case, if the front-end personnel want to develop the page, they need to pass languages such as PHP and Java to write the page code, and usually HTML code and Data and corresponding logic will be mixed together, which is very troublesome to write and maintain. Moreover, the traditional Web 3D geographic information system uses WebGL technology as the rendering technology, its main limitation is that the display effect completely depends on the function of the client browser and the hardware performance of the terminal itself; the image quality depends on the display ability of the browser; the data must be Download to the client to experience, and expose the original material data. At the same time, the SPA commonly used in browser-side rendering will package all JS as a whole. The problem that cannot be ignored is that the file is too large, which leads to a long wait before rendering. Especially when the network speed is poor, it is not a good experience for users to wait for the end of the white screen.

For example, a "three-dimensional visualization rendering method and calculation method for point cloud data" disclosed in Chinese patent documents, its bulletin number CN111127610A, specifically includes the following steps: S1. First, without excluding other data, through conversion means, generate Standardized point cloud data in a defined format relates to the technical field of three-dimensional visualization of point cloud data. The three-dimensional visualization rendering method and calculation method of point cloud data, through the point cloud rendering after data normalization and classification processing, through vertex rendering, three-dimensional mesh-based mapping rendering, and triangulation algorithm-based mesh reconstruction Rendering, point cloud motion animation, and point cloud particle animation realize a variety of rendering algorithms for point cloud data. These algorithms have different rendering methods, different effects, and different application directions. The methods can complement each other and operate more efficiently. Reliable, through efficient algorithms, the rapid rendering of point cloud data is realized, which reduces the rendering time of more than ten minutes to several minutes or tens of seconds. However, the operation of the algorithm requires the support of the background. In the case of a poor network, full rendering for 3D visualization will lead to complicated data loading, which will affect the speed of screen rendering, and still cannot solve the limitations of traditional rendering.

SUMMARY OF THE INVENTION

The invention mainly aims at the problems of page jitter, memory overflow and long rendering time for the first screen due to the difference between server rendering and browser rendering in the prior art; it provides a Web three-dimensional visualization technology based on synchronous rendering of the client and the server; the back-end server Rendering and browser-side rendering are performed synchronously. The rendering and loading time is reduced by preprocessing 3D geographic data. The front-end browser improves the performance of the first screen of the system by rendering the first screen skeleton information, loading static files, and lazy loading of the second screen information, avoiding the need for The current 3D system loading white screen problem gives users a better user experience, and at the same time makes the front-end complexity not too large.

The above-mentioned technical problems of the present invention are mainly solved by the following technical solutions:

A Web 3D visualization technology based on synchronous rendering of a client and a server, the Web 3D visualization technology comprises the following steps:

Step S1, the back-end server performs model lightweighting, fine-grained scene, and progressive loading preprocessing on the 3D geographic data; the model lightweighting divides the model into model units to reduce redundancy; fine-grained analysis of the scene of the building is performed. Floor distribution and connectivity between floors, and control the asymptotic transmission and loading of scene data during roaming; progressive loading prioritizes basic data, and increases model accuracy according to viewpoint positions; Wait for transmission to the client;

Step S2, the client renders the user data and the first screen data through the EJS browser, that is, writes the relevant parameters into the EJS template, and returns the rendered HTML document to the browser through Node.js parsing; the client rendering includes the first screen Skeleton information rendering, static file loading and image loading;

Step S3, layering according to the DIV in the secondary screen, each layer is asynchronously loaded as a data interface, and when the page is initialized, each DIV layer only retains the outermost DIV label;

Step S4, after the user interacts, the browser makes an independent judgment and the data is re-rendered.

Optimize the loading and rendering of 3D data, reduce the loading amount many times, adjust the accuracy of the model in real time by adding the corresponding incremental network according to the viewpoint position, improve the performance of the first screen of the system, avoid the white screen loading problem of the current 3D system, and give users more Good user experience; the peer-to-peer transmission based on WebRTC can significantly improve the transmission speed of 3D data, and users do not need to install special rendering plug-ins, and users can load the system smoothly under the condition of lower hardware configuration and bandwidth.

Preferably, the model lightweight preprocessing process described in step S1 is as follows:

Step A1. There are often reusable units in the 3D model, but they are only in different directions and spatial positions, so some model units can be obtained by rotating, scaling, and translating them. Process the repeated and symmetrical models, perform component-level semantic analysis on the original data, remove geometric repeatability detection and repeatability redundancy, and transmit only the smallest model unit;

Step A2: Rotate, scale, and translate the smallest model unit to obtain a complex model unit to reduce redundant data of the scene.

The model is split and the smallest unit element is found, and only the smallest model unit is transmitted, which can reduce the complexity of the transfer and speed up the process of rendering transfer. Reduce redundancy and increase transfer speed.

Preferably, the scene fine-grained preprocessing process described in step S1 is as follows:

Step B1, analyzing the floors and space objects containing semantic information in the BIM data of the building information model, to form a preliminary structure space structure;

Step B2: Obtain special components, such as the floor of the structure space structure, and analyze it in combination with the preliminary structure space structure to form the floor distribution of the entire building and the connection relationship between floors; inside each floor, combine the preliminary structure space structure for further steps. The analysis of the interconnection relationship in the floor of the whole building will form the division of the indoor subspace and the structure diagram of the interconnection relationship of the whole building;

Step B3: During scene roaming, the user's field of vision is limited, and he is only interested in the surrounding scenes. Therefore, the current roaming requirement can be satisfied as long as the visible objects around the user's avatar are transmitted and loaded. Transmit and load visible objects around the user's avatar; according to the current position of the user's avatar, determine the subspace where it is located and calculate the objects in the current view cone, reduce the amount of loaded data, and check the range of the current view point during the real-time roaming process. The amount of data to be loaded can be effectively controlled to achieve asymptotic transmission and loading of scene data.

Cone refers to the range of a cone visible to the camera in the scene. The scene in the view cone is visible, and vice versa. Therefore, directly calculating the objects in the display cone can reduce the overall loading amount. This method can further reduce the loading amount during the roaming process. By reducing the loading amount, the transmission speed can be improved as much as possible, and the loading process can be There are white screen freezes, etc.

Preferably, the process of the progressive mesh preprocessing in step S1 is as follows:

In step C1, the page loading focuses on the user's look and feel, so in a complex scene, the user's look and feel is mainly considered when loading. When performing progressive mesh preprocessing on complex models in the scene that cannot be transmitted in real time at low bandwidth, the original model is processed into two parts, the base network and the incremental mesh, which contain less data;

Step C2: At the same time, during the scene roaming, the base network data is processed first, and in the subsequent roaming process, the corresponding incremental network is added according to the viewpoint position to adjust the accuracy of the model in real time.

The objective fact that how clearly the human eye sees things is inversely proportional to the distance, when the object is farther from the user's avatar, it is rough, and when it is closer, it is finer. The page loading focuses on the user's perception. In order to speed up the transmission speed without affecting the user's perception, this method can be used when transmitting complex scenes to reduce the transmission volume and ensure the user's experience.

Preferably, the WebRTC-based peer-to-peer transmission described in step S1 is point-to-point transmission, including establishing a connection between two nodes using RTCPeerConnection, creating an RTCDataChannel, and establishing a bidirectional data channel in the peer-to-peer connection. A browser-centric protocol built at the application level. The goal is to provide web developers with the function of real-time communication based on simple JavaScript api, so as to quickly develop rich browser-side multimedia applications. Applications using WebRTC do not need to install any browser plug-ins and support cross-platform. WebRTC provides the core technology required for video conferencing, and has been widely used in browser-based video conferencing. Using WebRTC for basic data transfer only requires the use of two APIs, RTCPeerConnection is a component of WebRTC for building stable and efficient streaming between peer-to-peer. RTCDataChannel enables browsers (point-to-point) to establish a high-throughput, low-latency channel for transmitting arbitrary data.

Preferably, the two nodes transmit signaling via the server, and the exchanged signaling includes: session information; network configuration; and media adaptation. First, use RTCPeerConnection to establish a connection between nodes. This requires two nodes to transmit signaling through the server. You can choose any method and adopt any protocol to transmit signaling. There are three types of signaling that need to be exchanged. Session information: used to initialize There are also errors in communication; network configuration: such as IP address and port; media adaptation: what encoder and resolution can be accepted by the browser of the sender and receiver.

Preferably, in the step S2, the static file loading includes the following steps:

Step S211, changing the CSS and JS codes related to the first screen rendering from the quoted form to the inline form to reduce HTTP requests;

Step S212, put the JS code of the data request part in the head; put the CSS style of the first screen rendering and the JS data request in the head;

Step S213 , after ensuring that the style and data of the first screen are successfully rendered, the logic of the second screen is delayed for processing and execution, and the relevant second screen data is triggered and reported by the front end in a delayed manner to reduce network congestion.

The purpose of putting the JS code of the data request part in the head is to ensure that the data can be returned at the first time. Compared with placing the data request externally, it reduces the round-trip time for loading JS files. CSS styles and JS rendered on the first screen The data request is placed in the header, which is to ensure that the CSS above-the-fold style rendering and request data can be executed and returned immediately when the server returns the HTML document.

Preferably, in the step S2, the image loading includes the following steps:

Step S221, reduce the HTTP request of picture resource, carry out merging processing for the low color bit small picture of the same module, use CSS-SPIRIT technology to merge it into a picture, control display by using background Image and backgroundPosition property;

Step S222, the image displayed on the first screen is directly loaded to request the corresponding path resource; the second screen image is lazy loaded, and an HTTP request is sent to the background only when the user requests the second screen data; when the page is loaded, the resource path of the IMG tag is Saved in a custom attribute, the SRC attribute points to a small image as a placeholder to prevent empty HTTP requests;

Step S223: After the rendering of the first screen is completed, traverse the DOM tree to obtain the real path of the lazy loaded IMG and the offset distance of the current image relative to the top of the document, and save the above attributes in the hash array; After viewing the range, assign the real path address to SRC, and delete the loaded image from the array;

Step S224, in the process of waiting for the request, set a feedback loading prediction prompt.

The image data preprocessed by the back-end server is processed to reduce the number of requests. Only when the user requests secondary screen data, an HTTP request is sent to the background. At the same time, the data that has been loaded is deleted to avoid loading errors. When there is no guarantee that the network environment causes the image loading speed to be slow, the user is given a loading prediction prompt to ensure that the user is informed, thereby ensuring the user experience.

Preferably, in the step S4, the user interacts with the system to determine whether a mouse sliding event or a scrolling event occurs, and calculates user operation data such as the offset of the browser, the height of the current viewing angle, and the angle of the current viewing angle, etc. The current screen displays the required data, and re-renders the on-screen data. The rendering process can ensure real-time rendering of the front-end interface to meet the user's experience.

The beneficial effects of the present invention are:

1. A Web 3D visualization technology based on synchronous rendering of client and server is proposed, which can optimize the loading and rendering of 3D data, improve the performance of the first screen of the system, avoid the white screen loading problem of the current 3D system, and give users a better experience.

2. WebRTC can ensure the security of system data: WebRTC enforces encryption, and all transmitted data of media and data use standard AES encryption; WebRTC can only be used if the user explicitly needs to use it; Sanboxed, No Plugins, WebRTC runs on Chrome Inside the browser's sandbox. So even if someone tries to attack webRTC in Chrome, the browser and the user will be fully protected; the WebRTC SecurityArchitecture protocol is used to ensure data security.

3. The peer-to-peer transmission based on WebRTC can significantly improve the transmission speed of 3D data, and users do not need to install special rendering plug-ins, and users can load the system smoothly under the condition of lower hardware configuration and bandwidth.

Description of drawings

Fig. 1 is the rendering flow chart of this method;

Figure 2 is a flow chart of backend server pre-rendering;

Figure 3 is a flow chart of browser-side rendering;

Fig. 4 is a schematic diagram of peer-to-peer transmission based on WebRTC;

Figure 5 shows the static file loading.

Detailed ways

It should be understood that the embodiments are only used to illustrate the present invention and not to limit the scope of the present invention. In addition, it should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms also fall within the scope defined by the appended claims of the present application.

The technical solutions of the present invention are further described in detail below through the examples.

A web 3D visualization technology based on client and server synchronous rendering. Based on the principle of the shortest loading time for the first screen, this solution adopts a mixed mode of client rendering and server rendering to distribute web data to realize asynchronous loading and localization of different modules. cache.

First, the back-end pre-processes the huge amount of 3D data with model lightweighting, fine-grained scene, progressive loading, etc., and pre-renders it through a high-performance back-end server and transmits the 3D data to the client peer-to-peer based on WebRTC;

The client side renders the user data and first screen data through EJS (a JavaScript template library) on the browser side, that is, writes the relevant parameters into the EJS template, parses it through Node.js, and returns the rendered HTML document to the browser. The secondary screen is layered according to DIV, and each layer is made into a separate data interface for asynchronous loading. When the page is initialized, each DIV layer only retains the outermost DIV tag.

When the user interacts, the browser makes a judgment and the data is re-rendered. The advantage of this is that it can improve the performance of the first screen of the system, ideally avoid the white screen loading problem of the current 3D system, give users a better user experience, and at the same time make the front-end complexity not too large. The flowchart of this solution is shown in Figure 1; the back-end rendering and browser rendering flowcharts are shown in Figure 2 and Figure 3, respectively.

The three-dimensional geographic data preprocessing includes the following steps:

First, the model is lightweight, and some repetitively symmetric models are processed, such as axisymmetric models, and half of the axisymmetric models are taken as the minimum model unit. Perform component-level semantic analysis on the original data, geometric repetition detection and repetition redundancy removal, only the smallest model unit is transmitted, and complex model units are obtained by rotating, scaling, and translating the smallest model unit, reducing the redundancy of the entire scene data.

Second, the scene is fine-grained, and the preliminary structure space structure is formed by analyzing the storey and space objects containing semantic information in the BIM (Building Information Modeling) data; Further floor analysis is carried out on the preliminary spatial structure of the building to form the floor distribution of the entire building and the connectivity between floors. Indoor subspace division and connection structure diagram. During scene roaming, the user's field of view is limited, and he is only interested in the surrounding scenes, so as long as the visible objects around the user's avatar are transmitted and loaded, the current roaming requirements can be satisfied. The view frustum refers to the range of a cone visible to the camera in the scene. The scene within the view frustum is visible, and vice versa. According to the current position of the user avatar, it can determine the subspace where it is located and calculate the objects in the current view cone, which can further reduce the amount of loaded data. The amount of data can be effectively controlled to realize asymptotic transmission and loading of scene data.

Third, progressive mesh, progressive mesh (Progressive Mesh, PM) is also a common means of current complex model transmission. Taking advantage of the objective fact that the clarity of the human eye is inversely proportional to the distance, the object is rough when it is farther from the user's avatar, and finer when it is closer. For some complex models in the scene that cannot be transmitted in real time when the bandwidth is low, PM preprocessing is performed, and the original model is processed into two parts, the base network and the incremental mesh, which contain a small amount of data. During scene roaming, the base network data is first processed, and in the subsequent roaming process, the accuracy of the model is adjusted in real time by adding corresponding incremental networks according to viewpoint positions. This enables the on-demand processing of incremental data without affecting the quality of user experience during the entire roaming process.

The server rendering process based on WebRTC peer-to-peer transmission is shown in Figure 4. Centered on the browser, the goal of the protocol established at the application level is to provide web developers with the function of real-time communication based on simple JavaScript and api, so as to quickly develop rich browser-side multimedia applications. Applications using WebRTC do not need to install any browser plug-ins and support cross-platform. WebRTC provides the core technology required for video conferencing, and has been widely used in browser-based video conferencing. Using WebRTC for basic data transfer only requires the use of two APIs, RTCPeerConnection is a component of WebRTC for building stable and efficient streaming between peer-to-peer. RTCDataChannel enables a high-throughput, low-latency channel between browsers (point-to-point) to transmit arbitrary data. First, use RTCPeerConnection to establish a connection between nodes. This requires two nodes to transmit signaling through the server. You can choose any method and adopt any protocol to transmit signaling. There are three types of signaling that need to be exchanged. Session information: used to initialize There are also errors in communication; network configuration: such as IP address and port; media adaptation: what encoder and resolution can be accepted by the browser of the sender and receiver. After the connection is established, create an RTCDataChannel to establish a two-way data channel in the peer-to-peer connection, based on which 3D geographic data can be passed between browsers.

When the client renders user data and first screen data through the EJS browser, it mainly goes through three steps: rendering of the first screen skeleton information, static file loading and image loading; the image loading is lazy loading of images.

Among them, the rendering of the skeleton information on the first screen is to preferentially render the core parts such as menus in an isomorphic way. You can use isomorphism to render the menu and page skeleton (Skeleton Screen). Provide prompt information to users to reduce unreasonable waiting time.

The static file loading process is shown in Figure 5; first, the CSS and JS code related to the first screen rendering is changed from the reference form to the inline form, so as to reduce HTTP requests. Second, put the JS code of the data request part in the head, the purpose is to ensure that the data can be returned at the first time, compared with the data request outside, it reduces the time of loading and round trip of the JS file. Third, the CSS style and JS data request for the first screen rendering are placed in the header, which is to ensure that the CSS first screen style rendering and request data can be executed and returned immediately when the server returns the HTML document. Fourth, after ensuring the successful rendering of the style and data of the first screen, the logic of the second screen is delayed and executed, and the relevant second screen data is sent and reported through the front-end trigger delay to reduce network congestion.

Image loading mainly adopts the image lazy loading method. The image lazy loading strategy is implemented in three aspects: reducing the number of image requests, asynchronously requesting secondary screen images, and improving backward compatibility.

Reduce the HTTP requests for image resources, merge small images with low color bits of the same module, use CSS-SPIRIT technology to merge them into one image, and control the display by using the background Image and backgroundPosition properties.

The pictures displayed on the first screen are directly loaded to request the corresponding path resources; the pictures on the second screen are loaded lazily, and HTTP requests are sent to the background only when the user requests the data on the second screen. On page load, the resource path of the img tag is stored in a custom attribute, and the src attribute points to a small image as a placeholder to prevent empty HTTP requests. After the first screen is rendered, traverse the DOM tree to obtain the real path of the lazy loaded img and the offset distance of the current image relative to the top of the document, and save the above attributes in the hash array. After judging that the current page position appears in the visible range, assign the real path address to src, and delete the loaded image from the array.

Finally, the so-called backward compatibility means that in the case where the network environment cannot be guaranteed, the picture speed is slow or the request fails, and the user experience must be guaranteed. There are many factors that affect the image loading time, such as server response time, network bandwidth, image size, etc. During the request waiting process, set the feedback loading prediction prompt to ensure a good user experience during the waiting period.

In the final user interaction stage, the data data after the map operation is re-rendered; the user interacts with the system, especially the operation of the 3D scene, to determine whether the mouse sliding event or scrolling event occurs, the offset of the browser, the current The height of the viewing angle, the angle of the current viewing angle and other user operation data are calculated, the data required for the current screen display is determined, and the screen display data is re-rendered.

Claims (9)

1. A Web three-dimensional visualization technology based on synchronous rendering of a client and a server is characterized by comprising the following steps:

step S1, the back-end server carries out model lightweight, scene fine-grained and progressive loading pretreatment on the three-dimensional geographic data; the model is divided into model units by model lightweight, so that redundancy is reduced; analyzing the floor distribution condition of the building and the communication relation among floors in a scene fine-grained manner, and controlling the asymptotic transmission and loading of scene data in the roaming process; the basic data is subjected to progressive loading and priority processing, and the model precision is increased according to the viewpoint position; after preprocessing, the three-dimensional data is transmitted to the client side in a peer-to-peer mode based on the WebRTC;

step S2, rendering the user data and the first screen data through an EJS browser by the client, namely writing the related parameters into an EJS template, and returning the rendered HTML document to the browser through node.js analysis; the client rendering comprises first screen framework information rendering, static file loading and picture loading;

step S3, layering according to DIV in the secondary screen, wherein each layer is independently used as a data interface for asynchronous loading, and each DIV layer only reserves the DIV label of the outermost layer when the page is initialized;

and step S4, after the user interacts, the browser makes independent judgment and data is re-rendered.

2. The technology for Web three-dimensional visualization based on client-server synchronous rendering of claim 1, wherein the model lightweight preprocessing procedure in step S1 is as follows:

step A1, processing the repeated and symmetrical model, performing semantic analysis of component level on the original data, removing geometric repeatability detection and repeatability redundancy, and only transmitting the minimum model unit;

and step A2, rotating, scaling and translating the minimum model unit to obtain a complex model unit, and reducing redundant data of the scene.

3. The technology for Web three-dimensional visualization based on synchronous rendering by client and server in claim 1, wherein the scene refinement preprocessing in step S1 is as follows:

b1, analyzing floors and space objects containing semantic information in BIM data of the building information model to form a primary structure space structure;

step B2, acquiring special components, and analyzing by combining with the space structure of the primary structure to form the floor distribution condition of the whole building and the communication relation among floors; in each floor, further in-floor communication relation analysis is carried out by combining a preliminary structure space structure, and an indoor subspace division and communication relation structure chart of the whole building is formed;

step B3, when the scene is roaming, transmitting and loading visible objects around the user virtual avatar; and judging the subspace of the user virtual avatar according to the current position of the user virtual avatar, calculating the object in the current view cone, reducing the loading data volume, effectively controlling the data volume needing to be loaded in the current view point range in the real-time roaming process, and realizing the asymptotic transmission and loading of the scene data.

4. The Web three-dimensional visualization technology based on synchronous rendering by client and server in claim 1, wherein the process of the progressive mesh preprocessing in step S1 is as follows:

step C1, when carrying out progressive grid preprocessing on a complex model which cannot be transmitted in real time at low bandwidth in a scene, processing the original model into a base network and an incremental grid which contain less data;

and step C2, when scene roaming is carried out, the base network data is processed firstly, and in the subsequent roaming process, the accuracy of the model is adjusted in real time by adding a corresponding incremental network according to the viewpoint position.

5. The Web three-dimensional visualization technology based on synchronous rendering of the client and the server according to claim 1, wherein the WebRTC-based peer-to-peer transmission in step S1 is peer-to-peer transmission; the method comprises the steps of establishing connection between two nodes by using RTCPeerConnection, creating RTCDataChannel and establishing a bidirectional data channel in peer-to-peer connection.

6. The Web three-dimensional visualization technology based on client-side and server synchronous rendering of claim 5, wherein two nodes are in signaling communication via a server, and the exchanged signaling comprises: information of session; network configuration; and (5) media adaptation.

7. The technology for Web three-dimensional visualization based on synchronized rendering of client and server in claim 1, wherein in the step S2, the static file loading comprises the following steps:

step S211, changing codes of the CSS and the JS related to the first screen rendering from a quoted form to an inline form, and reducing HTTP requests;

step S212, putting the JS code of the data request section to the head; placing the CSS style and JS data request for the first screen rendering at the head;

and step S213, after the style of the first screen and the data rendering are ensured to be successful, the logic delay post-processing execution of the second screen is carried out, and the related second screen data is triggered by the front end to be transmitted and reported in a delay manner, so that the network congestion is reduced.

8. The technology for Web three-dimensional visualization based on synchronous rendering by client and server in claim 1, wherein in the step S2, the loading of the picture includes the following steps:

step S221, reducing HTTP requests of picture resources, merging the low-color-Position small pictures of the same module, merging the low-color-Position small pictures into one picture by using CSS-SPIRIT technology, and controlling display by using background Image and background Position attributes;

step S222, directly loading the picture displayed on the first screen to request the corresponding path resource; the secondary screen picture is lazily loaded, and an HTTP request is sent to the background only when a user requests secondary screen data; when a page is loaded, a resource path of an IMG label is stored in a custom attribute, and an SRC attribute points to a small picture as a placeholder to prevent an empty HTTP request;

step S223, after the rendering of the first screen is completed, traversing the DOM tree to obtain a real path of the lazy loading IMG and the offset distance of the current picture relative to the top of the document, and storing the attributes in a Hash array; after judging that the current page position appears in the visible range, assigning a real path address to the SRC, and deleting the loaded picture from the array;

step S224, in the process of requesting for waiting, setting a feedback loading prediction prompt.

9. The technology of claim 1, wherein in step S4, the user interacts with the system to determine whether a mouse sliding event or a scrolling event occurs, calculates user operation data such as a browser offset, a current viewing angle height, and a current viewing angle, determines data required for current screen display, and re-renders screen display data.

Images