The Implementation of a WebGPU-Based Volume Rendering Framework for Interactive Visualization of Ocean Scalar Data

Visualization contributes to an in-depth understanding of ocean variables and phenomena, and a web-based three-dimensional visualization of ocean data has gained significant attention in oceanographic research. However, many challenges remain to be addressed while performing a real-time interactive visualization of large-volume heterogeneous scalar datasets in a web environment. In this study, we propose a WebGPU-based volume rendering framework for an interactive visualization of ocean scalar data. The ray casting algorithm, optimized with early ray termination and adaptive sampling methods, is adopted as the core volume rendering algorithm to visualize three-dimensional gridded data preprocessed from regular and irregular gridded volume datasets generated by ocean numerical modeling, utilizing the Babylon.js rendering engine and WebGPU technology. Moreover, the framework integrates a set of interactive visual analysis tools, providing functionalities such as volume cutting, value-based spatial data filtering, and time-series animation playback, enabling users to effectively display, navigate, and explore multidimensional datasets. Finally, we conducted several experiments to evaluate the visual effects and performance of the framework. The results suggest that the proposed WebGPU-based volume rendering framework is a feasible web-based solution for visualizing and analyzing large-scale gridded ocean scalar data.