-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
156 lines (119 loc) · 5.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>WebFlood</title>
<meta charset="utf-8">
<!--
_ __ __ ________ __
| | / /__ / /_ / ____/ /___ ____ ____/ /
| | /| / / _ \/ __ \/ /_ / / __ \/ __ \/ __ /
| |/ |/ / __/ /_/ / __/ / / /_/ / /_/ / /_/ /
|__/|__/\___/_.___/_/ /_/\____/\____/\__,_/
-->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/Computer%20Modern/Bright/cmun-bright.css">
<link rel="stylesheet" href="css/Computer%20Modern/Serif/cmun-serif.css">
<script src="deps/underscore-min.js"></script>
<script src="deps/GLOW.js"></script>
<script src="deps/perlin.js"></script>
<script src="deps/tiff.js"></script>
<link rel="stylesheet" href="deps/jsxgraph.css"/>
<script src="deps/jsxgraphcore-0.99.2.js"></script>
<script src="lib/helpers.js"></script>
<script src="lib/terrainGenerator.js"></script>
<script src="lib/write16bitTiff.js"></script>
<script src="lib/tiledGrid.js"></script>
<script src="lib/flipFlopFBO.js"></script>
<script src="lib/camera.js"></script>
<script src="ui.js"></script>
<script src="simulation.js"></script>
<script src="visualisation.js"></script>
<script src="scenarios.js"></script>
<script src="start.js"></script>
</head>
<body>
<div id="viewport"></div>
<div id="intro" class="load">
<h1>WebFlood</h1>
<h2>Interactive Shallow–Water Simulations in City Environments</h2>
<p>Anselm Eickhoff, Bachelor Thesis</p>
<h3>Scenarios</h3>
<span id="scenarios"></span>
<h3>Abstract</h3>
<p id="abstract">
WebGL offers not only a graphics pipeline for modern web browsers,
but can also be used as a simple GPGPU computation environment,
making much more sophisticated web applications possible.
As a proof-of-concept, <em>WebFlood,</em> a realtime, fully browser
based flood simulation and visualisation was implemented.
It employs a semi-lagrangian approach to solving the shallow-water equations.
All computation is done by GLSL shaders on the GPU. The simulation
state is displayed in a 3D visualisation, as part of a web page that
allows user interaction with the simulation. WebFlood performs well
in the classical 2D dam-break scenario of Fraccarollo and Toro (1995)
and closely reproduces urban flooding behaviour of Iowa City (USA),
given digital elevation data. Based on its cross-platform compatibility
and simple distribution, two main applications are suggested: interactive
public flood information and simulation-aided education for the example of hydrology.
</p>
<h4>Thesis</h4>
<p><a href="interactive_shallow_water.pdf">Full Thesis</a> (PDF)</p>
<p><a href="interactive_shallow_water_presentation.pdf">Thesis Presentation</a> (PDF)</p>
</div>
<div id="frameDuration"></div>
<div id="cursorPosition"></div>
<div id="tools" class="run">
<button id="addGauge">Add Gauge</button>
<button id="paintObstacles">Paint Obstacles</button>
<button id="createInundationMap">Create Inundation Map</button>
<!--<button id="saveWater">Save Water Height</button>-->
<!--<button id="saveTerrain">Save Terrain</button>-->
</div>
<div id="playback" class="run">
<button id="playPause">▶</button>
<input type="number" value="0" id="stepsPerFrame">
<label for="stepsPerFrame">Simulation Speed</label>
</div>
<div id="sidebar" class="run">
<h2 id="scenarioName"></h2>
<a id="closeScenario" href="index.html">« Back</a>
<h3>Gauges</h3>
<div id="gauges"></div>
<h3>Simulation Parameters</h3>
<input id="sourceWaterHeight" type="number" value="0.1" step="0.05"/>
<label for="sourceWaterHeight">Source Water Height</label><br>
<input id="sourceWaterVelocity" type="number" value="0.00001" step="0.01"/>
<label for="sourceWaterVelocity">Source Water Velocity</label><br>
<input id="gravity" type="number" value="9.81" step="0.001"/>
<label for="gravity">Gravity</label><br><br>
<input id="manningCoefficient" type="number" value="0.070" step="0.001"/>
<label for="manningCoefficient">Manning friction coefficient</label><br><br>
<input id="drainageAmount" type="number" value="0" step="0.000003"/>
<label for="drainageAmount">Drainage</label><br><br>
<h3>Visualisation Settings</h3>
<h4>Overlays</h4>
<input type="checkbox" id="showFloodDuration">
<label for="showFloodDuration">Display Flood Duration</label><br>
<input type="checkbox" id="showMaxVelocity">
<label for="showMaxVelocity">Display Max Velocity</label><br>
<input type="checkbox" id="showMaxDepth">
<label for="showMaxDepth">Display Max Depth</label><br><br>
<h4>Terrain</h4>
<input type="checkbox" id="showSatellite">
<label for="showSatellite">Display Satellite Image</label><br>
<input type="checkbox" checked id="showLight">
<label for="showLight">Apply Lighting</label><br>
<input type="checkbox" id="showTerrainContours">
<label for="showTerrainContours">Display Terrain Contours</label>
<h4>Water</h4>
<input type="checkbox" checked id="showWater">
<label for="showWater">Display Water</label><br>
<input type="checkbox" checked id="showWaterLight">
<label for="showWaterLight">Apply Lighting</label><br>
<input type="checkbox" id="showFlow">
<label for="showFlow">Visualize Flow</label><br>
<input type="checkbox" id="showGrid">
<label for="showGrid">Display Grid</label>
</div>
</body>
</html>