-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
213 lines (169 loc) · 6.91 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
<!DOCTYPE html>
<html>
<head>
<title>Portality Splat Viewer</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script defer data-domain="viewer.portality.ai" src="https://plausible.io/js/script.js"></script>
</head>
<body style="background-color: black">
<div id="canvas-container">
<canvas id="gl-canvas" style="width: 100%; height:100%;"></canvas>
<div id="text-overlay">
<button id="portalityPlatformButton"
onclick="window.location.href='https://portality.ai';">
portality.ai Platform
</button>
<button id="helpButton">Help (F1)</button>
<button id="openFileButton">Open splat file</button>
<div class="bottomDiv">
<div> fps: <span id="fps"></span></div>
<div>average fps: <span id="avg"></span></div>
</div>
</div>
<div id="loadingSymbol" style="display: none;">
<img src="img/rotating.svg" alt="Loading..." />
</div>
<div id="helpMenu">
<img id="logo" src="img/logo.svg" alt="Portality" />
<br />
<button id="closeButton">X</button>
<!-- div id="controls"></div -->
<img id="controls" src="img/controls-desktop.svg"
alt="Desktop controls: LMB: Orbit, MMB: Dolly/Roll, RMB: Strafe. Mobile controls: Orbit with one finger. Dolly and roll with two finger gestures. Strafe with two finger gesture." />
<br />
<div>
<button id="mobileControlsBtn">Mobile controls</button>
<button id="desktopControlsBtn">Desktop controls</button>
</div>
<br />
<div>
Control sensitivity: <input type="range" min="0" max="100" value="30" id="controlSensitivity" />
</div>
<div>
<label for="sphereSize">Orbit sphere size:</label>
<input type="range" min="0" max="100" value="30" id="sphereSize" />
</div>
<div>
<label for="showSpheres">Show orbit sphere:</label>
<input type="checkbox" id="showSpheres" />
</div>
<div>
<button id="getURLButton">Get URL at current pose</button>
</div>
</div>
</div>
</body>
<script type="module">
import './3rdparty/interact.min.js';
import { renderMain, readParams } from './gausssplatrenderer.js';
import loadSplatData from './lib/splatfile.js';
function initCanvas() {
var canvas = document.getElementById("gl-canvas");
return canvas;
}
let cameraParams = {
position: [0, -1, 0],
lookAt: [0, 0.25, 0],
up: [0, 0, 1]
};
let pipelineType = 'full';
function isTouchDevice() {
// Combine reliable detection methods:
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0) ||
(window.matchMedia("(pointer: coarse)").matches));
}
// Function to resize the canvas to full window size
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
document.addEventListener('DOMContentLoaded', () => {
// Create a hidden file input element
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.style.display = 'none';
const helpMenu = document.getElementById('helpMenu');
// Add the file input element to the body (it's hidden anyway)
document.body.appendChild(fileInput);
// Set up an event listener to handle file selection
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (!file) {
console.error("No file selected.");
return;
}
const reader = new FileReader();
// Read the contents of the file
reader.onload = (e) => {
//const fileContents = e.target.result;
let data = loadSplatData(e.target.result);
// Process the file contents
renderMain(canvas, data, cameraParams, pipelineType, interact);
};
// Read the file as text
reader.readAsArrayBuffer(file);
});
// Find the open file button and add a click event listener
const openFileButton = document.getElementById('openFileButton');
const params = new URLSearchParams(window.location.search);
const url = params.get('url'); // Get the 'url' parameter
if (!url) { // only use button if no url
openFileButton.addEventListener('click', () => {
fileInput.click();
});
} else {
openFileButton.remove();
}
function showHelpMenu() {
displayControls();
helpMenu.style.display = 'block';
}
function hideHelpMenu() {
helpMenu.style.display = 'none';
}
const helpButton = document.getElementById('helpButton');
helpButton.addEventListener('click', () => {
showHelpMenu();
});
window.addEventListener('keydown', function (event) {
event.preventDefault();
if (event.key === 'F1') {
showHelpMenu();
} else if (event.key === 'Escape') {
hideHelpMenu();
}
});
const closeButton = document.getElementById('closeButton');
closeButton.addEventListener('click', () => {
helpMenu.style.display = 'none';
});
function displayControls(platform = '') {
const controlsImg = document.getElementById('controls');
let imgSrc;
if (platform == '') {
imgSrc = isTouchDevice() ? 'img/controls-mobile.svg' : 'img/controls-desktop.svg';
} else {
imgSrc = platform == 'mobile' ? 'img/controls-mobile.svg' : 'img/controls-desktop.svg';
}
controlsImg.src = imgSrc;
}
// Button functionality
const desktopControlsBtn = document.getElementById('desktopControlsBtn');
desktopControlsBtn.addEventListener('click', () => {
displayControls('desktop');
});
const mobileControlsBtn = document.getElementById('mobileControlsBtn');
mobileControlsBtn.addEventListener('click', () => {
displayControls('mobile');
});
});
let canvas = initCanvas();
// Listen for window resize events
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // Initial resize
readParams(new URLSearchParams(window.location.search), canvas, interact);
</script>
</html>