Add option to show splat bounding box

package.json

@@ -1,6 +1,6 @@
 {
     "name": "supersplat",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "author": "PlayCanvas<support@playcanvas.com>",
     "homepage": "https://playcanvas.com/supersplat/editor",
     "description": "3D Gaussian Splat Editor",

src/camera.ts

@@ -476,7 +476,7 @@ class Camera extends Element {
 
         const device = this.scene.graphicsDevice as WebglGraphicsDevice;
         const events = this.scene.events;
-        const alpha = events.invoke('camera.debug') && events.invoke('camera.mode') === 'rings' ? 0.0 : 0.2;
+        const alpha = events.invoke('camera.mode') === 'rings' ? 0.0 : 0.2;
 
         // hide non-selected elements
         const splats = this.scene.getElementsByType(ElementType.splat);

src/editor.ts

@@ -88,6 +88,12 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         scene.forceRender = true;
     });
 
+    events.on('camera.bound', () => {
+        scene.forceRender = true;
+    });
+
+    // grid.visible
+
     const setGridVisible = (visible: boolean) => {
         if (visible !== scene.grid.visible) {
             scene.grid.visible = visible;
@@ -99,12 +105,35 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         return scene.grid.visible;
     });
 
+    events.on('grid.setVisible', (visible: boolean) => {
+        setGridVisible(visible);
+    });
+
     events.on('grid.toggleVisible', () => {
         setGridVisible(!scene.grid.visible);
     });
 
-    events.on('grid.setVisible', (visible: boolean) => {
-        setGridVisible(visible);
+    // camera.bound
+
+    let bound = true;
+
+    const setBoundVisible = (visible: boolean) => {
+        if (visible !== bound) {
+            bound = visible;
+            events.fire('camera.bound', bound);
+        }
+    };
+
+    events.function('camera.bound', () => {
+        return bound;
+    });
+
+    events.on('camera.setBound', (value: boolean) => {
+        setBoundVisible(value);
+    });
+
+    events.on('camera.toggleBound', () => {
+        setBoundVisible(!events.invoke('camera.bound'));
     });
 
     events.on('camera.focus', () => {

src/splat.ts

@@ -331,7 +331,7 @@ class Splat extends Element {
         const material = this.entity.gsplat.instance.material;
         material.setParameter('ringSize', (selected && cameraMode === 'rings' && splatSize > 0) ? 0.04 : 0);
 
-        if (this.visible && selected) {
+        if (this.visible && selected && events.invoke('camera.bound')) {
             // render splat centers
             if (cameraMode === 'centers' && splatSize > 0) {
                 this.splatDebug.splatSize = splatSize;

src/ui/view-panel.ts

@@ -78,9 +78,30 @@ class ViewPanel extends Container {
         showGridRow.append(showGridLabel);
         showGridRow.append(showGridToggle);
 
+        // show bound
+
+        const showBoundRow = new Container({
+            class: 'view-panel-row'
+        });
+
+        const showBoundLabel = new Label({
+            text: 'Show Bound',
+            class: 'view-panel-row-label'
+        });
+
+        const showBoundToggle = new BooleanInput({
+            type: 'toggle',
+            class: 'view-panel-row-toggle',
+            value: true
+        });
+
+        showBoundRow.append(showBoundLabel);
+        showBoundRow.append(showBoundToggle);
+
         this.append(header);
         this.append(splatSizeRow);
         this.append(showGridRow);
+        this.append(showBoundRow);
 
         // handle panel visibility
 
@@ -124,6 +145,16 @@ class ViewPanel extends Container {
         showGridToggle.on('change', () => {
             events.fire('grid.setVisible', showGridToggle.value);
         });
+
+        // show bound
+
+        events.on('camera.bound', (visible: boolean) => {
+            showBoundToggle.value = visible;
+        });
+
+        showBoundToggle.on('change', () => {
+            events.fire('camera.setBound', showBoundToggle.value);
+        });
     }
 }