###### Abstract
However, volume visualization based on a conventional iso-surface has limitations in demonstrating the complete internal structure of the ocean scalar data used to characterize water masses. By comparison, direct volume rendering algorithms can visualize the data as a continuous three-dimensional volume, clearly displaying the potential features within the volume data. Over the past few decades, volume rendering has become a key area of research in three-dimensional data visualization, with diverse applications in many fields, such as medicine [15], geology [16], and meteorology [17]. Most three-dimensional ocean data visualization tools have been developed based on a sophisticated Client/Server (C/S) architecture, such as those desktop-based three-dimensional frameworks for an interactive visualization of large-scale ocean data developed by [PERSON] et al. [18] and [PERSON] et al. [19]. As web technologies continue to advance rapidly, the Browser/Server (B/S) architecture has increasingly been adopted in many visualization studies over the traditional C/S architecture. The B/S architecture centralizes the core part on the server side, offering greater openness, integrability, and shareability while simplifying the system's development, maintenance, and usage processes. It has thus become one of the leading technical solutions for building data visualization frameworks and systems across various fields [20; 21; 22; 23]. WebGL, a JavaScript-based graphics rendering Application Programming Interface (API) based on the OpenGL ES standard, is currently the preferred technology for developing web-based 3D platforms, and numerous studies have been conducted on three-dimensional interactive ocean data visualization utilizing WebGL. For instance, [PERSON] et al. [24] used 3D tiles and WebGIS technology to achieve a real-time online three-dimensional visualization of weather radar data, allowing for visualizingdata from different horizontal planes by setting the vertical interval. [PERSON] et al. [25] designed an adaptive ray casting spherical volume rendering method based on the open-source web API Cesium.js to express ocean scalar fields. [PERSON] et al. [26] developed a three-dimensional interactive visualization framework for ocean eddies in web browsers that supports eddy extraction, tracking, and querying, facilitating cross-platform scientific collaboration. In our previous work [27], Plotly.js (v1.47.4), an open-source graphical JavaScript library based on WebGL, was adopted to develop a web-based three-dimensional interactive visualization framework for time-varying and large-volume ocean forecasting data. Nonetheless, due to WebGL's lack of explicit support for parallel processing and inability to fully utilize modern graphics hardware [28], WebGL-based visualization frameworks sometimes face difficulties in meeting the gradually growing performance demands. Challenges remain in visualizing large-scale data efficiently on web platforms [29], particularly in interactive and real-time visualization scenarios. Therefore, there is a need to introduce advanced high-performance rendering technologies for smooth and high-quality three-dimensional visualization and dynamic interactions in a web environment. As the latest WebGPU technology emerges, these limitations are expected to be overcome. WebGPU is a JavaScript API that is based on graphics APIs, including Vulkan, Metal, and Direct3D 12, and it uses WebGPU Shading Language (WGSL) as its shading language. It enables more direct access to modern multicore GPUs, providing efficient and flexible graphics programming interfaces for web application developers.