Hydro3DJS: A Modular Web-Based Library for Real-Time 3D Visualization of Watershed Dynamics and Digital Twin Integration

Ramteja Sajja, Omer Mermer, Yusuf Sermet, Ibrahim Demir

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.