Editor view options

src/editor.ts

@@ -116,6 +116,57 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         scene.forceRender = true;
     });
 
+    events.on('splatDisplayToggle', (splatDisplayToggle: boolean) => {
+        scene.graphicsDevice.scope.resolve('splatDisplayToggle').setValue(!splatDisplayToggle);
+        scene.forceRender = true;
+    });
+
+    events.on('boundingRingToggle', (boundingRingToggle: boolean) => {
+        scene.graphicsDevice.scope.resolve('boundingRingToggle').setValue(boundingRingToggle);
+        scene.graphicsDevice.scope.resolve('boundingRingSize').setValue(events.invoke('boundingRingSize'));
+        scene.forceRender = true;
+    });
+
+    events.on('boundingRingSize', (value: number) => {
+        scene.graphicsDevice.scope.resolve('boundingRingSize').setValue(value);
+        scene.graphicsDevice.scope.resolve('ringSize').setValue(events.invoke('camera.mode') === 'rings' ? value : 0.0);
+        scene.forceRender = true;
+    });
+
+    events.on('selectedSplatRingsToggle', (selectedSplatRingToggle: boolean) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatRingsToggle').setValue(selectedSplatRingToggle);
+        scene.graphicsDevice.scope.resolve('selectedSplatRingsSize').setValue(events.invoke('selectedSplatRingsSize'));
+        scene.forceRender = true;
+    });
+
+    events.on('selectedSplatRingsSize', (value: number) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatRingsSize').setValue(value);
+        scene.forceRender = true;
+    });
+
+    const centerPointColors = [ 
+        [0, 0, 0, 0.25],
+        [0, 0, 1.0, 0.5],
+        [1.0, 1.0, 0.0, 0.5]
+    ];
+
+    events.on('centerPointColor', (colorValue: number[]) => {
+        centerPointColors[1] = colorValue;
+        scene.graphicsDevice.scope.resolve('centerColors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('selectedCenterPointColor', (colorValue: number[]) => {
+        centerPointColors[2] = colorValue;
+        scene.graphicsDevice.scope.resolve('centerColors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('selectedSplatColor', (colorValue: number[]) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatColor').setValue(colorValue);
+        scene.forceRender = true;
+    });
+
     events.on('show.gridOn', () => {
         scene.grid.visible = true;
     });

src/main.ts

@@ -78,6 +78,8 @@ const initShortcuts = (events: Events) => {
     shortcuts.register(['U', 'u'], { event: 'select.unhide' });
     shortcuts.register(['['], { event: 'tool.brushSelection.smaller' });
     shortcuts.register([']'], { event: 'tool.brushSelection.bigger' });
+    shortcuts.register(['9'], { event: 'tool.brushSelection.smaller' });
+    shortcuts.register(['0'], { event: 'tool.brushSelection.bigger' });
     shortcuts.register(['Z', 'z'], { event: 'edit.undo', ctrl: true });
     shortcuts.register(['Z', 'z'], { event: 'edit.redo', ctrl: true, shift: true });
     shortcuts.register(['M', 'm'], { event: 'camera.toggleMode' });
@@ -97,6 +99,63 @@ const initShortcuts = (events: Events) => {
         }
     });
 
+    let centerPointColorSave = [0.0,0.0,1.0,0.5];
+    events.on('centerPointColor', (colors: number[]) => {
+        if (colors[3] !== 0) {
+            centerPointColorSave = colors;
+        }
+    });
+
+    shortcuts.register(['J', 'j'], {
+        func: () => {
+            events.fire('centerPointColor', events.invoke('centerPointColor')[3] === 0 ? centerPointColorSave : [0,0,0,0]);
+        }
+    });
+
+    let selectedCenterPointColorSave = [1.0,1.0,0,0.5];
+    events.on('selectedCenterPointColor', (colors: number[]) => {
+        if (colors[3] !== 0) {
+            selectedCenterPointColorSave = colors;
+        }
+    });
+
+    shortcuts.register(['L', 'l'], {
+        func: () => {
+            events.fire('selectedCenterPointColor', events.invoke('selectedCenterPointColor')[3] === 0 ? selectedCenterPointColorSave : [0,0,0,0]);
+        }
+    });
+
+    let selectedSplatColorSave = [1.0,1.0,0,0.5];
+    events.on('selectedSplatColor', (colors: number[]) => {
+        if (colors[3] !== 0) {
+            selectedSplatColorSave = colors;
+        }
+    });
+
+    shortcuts.register(['K', 'k'], {
+        func: () => {
+            events.fire('selectedSplatColor', events.invoke('selectedSplatColor')[3] === 0 ? selectedSplatColorSave : [0,0,0,0]);
+        }
+    });
+
+    shortcuts.register(['Q', 'q'], {
+        func: () => {
+            events.fire('selectedSplatRingsToggle', !events.invoke('selectedSplatRingsToggle'));
+        }
+    });
+
+    shortcuts.register(['O', 'o'], {
+        func: () => {
+            events.fire('boundingRingToggle', !events.invoke('boundingRingToggle'));
+        }
+    });
+
+    shortcuts.register(['N', 'n'], {
+        func: () => {
+            events.fire('splatDisplayToggle', !events.invoke('splatDisplayToggle'));
+        }
+    });
+
     return shortcuts;
 };
 

src/scene.ts

@@ -219,6 +219,9 @@ class Scene {
             this.add(model);
             this.camera.focus();
             this.events.fire('loaded', filename);
+            this.events.fire('centerPointColor', this.events.invoke('centerPointColor'));
+            this.events.fire('selectedCenterPointColor', this.events.invoke('selectedCenterPointColor'));
+            this.events.fire('selectedSplatColor', this.events.invoke('selectedSplatColor'));
         } catch (err) {
             this.events.fire('error', err);
         }

src/splat-debug.ts

@@ -21,23 +21,18 @@ uniform mat4 matrix_projection;
 uniform mat4 matrix_viewProjection;
 
 uniform float splatSize;
+uniform vec4 centerColors[3];
 
 varying vec4 color;
 
-vec4 colors[3] = vec4[3](
-    vec4(0, 0, 0, 0.25),
-    vec4(0, 0, 1.0, 0.5),
-    vec4(1.0, 1.0, 0.0, 0.5)
-);
-
 void main(void) {
     int state = int(vertex_position.w);
     if (state == -1) {
         gl_Position = vec4(0.0, 0.0, 2.0, 1.0);
     } else {
         gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position.xyz, 1.0);
         gl_PointSize = splatSize;
-        color = colors[state];
+        color = vec4(centerColors[state]);
     }
 }
 `;

src/splat.ts

@@ -19,6 +19,7 @@ import { State } from './edit-ops';
 const vertexShader = /*glsl*/`
 
 uniform sampler2D splatState;
+uniform bool splatDisplayToggle;
 
 flat varying highp uint vertexState;
 
@@ -28,6 +29,9 @@ flat varying highp uint vertexId;
 
 void main(void)
 {
+    if (splatDisplayToggle){
+        return;
+    }
     // evaluate center of the splat in object space
     vec3 centerLocal = evalCenter();
 
@@ -55,9 +59,18 @@ flat varying highp uint vertexState;
 uniform float pickerAlpha;
 uniform float ringSize;
 float PI = 3.14159;
+uniform vec4 selectedSplatColor;
+uniform bool selectedSplatRingsToggle;
+uniform float selectedSplatRingsSize;
+uniform bool boundingRingToggle;
+uniform float boundingRingSize;
+uniform bool splatDisplayToggle;
 
 void main(void)
 {
+    if (splatDisplayToggle){
+        discard;
+    }
     if ((vertexState & uint(4)) == uint(4)) {
         // deleted
         discard;
@@ -91,16 +104,31 @@ void main(void)
         } else {
             if ((vertexState & uint(1)) == uint(1)) {
                 // selected
-                c = vec3(1.0, 1.0, 0.0);
+                c = mix(color.xyz, selectedSplatColor.xyz, selectedSplatColor.w);
+                alpha = B;
+                if (selectedSplatRingsToggle){
+                    if (A < 4.0 - selectedSplatRingsSize / 3.0) {
+                        alpha = max(0.05, B);
+                    } else {
+                        alpha = 0.6;
+                        c = selectedSplatColor.xyz;
+                    }
+                }
             } else {
                 // normal
                 c = color.xyz;
+                alpha = B;
+                if (boundingRingToggle){
+                    if (A < 4.0 - boundingRingSize / 3.0) {
+                        alpha = B;
+                    } else {
+                        alpha = 0.6;
+                    }
+                }
             }
 
-            alpha = B;
-
             if (ringSize > 0.0) {
-                if (A < 4.0 - ringSize * 4.0) {
+                if (A < 4.0 - ringSize / 3.0) {
                     alpha = max(0.05, B);
                 } else {
                     alpha = 0.6;
@@ -258,10 +286,11 @@ class Splat extends Element {
         const selected = events.invoke('selection') === this;
         const cameraMode = events.invoke('camera.mode');
         const splatSize = events.invoke('splatSize');
+        const boundingRingSize = events.invoke('boundingRingSize');
 
         // configure rings rendering
         const material = this.root.gsplat.instance.material;
-        material.setParameter('ringSize', (selected && cameraMode === 'rings' && splatSize > 0) ? 0.04 : 0);
+        material.setParameter('ringSize', (selected && cameraMode === 'rings') ? boundingRingSize : 0);
 
         // render splat centers
         if (selected && cameraMode === 'centers' && splatSize > 0) {

src/style.scss

@@ -47,7 +47,7 @@ body {
 }
 
 #control-panel {
-    width: 340px;
+    width: 400px;
     height: 100%;
     border-right: 1px solid #20292b;
     display: flex;
@@ -177,7 +177,7 @@ body {
 }
 
 .control-label {
-    width: 100px;
+    width: 140px;
     flex-shrink: 0;
     flex-grow: 0;
     line-height: 24px;
@@ -265,6 +265,12 @@ body {
     }
 }
 
+.pcui-input-element > input{
+    width: 100%;
+    padding: 0 4px;
+    font-size: 12px;
+}
+
 .pcui-vector-input {
     margin-left: 6px;
     margin-right: 6px;