Editor view options

src/editor.ts

@@ -229,15 +229,80 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
     });
 
     events.on('camera.mode', (mode: string) => {
-        scene.graphicsDevice.scope.resolve('ringSize').setValue(mode === 'rings' && events.invoke('splatSize') ? 0.04 : 0);
+        scene.graphicsDevice.scope.resolve('ringSize').setValue(mode === 'rings' ? events.invoke('boundingRingSize') : 0.0);
         scene.forceRender = true;
     });
 
     events.on('splatSize', (value: number) => {
         splatDefs.forEach((splatDef) => {
             splatDef.debug.splatSize = value;
         });
-        scene.graphicsDevice.scope.resolve('ringSize').setValue(events.invoke('camera.mode') === 'rings' && value ? 0.04 : 0);
+        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.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.forceRender = true;
+    });
+
+    events.on('selectedSplatRingsSize', (value: number) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatRingsSize').setValue(value);
+        scene.forceRender = true;
+    });
+
+    let 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[0],colorValue[1],colorValue[2],centerPointColors[1][3]];
+        scene.graphicsDevice.scope.resolve('cccolors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('centerPointAlpha', (value: number) => {
+        centerPointColors[1] = [centerPointColors[1][0],centerPointColors[1][1],centerPointColors[1][2],value];
+        scene.graphicsDevice.scope.resolve('cccolors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('selectedCenterPointColor', (colorValue: number[]) => {
+        centerPointColors[2] = [colorValue[0],colorValue[1],colorValue[2],centerPointColors[2][3]];
+        scene.graphicsDevice.scope.resolve('cccolors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('selectedCenterPointAlpha', (value: number) => {
+        centerPointColors[2] = [centerPointColors[2][0],centerPointColors[2][1],centerPointColors[2][2],value];
+        scene.graphicsDevice.scope.resolve('cccolors[0]').setValue(centerPointColors.flat());
+        scene.forceRender = true;
+    });
+
+    events.on('selectedSplatColor', (colorValue: number[]) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatColor').setValue(colorValue);
+        scene.forceRender = true;
+    });
+
+    events.on('selectedSplatLerpStrenght', (lerpStrenght: number) => {
+        scene.graphicsDevice.scope.resolve('selectedSplatLerpStrenght').setValue(lerpStrenght);
         scene.forceRender = true;
     });
 

src/main.ts

@@ -102,24 +102,83 @@ 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' });
-
+    
     // keep tabs on splat size changes
     let splatSizeSave = 2;
     events.on('splatSize', (size: number) => {
         if (size !== 0) {
             splatSizeSave = size;
         }
     });
-
+    
     // space toggles between 0 and size
     shortcuts.register([' '], {
         func: () => {
             events.fire('splatSize', events.invoke('splatSize') === 0 ? splatSizeSave : 0);
         }
     });
+
+    let centerPointAlphaSave = 0.5;
+    events.on('centerPointAlpha', (value: number) => {
+        if (value !== 0) {
+            centerPointAlphaSave = value;
+        }
+    });
+
+    shortcuts.register(['J', 'j'], {
+        func: () => {
+            events.fire('centerPointAlpha', events.invoke('centerPointAlpha') === 0 ? centerPointAlphaSave : 0);
+        }
+    });
+
+    let selectedCenterPointAlphaSave = 0.5;
+    events.on('selectedCenterPointAlpha', (value: number) => {
+        if (value !== 0) {
+            selectedCenterPointAlphaSave = value;
+        }
+    });
+
+    shortcuts.register(['L', 'l'], {
+        func: () => {
+            events.fire('selectedCenterPointAlpha', events.invoke('selectedCenterPointAlpha') === 0 ? selectedCenterPointAlphaSave : 0);
+        }
+    });
+
+    let selectedSplatLerpStrenghtSave = 0.5;
+    events.on('selectedSplatLerpStrenght', (value: number) => {
+        if (value !== 0) {
+            selectedSplatLerpStrenghtSave = value;
+        }
+    });
+
+    shortcuts.register(['K', 'k'], {
+        func: () => {
+            events.fire('selectedSplatLerpStrenght', events.invoke('selectedSplatLerpStrenght') === 0 ? selectedSplatLerpStrenghtSave : 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

@@ -225,6 +225,12 @@ class Scene {
             this.updateBound();
             this.camera.focus();
             this.events.fire('loaded', filename);
+            this.events.fire('centerPointColor', this.events.invoke('centerPointColor'));
+            this.events.fire('centerPointAlpha', this.events.invoke('centerPointAlpha'));
+            this.events.fire('selectedCenterPointColor', this.events.invoke('selectedCenterPointColor'));
+            this.events.fire('selectedCenterPointAlpha', this.events.invoke('selectedCenterPointAlpha'));
+            this.events.fire('selectedSplatColor', this.events.invoke('selectedSplatColor'));
+            this.events.fire('selectedSplatLerpStrenght', this.events.invoke('selectedSplatLerpStrenght'));
         } 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 cccolors[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(cccolors[state]);
     }
 }
 `;
@@ -54,6 +49,7 @@ class SplatDebug {
     splatData: GSplatData;
     meshInstance: MeshInstance;
     size = 2;
+    // color = [0.0, 0.0, 1.0]
 
     constructor(scene: Scene, splat: Splat, splatData: GSplatData) {
         const device = scene.graphicsDevice;
@@ -88,6 +84,7 @@ class SplatDebug {
         this.meshInstance = new MeshInstance(mesh, material, splat.root);
 
         this.splatSize = this.size;
+        // this.centerPointColor = this.color;
     }
 
     update() {

src/splat.ts

@@ -17,6 +17,7 @@ import { State } from './edit-ops';
 const vertexShader = /*glsl*/`
 
 uniform sampler2D splatState;
+uniform bool splatDisplayToggle;
 
 flat varying highp uint vertexState;
 
@@ -26,6 +27,9 @@ flat varying highp uint vertexId;
 
 void main(void)
 {
+    if (splatDisplayToggle){
+        return;
+    }
     // evaluate center of the splat in object space
     vec3 centerLocal = evalCenter();
 
@@ -53,9 +57,20 @@ flat varying highp uint vertexState;
 uniform float pickerAlpha;
 uniform float ringSize;
 float PI = 3.14159;
+uniform vec3 centerPointColor;
+uniform vec3 selectedSplatColor;
+uniform float selectedSplatLerpStrenght;
+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;
@@ -89,16 +104,33 @@ 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, selectedSplatLerpStrenght);
+                //c = selectedSplatColor.xyz;
+                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 = max(0.05, B);
+                        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;

src/style.scss

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