Interactive HTML5 augmented reality flood simulation for Iowa Flood Center
Sep 2013
Open Source
Interactive HTML5 Augmented Reality Flood Simulation
@ open source > webgl / three.js

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

Back To Top Back To Top


Interactive HTML5 Augmented Reality Flood Simulation

[ Live Demo ]

  • Tracking of webcam video stream
  • Using GUI markers system to control user settings with AR markers
  • Loading of models when associated markers are detected
  • Usage of main marker to define origin

Back To Top Back To Top

Related Examples

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

[Live Demo]

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

Back To Top Back To Top

Browser Support

Tested only in Google Chrome (recommended) and Mozilla FireFox

Back To Top Back To Top

Useful Info

Back To Top Back To Top

Source Codes

Please consider tipping me for my open source efforts

The source codes for this project can be found in GitHub:

Back To Top Back To Top


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

Back To Top Back To Top

Skeel Lee Skeel Lee
Facebook Google+ Twitter Tumblr
YouTube Vimeo Flickr Pinterest
Senior FX TD / R&D
Digital Domain 3.0 (Previously at Sony Pictures Imageworks, MPC, Industrial Light & Magic, Double Negative)
LinkedIn IMDb GitHub Stack Overflow
I am a Senior Technical Director with strong interests in both tech and art. My life evolves round VFX, photography, software engineering, tools programming and generally anything that looks / sounds cool.
I have done a variety of CG programming, including fluid sims, muscles, soft/rigid bodies, raytracing etc. These knowledge complement the visual works that I do as a TD in VFX.
I was interviewed by The Straits Times in May 2014 for my VFX work in X-Men: Days of Future Past.