-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (87 loc) · 15.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Binary Space Partitioning</title>
<link rel="stylesheet" href="style.css"/>
<link rel='shortcut icon' type='image/x-icon' href='res/favicon.ico'/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="background-color" onload="initializeTextures()">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand">William's OpenGLES Showcase</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Binary Space Partitioning<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="tacos/index.html">Network Connected Game</a>
<a class="nav-item nav-link" href="learning/index.html">Multi-Layer Perceptron</a>
</div>
</div>
</nav>
<h1 id="loading-text">Loading Textures...</h1>
<canvas id="glCanvas" width="0" height="300">
Your browser doesn't appear to support the HTML5 <code><canvas></code> element.
</canvas>
<p class="title-text">Binary Space Partitioning Demonstration</p>
<div class="instruction-box">
<div class="top-instruction row noselect">
<div class="col-md-4 ">
<a class="instruction-text"><mark-instruction id="indicator-move" class="red">Arrow Keys</mark-instruction> - Move</a>
</div>
<div class="col-md-4">
<a class="instruction-text"><mark-instruction id="indicator-move-fast" class="red">Left Shift</mark-instruction> - Accelerate Movement</a>
</div>
<div class="col-md-4">
<a class="instruction-text"> Field of View: </a>
<a id="indicator-fov" class="boxed-text">270</a>
<input class="button-text-red" type="button" value="-" onclick="decreaseFOV(5)">
<input class="button-text-green" type="button" value="+" onclick="increaseFOV(5)">
</div>
</div>
<div class="row noselect">
<div class="col-md-12">
<p class="instruction-text"><mark-instruction id="button-space" class="green">Spacebar</mark-instruction> - Toggle Drawing Method => <mark id="indicator-method-bsp" class="green">BSP</mark> <mark id="indicator-method-first" class="red">First-to-Last</mark> <mark id="indicator-method-last" class="red">Last-to-First</mark></p>
</div>
</div>
<div class="row noselect">
<div class="col-md-12">
<p class="instruction-text"><mark-instruction id="button-z" class="green">z</mark-instruction> - Toggle Texture => <mark id="indicator-texture-solid" class="green">Solid</mark> <mark id="indicator-texture-wireframe" class="red">Wireframe</mark><mark id="indicator-texture-textured" class="red">Textured</mark> <mark id="indicator-texture-textured-interpolated" class="red">Textured-Interpolated</mark></p>
</div>
</div>
<div class="row noselect">
<div class="col-md-12">
<div id="interval-container" class="background-color-enabled">
<p class="instruction-text"><mark-instruction id="indicator-order" class="red">x</mark-instruction> - Toggle Max-Alpha Draw Order => <mark id="indicator-order-first" class="red">First</mark> <mark id="indicator-order-last" class="red">Last</mark></p>
</div>
</div>
</div>
<div class="row noselect">
<div class="col-md-6">
<p class="instruction-text"><mark-instruction id="indicator-print-bsp" class="red">Enter</mark-instruction> - Print BSP Tree to Console</p>
</div>
<div class="col-md-6">
<p class="instruction-text"><mark-instruction id="indicator-third-person" class="green">CTRL</mark-instruction> - Toggle True Mini-Map</p>
</div>
</div>
</div>
<footer class="background-color-black">
<a href="https://github.com/WilliamLewww/Mood-Web">Github Repo</a>
</footer>
<script src="src/engine.js"></script>
<script src="src/shader_source.js"></script>
<script src="src/geometry.js"></script>
<script src="src/joiner.js"></script>
<script src="src/first_person.js"></script>
<script src="src/third_person.js"></script>
<div id='map-data' class='hidden-data'>90 87 205 86 89 48 90 131 312 58 271 160 21 74 110 185 21 74 7 51 7 51 10 19 10 19 67 21 67 21 137 4 137 4 186 35 186 35 240 11 240 11 324 8 324 8 373 25 373 25 312 58 271 160 242 119 242 119 231 166 231 166 187 212 187 212 172 181 172 181 132 233 110 185 40 185 40 185 35 245 35 245 88 251 132 233 194 263 194 263 240 212 240 212 256 304 256 304 342 96 342 96 407 26 407 26 470 63 470 63 441 14 88 251 52 322 52 322 11 399 11 399 41 446 41 446 25 593 25 593 298 649 441 14 505 15 505 15 489 130 489 130 552 49 552 49 648 22 648 22 688 260 688 260 620 399 620 399 650 499 650 499 595 597 595 597 505 648 505 648 408 608 408 608 298 649 125 361 120 502 122 427 182 426 177 374 182 505 215 377 222 502 215 377 263 371 219 428 265 426 222 502 256 502 303 375 313 515 313 515 358 512 384 376 399 511 399 511 438 510 464 381 468 514 464 381 493 380 464 433 494 435 468 514 497 512 525 517 531 387 531 387 580 518 580 518 584 398 386 132 431 136 386 132 367 176 431 136 496 158 496 158 579 122 579 122 581 218 581 218 517 195 517 195 445 174 445 174 491 259 367 176 484 290 491 259 534 248 484 290 498 331 367 176 334 295 334 295 387 251 408 68 393 85 408 68 431 78 431 78 393 85 688 260 611 256 620 399 573 300 648 22 621 74 387 251 407 282 303 375 326 364 384 376 384 376 384 376 353 360</div>
<div id='color-data' class='hidden-data'>255 170 116 131 255 116 0 108 116 255 100 123 255 255 255 255 255 0 140 255 255 0 153 121 255 126 255 255 126 136 0 37 0 137 188 0 255 255 144 255 90 0 255 83 255 255 83 80 255 0 0 0 23 0 0 180 0 0 255 172 178 56 172 255 255 255 255 165 255 255 34 65 102 255 255 102 76 109 168 76 109 168 249 109 3 106 109 0 157 0 255 0 0 255 212 0 38 171 0 254 255 178 131 76 178 131 177 7 255 177 7 255 14 7 140 139 0 140 139 232 255 139 232 16 139 232 16 0 232 145 0 0 188 246 0 255 128 0 255 0 122 255 142 122 36 142 122 147 142 122 147 255 122 147 88 95 70 88 95 222 237 95 222 133 0 93 133 0 113 65 0 113 165 255 113 0 43 170 0 43 255 205 0 152 233 0 156 53 162 0 53 162 0 245 0 0 195 0 107 106 0 184 100 0 184 229 0 150 30 0 109 0 0 109 249 0 189 68 0 130 177 0 255 192 0 135 136 0 255 0 0 10 54 0 175 68 0 0 68 0 94 142 0 10 14 106 66 17 124 66 17 124 66 17 124</div>
<div id='tree-data' class='hidden-data'>(90,87|205,86):255,170,116 (21,74|7,51):255,255,255 (10,19|67,21):140,255,255 (240,11|324,8):0,37,0 (137,4|85.4483,16.5197):0,153,121 # (137,4|137,4):255,126,255 (152.977,14.108|137,4):255,126,255 # # # (441,14|505,15):254,255,178 (324,8|324,8):137,188,0 (441,14|441,14):168,249,109 (505,15|505,15):131,76,178 (324,8|336.592,12.3686):137,188,0 # # # # # (373,25|361.306,31.3265):255,255,144 (67,21|85.4483,16.5197):0,153,121 # (169.559,24.5986|152.977,14.108):255,126,255 (240,11|240,11):255,126,136 (206.488,25.8943|240,11):255,126,136 # (336.592,12.3686|373,25):137,188,0 # # # # (407,26|419.549,33.3701):168,76,109 (648,22|586.718,39.2357):255,177,7 (453.162,34.5495|441,14):168,249,109 (502.041,36.2646|505,15):131,76,178 # # (407,26|407,26):102,76,109 # # (648,22|648,22):94,142,0 (638.114,41.0391|648,22):94,142,0 (648,22|648,22):255,14,7 # # (651.277,41.501|648,22):255,14,7 # # # (373,25|373,25):137,188,0 (400.768,32.7112|407,26):102,76,109 # # # (408,68|431,78):255,0,0 (552,49|525.389,83.214):131,177,7 (470,63|419.549,33.3701):168,76,109 (453.162,34.5495|470,63):168,249,109 (502.041,36.2646|496.182,78.3769):131,76,178 # # # (408,68|408,68):135,136,0 (431,78|431,78):10,54,0 (361.306,31.3265|344.527,40.4032):255,255,144 # (400.768,32.7112|379.504,55.6106):102,76,109 # (470,63|470,63):168,249,109 (495.473,83.4741|496.182,78.3769):131,76,178 # # # # # (621,74|638.114,41.0391):94,142,0 (552,49|552,49):255,177,7 (586.718,39.2357|552,49):255,177,7 # # # (658.094,82.0601|651.277,41.501):255,14,7 # # (89,48|89.4699,87.0046):131,255,116 (312,58|301.081,85.1645):0,108,116 (186,35|169.559,24.5986):255,126,255 (206.488,25.8943|186,35):255,126,136 # # (186,35|186,35):255,126,136 # # (393.564,84.3603|408,68):135,136,0 (352.477,84.7176|379.504,55.6106):102,76,109 (312,58|312,58):255,255,144 (344.527,40.4032|312,58):255,255,144 # # # # (396.617,84.3338|431,78):10,54,0 # # (7,51|7,51):255,255,0 (21,74|21,74):255,100,123 (31.829,87.5058|21,74):255,100,123 (67,21|67,21):0,153,121 (10,19|10,19):255,255,0 (7,51|10,19):255,255,0 # # # # # # # # (271,160|242,119):255,90,0 (688,260|620,399):140,139,0 (464,381|493,380):113,65,0 (386,132|431,136):156,53,162 (342,96|352.477,84.7176):102,76,109 (242,119|242,119):255,83,255 (301.081,85.1645|285.834,123.096):0,108,116 # # # (489,130|495.473,83.4741):131,76,178 (393,85|393.564,84.3603):135,136,0 (342,96|342,96):102,255,255 (329.203,126.951|342,96):102,255,255 # (393,85|393,85):10,54,0 # # # (386,132|386,132):0,53,162 (431,136|431,136):0,245,0 (396.617,84.3338|393,85):10,54,0 # # # # (579,122|527.04,144.537):0,195,0 (489,130|489,130):131,177,7 (525.389,83.214|489,130):131,177,7 # (658.094,82.0601|658.977,87.3113):255,14,7 # # # (579,122|579,122):107,106,0 (579.567,149.206|579,122):107,106,0 (670.741,157.31|658.977,87.3113):255,14,7 # # # # (581,218|517,195):184,100,0 (496,158|431,136):0,245,0 (527.04,144.537|496,158):0,195,0 # (579.567,149.206|580.345,186.547):107,106,0 (670.741,157.31|681.404,220.752):255,14,7 # # # (517,195|517,195):184,229,0 (386,132|380.048,145.783):0,53,162 (329.203,126.951|329.002,127.438):102,255,255 # # (581,218|581,218):107,106,0 (496,158|496,158):0,195,0 (581,218|580.345,186.547):107,106,0 (687.366,256.225|681.404,220.752):255,14,7 # # # # # # (445,174|491,259):150,30,0 (688,260|688,260):175,68,0 (611,256|688,260):175,68,0 (517,195|445,174):184,229,0 # (687.366,256.225|688,260):255,14,7 # (534,248|521.003,251.325):109,249,0 # # (573,300|609.08,375.997):0,68,0 (688,260|688,260):255,14,7 # # (491,259|521.003,251.325):109,249,0 # # # (367,176|484,290):109,0,0 (491,259|491,259):109,249,0 (445,174|445,174):184,229,0 (484,290|484,290):189,68,0 (367,176|367,176):130,177,0 (380.048,145.783|367,176):0,53,162 (329.002,127.438|325.601,135.663):102,255,255 # # # # # # # (387,251|407,282):10,14,106 (498,331|484,290):189,68,0 # (387,251|387,251):255,192,0 (367,176|358.466,206.773):130,177,0 (325.601,135.663|320.519,147.954):102,255,255 # # # # (271,160|271,160):0,108,116 (464,381|464,381):93,133,0 (271,160|285.834,123.096):0,108,116 # (354.469,278.007|387,251):255,192,0 (343.15,262.005|358.466,206.773):130,177,0 (299.108,199.739|320.519,147.954):102,255,255 # # # # # # (525,517|531,387):170,0,43 (494,435|464.102,433.007):113,165,255 (531,387|531,387):255,205,0 (464,381|465.567,433.104):93,133,0 # # # (465.629,435.165|465.567,433.104):93,133,0 # # (620,399|620,399):140,139,232 (584,398|581.332,478.042):152,233,0 (572.107,496.899|531,387):255,205,0 # # (620,399|609.08,375.997):0,68,0 # # # (650,499|595,597):255,139,232 (580,518|572.107,496.899):255,205,0 (620,399|650,499):140,139,232 # (581.332,478.042|580,518):152,233,0 # # (584.362,603.028|595,597):16,139,232 (580,518|580,518):152,233,0 # # # (595,597|595,597):16,139,232 (650,499|650,499):140,139,232 # # # (231,166|187,212):255,83,80 (172,181|132,233):0,23,0 (110,185|40,185):0,180,0 (90,131|89.4699,87.0046):131,255,116 (172,181|172,181):255,0,0 (110,185|110,185):255,100,123 (110,185|90.3554,160.499):255,100,123 # # # # (40,185|40,185):0,255,172 (31.829,87.5058|90.3554,160.499):255,100,123 # # # (35,245|88,251):178,56,172 (132,233|132,233):255,255,255 (40,185|35,245):0,255,172 # # # (52,322|26.0506,370.734):0,157,0 (88,251|88,251):3,106,109 (35,245|35,245):0,255,172 (52,322|52,322):3,106,109 (88,251|52,322):3,106,109 # # # # # # (187,212|187,212):255,0,0 (231,166|231,166):255,83,255 (242,119|231,166):255,83,255 (187,212|172,181):255,0,0 # (155.867,244.548|132,233):255,255,255 # (14.6032,392.233|26.0506,370.734):0,157,0 # # # # # (194,263|240,212):255,165,255 (11,399|14.6032,392.233):0,157,0 (11,399|11,399):255,0,0 # # (155.867,244.548|194,263):255,255,255 # (36.0027,438.171|11,399):255,0,0 # # (41,446|25,593):255,212,0 (25,593|25,593):38,171,0 (41,446|41,446):255,0,0 (36.0027,438.171|41,446):255,0,0 # # # # (505,648|408,608):16,0,232 (122,427|182,426):255,128,0 (215,377|263,371):36,142,122 (256,304|299.108,199.739):102,255,255 (240,212|240,212):255,34,65 (194,263|194,263):255,255,255 (177,374|177.294,381.713):255,0,122 (215,377|215,377):255,142,122 (256,304|256,304):255,34,65 (240,212|256,304):255,34,65 # # # # (125,361|124.029,388.371):188,246,0 # # # # (334,295|343.15,262.005):130,177,0 # (334,295|334,295):255,192,0 (354.469,278.007|334,295):255,192,0 # # # (303,375|326,364):66,17,124 (178.987,426.05|177.294,381.713):255,0,122 (215,377|217.186,416.041):255,142,122 # # (122.66,426.989|124.029,388.371):188,246,0 # # (384,376|384,376):66,17,124 (384,376|353,360):66,17,124 (384,376|384,376):222,237,95 # # (303,375|303,375):147,88,95 (306.495,423.925|303,375):147,88,95 (389.172,422.547|384,376):222,237,95 # # (217.711,425.405|217.186,416.041):255,142,122 # # # # (219,428|265,426):147,142,122 (178.987,426.05|179.127,429.734):255,0,122 (217.711,425.405|217.859,428.05):255,142,122 (306.495,423.925|306.514,424.195):147,88,95 # # # (122.66,426.989|122.475,432.197):188,246,0 # # (222,502|256,502):147,255,122 (464,433|464.102,433.007):113,165,255 (389.172,422.547|389.785,428.067):222,237,95 # # (120.446,489.421|122.475,432.197):188,246,0 # (465.629,435.165|467.639,502):93,133,0 # (179.127,429.734|181.885,502):255,0,122 (222,502|222,502):255,142,122 (217.859,428.05|222,502):255,142,122 (306.514,424.195|312.071,502):147,88,95 (398,502|389.785,428.067):222,237,95 # # # # # # (313,515|358,512):70,88,95 (182,505|181.885,502):255,0,122 (467.639,502|467.72,504.685):93,133,0 # (398,502|398.809,509.279):222,237,95 # (312.071,502|313,515):147,88,95 # # # (399,511|438,510):222,133,0 (467.72,504.685|467.857,509.234):93,133,0 # (399,511|399,511):222,237,95 (398.809,509.279|399,511):222,237,95 # # # (468,514|497,512):113,0,43 (313,515|313,515):147,88,95 (468,514|468,514):93,133,0 (467.857,509.234|468,514):93,133,0 # # # # (408,608|408,608):145,0,0 (505,648|505,648):16,139,232 (584.362,603.028|505,648):16,139,232 # # # # (298,649|25,593):38,171,0 (120,502|120.446,489.421):188,246,0 # (408,608|298,649):145,0,0 # # (298,649|298,649):145,0,0 # #</div>
<script src="src/data_parse.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>