-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
137 lines (119 loc) · 6.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>Dynamic BVH</title>
<script src="./out/main.js" type="Module"></script>
</head>
<body>
<div class="container-fluid" style="max-width: 1700px;">
<div class="row">
<div class="col p-0" style="margin-left:1rem;">
<div class="row">
<div class="col-10 title fs-1">Dynamic Bounding Volume Hierarchies</div>
<div class="col align-self-end frame_counter fs-5 text-end">0fps</div>
</div>
<canvas id="canvas" style="border: 2px solid black; width: 1280px; height: 720px;"></canvas>
</div>
<div class="col fw-normal" style="margin: 4rem 1rem 1rem 1rem">
<div class="row mb-2">
<button type="button" class="btn btn-primary " data-bs-toggle="modal" data-bs-target="#exampleModal">
How to use
</button>
</div>
<!-- Shorcut modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">How to use</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body ms-2">
<div class="row">
- Drag to create box
</div>
<div class="row">
- Drag box to move
</div>
<div class="row">
- Right click or wheel drag to remove box
</div>
<div class="row">
- R to restart
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row mb-2">
<button class="btn btn-primary" type="button" id="restart">
Restart
</button>
</div>
<div class="row">
<label for="seed" class="form-label col-9 p-0 m-0">Seed</label>
<input type="text" class="form-control" aria-label="seed" placeholder="Random seed" value="우왁굳" id="seedTextBox">
</div>
<div class="row">
<label for="boxCount" class="form-label col-9 p-0 m-0">Box count</label>
<div class="col text-end p-0 m-0" id="boxCount_label">0</div>
<input type="range" class="form-range " id="boxCount">
</div>
<div class="row">
<label for="genSpeed" class="form-label col-9 p-0 m-0">Generation speed</label>
<div class="col text-end p-0 m-0" id="genSpeed_label">0ms</div>
<input type="range" class="form-range " id="genSpeed">
</div>
<div class="row">
<label for="margin" class="form-label col-9 p-0 m-0">AABB margin</label>
<div class="col text-end p-0 m-0" id="margin_label">0cm</div>
<input type="range" class="form-range " id="margin">
</div>
<div class="row">
<label for="margin" class="form-label col-9 p-0 m-0">Velocity multiplier</label>
<div class="col text-end p-0 m-0" id="multiplier_label">0</div>
<input type="range" class="form-range " id="multiplier">
</div>
<br>
<div class="row">
<div class="form-check form-switch m-0">
<label class="form-check-label" for="applyRotation">Apply tree rotation</label>
<input class="form-check-input " type="checkbox" role="switch" id="applyRotation">
</div>
</div>
<div class="row">
<div class="form-check form-switch m-0">
<label class="form-check-label" for="colorize">Colorize bounding box</label>
<input class="form-check-input " type="checkbox" role="switch" id="colorize">
</div>
</div>
<br>
<div class="row fs-5" id="collsionPairsLabel">
Collision pairs: 0
</div>
<div class="row fs-5" id="surfaceAreaLabel">
Tree surface area: 0
</div>
<br>
<div class="row fs-5" id="collsionPairsLabel">
Collision checks
</div>
<div class="row" id="efficiencyCheckLabel" style="font-size: 1.1rem;">
</div>
</div>
</div>
</div>
</body>
</html>