amitee0007/ifc-ar-flood

Interactive HTML5 augmented reality flood simulation

Interactive HTML5 Augmented Reality Flood Simulation

Introduction

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

Demo

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

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

License

Released under The MIT License (MIT)
Copyright (c) 2013 Skeel Lee (http://cg.skeelogy.com), Iowa Flood Center