initial editor class + on demand rendering

Author: MarcusAndreasSvensson

.gitignore

@@ -1,3 +1,5 @@
 dist
 build
 node_modules
+.vscode/**/*
+demo/assets/data/**/*

demo/index.html

@@ -335,7 +335,7 @@
       document.getElementById('check-icon').style.display = visible ? 'block' : 'none';
     }
 
-    window.viewSplat = function() {
+    window.viewSplat = function(options = {}) {
 
       const viewFile = document.getElementById("viewFile");
       const alphaRemovalThreshold = parseInt(document.getElementById("alphaRemovalThresholdView").value);
@@ -399,11 +399,12 @@
       currentCameraUpArray = cameraUpArray;
       currentCameraPositionArray = cameraPositionArray;
       currentCameraLookAtArray = cameraLookAtArray;
+
       try {
         const fileReader = new FileReader();
         fileReader.onload = function(){
           try {
-           runViewer(fileReader.result, isPly, alphaRemovalThreshold, cameraUpArray, cameraPositionArray, cameraLookAtArray);
+           runViewer(fileReader.result, isPly, alphaRemovalThreshold, cameraUpArray, cameraPositionArray, cameraLookAtArray, options.editMode);
           } catch (e) {
             setViewError("Could not view scene.");
           }
@@ -440,11 +441,11 @@
       }
     });
 
-    function runViewer(splatBufferData, isPly, alphaRemovalThreshold, cameraUpArray, cameraPositionArray, cameraLookAtArray) {
+    function runViewer(splatBufferData, isPly, alphaRemovalThreshold, cameraUpArray, cameraPositionArray, cameraLookAtArray, editMode) {
       const viewerOptions = {
         'cameraUp': cameraUpArray,
         'initialCameraPosition': cameraPositionArray,
-        'initialCameraLookAt': cameraLookAtArray
+        'initialCameraLookAt': cameraLookAtArray,
       };
       const sceneOptions = {
         'halfPrecisionCovariancesOnGPU': true,
@@ -461,7 +462,12 @@
       document.getElementById("demo-content").style.display = 'none';
       document.body.style.backgroundColor = "#000000";
       history.pushState("ViewSplat", null);
-      const viewer = new GaussianSplats3D.Viewer(viewerOptions);
+      let viewer;
+      if (editMode) {
+        viewer = new GaussianSplats3D.Editor(viewerOptions);
+      } else {
+        viewer = new GaussianSplats3D.Viewer(viewerOptions);
+      }
       viewer.loadSplatBuffer(splatBuffer, sceneOptions)
       .then(() => {
           viewer.start();
@@ -574,6 +580,8 @@
                 <br>
                 <span class="button" onclick="window.viewSplat()">View</span>
                 &nbsp;&nbsp;
+                <span class="button" onclick="window.viewSplat({editMode: true})">Edit</span>
+                &nbsp;&nbsp;
                 <span class="button" onclick="reset()">Reset</span>
                 <br>
                 <br>

src/Editor.js

@@ -0,0 +1,35 @@
+import { Viewer } from './Viewer.js';
+
+export class Editor extends Viewer {
+  constructor(params = {}) {
+    super(params);
+
+    this.editPanel = null;
+    this.editPanelCells = {};
+
+    this.initializedEditor = false;
+    this.initEditor();
+  }
+
+  initEditor() {
+    if (this.initializedEditor) return;
+
+    if (this.useBuiltInControls) {
+      this.rootElement.addEventListener('pointerup', this.onMouseUpEdit.bind(this), false);
+    }
+
+    this.initializedEditor = true;
+  }
+
+  onMouseUpEdit = function() {
+    return function(mouse) {
+      console.log('Editor.onMouseUpEdit', mouse);
+    };
+  };
+
+  // onMouseUp = function() {
+  //   return function(mouse) {
+  //     console.log('Editor.onMouseUp', mouse);
+  //   };
+  // }();
+}

src/Viewer.js

@@ -1,14 +1,14 @@
 import * as THREE from 'three';
+import { Constants } from './Constants.js';
+import { LoadingSpinner } from './LoadingSpinner.js';
 import { OrbitControls } from './OrbitControls.js';
 import { PlyLoader } from './PlyLoader.js';
-import { SplatLoader } from './SplatLoader.js';
-import { LoadingSpinner } from './LoadingSpinner.js';
-import { SceneHelper } from './SceneHelper.js';
 import { Raycaster } from './raycaster/Raycaster.js';
+import { SceneHelper } from './SceneHelper.js';
+import { SplatLoader } from './SplatLoader.js';
 import { SplatMesh } from './SplatMesh.js';
-import { createSortWorker } from './worker/SortWorker.js';
-import { Constants } from './Constants.js';
 import { getCurrentTime } from './Util.js';
+import { createSortWorker } from './worker/SortWorker.js';
 
 const THREE_CAMERA_FOV = 50;
 const MINIMUM_DISTANCE_TO_NEW_FOCAL_POINT = .75;
@@ -76,6 +76,12 @@ export class Viewer {
         this.mouseDownPosition = new THREE.Vector2();
         this.mouseDownTime = null;
 
+        this.loadingSpinner = new LoadingSpinner();
+        this.loadingSpinner.hide();
+
+        this.frameloop = 'demand'; // 'demand' | 'always'
+        this.viewerNeedsUpdate = true;
+
         this.initialized = false;
         this.init();
     }
@@ -125,11 +131,12 @@ export class Viewer {
             this.controls.maxPolarAngle = Math.PI * .75;
             this.controls.minPolarAngle = 0.1;
             this.controls.enableDamping = true;
-            this.controls.dampingFactor = 0.05;
+            this.controls.dampingFactor = 0.25;
             this.controls.target.copy(this.initialCameraLookAt);
             this.rootElement.addEventListener('pointermove', this.onMouseMove.bind(this), false);
             this.rootElement.addEventListener('pointerdown', this.onMouseDown.bind(this), false);
             this.rootElement.addEventListener('pointerup', this.onMouseUp.bind(this), false);
+            this.controls.addEventListener('change', this.onControlsChange.bind(this), false);
             window.addEventListener('keydown', this.onKeyDown.bind(this), false);
         }
 
@@ -170,6 +177,7 @@ export class Viewer {
                 break;
                 case 'KeyC':
                     this.showMeshCursor = !this.showMeshCursor;
+                    this.invalidate();
                 break;
                 case 'KeyP':
                     this.showControlPlane = !this.showControlPlane;
@@ -189,6 +197,9 @@ export class Viewer {
 
     onMouseMove(mouse) {
         this.mousePosition.set(mouse.offsetX, mouse.offsetY);
+        if (this.showMeshCursor) {
+            this.invalidate();
+        }
     }
 
     onMouseDown() {
@@ -228,6 +239,14 @@ export class Viewer {
 
     }();
 
+    onControlsChange() {
+        this.invalidate();
+    }
+
+    invalidate() {
+        this.viewerNeedsUpdate = true;
+    }
+
     getRenderDimensions(outDimensions) {
         if (this.rootElement) {
             outDimensions.x = this.rootElement.offsetWidth;
@@ -558,6 +577,7 @@ export class Viewer {
                     this.updateSplatMeshUniforms();
                 }
                 lastRendererSize.copy(currentRendererSize);
+                this.invalidate();
             }
         };
 
@@ -568,7 +588,11 @@ export class Viewer {
             requestAnimationFrame(this.selfDrivenUpdateFunc);
         }
         this.update();
-        this.render();
+
+        if (this.frameloop === 'always' || this.viewerNeedsUpdate) {
+            this.render();
+            this.viewerNeedsUpdate = false;
+        }
     }
 
     update() {

src/index.js

@@ -1,13 +1,15 @@
-import { PlyParser } from './PlyParser.js';
+import { Editor } from './Editor.js';
 import { PlyLoader } from './PlyLoader.js';
-import { SplatLoader } from './SplatLoader.js';
+import { PlyParser } from './PlyParser.js';
 import { SplatBuffer } from './SplatBuffer.js';
+import { SplatLoader } from './SplatLoader.js';
 import { Viewer } from './Viewer.js';
 
 export {
     PlyParser,
     PlyLoader,
     SplatLoader,
     SplatBuffer,
-    Viewer
+    Viewer,
+    Editor,
 };