## 2 Methods  
### Preprocessing of Regular and Irregular Gridded Ocean Scalar Data  
The two datasets used in this study include the simulation results of the ocean environmental parameters and ocean acoustic field, respectively, provided by the South China Sea Institute of Oceanology (SCSIO). The first dataset contains scalar data such as salinity, temperature, and flow velocity magnitude data, using the World Geodetic System 1984 (WGS84) coordinate system. In the horizontal direction, the dataset is structured in regular grids and uniformly distributed with a spatial resolution of \(1/60^{\circ}\times 1/60^{\circ}\). In contrast, the vertical grid spacing is uneven, with a resolution of 5 m from 0 m to \(-500\) m and 100 m from \(-500\) m to \(-2000\) m, respectively, for a total of 116 vertical layers. The temporal resolution of the dataset is 1 h, consisting of 121 time steps in total. Figure 1a illustrates the spatial distribution structure of the dataset. The second dataset containing acoustic propagation loss data is structured in irregular grids horizontally. This three-dimensional dataset features a cylindrical grid structure, which is centered around a certain point and consists of multiple circular surfaces. For each horizontal plane, the data points are distributed on concentric circles rather than arranged in typical latitude\(-\)longitude grids, with one data point located every \(3^{\circ}\) along each circle. The max radius of the concentric circles is approximately 50 km, with a radial step size of 90 m between adjacent circles. Vertically, the maximum depth of the dataset extends to approximately \(-3700\) m, with a vertical step size of 6 m. Its spatial distribution structure is illustrated in Figure 1b. In particular, to provide a uniform spatial reference for data visualization, the Universal Transverse Mercator (UTM) coordinates of each data point at the \(i\)-th depth layer, where \(i\) ranges from 1 to 630, are first calculated as detailed in Equation (1). Specifically, \(\theta\) and \(r\) represent the angle and the distance between the data point and the central point, respectively, with \(x_{center}\) and \(y_{center}\) denoting the UTM coordinates of the central point in the horizontal plane. Then, the calculated UTM  
Figure 1: Schematic showing the general structure of the datasets: (**a**) the ocean environmental parameters forecast dataset; (**b**) the ocean acoustic field forecast dataset. coordinates (\(x\), \(y\), \(z\)) need to be converted into the WGS84 coordinates (_longitude_, _latitude_, _altitude_) to maintain consistency with the coordinate system of the first dataset. \[\left\{ \begin{array}{l}x=cos\left(\frac{\theta\tau}{180}\right)\cdot r+x_{ center}\\ y=sin\left(\frac{\theta\tau}{180}\right)\cdot r+y_{center}\\ z=-6i\end{array} \right. \tag{1}\]  
The two datasets are typically stored in the self-describing binary data format, NetCDF (Network Common Data Form). Although NetCDF files are ideal for storing scientific data [32], there are challenges present in efficiently loading large-volume NetCDF files and rendering them in web browsers. Therefore, in the context of fast and smooth visualization in web-based environments, a more lightweight and compact format is needed. JSON (JavaScript Object Notation), a readable and web-friendly format with a simple and text-based syntax rule, is commonly used in web application development for data preprocessing and exchange tasks due to its low-overhead data storage and transmission capabilities. To improve the efficiency of further processing, the original NetCDF files are converted into a series of JSON files according to variables and time dimensions. Moreover, additional preprocessing steps involving data interpolation and volume texture generation are carried out to address the technical challenges for volume rendering posed by the uneven structure of the data grids, making them suitable for shader programming. 1.