## 2 Methods
### Implementation of WebGPU-Based Volume Rendering Framework with Babylon.js  
There are many JavaScript libraries, such as Babylon.js, Three.js, vtk.js, and Orillusion, that support WebGPU API, enabling web developers to leverage the capabilities of the GPU for building high-performance and interactive web-based 3D applications or visualizing three-dimensional data. Among these, Babylon.js and Three.js are among the most popular and advanced web-based 3D rendering engines, with support for both WebGL and WebGPU APIs. They not only provide a robust and stable ability to build realistic scenes but also offer flexible capabilities to support the development of scientific data visualization. As a result, they can facilitate a better integration of these two aspects, making it easier to combine data visualization with diverse 3D scenes, thereby showcasing their advantages in terms of building compatible and extensible data visualization frameworks. In particular, Babylon.js ([[https://www.babylon.js.com/](https://www.babylon.js.com/)]([https://www.babylon.js.com/](https://www.babylon.js.com/)), accessed 16 February 2025), a powerful, beautiful, simple, and completely open-source web rendering engine developed by Microsoft and other contributors, offers several distinctive advantages: First, Babylon.js integrates comprehensive rendering capabilities and performance optimization strategies, making it suitable for handling complex 3D applications with performance-intensive requirements. Second, Babylon.js benefits from its active community and support forum, ensuring timely updates and continuous improvements to stay aligned with the latest WebGPU advancements. Third, Babylon.js is also a game engine designed for the web, and in addition to offering new ways of visualizing spatial information, game engines introduce numerous possibilities for interactivity, animation, and simulation [43]. Finally, and most importantly, Babylon.js is a pioneering 3D rendering engine that supports WebGPU, and it has extensive experience in leveraging this cutting-edge technology. Babylon.js began providing full support for WebGPU as early as version 5.0, and related functionalities are currently under active development, further solidifying its position as a leader in the field. Given the benefits of this 3D rendering engine, we develop a volume rendering framework utilizing the HTML5 standard and JavaScript combined with Babylon.js (v7.29.0) and WebGPU, along with Python (v3.10.13) scripts for data preprocessing. The framework achieves a real-time three-dimensional visualization of large-scale gridded ocean scalar data, providing interactive visual analysis capabilities and enabling users to display, navigate, and explore large multidimensional datasets from different perspectives in a web environment. The main workflow of the proposed framework is illustrated in Figure 2 and detailed in the following:Data preprocessing and loading: The data preprocessing tasks are conducted using Python scripts, which run on the server side and are automatically triggered when new datasets are available. The conversion from NetCDF files to JSON files is first performed using the netCDF4 library. Then, after the JSON files are initially read using the NumPy library, the PyProj library is employed to transform the coordinates of the ocean acoustic field forecast dataset from the UTM coordinate system to the WGS84 coordinate system. Data interpolation for both datasets is then carried out using the SciPy library. Finally, using the NumPy library, all datasets are reorganized into RAW files, which serve as volume textures for subsequent rendering. Specifically, the processed files are dynamically retrieved on demand according to front-end requests without the need to load all data from the server at once. 2. Initialization of the volume rendering viewer: First, a blank canvas is established as the carrier for displaying the rendering results, and the WebGPU engine is initialized.