Merge pull request #189 from pnext/gaussians-lod

feat: Gaussians LOD

Author: HectorArellanoDev

example/main.css

@@ -20,10 +20,22 @@ body,
   left: 20px;
 }
 
+.btn-container-splats {
+  position: absolute;
+  bottom: 80px;
+  left: 20px;
+}
+
 .btn-container-v1 button {
   margin-right: 10px;
 }
 
 .btn-container-v2 button {
   margin-right: 10px;
 }
+
+.btn-container-splats button {
+  margin-right: 10px;
+}
+
+

example/main.ts

@@ -1,4 +1,3 @@
-import { Vector3 } from 'three';
 import { ClipMode, PointCloudOctree } from '../src';
 import { Viewer } from './viewer';
 
@@ -14,18 +13,19 @@ viewer.initialize(targetEl);
 interface PointCloudsConfig {
     file: string;
     url: string;
-    version: 'v1' | 'v2';
+    version: 'v1' | 'v2' | 'splats';
 }
 
 const examplePointClouds: PointCloudsConfig[] = [
     {
         file: 'cloud.js',
         url: 'https://raw.githubusercontent.com/potree/potree/develop/pointclouds/lion_takanawa/',
-        version: 'v1'
-    }, {
+        version: 'v1',
+    },
+    {
         file: 'metadata.json',
         url: 'https://test-pix4d-cloud-eu-central-1.s3.eu-central-1.amazonaws.com/lion_takanawa_converted/',
-        version: 'v2'
+        version: 'v2',
     }
 ];
 
@@ -39,15 +39,17 @@ interface LoadedState {
 
 const pointClouds: PointClouds = {
     v1: undefined,
-    v2: undefined
+    v2: undefined,
+    splats: undefined
 };
 
 const loaded: LoadedState = {
     v1: false,
-    v2: false
+    v2: false,
+    splats: false
 };
 
-function createButton(text: string, onClick: () => void): HTMLButtonElement {
+function createButton(text: string, onClick: (e: MouseEvent) => void): HTMLButtonElement {
     const button: HTMLButtonElement = document.createElement('button');
     button.textContent = text;
     button.addEventListener('click', onClick);
@@ -58,45 +60,67 @@ function createSlider(version: string): HTMLInputElement {
     const slider: HTMLInputElement = document.createElement('input');
     slider.type = 'range';
     slider.min = '10000';
-    slider.max = '500000';
+    slider.max = '1000000';
+    slider.value = '1000000';
     slider.className = 'budget-slider';
     slider.addEventListener('change', () => {
         const cloud = pointClouds[version];
         if (!cloud) {
             return;
         }
         cloud.potree.pointBudget = parseInt(slider.value, 10);
+        viewer.update(0);
         console.log(cloud.potree.pointBudget);
     });
     return slider;
 }
 
-function setupPointCloud(version: 'v1' | 'v2', file: string, url: string): void {
+function setupPointCloud(version: 'v1' | 'v2' | 'splats', file: string, url: string): void {
     if (loaded[version]) {
         return;
     }
     loaded[version] = true;
 
-    viewer.load(file, url, version)
+    //TODO: check for mobile, not noly IOS
+    function isIOS() {
+        const ua = navigator.userAgent;
+        return ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0;
+    }
+
+    viewer.load(file, url, version == 'splats' ? 'v2' : version, !isIOS())
         .then(pco => {
             pointClouds[version] = pco;
-            pco.rotateX(-Math.PI / 2);
             pco.material.size = 1.0;
+
+            pco.material.pointColorType = 0;
+            
             pco.material.clipMode = ClipMode.CLIP_HORIZONTALLY;
             pco.material.clipExtent = [0.0, 0.0, 1.0, 1.0];
+            pco.position.set(0, 0, 0);
 
             const camera = viewer.camera;
+            camera.up.set(0, 0, 1);
             camera.far = 1000;
             camera.updateProjectionMatrix();
-            camera.position.set(0, 0, 10);
-            camera.lookAt(new Vector3());
+            camera.position.set(-4, 4, 16);
 
             viewer.add(pco);
         })
         .catch(err => console.error(err));
 }
 
 function setupUI(cfg: PointCloudsConfig): void {
+
+    const updateBtn = createButton("Update", (e: MouseEvent) => {
+        e.stopPropagation();
+        viewer.enableUpdate = !viewer.enableUpdate;
+        updateBtn.style.backgroundColor = viewer.enableUpdate ? "#00ff00" : "#ff0000";
+    })
+
+    updateBtn.style.backgroundColor ="#00ff00";
+
+    const slider = createSlider(cfg.version);
+
     const unloadBtn = createButton('Unload', () => {
         if (!loaded[cfg.version]) {
             return;
@@ -109,18 +133,25 @@ function setupUI(cfg: PointCloudsConfig): void {
         viewer.disposePointCloud(pointCloud);
         loaded[cfg.version] = false;
         pointClouds[cfg.version] = undefined;
-    });
 
-    const loadBtn = createButton('Load', () => setupPointCloud(cfg.version, cfg.file, cfg.url));
+        viewer.enableUpdate = true;
+        updateBtn.style.backgroundColor ="#00ff00";
+    });
 
-    const slider = createSlider(cfg.version);
+    const loadBtn = createButton('Load', (e: MouseEvent) => {
+        e.stopPropagation();
+        setupPointCloud(cfg.version, cfg.file, cfg.url)
+        }
+    );
 
     const btnContainer: HTMLDivElement = document.createElement('div');
     btnContainer.className = 'btn-container-' + cfg.version;
     document.body.appendChild(btnContainer);
     btnContainer.appendChild(unloadBtn);
     btnContainer.appendChild(loadBtn);
+    btnContainer.append(updateBtn);
     btnContainer.appendChild(slider);
+
 }
 
 examplePointClouds.forEach(setupUI);