();
1795 |
1796 | // Add event listener for keydown
1797 | window.addEventListener('keydown', (event) => {
1798 | pressedKeys.add(event.key.toLowerCase());
1799 |
1800 | switch (event.key.toLowerCase()) {
1801 | case 'q':
1802 | this.rotateSceneAroundViewDirection(-rotationAmount);
1803 | break;
1804 | case 'e':
1805 | this.rotateSceneAroundViewDirection(rotationAmount);
1806 | break;
1807 | }
1808 | });
1809 |
1810 | // Add event listener for keyup
1811 | window.addEventListener('keyup', (event) => {
1812 | pressedKeys.delete(event.key.toLowerCase());
1813 | });
1814 |
1815 | // Add continuous movement update
1816 | const updateMovement = () => {
1817 | const pos = this.camera.getPosition();
1818 | const target = this.camera.getTarget();
1819 |
1820 | // Calculate forward vector (from camera to target)
1821 | const forward = vec3.create();
1822 | vec3.subtract(forward,
1823 | vec3.fromValues(target[0], target[1], target[2]),
1824 | vec3.fromValues(pos[0], pos[1], pos[2])
1825 | );
1826 | vec3.normalize(forward, forward);
1827 |
1828 | // Calculate right vector (cross product of forward and up)
1829 | const up = vec3.fromValues(0, 1, 0);
1830 | const right = vec3.create();
1831 | vec3.cross(right, forward, up);
1832 | vec3.normalize(right, right);
1833 |
1834 | let moveX = 0;
1835 | let moveY = 0;
1836 | let moveZ = 0;
1837 |
1838 | // Check for WASD and arrow keys
1839 | if (pressedKeys.has('w') || pressedKeys.has('arrowup')) {
1840 | // Move in forward direction
1841 | moveX += forward[0] * moveSpeed;
1842 | moveY += forward[1] * moveSpeed;
1843 | moveZ += forward[2] * moveSpeed;
1844 | }
1845 | if (pressedKeys.has('s') || pressedKeys.has('arrowdown')) {
1846 | // Move in backward direction
1847 | moveX -= forward[0] * moveSpeed;
1848 | moveY -= forward[1] * moveSpeed;
1849 | moveZ -= forward[2] * moveSpeed;
1850 | }
1851 | if (pressedKeys.has('a') || pressedKeys.has('arrowleft')) {
1852 | // Move left
1853 | moveX -= right[0] * moveSpeed;
1854 | moveY -= right[1] * moveSpeed;
1855 | moveZ -= right[2] * moveSpeed;
1856 | }
1857 | if (pressedKeys.has('d') || pressedKeys.has('arrowright')) {
1858 | // Move right
1859 | moveX += right[0] * moveSpeed;
1860 | moveY += right[1] * moveSpeed;
1861 | moveZ += right[2] * moveSpeed;
1862 | }
1863 |
1864 | // Space and Shift for up/down movement
1865 | if (pressedKeys.has(' ')) {
1866 | moveY += moveSpeed;
1867 | }
1868 | if (pressedKeys.has('shift')) {
1869 | moveY -= moveSpeed;
1870 | }
1871 |
1872 | // Apply movement if any keys were pressed
1873 | if (moveX !== 0 || moveY !== 0 || moveZ !== 0) {
1874 | this.camera.setPosition(pos[0] + moveX, pos[1] + moveY, pos[2] + moveZ);
1875 | this.camera.setTarget(target[0] + moveX, target[1] + moveY, target[2] + moveZ);
1876 | }
1877 |
1878 | // Continue the update loop
1879 | requestAnimationFrame(updateMovement);
1880 | };
1881 |
1882 | // Start the movement update loop
1883 | updateMovement();
1884 | }
1885 |
1886 | private getSampleCountFromURL(): number {
1887 | const urlParams = new URLSearchParams(window.location.search);
1888 | const sampleCount = parseInt(urlParams.get('samples') || '3', 10);
1889 | // Ensure the count is at least 1 and not too high for performance
1890 | return Math.max(1, Math.min(sampleCount, 64));
1891 | }
1892 | }
1893 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import './style.css';
2 | import { Viewer } from './lib/Viewer';
3 | import { Camera } from './lib/Camera';
4 | import { LoadPLY } from './lib/LoadPLY';
5 |
6 | // Add these at the top of the file, after imports
7 | let progressContainer: HTMLDivElement;
8 | let progressBarInner: HTMLDivElement;
9 | let progressText: HTMLDivElement;
10 |
11 | // Global references
12 | let currentViewer: Viewer;
13 | let currentCamera: Camera;
14 | let mainInfoDisplay: HTMLElement;
15 |
16 | // Create a function to initialize the progress bar
17 | function createProgressBar() {
18 | progressContainer = document.createElement('div');
19 | progressContainer.style.position = 'absolute';
20 | progressContainer.style.top = '50%';
21 | progressContainer.style.left = '50%';
22 | progressContainer.style.transform = 'translate(-50%, -50%)';
23 | progressContainer.style.padding = '20px';
24 | progressContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
25 | progressContainer.style.color = 'white';
26 | progressContainer.style.fontFamily = 'sans-serif';
27 | progressContainer.style.borderRadius = '10px';
28 | progressContainer.style.textAlign = 'center';
29 | progressContainer.style.display = 'none';
30 |
31 | progressText = document.createElement('div');
32 | progressText.style.marginBottom = '10px';
33 | progressText.textContent = 'Loading PLY file...';
34 |
35 | const progressBarOuter = document.createElement('div');
36 | progressBarOuter.style.width = '200px';
37 | progressBarOuter.style.height = '20px';
38 | progressBarOuter.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
39 | progressBarOuter.style.borderRadius = '10px';
40 | progressBarOuter.style.overflow = 'hidden';
41 |
42 | progressBarInner = document.createElement('div');
43 | progressBarInner.style.width = '0%';
44 | progressBarInner.style.height = '100%';
45 | progressBarInner.style.backgroundColor = '#4CAF50';
46 |
47 | progressBarOuter.appendChild(progressBarInner);
48 | progressContainer.appendChild(progressText);
49 | progressContainer.appendChild(progressBarOuter);
50 | document.body.appendChild(progressContainer);
51 | }
52 |
53 | // Helper function to update progress
54 | function updateProgress(progress: number) {
55 | const percentage = Math.round(progress * 100);
56 | // Remove transition for 100% to ensure it completes
57 | if (percentage === 100) {
58 | progressBarInner.style.transition = 'none';
59 | }
60 |
61 | // Update both the width and text in the same frame
62 | const width = `${percentage}%`;
63 | const text = `Loading PLY file... ${percentage}%`;
64 |
65 | // Ensure both updates happen in the same frame
66 | requestAnimationFrame(() => {
67 | progressBarInner.style.width = width;
68 | progressText.textContent = text;
69 | });
70 | }
71 |
72 | // Also, let's reset the progress bar when starting a new load
73 | function resetProgress() {
74 | progressBarInner.style.width = '0%';
75 | progressText.textContent = 'Loading PLY file... 0%';
76 | }
77 |
78 | // Process PLY data after loading
79 | function processPLYData(plyData: any, fileName: string, loadTime: string, fileSize?: number, infoElement?: HTMLElement) {
80 | if (plyData.sceneCenter && plyData.sceneExtent) {
81 | currentViewer.setSceneParameters(plyData.sceneCenter, plyData.sceneExtent);
82 | }
83 |
84 | currentViewer.loadPointCloud(
85 | plyData.vertices,
86 | plyData.sh0Values,
87 | plyData.octlevels,
88 | plyData.octpaths,
89 | plyData.gridValues,
90 | plyData.shRestValues
91 | );
92 |
93 | let octlevelInfo = '';
94 | if (plyData.octlevels && plyData.octlevels.length > 0) {
95 | const minOct = plyData.octlevels.reduce((min: number, val: number) => val < min ? val : min, plyData.octlevels[0]);
96 | const maxOct = plyData.octlevels.reduce((max: number, val: number) => val > max ? val : max, plyData.octlevels[0]);
97 | octlevelInfo = `\nOctlevels: ${minOct} to ${maxOct}`;
98 | }
99 |
100 | const sizeInfo = fileSize ? `\nSize: ${(fileSize / (1024 * 1024)).toFixed(2)} MB` : '';
101 | const infoText = `Loaded: ${fileName}
102 | Voxels: ${plyData.vertexCount.toLocaleString()}${sizeInfo}
103 | Load time: ${loadTime}s${octlevelInfo}`;
104 |
105 | // Update the main info display
106 | mainInfoDisplay.textContent = infoText;
107 |
108 | // Also update the upload info element if provided
109 | if (infoElement && infoElement !== mainInfoDisplay) {
110 | infoElement.textContent = infoText;
111 | }
112 |
113 | currentViewer.setSceneTransformMatrix([0.9964059591293335,0.07686585187911987,0.03559183329343796,0,0.06180455908179283,-0.9470552206039429,0.3150659501552582,0,0.05792524665594101,-0.3117338716983795,-0.9484022259712219,0,0,0,0,1]);
114 |
115 | if (plyData.sceneCenter && plyData.sceneExtent) {
116 | currentCamera.setPosition(-5.3627543449401855,-0.40146273374557495,3.546692371368408);
117 | currentCamera.setTarget(
118 | plyData.sceneCenter[0],
119 | plyData.sceneCenter[1],
120 | plyData.sceneCenter[2]
121 | );
122 | }
123 | }
124 |
125 | // Load PLY from URL
126 | async function loadPLYFromUrl(url: string, infoElement: HTMLElement) {
127 | try {
128 | progressContainer.style.display = 'block';
129 | resetProgress();
130 |
131 | const startTime = performance.now();
132 | const plyData = await LoadPLY.loadFromUrl(url, (progress) => {
133 | updateProgress(progress);
134 | });
135 | const loadTime = ((performance.now() - startTime) / 1000).toFixed(2);
136 |
137 | progressContainer.style.display = 'none';
138 |
139 | const fileName = url.split('/').pop() || 'remote-ply';
140 | processPLYData(plyData, fileName, loadTime, undefined, infoElement);
141 |
142 | return true;
143 | } catch (error: any) {
144 | progressContainer.style.display = 'none';
145 | console.error('Error loading PLY from URL:', error);
146 | infoElement.textContent = `Error loading PLY: ${error.message}`;
147 |
148 | // Update the main info display too if different from infoElement
149 | if (infoElement !== mainInfoDisplay) {
150 | mainInfoDisplay.textContent = `Error loading PLY: ${error.message}`;
151 | }
152 |
153 | return false;
154 | }
155 | }
156 |
157 | // Load PLY from File
158 | async function loadPLYFromFile(file: File, infoElement: HTMLElement) {
159 | try {
160 | const startTime = performance.now();
161 | const plyData = await LoadPLY.loadFromFile(file);
162 | const loadTime = ((performance.now() - startTime) / 1000).toFixed(2);
163 |
164 | processPLYData(plyData, file.name, loadTime, file.size, infoElement);
165 |
166 | return true;
167 | } catch (error: any) {
168 | console.error('Error loading PLY from file:', error);
169 | infoElement.textContent = `Error loading PLY: ${error.message}`;
170 |
171 | // Update the main info display too if different from infoElement
172 | if (infoElement !== mainInfoDisplay) {
173 | mainInfoDisplay.textContent = `Error loading PLY: ${error.message}`;
174 | }
175 |
176 | return false;
177 | }
178 | }
179 |
180 | /**
181 | * Add some basic UI controls for the demo
182 | */
183 | function addControls() {
184 | // Create a simple control panel
185 | const controls = document.createElement('div');
186 | controls.style.position = 'absolute';
187 | controls.style.top = '10px';
188 | controls.style.left = '10px';
189 | controls.style.padding = '10px';
190 | controls.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
191 | controls.style.color = 'white';
192 | controls.style.fontFamily = 'sans-serif';
193 | controls.style.borderRadius = '5px';
194 | controls.style.fontSize = '14px';
195 |
196 | // Check if device is mobile
197 | const isMobile = window.matchMedia('(max-width: 768px)').matches;
198 |
199 | // Different instructions based on device type
200 | const controlInstructions = isMobile ? `
201 | Controls
202 |
203 | - 1 finger drag: orbit
204 | - 2 finger drag: pan/zoom
205 |
206 | ` : `
207 | Controls
208 |
209 | - LClick + drag: orbit
210 | - RClick + drag: pan
211 | - Scroll: zoom
212 | - WASD/Arrow Keys: move
213 |
214 | `;
215 |
216 | controls.innerHTML = `
217 | WebGL SVRaster Viewer
218 | GitHub
219 | ${controlInstructions}
220 |
221 | `;
222 |
223 | // Add media query for mobile devices
224 | if (isMobile) {
225 | controls.style.fontSize = '12px';
226 | controls.style.padding = '8px';
227 | controls.style.maxWidth = '150px';
228 | }
229 |
230 | // Add the controls to the document
231 | document.body.appendChild(controls);
232 |
233 | return document.getElementById('model-info')!;
234 | }
235 |
236 | /**
237 | * Add PLY file upload UI
238 | */
239 | function addPLYUploadUI() {
240 | // Create a file upload container
241 | const uploadContainer = document.createElement('div');
242 | uploadContainer.style.position = 'absolute';
243 | uploadContainer.style.top = '10px';
244 | uploadContainer.style.right = '10px';
245 | uploadContainer.style.padding = '10px';
246 | uploadContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
247 | uploadContainer.style.color = 'white';
248 | uploadContainer.style.fontFamily = 'sans-serif';
249 | uploadContainer.style.borderRadius = '5px';
250 |
251 | // Update the UI to have buttons for both inputs
252 | uploadContainer.innerHTML = `
253 | Load PLY Model
254 |
255 |
257 |
260 |
261 |
262 |
264 |
267 |
268 |
269 | `;
270 |
271 | document.body.appendChild(uploadContainer);
272 |
273 | // Get UI elements
274 | const fileInput = document.getElementById('ply-upload') as HTMLInputElement;
275 | const fileButton = document.getElementById('load-file') as HTMLButtonElement;
276 | const urlInput = document.getElementById('ply-url') as HTMLInputElement;
277 | const urlButton = document.getElementById('load-url') as HTMLButtonElement;
278 | const infoElement = document.getElementById('ply-info')!;
279 |
280 | // Handle URL input
281 | urlButton.addEventListener('click', async () => {
282 | const url = urlInput.value.trim();
283 | if (!url) {
284 | alert('Please enter a URL');
285 | return;
286 | }
287 |
288 | try {
289 | urlButton.disabled = true;
290 | urlButton.textContent = 'Loading...';
291 | infoElement.textContent = 'Loading PLY from URL...';
292 |
293 | await loadPLYFromUrl(url, infoElement);
294 | } finally {
295 | urlButton.disabled = false;
296 | urlButton.textContent = 'Load URL';
297 | }
298 | });
299 |
300 | // Handle file input
301 | fileButton.addEventListener('click', async () => {
302 | if (!fileInput.files || fileInput.files.length === 0) {
303 | alert('Please select a file first');
304 | return;
305 | }
306 |
307 | const file = fileInput.files[0];
308 | try {
309 | fileButton.disabled = true;
310 | fileButton.textContent = 'Loading...';
311 | infoElement.textContent = 'Loading PLY file...';
312 |
313 | await loadPLYFromFile(file, infoElement);
314 | } finally {
315 | fileButton.disabled = false;
316 | fileButton.textContent = 'Load File';
317 | }
318 | });
319 | }
320 |
321 | document.addEventListener('DOMContentLoaded', async () => {
322 | // Create the WebGL viewer
323 | const viewer = new Viewer('app');
324 | currentViewer = viewer;
325 |
326 | // Get direct access to the camera
327 | const camera = viewer.getCamera();
328 | currentCamera = camera;
329 |
330 | // Configure the camera for a nice view
331 | camera.setPosition(0, 0, 5); // Position away from the scene
332 | camera.setTarget(0, 0, 0); // Look at the center
333 |
334 | // Handle window resize events
335 | window.addEventListener('resize', () => {
336 | const width = window.innerWidth;
337 | const height = window.innerHeight;
338 | viewer.resize(width, height);
339 | });
340 |
341 | // Get URL parameters
342 | const urlParams = new URLSearchParams(window.location.search);
343 | const plyUrl = urlParams.get('url') || 'https://huggingface.co/samuelm2/voxel-data/resolve/main/pumpkin_600k.ply';
344 | const showLoadingUI = urlParams.get('showLoadingUI') === 'true';
345 |
346 | // Add UI controls and get info element
347 | const infoDisplay = addControls();
348 | mainInfoDisplay = infoDisplay;
349 |
350 | // Create progress bar
351 | createProgressBar();
352 |
353 | // Only add PLY upload UI if showLoadingUI is true
354 | if (showLoadingUI) {
355 | // Add UI
356 | addPLYUploadUI();
357 | // Set initial info text
358 | infoDisplay.textContent = 'Please use the controls in the top right to load a PLY file.';
359 | } else {
360 | // Auto-load the PLY file if showLoadingUI is false
361 | await loadPLYFromUrl(plyUrl, infoDisplay);
362 | }
363 | });
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3 | line-height: 1.5;
4 | font-weight: 400;
5 |
6 | color-scheme: light dark;
7 | color: rgba(255, 255, 255, 0.87);
8 | background-color: #242424;
9 |
10 | font-synthesis: none;
11 | text-rendering: optimizeLegibility;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | a {
17 | font-weight: 500;
18 | color: #646cff;
19 | text-decoration: inherit;
20 | }
21 | a:hover {
22 | color: #535bf2;
23 | }
24 |
25 | body {
26 | margin: 0;
27 | display: flex;
28 | place-items: center;
29 | min-width: 320px;
30 | min-height: 100vh;
31 | }
32 |
33 | h1 {
34 | font-size: 3.2em;
35 | line-height: 1.1;
36 | }
37 |
38 | #app {
39 | text-align: center;
40 | }
41 |
42 | .logo {
43 | height: 6em;
44 | padding: 1.5em;
45 | will-change: filter;
46 | transition: filter 300ms;
47 | }
48 | .logo:hover {
49 | filter: drop-shadow(0 0 2em #646cffaa);
50 | }
51 | .logo.vanilla:hover {
52 | filter: drop-shadow(0 0 2em #3178c6aa);
53 | }
54 |
55 | .card {
56 | padding: 2em;
57 | }
58 |
59 | .read-the-docs {
60 | color: #888;
61 | }
62 |
63 | button {
64 | border-radius: 8px;
65 | border: 1px solid transparent;
66 | padding: 0.6em 1.2em;
67 | font-size: 1em;
68 | font-weight: 500;
69 | font-family: inherit;
70 | background-color: #1a1a1a;
71 | cursor: pointer;
72 | transition: border-color 0.25s;
73 | }
74 | button:hover {
75 | border-color: #646cff;
76 | }
77 | button:focus,
78 | button:focus-visible {
79 | outline: 4px auto -webkit-focus-ring-color;
80 | }
81 |
82 | @media (prefers-color-scheme: light) {
83 | :root {
84 | color: #213547;
85 | background-color: #ffffff;
86 | }
87 | a:hover {
88 | color: #747bff;
89 | }
90 | button {
91 | background-color: #f9f9f9;
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/workers/SortWorker.ts:
--------------------------------------------------------------------------------
1 | import { DistanceSorter } from '../lib/DistanceSorter';
2 |
3 | // Define message types
4 | interface SortRequest {
5 | type: 'sort';
6 | positions: Float32Array;
7 | cameraPosition: [number, number, number];
8 | cameraTarget: [number, number, number];
9 | sceneTransformMatrix: Float32Array; // Add transform matrix
10 | octlevels?: Uint8Array; // Add octree levels information
11 | octpaths?: Uint32Array; // Add octree paths information
12 | }
13 |
14 | interface SortResponse {
15 | type: 'sorted';
16 | indices: Uint32Array;
17 | sortTime: number;
18 | }
19 |
20 | // Web Worker context
21 | const ctx: Worker = self as any;
22 |
23 | // Handle incoming messages
24 | ctx.addEventListener('message', (event: MessageEvent) => {
25 | const data = event.data as SortRequest;
26 |
27 | if (data.type === 'sort') {
28 | console.log(`SortWorker: Starting distance-based sort for ${data.positions.length / 3} voxels`);
29 |
30 | const startTime = performance.now();
31 |
32 | // Transform positions before sorting
33 | const transformedPositions = new Float32Array(data.positions.length);
34 |
35 | // Apply the scene transformation to each position
36 | for (let i = 0; i < data.positions.length / 3; i++) {
37 | const x = data.positions[i * 3];
38 | const y = data.positions[i * 3 + 1];
39 | const z = data.positions[i * 3 + 2];
40 |
41 | // Apply transformation matrix
42 | transformedPositions[i * 3] = x * data.sceneTransformMatrix[0] +
43 | y * data.sceneTransformMatrix[4] +
44 | z * data.sceneTransformMatrix[8] +
45 | data.sceneTransformMatrix[12];
46 | transformedPositions[i * 3 + 1] = x * data.sceneTransformMatrix[1] +
47 | y * data.sceneTransformMatrix[5] +
48 | z * data.sceneTransformMatrix[9] +
49 | data.sceneTransformMatrix[13];
50 | transformedPositions[i * 3 + 2] = x * data.sceneTransformMatrix[2] +
51 | y * data.sceneTransformMatrix[6] +
52 | z * data.sceneTransformMatrix[10] +
53 | data.sceneTransformMatrix[14];
54 | }
55 |
56 | // Use DistanceSorter to sort the transformed voxels by distance from camera
57 | const indices = DistanceSorter.sortVoxels(
58 | transformedPositions,
59 | data.cameraPosition
60 | );
61 |
62 | const sortTime = performance.now() - startTime;
63 | console.log(`SortWorker: Distance-based sort complete in ${sortTime.toFixed(2)}ms, returning ${indices.length} indices`);
64 |
65 | // Send back sorted indices
66 | const response: SortResponse = {
67 | type: 'sorted',
68 | indices,
69 | sortTime
70 | };
71 |
72 | ctx.postMessage(response, [response.indices.buffer]);
73 | }
74 | });
75 |
76 | // Let the main thread know we're ready
77 | console.log('SortWorker: Initialized and ready');
78 | ctx.postMessage({ type: 'ready' });
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "module": "ESNext",
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "isolatedModules": true,
13 | "moduleDetection": "force",
14 | "noEmit": true,
15 |
16 | /* Linting */
17 | "strict": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "noFallthroughCasesInSwitch": true,
21 | "noUncheckedSideEffectImports": true
22 | },
23 | "include": ["src"]
24 | }
25 |
--------------------------------------------------------------------------------