Interactive HTML5 augmented reality flood simulation
JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Interactive HTML5 Augmented Reality Flood Simulation


This is my interactive HTML5 augmented reality (AR) flood simulation project for Iowa Flood Center.

The main aims of this project:

  • Augmented reality for the Web: stream webcam video to a web browser, track encoded marker images and overlay 3D models on top of them
  • Terrain: load greyscale height maps onto a 3D terrain, and allow for further height manipulation via sculpting
  • Flood: water simulation reacts with objects in a 3D environment, accumulates behind terrain/objects for flooding to occur, flows from high to low regions, and allows for user interactions such as adding/removing of water
  • Two-way coupling: water makes dynamic objects float while the dynamic objects cause ripples on the water after displacing it
  • Interactivity for the Web: all the above should run real-time in a web browser using HTML5 technologies

Main Libraries Used

  • WebRTC - JavaScript API for real-time communications in web browsers
  • three.js - JavaScript 3D library
  • skarf.js - Three.js framework for JavaScript augmented reality libraries
  • skulpt.js - Three.js GPU height field terrain sculpting library
  • skunami.js - Three.js GPU height field water libraries
  • Physijs - Three.js rigid body dynamics system


Interactive HTML5 Augmented Reality Flood Simulation [Demo]


Related Examples

Rigid Body Collision With Terrain And Two-Way Coupling With Water (Using Mouse Controls Only) [Demo]


  • Dynamic objects (and terrain) cause ripples on water after displacing it
  • Water makes the dynamic objects float

Browser Support

Tested only in Google Chrome (recommended) and Mozilla FireFox

Useful Info


Released under The MIT License (MIT)
Copyright (c) 2013 Skeel Lee (, Iowa Flood Center