More and more three-dimensional hydrodynamic models, like Delft3D, EFDC, MIKE 3, FLOW-3D, have been applied to engineering practice, which contributes to studying the spatial-temporal characteristics of water flow movement accurately (Freeman et al. 2015; Ashall et al. 2016; Gems et al. 2016; Yin & Seo 2016). However, the above-mentioned models are primarily desktop applications, and rarely used as public web services (Sun et al. 2015). It is necessary to install corresponding software packages on each computer to run these programs. Moreover, most of their post-processing modules are presented in several two-dimensional horizontal planes and vertical planes to exhibit the three-dimensional scenario indirectly (Kang & Jin 2010). The visualization of calculated results is limited in terms of the degree of user interaction and user control, including a lack of support for the ability to zoom, pan, rotate, and perform any type of highly interactive visualization process and analysis (Yin et al. 2015).
Several efforts have been carried out to explore the feasibility of employing web-based architectures to run virtual reality applications, aiming to get the same experience as the desktop version of three-dimensional applications. In 1994, Mark Pesce and Tony Parisi created a browser called Labyrinth, which was the early prototype of the three-dimensional browser on the World Wide Web. In December 1997, Virtual Reality Modeling Language (VRML 97), which is the original standard for Web3D, was released. In January 1998, the VRML97 was approved by the international standardization organization (ISO) (Carey et al. 1997). As an international standard of ISO/IEC, the stability of VRML is guaranteed, and the application of network three-dimensional technology is rapidly promoted. In 2002, the Web3D alliance issued a draft of the extensible three-dimensional (X3D) standard. In August 2004, the X3D specification was approved by ISO as the international standard of ISO/IEC 9775 (ISO 2008). VRML is still used, but is currently being replaced with X3D, which is an open standards XML-enabled three-dimensional file format to enable real-time communication of three-dimensional data across all applications and network applications. Subsequently, three-dimensional visualization technologies such as Cult3D, Viewpoint, Java3D, Unity3D, and Flash3D appeared successively.
An advantage of Web3D technologies is that they can also be better integrated with modern tools in the visualization ecosystem. In addition, the web can be the least platform-related mode to structure and share visualizations (Roberts et al. 2014). However, all of the different types of Web3D technologies mentioned above are only applicable to specific browsers, or browsers usually need to install different plug-ins to render and display three-dimensional scenes (Christen et al. 2012). With the same Web3D technology, different plug-ins will also generate different quality rendering effects. Therefore, users need to consider the compatibility of browser plug-ins to different systems and browsers, and select the appropriate ones according to the user's requirements for the quality of the picture, which greatly affects the user experience.
With the development of virtual reality (VR)-related fields and internet technologies, the combination of VR and internet technology has become one of the developing trends. Gracanin & Wright (1999) first put forward the concept of web virtual reality (WebVR). WebVR is a web-based interactive VR system, which is based on the internet and online VR technology to display the omni-directional information of different scale scenes in the form of three-dimensional real scene simulation. WebVR is a booming frontier technology, which represents a direction for the development of VR and computer applications. Sometimes, picture crosstalk and a lack of camera lens distortion correction resulted in an uncomfortable viewing experience in the browser-based non-VR applications. These problems can be solved by taking advantages of WebVR technology. Several researchers have conducted studies in the application of VR-related technologies to the display of hydrodynamic model results. Liang & Molkenthin (2001) developed a virtual GIS-based hydrodynamic model system for Tamshui River. They converted the model predictions into the VRML format and showed the integration of the terrain model, fluid flow, and salinity field in the virtual environment. Wenisch et al. (2004) presented an application of an interactive CFD-based computational steering system, connecting a high performance computer with a VR environment. Zhang et al. (2004) created the three-dimensional view image of a ship using the MultiGen software of MultiGen Corporation. The texture of the ship was rooted in the photos taken from real ships. Kang & Jin (2010) employed the video anaglyph technology in three-dimensional hydrodynamic simulation. Thekkedan et al. (2015) used VRML to create the VR for a remotely operated vehicle during the inspection tasks. However, most visualization tools mentioned above are standalone, running on certain operating systems and platforms, or browsers and usually need users to install different plug-ins to render and display three-dimensional scenes. These studies do not take advantage of the rapidly evolving internet technologies.
We devised and built an immersive and interactive three-dimensional VR scene employing modern web technologies, without the use of plug-ins. Through the WebVR system, users can browse scenes and objects displayed in a three-dimensional form at anytime and anywhere in the form of webpage, and can perform real-time interaction and roaming operation in order to take part in experiences that are either very difficult or impossible to take place in real life. Therefore, because of their immersion, interactivity, and involvement, WebVR applications are being increasingly deployed in many contexts (Finkelstein et al. 2011; Abbasi & Baroudi 2012; Muhanna 2015; Lv et al. 2016), for example, distance education, e-commerce, interactive entertainment, flight simulators, and geographical information systems. However, the authors have not found the application of this technology in the visualization of the three-dimensional hydrodynamic model.
To the best of the authors' knowledge, this is the first time that the calculated result of a three-dimensional hydrodynamic model using WebVR technology has been demonstrated and analyzed. This paper describes in detail how web-standard technologies can be used to implement fully immersive and interactive VR three-dimensional visualization system of flow field. The remainder of this paper is organized as follows: In ‘Methods’, we mainly present the process of establishing the three-dimensional VR scene based on network. The ‘Results and discussion’ section reveals the application of this method in practical engineering. In ‘Conclusions’, we give a conclusion and discuss the future work.
HydroInfo was developed by Dalian University of Technology, and can provide hydrodynamic calculation services on the network server (Jin 2013). Users no longer need to install any of the local software, they customize the software on demand, update it online, and complete the complex hydrodynamic simulation process using only a browser. HydroInfo can be applied to the flow and transport problems of flood, breakup and inundation, sediment and river evolution analysis, tidal current and wave numerical simulation, and so on.
Unstructured grids are generated by Delaunay method (Watson 1981). A vertex-centered finite volume method is used for solution of the two-dimensional shallow water equation on unstructured grids. Based on the approximate Riemann solution of Roe scheme, a Project Limited Central Difference (PLCD) method based on Monotonic Upwind Scheme for Conservation Laws (MUSCL) scheme is constructed. By correcting the source term of the bottom slope to solve the hydrostatic problem under submerged condition, the harmony of the higher order scheme is guaranteed and the second-order accuracy of the scheme is guaranteed. The conservative flux limitation method is used to avoid negative water depth at the wet–dry interface, to ensure that there is no mass error in the calculation, and to better deal with the problems of dynamic boundary and total mass conservation.
The focus of this paper, as shown in the top left corner of Figure 1, is to use WebVR technology to realize three-dimensional rendering of flow field in the browser. Through the WebVR technology, users can enhance their immersion experience by using virtual reality hardware. In this paper, IPhone 6S and Google Cardboard are assembled into a simple HMD (head-mounted display). The screen is split into two parts that display a stereoscopic image angled slightly different for each eye respectively, which enables people to see the three-dimensional content of the screen based on binocular stereo vision. In addition, it relies on accelerometers, gyroscopes, and other sensors in the phone to interact with the scene. Users can access the visualization system through laptops, desktops, and smartphones with HMD.
Establishment of three-dimensional virtual reality scene
Finally, the ordinary three-dimensional scene drawn above is converted into a VR scene, using the A-Frame framework. A-Frame is an open source three.js framework made by Mozilla, which uses the WebVR API. The framework utilizes an entity-component-system pattern and an asset management system (Mozilla 2018). The entities alone are basically empty containers, without any attributes, unless components are inserted into the entities' sockets. Components are what make the entities have visibility, color, animations, functionality (Hedelin 2017), etc. The objects described above in the scenario are added to the A-Frame components separately. Then, components are inserted into the different types of entities' sockets. The three-dimensional VR scene is established. At this point, when the user clicks the ‘Enter VR’ button, the screen is cut into two parts, and the content displayed on the two parts has a certain difference. The user can get the immersive experience by using a mobile phone mounted in Google Cardboard. In addition, users can interact with VR scenes using a Gazed-Based cursor component. The entire visualization process of the three-dimensional WebVR scene is shown in Figure 3.
In the process of building a three-dimensional VR scene online, the following technical difficulties were encountered. First, Morphtarget, the built-in method of three.js, was used to animate the water surface. The memory cannot be freed, and the color of the water surface cannot change with time. In order to solve this problem, we adopted the method of destroying the model of the previous moment in the process of rendering the scene, and rebuilding the model of the new moment. Second, when rendering the velocity flow field, an oriented cone needs to be drawn at each mesh point. Due to the excessive number of grid points, the burden in the scene was too large, and which can easily cause rendering failure. We adopted a method named Geometry.mergeMesh to solve this technical difficulty.
In order to visualize the analytical result of the cross-section, the mesh generation of the cross-section is the key. First, the section lines are reprocessed so that they fall entirely into the computational domain. Then, it is necessary to divide each section line into several equal parts in order to smooth the color transition of the cross-section. The endpoints of each equal part are used as the identification points of the section line. According to the coordinates of the identification points and the corresponding elevation values of the free surface at different moments, the nodes of the profile grid are obtained, and then the connection information between nodes is constructed to complete the gridding of the profile.
Representation of flow field
The Lagrange method is often used to describe the flow field in order to better track the flow trajectory in accordance with people's intuitive understanding of the flow movement. The flow field calculated by the hydrodynamic model is represented by the Euler method, which reflects the time-varying process of the variables at grid nodes or cell centers. The Lagrange field describes the motion track of the particle, which is usually characterized by path lines and tracer balls (Zhang et al. 2018).
The locations of the marker points are connected in chronological order to generate path lines, and the positions of the tracer balls change with time to form animation. The particles are checked to determine whether their positions exceed the calculated domain at each moment, and if so, they are deleted.
Case study simulation
In order to test the feasibility of the method used in this paper, a case study of three-dimensional dam break visualization was taken as an example. This example is an asymmetric dam break test with an obstacle downstream. There are dry and wet interfaces in the process of dam break, and complex flow states such as reflected flow and backflow are formed in many places. As shown in Figure 4, the pool with solid walls around it is divided into two parts, the middle of which is controlled by a sluice gate, and a pyramid-shaped obstacle is arranged in the downstream submerged area. The initial water level of the reservoir is 0.5 m and that of the flood plain is 0.1 m.
Our current network visualization system for presenting the case study was built using the Three.js and A-Frame, an open source three.js framework uses the WebVR API. The data used for visualization were calculated by HydroInfo.
The case study results have been measured on a personal laptop that was equipped with an Intel(R) Core(TM) i7-6700HQ 2.60GHZ CPU, 8.00 GB of memory, and an NVIDIA GeForce 960M graphic with 2.0 GB of graphics memory. The operating system was the Windows 10 64-bit Professional Edition, the development environment was JetBrains WebStorm 2018.1.1 x64, and the browser used was Google Chrome 67, although the system had been successfully tested to work with all major browsers, including mobile ones such as Mobile Safari, Firefox 25 + , and Android Browser. The hydrodynamic model HydroInfo is running on the server to provide computing services. On the browser side, the user sends a computing request to the server. After the server receives the request, the background program calls the model for hydrodynamic calculation and saves the calculated results on the server. The calculation progress is constantly returned to the front end. When the browser receives the instruction that the calculation has been completed, the user can send a visualization request to the server to load the results of the server-side calculation. The calculated results include different hydraulic factor values of different nodes at different moments. After receiving the data from the server, the browser parsed it. Then, the case study calculated results are shown in our three-dimensional VR scene. Different from the traditional way of redefining a new canvas to analyze the profile data in a two-dimensional pattern, a three-dimensional flow field with multiple profiles shows the position of profiles in the original computational domain and is conducive to the comparative analysis of multiple cross-section data. When the Lagrange method is used to describe the three-dimensional flow distribution, path lines and tracer particles are used to track the trajectories of mass particles to make us better understand the flow field.
RESULTS AND DISCUSSION
Case study results
The three-dimensional scene can be rendered on all the main brands of web browsers in a computer, and viewed with the naked eye. As shown in Figures 5 and 6, the three-dimensional visualization scenes of the plain Three.js version are displayed on regular browsers, which can be interacted with mouse controls. Figure 5(a) shows the three-dimensional topography whose height is represented by different rainbow colors. Figure 5(b) reveals the grid, which consists of 5,269 nodes and 10,176 elements. The free surface and local flow fields of the three-dimensional dam break are shown in Figure 5(c) and 5(d). The direction of the cone represents the velocity direction of the flow field, and the length of the cone indicates the magnitude of the flow field velocity. The animation vividly shows the violent change process of surface flow velocity and water surface when dam break occurs. The velocity at the dam break is large and the change of water surface is intense. Due to the action of plunging flow, there are two major circulations on both sides of the dam break, the left side of the dam break is a counterclockwise circulation, and the right side is a clockwise circulation, as shown in Figure 5(d). Meanwhile, with the superposition of reflected water waves, the phenomenon of local backwater is obvious. Figure 5(e) exhibits a three-dimensional flow field with multiple profiles. The three-dimensional visualization of path lines and tracer particles is realized, as shown in Figure 5(f). Figure 6(a)–6(d) show cross-section changes at different times. Figure 6(e)–6(h) display flow velocity and water level time series of the dam break. The three-dimensional network-based visualization system can achieve the same rendering effect as similar studies done by Kang & Jin (2010) and Zhang et al. (2016). They realized the three-dimensional display of dam break on the client side using Windows Presentation Foundation (WPF) based on client/server (C/S) architecture.
The three-dimensional scenes in Figures 5 and 6 are implemented using pure Three.js. They can be rendered at a very high frame rate, even with frequent mouse interactions. However, sometimes picture crosstalk and a lack of camera lens distortion correction result in an uncomfortable viewing experience.
In order to solve these problems, we also built a three-dimensional virtual reality visualization system using WebVR technology, on top of Three.js, on the basis of the above work. The problem of insufficient camera lens distortion correction was solved by taking advantage of Google Cardboard. The three-dimensional virtual reality visualization system using WebVR technology improved the image clarity greatly compared with the pure Three.js implementation. While using WebVR technology could affect the frame rate, to some extent, when too many objects were rendered in the scene, the overall experience of the WebVR version was considered to be better than the ordinary Three.js version.
The three-dimensional virtual reality visualization system based on WebVR was built, and the expected results were achieved. The three-dimensional visualization results of flow fields in Google Cardboard mode on a mobile device are shown in Figures 7–9. Figure 7 shows the surface flow fields of three-dimensional dam break at t = 11 s and Figure 8 is the presentation of flow fields with multi-cross-sections. Figure 9 reveals the three-dimensional flow field at t = 20 s expressed by path lines and trackballs. It renders a split screen, stereo version of a three-dimensional scene. When viewed with the naked eye, the two parts displayed on the screen had a certain angle difference. One can see the stereo effect and get the immersive experience with the help of a HMD (such as a mobile phone mounted in Google Cardboard). Our virtual reality system utilized head tracking with 3 degrees of freedom (roll, pitch, and yaw) for mobile browsers with Google Cardboard, relying on a device's accelerometer, gyroscope, and other sensors. By shaking your head, you can see the local details of the flow field you are focusing on. The WebVR environment enables us to observe first hand, and helps in providing better insights about the complicated flow phenomena in the virtual three-dimensional world. It vividly shows the violent change process of surface flow velocity and water surface when dam break occurs. The velocity at the dam break is large and the change of water surface is intense. Due to the action of plunging flow, there are two major circulations on both sides of the dam break. Meanwhile, with the superposition of reflected water waves, the phenomenon of local backwater is obvious. One can perform real-time interaction and roaming operation with the flow field. With the aid of a Gazed-Based cursor component, users can interact with VR scenes on the internet. These new capabilities in terms of visualization were not available previously. It is worth mentioning that WebVR mode and non-WebVR mode can be freely switched.
An important metric to consider in web applications is the frame rate, which is mainly the number of frames processed per second (Marcelo et al. 2016). Therefore, it is important to measure the frame rate performance that can be procured when using web technologies. In fact, the frame rate is supposed to be as high as possible to augment the sense of immersion, interaction, and participation. In this section, we have tested the performance of our visualization system using the stats component which displayed a UI with performance-related metrics. Several performance metrics were considered, including fps (frames per second), requestAnimationFrame (latency), textures (number of three.js textures in the scene), programs (number of GLSL shaders in the scene), geometries (number of three.js geometries in the scene), vertices (number of vertices in the scene), faces (number of faces in the scene), calls (number of draw calls on each frame), load time (how long it took for the scene to start rendering, in MS) and entities (number of A-Frame entities). However, the performance of frame rate can be affected by many factors. The slow frame rate is mainly caused by a complex scene that is beyond the rendering ability of the graphics card. When the three-dimensional flow field is described by the Lagrange method, it is often necessary to show the movement of the flow more intuitively by tracing the trajectory of the particles. In this paper, the shape of tracer particles was selected as three-dimensional spheres. The rendering of a three-dimensional sphere is mainly controlled by three attributes: the radius, the number of segments in the horizontal direction, and the number of segments in the vertical direction. The radius determines the size of the final mesh of the sphere. The more segments in both directions, the smoother the surface of the sphere will be. Experiments showed that when the number of segments was 8 and the radius of the sphere was 2, the smooth degree of the sphere could be satisfied. However, when the number of spheres increased greatly, the number of vertices and faces in the whole scene would increase significantly and the FPS of the browser would decrease obviously, thus the rendering of the scene would not seem smooth.
Some papers have discussed issues related to frame rate performance when using web technologies. Anthes et al. (2005) have tried to deal with jitter problems with buffering techniques to improve frame rate performance. Steinbach et al. (2010) discussed how package loss impacted the frame rate. Marcelo et al. (2016) ensured that their transmission of data through WebRTC took little time to reach the other nodes. Nevertheless, most of their methods focus on computer internet technologies, and they are not applicable for this study. Combined with our practical needs, this paper proposed a method of replacing three-dimensional spheres with textured styled particles to solve the above issue of network performance. First, the particle objects were created, then the sphere image was loaded into the texture by the built-function, and finally, the texture was assigned to the map attribute of the particle material. This completed the styling of the particles.
Using the sphere image as the particle texture, the number of vertices and faces in the scene was greatly reduced, and the problem of slow frame rates was solved. The number of vertices and faces in the scene is 32,724 and 10,908, respectively, when the terrain is rendered without adding the tracer particle effect, and the browser's FPS (frames per second) is 60.06. In this paper, 361 tracer particles were used, and the radius of each sphere was 2. In order to make the surface of the sphere smooth, there were eight segments in vertical and horizontal directions, respectively. When the three-dimensional spheres are added as tracer particles, as shown in the third column of Table 1, the vertex number increases to 153,012 and face number increases to 51,004, which is nearly five times larger than the number of vertices and faces when the trackballs are not added. As a result, the FPS dropped to 24.78, causing the animation rendering to be unsmooth. The fourth column of Table 1 shows the performance of the browser after replacing the three-dimensional spheres with textured styled particles, and one can see that the number of points has increased by 361 and the number of faces has not increased compared with the previous period. At this time, the FPS increased to 54.74, which greatly improved the fluency of the animation and solved the problem of network performance when the number of tracer particles was large. The FPS was slightly lower than 60. In different cases, a detailed summary of browser performance-related metrics is provided in Table 1.
|Scene rendering .||FPS .||Vertices .||Faces .||Points .|
|Only the terrain||60.06||32,724||10,908||0|
|Terrain and spheres||24.78||153,012||51,004||0|
|Terrain and texture styled particles||54.74||33,085||10,908||361|
|Scene rendering .||FPS .||Vertices .||Faces .||Points .|
|Only the terrain||60.06||32,724||10,908||0|
|Terrain and spheres||24.78||153,012||51,004||0|
|Terrain and texture styled particles||54.74||33,085||10,908||361|
In order to better verify the feasibility of the method used in this paper, the VR visualization system based on WebVR was applied to the flow field visualization analysis of Oujiang river estuary. The whole computational domain is about 95.3 km from east to west, and 83.5 km from north to south. The scope of numerical simulation is large and the terrain is complex. The three-dimensional topographic map of the Oujiang river estuary is shown in Figure 10(a). The unstructured triangular grid is adopted in the horizontal direction of the model, which makes it possible to better fit the numerous islands in the calculation domain and the irregular shoreline boundaries with complicated twists and turns. The triangular mesh is shown in Figure 10(b). There are 17,241 grid nodes and 32,834 triangular elements. The maximum grid size is 2,000 m, and the minimum grid size is 300 m. The performance of the browser after replacing the three-dimensional spheres with textured styled particles meets practical engineering requirements and the FPS is 53.88. Figure 10(c) shows the height of water surface and the velocity vector field at a given moment. Figure 10(d) reveals the details of the local velocity vector field. Figure 10(e) exhibits a three-dimensional flow field with multiple profiles. It visually shows the position of profiles in the original computational domain and is conducive to the comparative analysis of multiple cross-section data. The three-dimensional visualization of path lines and tracer particles is realized, as shown in Figure 10(f). The three-dimensional visualization results of the Oujiang river estuary in Google Cardboard mode on a mobile device are shown in Figure 11.
Experimental results demonstrate that the new approach achieves the desired effect. Users can browse scenes and objects displayed in a three-dimensional form at anytime and anywhere in the form of webpage, and can perform real-time interaction and roaming operation with the help of the simple HMD, which is assembled by a mobile phone and Google Cardboard. It will be very helpful for developers and users of hydrodynamic models to understand the calculated results more directly and conveniently, and it shows the value of the proposed method in hydrodynamic research.
As future work, we plan to do more research on our web-based visualization system to increase the sense of existence of people with the help of HDM with location tracking, which allows people to walk and approach objects in the scene. Furthermore, more research will also be done to improve the speed of browser loading data and rendering three-dimensional animation.
This research is partially supported by the National Natural Science Foundation of China (Grant No. 51739011), the National Key Research and Development Program of China (Grant No. 2016YFC0402707), and the Fundamental Research Funds for the Central Universities (DUT19LAB35). The first author is very grateful to all the members of the Institute of Hydraulics, Dalian University of Technology, for their selfless help and companionship.