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

Demo

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

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

Browser Support

Tested only in Google Chrome (recommended) and Mozilla FireFox

Back To Top

Useful Info

• Running The HTML Files Locally In Your Web Browser
• Getting WebRTC getUserMedia To Work
• Items Needed For The Demo

Back To Top

Source Codes

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

• ifc-ar-flood GitHub repository

Back To Top

License

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

Back To Top