-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
152 lines (130 loc) · 4.49 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gaussian Splatting renderer</title>
<style>
body {
background-color: #c2c2c2;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100vh;
}
#container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 100%;
}
#drawArea {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
#canvas-webgpu {
border: 1px solid;
background-color: white;
}
#sidebar {
width: 250px;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: 100%;
}
#sidebar input {
margin-bottom: 10px;
}
#cameraList {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 250px;
}
#instructions {
font-size: 12px;
margin-top: 10px;
text-align: left;
}
/* reduce margins on the instructions list */
#instructions p {
margin-bottom: 0.2em;
}
/* reduce margins on the instructions list */
#instructions ul, #instructions ol, #instructions li {
margin-top: 0.1em;
margin-left: -0.5em;
}
#cameraList li {
margin-bottom: 5px;
}
#cameraList li.selected {
background-color: #ccc;
}
#loading-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(120, 120, 120, 0.8);
padding: 10px;
border-radius: 5px;
display: none; /* Hide it initially */
}
</style>
</head>
<body>
<div id="loading-popup">Loading .ply, this may take from seconds to a couple of minutes</div>
<div id="container">
<div id="drawArea">
<canvas id="canvas-webgpu" width="700" height="700"></canvas>
</div>
<div id="sidebar">
<label id="fps-counter" style="display:none"></label>
<div id="controls">
<button style="display:block" onclick="document.getElementById('plyButton').click()">Choose
point_cloud.ply</button>
<input type="file" accept=".ply" style="display:none" id="plyButton" />
<button style="display:block" onclick="document.getElementById('cameraButton').click()">Choose
cameras.json</button>
<input type="file" accept=".json" style="display:none" id="cameraButton" />
<label for="cameraList">Available cameras:</label>
<ul id="cameraList">
<li>(choose cameras.json to load)</li>
</ul>
</div>
<div id="instructions">
<p><strong>Usage:</strong></p>
<ol>
<li><strong>Pick a point cloud</strong> (by default called point_cloud.ply, not input.ply).</li>
<li>(Optional) <strong>Select a cameras.json file</strong>, to pick predefined cameras from the
list.</li>
</ol>
<p><strong>Mouse controls:</strong></p>
<ul>
<li><strong>Click + drag</strong> rotate yaw/pitch</li>
<li><strong>Scroll wheel</strong> move forward/backward</li>
</ul>
<p><strong>Keyboard controls:</strong></p>
<ul>
<li><strong>W/S</strong> move up/down image plane</li>
<li><strong>A/D</strong> move left/right</li>
<li><strong>Q/E</strong> move forward/backward</li>
<li><strong>J/L</strong> rotate yaw</li>
<li><strong>I/K</strong> rotate pitch</li>
<li><strong>U/O</strong> rotate roll</li>
</ul>
</div>
<a href="https://github.com/cvlab-epfl/gaussian-splatting-web">Source</a>
</div>
</div>
</body>
</html>