Update deps, camera control, simple 2d gs support

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supersplat",
-    "version": "0.20.0",
+    "version": "0.21.0",
     "author": "PlayCanvas<[email protected]>",
     "homepage": "https://playcanvas.com/supersplat/editor",
     "description": "3D Gaussian Splat Editor",
@@ -61,16 +61,16 @@
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
         "@types/wicg-file-system-access": "^2023.10.5",
-        "@typescript-eslint/eslint-plugin": "^7.14.1",
-        "@typescript-eslint/parser": "^7.14.1",
+        "@typescript-eslint/eslint-plugin": "^7.15.0",
+        "@typescript-eslint/parser": "^7.15.0",
         "concurrently": "^8.2.2",
         "cors": "^2.8.5",
         "cross-env": "^7.0.3",
         "eslint": "^8.56.0",
         "jest": "^29.7.0",
-        "playcanvas": "^1.72.0",
+        "playcanvas": "^1.72.1",
         "rollup": "^4.18.0",
-        "rollup-plugin-sass": "^1.13.0",
+        "rollup-plugin-sass": "^1.13.1",
         "rollup-plugin-visualizer": "^5.12.0",
         "serve": "^14.2.3",
         "tslib": "^2.6.3"

src/asset-loader.ts

@@ -53,6 +53,18 @@ class AssetLoader {
                 );
                 asset.on('load', () => {
                     stopSpinner();
+
+                    // support loading 2d splats by adding scale_2 property with almost 0 scale
+                    const splatData = asset.resource.splatData;
+                    if (splatData.getProp('scale_0') && splatData.getProp('scale_1') && !splatData.getProp('scale_2')) {
+                        const scale2 = new Float32Array(splatData.numSplats);
+                        const value = Math.log(1e-6);
+                        for (let i = 0; i < splatData.numSplats; i++) {
+                            scale2[i] = value;
+                        }
+                        splatData.addProp('scale_2', scale2);
+                    }
+
                     resolve(new Splat(asset));
                 });
                 asset.on('error', (err: string) => {

src/camera.ts

@@ -317,6 +317,9 @@ class Camera extends Element {
             }
         }
 
+        // controller update
+        this.controller.update(deltaTime);
+
         // update underlying values
         this.focalPointTween.update(deltaTime);
         this.azimElevTween.update(deltaTime);
@@ -445,6 +448,7 @@ class Camera extends Element {
         }
 
         if (closestSplat) {
+            this.setDistance(cameraPos.sub(closestP).length() / this.focusDistance);
             this.setFocalPoint(closestP);
             scene.events.fire('selection', closestSplat);
         }

src/controllers.ts

@@ -10,6 +10,7 @@ const dist = (x0: number, y0: number, x1: number, y1: number) => Math.sqrt((x1 -
 
 class PointerController {
     destroy: () => void;
+    update: (deltaTime: number) => void;
 
     constructor(camera: Camera, target: HTMLElement) {
 
@@ -30,7 +31,7 @@ class PointerController {
 
             worldDiff.sub2(toWorldPoint, fromWorldPoint);
             worldDiff.add(camera.focalPoint);
-    
+
             camera.setFocalPoint(worldDiff);
         };
 
@@ -142,12 +143,52 @@ class PointerController {
             event.preventDefault();
         };
 
+        // key state
+        const keys: any = {
+            ArrowUp: 0,
+            ArrowDown: 0,
+            ArrowLeft: 0,
+            ArrowRight: 0
+        };
+
+        const keydown = (event: KeyboardEvent) => {
+            if (keys.hasOwnProperty(event.key)) {
+                keys[event.key] = event.shiftKey ? 10 : (event.ctrlKey || event.metaKey || event.altKey ? 0.1 : 1);
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const keyup = (event: KeyboardEvent) => {
+            if (keys.hasOwnProperty(event.key)) {
+                keys[event.key] = 0;
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        this.update = (deltaTime: number) => {
+            const x = keys.ArrowRight - keys.ArrowLeft;
+            const z = keys.ArrowDown - keys.ArrowUp;
+
+            if (x || z) {
+                const factor = deltaTime * camera.distance * 20;
+                const worldTransform = camera.entity.getWorldTransform();
+                const xAxis = worldTransform.getX().mulScalar(x * factor);
+                const zAxis = worldTransform.getZ().mulScalar(z * factor);
+                const p = camera.focalPoint.add(xAxis).add(zAxis);
+                camera.setFocalPoint(p);
+            }
+        };
+
         target.addEventListener('pointerdown', pointerdown);
         target.addEventListener('pointerup', pointerup);
         target.addEventListener('pointermove', pointermove);
         target.addEventListener('wheel', wheel);
         target.addEventListener('dblclick', dblclick);
         target.addEventListener('contextmenu', contextmenu);
+        document.addEventListener('keydown', keydown);
+        document.addEventListener('keyup', keyup);
 
         this.destroy = () => {
             target.removeEventListener('pointerdown', pointerdown);
@@ -156,6 +197,8 @@ class PointerController {
             target.removeEventListener('wheel', wheel);
             target.removeEventListener('dblclick', dblclick);
             target.removeEventListener('contextmenu', contextmenu);
+            document.removeEventListener('keydown', keydown);
+            document.removeEventListener('keyup', keyup);
         };
     }
 }