Hydro3DJS: A modular web-based library for real-time 3D visualization of watershed dynamics and digital twin integration

Effective visualization of hydrological data is essential for interpreting flood risk and supporting environmental decision-making. This study presents Hydro3DJS, a lightweight, browser-native 3D visualization library that integrates real-time environmental data with interactive digital-twin capabilities. Built with JavaScript, WebGL, and the Google Maps API, the system renders rainfall, floodwater dynamics, and insfrastructure exposure within spatially accurate environments while incorporating live data from USGS and NOAA. Its modular design supports terrain-aware water animation, customizable 3D infrastructure models, and scenario-based simulations suitable for research, planning, and communication. Two use cases, a rural multi-hazard simulation and an urban 100-year flood event with stream gauge overlays, demonstrate cross-context applicability. A usability study with 20 domain experts highlights the platform’s strengths and identifies opportunities for enhanced interactivity and performance. Hydro3DJS contributes an accessible open-source framework for real-time 3D hydrological visualization, modular environmental data integration, and improved stakeholder communication in flood and watershed analysis. • A 3D web-based library visualizes rainfall and flooding using real-time geospatial data. • The tool supports interactive 3D models of dams, levees, and urban infrastructure. • Usability testing showed a strong opportunity in flood planning and stakeholder outreach. • The library runs in browsers with no plugins, ensuring cross-platform accessibility. • User study identified key visualization gaps and informed future feature design.