-
Notifications
You must be signed in to change notification settings - Fork 132
/
index.html
479 lines (437 loc) · 18.6 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
<!DOCTYPE html>
<html lang="en">
<head>
<title>plas.io</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
</head>
<body data-custom-load="true" data-name="plasio_laszip"
data-tools="" data-configs="" data-path="">
<div class="fullscreen">
<div class="title">
<div class="name">plas.io</div>
<div id="no-support">Sorry, your browser does not support WebGL. <a href="http://get.webgl.org">Find out more</a>.</div>
</div>
</div>
<div id="progressBar" style="display: none">
</div>
<div class="drag-and-drop" style="display: none">
<div class="title">
Drop Here!
</div>
</div>
<div class="ui-layout-center">
<div id="container"></div>
<div id="fps"></div>
<div id="messages"></div>
<div id="pointCount"></div>
<div id="credits" style="display: none"></div>
</div>
<div class="ui-layout-east">
<input id="filebrowser" type="file" style="display:none" multiple>
<div id="mainActions">
<div class="title">
<h1>plas.io</h1>
<a href="https://github.com/verma/plasio"><img style="position: absolute; top: 0; right: 0; border: 0; width:128px; height: 128px;" src="https://github-camo.global.ssl.fastly.net/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</div>
<div class="section">
<div id="webglinfo" style="display: none"> </div>
<div class="p-head">
<h3>File</h3>
</div>
<div class="p-body">
<div id="naclerror" style="display: none"> </div>
<div class="labeled-controls">
<a class='doc-tag' href="docs/open-a-file.json"><span class="glyphicon glyphicon-question-sign"></span></a>
<h4>Choose data to display</h4>
<h5>Pick your own or click the dropdown for some examples</h5>
<div class="btn-group btn-block" id="browseCancel" style="display: none">
<button type="button" class="btn btn-default btn-sm">Cancel</button>
</div>
<div class="btn-group btn-block" id="browse">
<button type="button" class="btn btn-default btn-sm btn-file dropdown-lead">
Browse
</button>
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="data/st-helens.laz">St. Helens</a></li>
<li><a href="data/half-dome.laz">Half Dome</a></li>
<li><a href="data/autzen.laz">Autzen Stadium</a></li>
<li><a href="data/spaceshuttle.laz">Space Shuttle</a></li>
<li><a href="data/jack.laz">Jack : The Giant Slayer</a></li>
<li><a href="data/mapserver-family-portrait.laz">Mapserver Family Potrait</a></li>
<li><a href="data/iowa-bridge.laz">Cedar Falls, IA University Ave</a></li>
</ul>
</div>
<div id="loadingStatus" class="pull-left"></div>
<div id="creditsLink">
<a data-toggle="modal" href="#" data-target="#creditsPage">Data Credits</a>
</div>
<!--
<div id="gh-container">
<h5>Open a Greyhound Source</h5>
<div id="openGreyhoundButton"></div>
</div>
-->
</div>
<div class="labeled-controls">
<a class='doc-tag' href="docs/density.json"><span class="glyphicon glyphicon-question-sign"></span></a>
<h4>Density</h4>
<h5>Set the load density. Smaller values load and display faster.
Reopen the file to load at new density.</h5>
<div id="loadFidelity"></div>
</div>
<div id="loadError"></div>
<div class="props" style="display:none">
<div class="labeled-controls">
<h4>Data Set</h4>
<h5 class='switch-inst'>Switch between multiple data-sets</h5>
<div id="multi-files"></div>
<div class="auto-play" style="display: none">
<h5>Adjust the slider to auto-switch the files</h5>
<div id="playback-rate"></div>
<div id='playback-fps'></div>
</div>
<table class="table">
</table>
</div>
</div>
<div class="labeled-controls">
<h4>For scale objects</h4>
<a class='doc-tag' href="docs/for-scale-objects.json"><span class="glyphicon glyphicon-question-sign"></span></a>
<h5>Place the <span class='noun'>Empire State Building</span> by ALT (OPTION on Mac OS X) + Double-Clicking anywhere on the point cloud.</h5>
<button type="button" class="btn btn-sm btn-default btn-block" id="scale-geoms-clear">Clear All Objects</button>
<h5 class='not-first'>Change your world units so that for-scale object sizes are still relevant</h5>
<div class="btn-group btn-block" id="scale-geoms-scale">
<button type="button" class="btn btn-sm btn-default dropdown-toggle btn-block" data-toggle="dropdown" target="meters"> Meters <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="#meters">Meters</a></li>
<li><a href="#feet">Feet</a></li>
<li><a href="#inches">Inches</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="section">
<div class="p-head">
<h3>Camera</h3>
</div>
<div class="p-body">
<div class="labeled-controls">
<h4>Type</h4>
<h5>Perspective camera provides a 3D view, while orthographic and top-view cameras provide an ortho views</h5>
<div class="btn-group btn-group-sm btn-block" id="camera-type-group">
<button type="button" class="btn btn-default" id="perspective">Perspective</button>
<button type="button" class="btn btn-default" id="ortho">Orthographic</button>
<button type="button" class="btn btn-default" id="top-view">Top-View</button>
</div>
<h4 class="not-first">Reset</h4>
<h5>Take view back to its initial state</h5>
<button type="button" class="btn btn-sm btn-default btn-block" id="camera-reset">Reset View</button>
<h4 class="not-first">Field of View</h4>
<h5>Changing Field of View provides interesting effects, only applies to Perspective Cameras</h5>
<div id="fov"></div>
</div>
<div class="labeled-controls">
<h4>Clipping Regions</h4>
<h5>Choose alternate ways of viewing data</h5>
<div id="clipping-regions"></div>
</div>
</div>
</div>
<div class="section">
<div class="p-head">
<h3>Data</h3>
</div>
<div class="p-body">
<div class="labeled-controls" id="points-list">
<h4>Measurement</h4>
<h5>Measurement segments currently in view area</h5>
<button type="button" class="btn btn-sm btn-default btn-block" id="mensuration-reset">Reset</button>
<div id="points-list-table">
</div>
</div>
<div class="labeled-controls">
<h4>Particle Size</h4>
<h5>Larger sizes fill in the display</h5>
<div id="pointsize"></div>
</div>
<div class="labeled-controls">
<h4>Z-Exaggeration</h4>
<h5>Higher values make elevation deltas more apparent</h5>
<div id="zscale"></div>
</div>
<div class="labeled-controls">
<h4>Colorization</h4>
<h5>Choose an attribute to colorize</h5>
<div class="btn-group btn-block" id="colorsource">
<button type="button" class="btn btn-sm btn-default btn-block dropdown-toggle" data-toggle="dropdown" target="rgb">
RGB <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="#rgb">RGB</a></li>
<li><a href="#classification">Classification</a></li>
<li><a class="default-if-no-color" href="#heightmap-color">Heightmap Color</a></li>
<li><a href="#heightmap-color-inv">Heightmap Color Inverted</a></li>
</ul>
</div>
</div>
<div class="labeled-controls">
<h4>Colormap</h4>
<h5>Color gradient values used for Heightmap Color and Classification color sources</h5>
<div class='btn-group btn-group-justified' id="colorSwatches">
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/blue-red.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/blue-hue.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/blue-orange.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/heat-map.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/awesome-green.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/pestel-shades.png" width="100%" height="10">
</a>
<a type="button" class="btn btn-default btn-sm">
<img src="colormaps/black-orange.png" width="100%" height="10">
</a>
</div>
<div id="colorCanvas">
<canvas id="colorCanvasObject"></canvas>
</div>
<div id="colormapClamp"></div>
</div>
<div class="labeled-controls">
<h4>Intensity Source</h4>
<h5>Color modulators, modulation can be played with</h5>
<div class="btn-group btn-block" id="intensitysource">
<button type="button" class="btn btn-sm btn-default btn-block dropdown-toggle" data-toggle="dropdown" target="intensity">
Intensity <span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block" role="menu">
<li><a href="#intensity">Intensity</a></li>
<li><a href="#heightmap">Heightmap Grayscale</a></li>
<li><a href="#heightmap-inv">Heightmap Grayscale Inverted</a></li>
</ul>
</div>
</div>
<div class="labeled-controls">
<h4>Intensity Blending</h4>
<h5>How much of intensity to blend with color</h5>
<div id="blending"></div>
<div class="clearfix blend-factor">
<div class="pull-left">All Color</div>
<div class="pull-right">All Intensity</div>
</div>
</div>
<div class="labeled-controls">
<h4>Intensity Scaling</h4>
<h5>Narrow down on a range of intensity values, only applies to intensity values fetch from point source</h5>
<div id="intensity"></div>
</div>
</div>
</div>
<div class="section">
<div class="p-head">
<h3>Utilities</h3>
</div>
<div class="p-body">
<div class="labeled-controls">
<h4>Inundation</h4>
<h5>Enable an Inundation Plane and manipulate it using a slider</h5>
<div id="inun-container"></div>
</div>
</div>
</div>
</div>
</div>
<div id="listener"></div>
<!-- Modal -->
<div class="modal fade" id="creditsPage" tabindex="-1" role="dialog" aria-labelledby="creditsPageModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">plas.io Data Credits</h4>
</div>
<div class="modal-body">
<h4>The following data files are to be credited by their original source</h4>
<ul>
<li>Autzen Stadium -- <a href="http://www.linkedin.com/pub/aaron-reyna/82/619/894">Aaron Reyna</a>, <a href="http://www.watershedsciences.com/">Watershed Sciences, Inc.</a>
</li>
<li>St. Helens -- <a href="http://www.linkedin.com/in/howardbutler">Howard Butler</a>, <a href="http://hobu.co">Hobu, Inc.</a>. USGS LiDAR + NAIP.
</li>
<li>Half Dome -- <a href="http://www.linkedin.com/in/howardbutler">Howard Butler</a>, <a href="http://hobu.co">Hobu, Inc.</a> USGS LiDAR + NAIP.
</li>
<li>Space Shuttle -- Data courtesy of the Smithsonian National Air and Space Museum, Steven F. Udvar-Hazy Center and the U.S. Army Corps of Engineers, <a href="http://www.crrel.usace.army.mil/">Cold Regions Research and Engineering Laboratory</a>.
</li>
<li>Cedar Falls, IA University Ave -- Iowa DOT</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal -->
<div class="modal fade" id="openGreyhoundModal" tabindex="-1" role="dialog" aria-labelledby="openGreyhoundPage" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Open a Greyhound source</h4>
</div>
<div class="modal-body ui-panel">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Open Pipeline</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal -->
<div class="modal fade" id="scalesPage" data-keyboard="false" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="scalesPageLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Specify Projection</h4>
</div>
<div class="modal-body">
<div style='text-align: center;padding-bottom: 10px;'>
<h4 style="font-weight: bold">The data doesn't appear to be in a projected coordinate space.</h4>
<h4 style="color:#999">Please indicate what you'd like to do:</h4>
</div>
<button type="button" class="btn btn-primary btn-lg btn-block" data-value="0">Leave as is</button>
<button type="button" class="btn btn-success btn-lg btn-block" data-value="1">Scale X/Y to Meters, Z is in Meters</button>
<button type="button" class="btn btn-info btn-lg btn-block" data-value="2">Scale X/Y to Meters, Z is in Feet</button>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Modal -->
<div class="modal fade" id="docsPage" tabindex="-1" role="dialog" aria-labelledby="scalesPageLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">plasio Documentation</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<script src="bad.js"></script>
<script src="client.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
uniform float pointSize;
uniform float intensityBlend;
uniform float maxColorComponent;
uniform float rgb_f;
uniform float intensity_f;
uniform float class_f;
uniform float height_f;
uniform float iheight_f;
uniform float map_f;
uniform float imap_f;
uniform vec3 xyzScale;
uniform float clampLower;
uniform float clampHigher;
uniform float colorClampLower;
uniform float colorClampHigher;
uniform vec2 zrange;
uniform vec3 offsets;
uniform sampler2D map;
uniform vec2 klassRange;
attribute vec3 color;
attribute float intensity;
attribute float classification;
varying vec4 col;
varying vec3 fpos;
void main() {
fpos = ((position.xyz - offsets) * xyzScale).xzy * vec3(-1, 1, 1);
vec4 mvPosition = modelViewMatrix * vec4( fpos, 1.0 );
gl_Position = projectionMatrix * mvPosition;
float nheight = (position.z - zrange.x) / (zrange.y - zrange.x);
float nhclamp = (nheight - colorClampLower) / (colorClampHigher - colorClampLower);
// compute color channels
//
vec3 norm_color = color / maxColorComponent;
vec3 map_color = texture2D(map, vec2(nhclamp, 0.5)).rgb;
vec3 inv_map_color = texture2D(map, vec2(1.0 - nhclamp, 0.5)).rgb;
float iklass = (classification - klassRange.x) / (klassRange.y - klassRange.x);
vec3 class_color = texture2D(map, vec2(iklass, 0.5)).rgb;
// compute intensity channels
float i = (intensity - clampLower) / (clampHigher - clampLower);
vec3 intensity_color = vec3(i, i, i);
vec3 height_color = vec3(nheight, nheight, nheight);
vec3 inv_height_color = vec3(1.0 - nheight, 1.0 - nheight, 1.0 - nheight);
// turn the appropriate channels on
//
vec3 color_source = norm_color * rgb_f +
class_color * class_f +
map_color * map_f +
inv_map_color * imap_f;
vec3 intensity_source = intensity_color * intensity_f +
height_color * height_f +
inv_height_color * iheight_f;
// blend and return
gl_PointSize = pointSize;
col = vec4(mix(color_source, intensity_source, intensityBlend), 1.0);
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec4 planes[6];
uniform int do_plane_clipping;
varying vec4 col;
varying vec3 fpos;
void main() {
if (do_plane_clipping > 0) {
for(int i = 0 ; i < 6 ; i ++) {
if (dot(planes[i], vec4(fpos, 1.0)) < 0.0)
discard;
}
}
gl_FragColor = col;
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48519660-1', 'plas.io');
ga('send', 'pageview');
</script>
</body>
</html>