From dd6e9cc635f4507127d2a0a1993481c84f099185 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Mon, 3 Jun 2024 12:04:27 +0200 Subject: [PATCH 01/18] add display options for selected splats and points --- src/editor.ts | 51 +++++++++ src/splat-debug.ts | 29 +++-- src/splat.ts | 18 +++- src/style.scss | 10 +- src/ui/control-panel.ts | 234 +++++++++++++++++++++++++++++++++++++++- 5 files changed, 330 insertions(+), 12 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 863ad94a..bf2d89c4 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -241,6 +241,57 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S 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]]; + console.log(centerPointColors.flat()); + 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]; + console.log(centerPointColors.flat()); + 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]]; + console.log(centerPointColors.flat()); + 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]; + console.log(centerPointColors.flat()); + 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; + }); + + events.on('selectedSplatRingsToggle', (selectedSplatRingToggle: boolean) => { + console.log(selectedSplatRingToggle); + scene.graphicsDevice.scope.resolve('selectedSplatRingsToggle').setValue(selectedSplatRingToggle); + scene.forceRender = true; + }); + + events.on('show.gridOn', () => { scene.grid.visible = true; }); diff --git a/src/splat-debug.ts b/src/splat-debug.ts index 0ad9b168..10cd4813 100644 --- a/src/splat-debug.ts +++ b/src/splat-debug.ts @@ -21,14 +21,19 @@ uniform mat4 matrix_projection; uniform mat4 matrix_viewProjection; uniform float splatSize; +uniform vec3 centerPointColor; +uniform vec3 selectedCenterPointColor; +uniform float centerPointAlpha; 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) -); +// 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) +// ); + +uniform vec4 cccolors[3]; void main(void) { int state = int(vertex_position.w); @@ -37,7 +42,7 @@ void main(void) { } 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 +59,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 +94,7 @@ class SplatDebug { this.meshInstance = new MeshInstance(mesh, material, splat.root); this.splatSize = this.size; + // this.centerPointColor = this.color; } update() { @@ -129,6 +136,16 @@ class SplatDebug { get splatSize() { return this.size; } + + // set centerPointColor(colorValue: number[]) { + // this.color = colorValue; + // this.meshInstance.material.setParameter('centerPointColor', colorValue); + // } + + // get centerPointColor() { + // return this.color; + // } + } export { SplatDebug }; diff --git a/src/splat.ts b/src/splat.ts index 1000564e..cd91cc79 100644 --- a/src/splat.ts +++ b/src/splat.ts @@ -53,6 +53,10 @@ 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; void main(void) { @@ -89,14 +93,22 @@ 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 - 0.04 * 4.0) { + alpha = max(0.05, B); + } else { + alpha = 0.6; + } + } } else { // normal c = color.xyz; + alpha = B; } - alpha = B; - if (ringSize > 0.0) { if (A < 4.0 - ringSize * 4.0) { alpha = max(0.05, B); diff --git a/src/style.scss b/src/style.scss index 7c2b18d4..2f5c9916 100644 --- a/src/style.scss +++ b/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; diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index cacbadd4..8d0f183b 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -1,6 +1,7 @@ -import { BooleanInput, Button, Container, Label, NumericInput, Panel, RadioButton, SelectInput, SliderInput, VectorInput } from 'pcui'; +import { BooleanInput, Button, ColorPicker, Container, Label, NumericInput, Panel, RadioButton, SelectInput, SliderInput, VectorInput } from 'pcui'; import { Events } from '../events'; import { version as appVersion } from '../../package.json'; +import { Color } from 'playcanvas'; class ControlPanel extends Panel { constructor(events: Events, remoteStorageMode: boolean, args = { }) { @@ -66,6 +67,138 @@ class ControlPanel extends Panel { splatSize.append(splatSizeLabel); splatSize.append(splatSizeSlider); + // highlighting color of selected splats (splat and ring) + const selectedSplatColor = new Container({ + class: 'control-parent' + }); + + const selectedSplatColorLabel = new Label({ + class: 'control-label', + text: 'Highlight Splat color' + }); + + const selectedSplatColorPicker = new ColorPicker({ + class: 'control-element-expand', + value: [1.0,1.0,0.0] + }); + + selectedSplatColor.append(selectedSplatColorLabel); + selectedSplatColor.append(selectedSplatColorPicker); + + // color of center points + const centerPointColor = new Container({ + class: 'control-parent' + }); + + const centerPointColorLabel = new Label({ + class: 'control-label', + text: 'Center Point Color' + }); + + const centerPointColorPicker = new ColorPicker({ + class: 'control-element-expand', + value: [0.0,0.0,1.0] + }); + + centerPointColor.append(centerPointColorLabel); + centerPointColor.append(centerPointColorPicker); + + // alpha of center points + const centerPointAlpha = new Container({ + class: 'control-parent' + }); + + const centerPointAlphaLabel = new Label({ + class: 'control-label', + text: 'Center Point Alpha' + }); + + const centerPointAlphaSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + centerPointAlpha.append(centerPointAlphaLabel); + centerPointAlpha.append(centerPointAlphaSlider); + + // highlight color of center points + const selectedCenterPointColor = new Container({ + class: 'control-parent' + }); + + const selectedCenterPointColorLabel = new Label({ + class: 'control-label', + text: 'Highlight Point Color' + }); + + const selectedCenterPointColorPicker = new ColorPicker({ + class: 'control-element-expand', + value: [1.0,1.0,0.0] + }); + + selectedCenterPointColor.append(selectedCenterPointColorLabel); + selectedCenterPointColor.append(selectedCenterPointColorPicker); + + // alpha of highlighted center points + const selectedCenterPointAlpha = new Container({ + class: 'control-parent' + }); + + const selectedCenterPointAlphaLabel = new Label({ + class: 'control-label', + text: 'Highlight Point Alpha' + }); + + const selectedCenterPointAlphaSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + selectedCenterPointAlpha.append(selectedCenterPointAlphaLabel); + selectedCenterPointAlpha.append(selectedCenterPointAlphaSlider); + + const selectedSplatLerpStrenght = new Container({ + class: 'control-parent' + }); + + const selectedSplatLerpStrenghtLabel = new Label({ + class: 'control-label', + text: 'Highlight color interpolation' + }); + + const selectedSplatLerpStrenghtSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 0.5, + value: 0.5 + }); + + selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtLabel); + selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtSlider); + + const selectedSplatRingsToggle = new Container({ + class: 'control-parent' + }); + + const selectedSplatRingsToggleLabel = new Label({ + class: 'control-label', + text: 'Highlight splat rings' + }); + + const selectedSplatRingsToggleCb = new BooleanInput({ + class: 'control-element', + }); + + selectedSplatRingsToggle.append(selectedSplatRingsToggleLabel); + selectedSplatRingsToggle.append(selectedSplatRingsToggleCb); + // show grid const showGrid = new Container({ class: 'control-parent' @@ -91,6 +224,13 @@ class ControlPanel extends Panel { cameraPanel.append(mode); cameraPanel.append(splatSize); + cameraPanel.append(centerPointColor); + cameraPanel.append(centerPointAlpha); + cameraPanel.append(selectedCenterPointColor); + cameraPanel.append(selectedCenterPointAlpha); + cameraPanel.append(selectedSplatColor); + cameraPanel.append(selectedSplatLerpStrenght); + cameraPanel.append(selectedSplatRingsToggle); cameraPanel.append(showGrid); cameraPanel.append(focusButton); @@ -552,6 +692,98 @@ class ControlPanel extends Panel { events.fire('splatSize', value); }); + + events.on('selectedSplatColor', (value: number[]) => { + selectedSplatColorPicker.value = value; + }); + + events.function('selectedSplatColor', () => { + return selectedSplatColorPicker.value; + }); + + selectedSplatColorPicker.on('change', (value: number[]) => { + events.fire('selectedSplatColor', value); + }); + + + events.on('selectedSplatLerpStrenght', (value: number) => { + selectedSplatLerpStrenghtSlider.value = value; + }); + + events.function('selectedSplatLerpStrenght', () => { + return selectedSplatLerpStrenghtSlider.value; + }); + + selectedSplatLerpStrenghtSlider.on('change', (value: number) => { + events.fire('selectedSplatLerpStrenght', value); + }); + + + events.on('selectedSplatRingsToggle', (value: boolean) => { + selectedSplatRingsToggleCb.value = value; + }); + + events.function('selectedSplatRingsToggle', () => { + return selectedSplatRingsToggleCb.value; + }); + + selectedSplatRingsToggleCb.on('change', (value: boolean) => { + events.fire('selectedSplatRingsToggle', value); + }); + + + events.on('centerPointColor', (value: number[]) => { + centerPointColorPicker.value = value; + }); + + events.function('centerPointColor', () => { + return centerPointColorPicker.value; + }); + + centerPointColorPicker.on('change', (value: number[]) => { + events.fire('centerPointColor', value); + }); + + + events.on('centerPointAlpha', (value: number) => { + centerPointAlphaSlider.value = value; + }); + + events.function('centerPointAlpha', () => { + return centerPointAlphaSlider.value; + }); + + centerPointAlphaSlider.on('change', (value: number) => { + events.fire('centerPointAlpha', value); + }); + + + events.on('selectedCenterPointColor', (value: number[]) => { + selectedCenterPointColorPicker.value = value; + }); + + events.function('selectedCenterPointColor', () => { + return selectedCenterPointColorPicker.value; + }); + + selectedCenterPointColorPicker.on('change', (value: number[]) => { + events.fire('selectedCenterPointColor', value); + }); + + + events.on('selectedCenterPointAlpha', (value: number) => { + selectedCenterPointAlphaSlider.value = value; + }); + + events.function('selectedCenterPointAlpha', () => { + return selectedCenterPointAlphaSlider.value; + }); + + selectedCenterPointAlphaSlider.on('change', (value: number) => { + events.fire('selectedCenterPointAlpha', value); + }); + + focusButton.on('click', () => { events.fire('camera.focus'); }); From 171bb35134b26486f0e400f7c252886b8c5f865e Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 4 Jun 2024 09:14:18 +0200 Subject: [PATCH 02/18] add shortcuts --- src/editor.ts | 5 ----- src/main.ts | 47 +++++++++++++++++++++++++++++++++++++++-- src/ui/control-panel.ts | 6 +++--- 3 files changed, 48 insertions(+), 10 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index bf2d89c4..41e0167a 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -249,28 +249,24 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S events.on('centerPointColor', (colorValue: number[]) => { centerPointColors[1] = [colorValue[0],colorValue[1],colorValue[2],centerPointColors[1][3]]; - console.log(centerPointColors.flat()); 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]; - console.log(centerPointColors.flat()); 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]]; - console.log(centerPointColors.flat()); 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]; - console.log(centerPointColors.flat()); scene.graphicsDevice.scope.resolve('cccolors[0]').setValue(centerPointColors.flat()); scene.forceRender = true; }); @@ -286,7 +282,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S }); events.on('selectedSplatRingsToggle', (selectedSplatRingToggle: boolean) => { - console.log(selectedSplatRingToggle); scene.graphicsDevice.scope.resolve('selectedSplatRingsToggle').setValue(selectedSplatRingToggle); scene.forceRender = true; }); diff --git a/src/main.ts b/src/main.ts index e831a910..c17dc00c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -102,10 +102,12 @@ 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) => { @@ -113,13 +115,54 @@ const initShortcuts = (events: Events) => { 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); + events.fire('selectedSplatRingsToggle', events.invoke('selectedSplatLerpStrenght') === 0 ? false : true); + } + }); + return shortcuts; }; diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index 8d0f183b..fefe34ac 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -117,7 +117,7 @@ class ControlPanel extends Panel { class: 'control-element-expand', precision: 2, min: 0, - max: 1, + max: 0.5, value: 0.5 }); @@ -156,7 +156,7 @@ class ControlPanel extends Panel { class: 'control-element-expand', precision: 2, min: 0, - max: 1, + max: 0.5, value: 0.5 }); @@ -850,7 +850,7 @@ class ControlPanel extends Panel { events.on('splat.count', (count: number) => { selectionPanel.headerText = `SELECTION${count === 0 ? '' : ' (' + count.toString() + ')'}`; - }); + }); } } From e8c852f79af810b60adf4e8bc67b9622b1eff36e Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 4 Jun 2024 11:54:13 +0200 Subject: [PATCH 03/18] add bounding rings and options --- src/editor.ts | 30 ++++++++---- src/splat.ts | 18 ++++++- src/ui/control-panel.ts | 103 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 140 insertions(+), 11 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 41e0167a..c4341ee2 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -229,7 +229,7 @@ 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; }); @@ -237,7 +237,27 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S splatDefs.forEach((splatDef) => { splatDef.debug.splatSize = value; }); - scene.graphicsDevice.scope.resolve('ringSize').setValue(events.invoke('camera.mode') === 'rings' && value ? 0.04 : 0); + // scene.graphicsDevice.scope.resolve('ringSize').setValue(events.invoke('camera.mode') === 'rings' && value ? 0.04 : 0); + 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.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; }); @@ -281,12 +301,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S scene.forceRender = true; }); - events.on('selectedSplatRingsToggle', (selectedSplatRingToggle: boolean) => { - scene.graphicsDevice.scope.resolve('selectedSplatRingsToggle').setValue(selectedSplatRingToggle); - scene.forceRender = true; - }); - - events.on('show.gridOn', () => { scene.grid.visible = true; }); diff --git a/src/splat.ts b/src/splat.ts index cd91cc79..14d3c355 100644 --- a/src/splat.ts +++ b/src/splat.ts @@ -57,6 +57,9 @@ uniform vec3 centerPointColor; uniform vec3 selectedSplatColor; uniform float selectedSplatLerpStrenght; uniform bool selectedSplatRingsToggle; +uniform float selectedSplatRingsSize; +uniform bool boundingRingToggle; +uniform float boundingRingSize; void main(void) { @@ -97,20 +100,29 @@ void main(void) //c = selectedSplatColor.xyz; alpha = B; if (selectedSplatRingsToggle){ - if (A < 4.0 - 0.04 * 4.0) { + 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; + } + } } 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; @@ -123,6 +135,8 @@ void main(void) } `; +// checkbox to disable centers + const vec = new Vec3(); class Splat extends Element { diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index fefe34ac..84b7ce06 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -123,7 +123,7 @@ class ControlPanel extends Panel { centerPointAlpha.append(centerPointAlphaLabel); centerPointAlpha.append(centerPointAlphaSlider); - + // highlight color of center points const selectedCenterPointColor = new Container({ class: 'control-parent' @@ -182,6 +182,44 @@ class ControlPanel extends Panel { selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtLabel); selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtSlider); + + // toggle bounding rings + const boundingRingToggle = new Container({ + class: 'control-parent' + }); + + const boundingRingToggleLabel = new Label({ + class: 'control-label', + text: 'Bounding rings' + }); + + const boundingRingToggleCb = new BooleanInput({ + class: 'control-element', + }); + + boundingRingToggle.append(boundingRingToggleLabel); + boundingRingToggle.append(boundingRingToggleCb); + + // bounding ring thickness + const boundingRingSize = new Container({ + class: 'control-parent' + }); + + const boundingRingSizeLabel = new Label({ + class: 'control-label', + text: 'Bounding ring thickness' + }); + + const boundingRingSizeSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + boundingRingSize.append(boundingRingSizeLabel); + boundingRingSize.append(boundingRingSizeSlider); const selectedSplatRingsToggle = new Container({ class: 'control-parent' @@ -199,6 +237,27 @@ class ControlPanel extends Panel { selectedSplatRingsToggle.append(selectedSplatRingsToggleLabel); selectedSplatRingsToggle.append(selectedSplatRingsToggleCb); + // bounding ring thickness + const selectedSplatRingsSize = new Container({ + class: 'control-parent' + }); + + const selectedSplatRingsSizeLabel = new Label({ + class: 'control-label', + text: 'Highlight bounds thickness' + }); + + const selectedSplatRingsSizeSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + selectedSplatRingsSize.append(selectedSplatRingsSizeLabel); + selectedSplatRingsSize.append(selectedSplatRingsSizeSlider); + // show grid const showGrid = new Container({ class: 'control-parent' @@ -230,7 +289,10 @@ class ControlPanel extends Panel { cameraPanel.append(selectedCenterPointAlpha); cameraPanel.append(selectedSplatColor); cameraPanel.append(selectedSplatLerpStrenght); + cameraPanel.append(boundingRingToggle); + cameraPanel.append(boundingRingSize); cameraPanel.append(selectedSplatRingsToggle); + cameraPanel.append(selectedSplatRingsSize); cameraPanel.append(showGrid); cameraPanel.append(focusButton); @@ -719,6 +781,32 @@ class ControlPanel extends Panel { }); + events.on('boundingRingToggle', (value: boolean) => { + boundingRingToggleCb.value = value; + }); + + events.function('boundingRingToggle', () => { + return boundingRingToggleCb.value; + }); + + boundingRingToggleCb.on('change', (value: boolean) => { + events.fire('boundingRingToggle', value); + }); + + + events.on('boundingRingSize', (value: number) => { + boundingRingSizeSlider.value = value; + }); + + events.function('boundingRingSize', () => { + return boundingRingSizeSlider.value; + }); + + boundingRingSizeSlider.on('change', (value: number) => { + events.fire('boundingRingSize', value); + }); + + events.on('selectedSplatRingsToggle', (value: boolean) => { selectedSplatRingsToggleCb.value = value; }); @@ -732,6 +820,19 @@ class ControlPanel extends Panel { }); + events.on('selectedSplatRingsSize', (value: number) => { + selectedSplatRingsSizeSlider.value = value; + }); + + events.function('selectedSplatRingsSize', () => { + return selectedSplatRingsSizeSlider.value; + }); + + selectedSplatRingsSizeSlider.on('change', (value: number) => { + events.fire('selectedSplatRingsSize', value); + }); + + events.on('centerPointColor', (value: number[]) => { centerPointColorPicker.value = value; }); From 883a529e7b2312b5952847362e187807b6cdb2c9 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 4 Jun 2024 16:49:32 +0200 Subject: [PATCH 04/18] add shortcuts and hiding splats --- src/editor.ts | 5 +++++ src/main.ts | 17 +++++++++++++++++ src/splat-debug.ts | 22 +--------------------- src/splat.ts | 8 ++++++++ src/ui/control-panel.ts | 37 +++++++++++++++++++++++++++++++++++-- src/ui/shortcuts-popup.ts | 8 +++++++- 6 files changed, 73 insertions(+), 24 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index c4341ee2..849b36be 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -241,6 +241,11 @@ 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.forceRender = true; diff --git a/src/main.ts b/src/main.ts index c17dc00c..a35c587d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -162,7 +162,24 @@ const initShortcuts = (events: Events) => { events.fire('selectedSplatRingsToggle', events.invoke('selectedSplatLerpStrenght') === 0 ? false : true); } }); + + 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; }; diff --git a/src/splat-debug.ts b/src/splat-debug.ts index 10cd4813..e2f13e0e 100644 --- a/src/splat-debug.ts +++ b/src/splat-debug.ts @@ -21,20 +21,10 @@ uniform mat4 matrix_projection; uniform mat4 matrix_viewProjection; uniform float splatSize; -uniform vec3 centerPointColor; -uniform vec3 selectedCenterPointColor; -uniform float centerPointAlpha; +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) -// ); - -uniform vec4 cccolors[3]; - void main(void) { int state = int(vertex_position.w); if (state == -1) { @@ -136,16 +126,6 @@ class SplatDebug { get splatSize() { return this.size; } - - // set centerPointColor(colorValue: number[]) { - // this.color = colorValue; - // this.meshInstance.material.setParameter('centerPointColor', colorValue); - // } - - // get centerPointColor() { - // return this.color; - // } - } export { SplatDebug }; diff --git a/src/splat.ts b/src/splat.ts index 14d3c355..c85825e1 100644 --- a/src/splat.ts +++ b/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(); @@ -60,9 +64,13 @@ 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; diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index 84b7ce06..a92d1511 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -85,6 +85,25 @@ class ControlPanel extends Panel { selectedSplatColor.append(selectedSplatColorLabel); selectedSplatColor.append(selectedSplatColorPicker); + // toggle splats + const splatDisplayToggle = new Container({ + class: 'control-parent' + }); + + const splatDisplayToggleLabel = new Label({ + class: 'control-label', + text: 'Show splats' + }); + + const splatDisplayToggleCb = new BooleanInput({ + class: 'control-element', + value: true + }); + + splatDisplayToggle.append(splatDisplayToggleLabel); + splatDisplayToggle.append(splatDisplayToggleCb); + + // color of center points const centerPointColor = new Container({ class: 'control-parent' @@ -207,7 +226,7 @@ class ControlPanel extends Panel { const boundingRingSizeLabel = new Label({ class: 'control-label', - text: 'Bounding ring thickness' + text: 'Bounding ring size' }); const boundingRingSizeSlider = new SliderInput({ @@ -244,7 +263,7 @@ class ControlPanel extends Panel { const selectedSplatRingsSizeLabel = new Label({ class: 'control-label', - text: 'Highlight bounds thickness' + text: 'Highlight ring size' }); const selectedSplatRingsSizeSlider = new SliderInput({ @@ -283,6 +302,7 @@ class ControlPanel extends Panel { cameraPanel.append(mode); cameraPanel.append(splatSize); + cameraPanel.append(splatDisplayToggle); cameraPanel.append(centerPointColor); cameraPanel.append(centerPointAlpha); cameraPanel.append(selectedCenterPointColor); @@ -859,6 +879,19 @@ class ControlPanel extends Panel { }); + events.on('splatDisplayToggle', (value: boolean) => { + splatDisplayToggleCb.value = value; + }); + + events.function('splatDisplayToggle', () => { + return splatDisplayToggleCb.value; + }); + + splatDisplayToggleCb.on('change', (value: boolean) => { + events.fire('splatDisplayToggle', value); + }); + + events.on('selectedCenterPointColor', (value: number[]) => { selectedCenterPointColorPicker.value = value; }); diff --git a/src/ui/shortcuts-popup.ts b/src/ui/shortcuts-popup.ts index 0749222c..e9631e1c 100644 --- a/src/ui/shortcuts-popup.ts +++ b/src/ui/shortcuts-popup.ts @@ -8,7 +8,7 @@ const shortcutList = [ { key: 'R', action: 'Rect Selection' }, { key: 'B', action: 'Brush Selection' }, { key: 'P', action: 'Picker Selection' }, - { key: '[ ]', action: 'Decrease/Increase brush size' }, + { key: '[ ] OR 9 0', action: 'Decrease/Increase brush size' }, { key: 'Esc', action: 'Deactivate Tool' }, { header: 'SELECTION' }, { key: 'A', action: 'Select All' }, @@ -24,6 +24,12 @@ const shortcutList = [ { key: 'Ctrl + Z', action: 'Undo' }, { key: 'Ctrl + Shift + Z', action: 'Redo' }, { key: 'Space', action: 'Toggle Debug Splat Display' }, + { key: 'J', action: 'Toggle center points alpha' }, + { key: 'L', action: 'Toggle selected points alpha' }, + { key: 'K', action: 'Toggle highlighting color' }, + { key: 'Q', action: 'Toggle highlight rings' }, + { key: 'O', action: 'Toggle bounding rings' }, + { key: 'N', action: 'Toggle splats' }, { key: 'F', action: 'Focus Camera on current selection' }, { key: 'M', action: 'Toggle Camera Mode'}, { key: 'G', action: 'Toggle Grid' }, From 4d41ce1dbfb36c137e1450a834dab48503eff636 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 4 Jun 2024 18:25:21 +0200 Subject: [PATCH 05/18] fix lerp slider and highlight toggle --- src/main.ts | 1 - src/ui/control-panel.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/main.ts b/src/main.ts index a35c587d..b08106cc 100644 --- a/src/main.ts +++ b/src/main.ts @@ -159,7 +159,6 @@ const initShortcuts = (events: Events) => { shortcuts.register(['K', 'k'], { func: () => { events.fire('selectedSplatLerpStrenght', events.invoke('selectedSplatLerpStrenght') === 0 ? selectedSplatLerpStrenghtSave : 0); - events.fire('selectedSplatRingsToggle', events.invoke('selectedSplatLerpStrenght') === 0 ? false : true); } }); diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index a92d1511..d51825bd 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -195,7 +195,7 @@ class ControlPanel extends Panel { class: 'control-element-expand', precision: 2, min: 0, - max: 0.5, + max: 1.0, value: 0.5 }); From 647ad25cec81b7833fbc788acffbe836ffea14e3 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Thu, 6 Jun 2024 10:45:26 +0200 Subject: [PATCH 06/18] fix viewer values unset at load --- src/scene.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scene.ts b/src/scene.ts index 61141486..26ef800d 100644 --- a/src/scene.ts +++ b/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); } From 600f3993c25844bcd7a25884a48d8114b1417d3d Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Thu, 6 Jun 2024 15:18:32 +0200 Subject: [PATCH 07/18] remove comment --- src/splat.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/splat.ts b/src/splat.ts index c85825e1..e198410e 100644 --- a/src/splat.ts +++ b/src/splat.ts @@ -143,8 +143,6 @@ void main(void) } `; -// checkbox to disable centers - const vec = new Vec3(); class Splat extends Element { From 3c74556971f0251c360ba8a1f8499e27641f14f2 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Thu, 6 Jun 2024 15:27:16 +0200 Subject: [PATCH 08/18] fix capitalization --- src/ui/control-panel.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index d51825bd..2931922f 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -74,7 +74,7 @@ class ControlPanel extends Panel { const selectedSplatColorLabel = new Label({ class: 'control-label', - text: 'Highlight Splat color' + text: 'Highlight Splat Color' }); const selectedSplatColorPicker = new ColorPicker({ @@ -92,7 +92,7 @@ class ControlPanel extends Panel { const splatDisplayToggleLabel = new Label({ class: 'control-label', - text: 'Show splats' + text: 'Show Splats' }); const splatDisplayToggleCb = new BooleanInput({ @@ -188,7 +188,7 @@ class ControlPanel extends Panel { const selectedSplatLerpStrenghtLabel = new Label({ class: 'control-label', - text: 'Highlight color interpolation' + text: 'Highlight Color Interpolation' }); const selectedSplatLerpStrenghtSlider = new SliderInput({ @@ -209,7 +209,7 @@ class ControlPanel extends Panel { const boundingRingToggleLabel = new Label({ class: 'control-label', - text: 'Bounding rings' + text: 'Bounding Rings' }); const boundingRingToggleCb = new BooleanInput({ @@ -226,7 +226,7 @@ class ControlPanel extends Panel { const boundingRingSizeLabel = new Label({ class: 'control-label', - text: 'Bounding ring size' + text: 'Bounding Ring Size' }); const boundingRingSizeSlider = new SliderInput({ @@ -246,7 +246,7 @@ class ControlPanel extends Panel { const selectedSplatRingsToggleLabel = new Label({ class: 'control-label', - text: 'Highlight splat rings' + text: 'Highlight Splat Rings' }); const selectedSplatRingsToggleCb = new BooleanInput({ @@ -263,7 +263,7 @@ class ControlPanel extends Panel { const selectedSplatRingsSizeLabel = new Label({ class: 'control-label', - text: 'Highlight ring size' + text: 'Highlight Ring Size' }); const selectedSplatRingsSizeSlider = new SliderInput({ From 757c2f04a13bb1b8d80ec54456a3f7ad57d4d29f Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Thu, 6 Jun 2024 16:04:16 +0200 Subject: [PATCH 09/18] fix ring size slider not working in rings mode --- src/editor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor.ts b/src/editor.ts index 849b36be..9bc510a2 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -237,7 +237,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S 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; }); @@ -253,6 +252,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S 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; }); From 2e672a2e9dc30fc46af9efbe287db66f170f8efa Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Mon, 10 Jun 2024 14:11:35 +0200 Subject: [PATCH 10/18] remove alpha and lerp sliders, use picker component instead --- src/editor.ts | 27 +++------- src/main.ts | 27 +++++----- src/scene.ts | 3 -- src/splat-debug.ts | 4 +- src/splat.ts | 8 +-- src/ui/control-panel.ts | 113 +++------------------------------------- 6 files changed, 31 insertions(+), 151 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 9bc510a2..92ad8297 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -247,6 +247,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S events.on('boundingRingToggle', (boundingRingToggle: boolean) => { scene.graphicsDevice.scope.resolve('boundingRingToggle').setValue(boundingRingToggle); + scene.graphicsDevice.scope.resolve('boundingRingSize').setValue(events.invoke('boundingRingSize')); scene.forceRender = true; }); @@ -258,6 +259,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S events.on('selectedSplatRingsToggle', (selectedSplatRingToggle: boolean) => { scene.graphicsDevice.scope.resolve('selectedSplatRingsToggle').setValue(selectedSplatRingToggle); + scene.graphicsDevice.scope.resolve('selectedSplatRingsSize').setValue(events.invoke('selectedSplatRingsSize')); scene.forceRender = true; }); @@ -273,26 +275,14 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S ]; 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()); + centerPointColors[1] = colorValue; + scene.graphicsDevice.scope.resolve('centerColors[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()); + centerPointColors[2] = colorValue; + scene.graphicsDevice.scope.resolve('centerColors[0]').setValue(centerPointColors.flat()); scene.forceRender = true; }); @@ -301,11 +291,6 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S scene.forceRender = true; }); - events.on('selectedSplatLerpStrenght', (lerpStrenght: number) => { - scene.graphicsDevice.scope.resolve('selectedSplatLerpStrenght').setValue(lerpStrenght); - scene.forceRender = true; - }); - events.on('show.gridOn', () => { scene.grid.visible = true; }); diff --git a/src/main.ts b/src/main.ts index b08106cc..370141a5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -124,41 +124,44 @@ const initShortcuts = (events: Events) => { }); let centerPointAlphaSave = 0.5; - events.on('centerPointAlpha', (value: number) => { - if (value !== 0) { - centerPointAlphaSave = value; + events.on('centerPointColor', (colors: number[]) => { + if (colors[3] !== 0) { + centerPointAlphaSave = colors[3]; } }); shortcuts.register(['J', 'j'], { func: () => { - events.fire('centerPointAlpha', events.invoke('centerPointAlpha') === 0 ? centerPointAlphaSave : 0); + let currentColorValue = events.invoke('centerPointColor') + events.fire('centerPointColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],centerPointAlphaSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); } }); let selectedCenterPointAlphaSave = 0.5; - events.on('selectedCenterPointAlpha', (value: number) => { - if (value !== 0) { - selectedCenterPointAlphaSave = value; + events.on('selectedCenterPointColor', (colors: number[]) => { + if (colors[3] !== 0) { + selectedCenterPointAlphaSave = colors[3]; } }); shortcuts.register(['L', 'l'], { func: () => { - events.fire('selectedCenterPointAlpha', events.invoke('selectedCenterPointAlpha') === 0 ? selectedCenterPointAlphaSave : 0); + let currentColorValue = events.invoke('selectedCenterPointColor') + events.fire('selectedCenterPointColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],selectedCenterPointAlphaSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); } }); let selectedSplatLerpStrenghtSave = 0.5; - events.on('selectedSplatLerpStrenght', (value: number) => { - if (value !== 0) { - selectedSplatLerpStrenghtSave = value; + events.on('selectedSplatColor', (colors: number[]) => { + if (colors[3] !== 0) { + selectedSplatLerpStrenghtSave = colors[3]; } }); shortcuts.register(['K', 'k'], { func: () => { - events.fire('selectedSplatLerpStrenght', events.invoke('selectedSplatLerpStrenght') === 0 ? selectedSplatLerpStrenghtSave : 0); + let currentColorValue = events.invoke('selectedSplatColor') + events.fire('selectedSplatColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],selectedSplatLerpStrenghtSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); } }); diff --git a/src/scene.ts b/src/scene.ts index 26ef800d..c4bc3b2f 100644 --- a/src/scene.ts +++ b/src/scene.ts @@ -226,11 +226,8 @@ class Scene { 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); } diff --git a/src/splat-debug.ts b/src/splat-debug.ts index e2f13e0e..9cc417a0 100644 --- a/src/splat-debug.ts +++ b/src/splat-debug.ts @@ -21,7 +21,7 @@ uniform mat4 matrix_projection; uniform mat4 matrix_viewProjection; uniform float splatSize; -uniform vec4 cccolors[3]; +uniform vec4 centerColors[3]; varying vec4 color; @@ -32,7 +32,7 @@ void main(void) { } else { gl_Position = matrix_viewProjection * matrix_model * vec4(vertex_position.xyz, 1.0); gl_PointSize = splatSize; - color = vec4(cccolors[state]); + color = vec4(centerColors[state]); } } `; diff --git a/src/splat.ts b/src/splat.ts index e198410e..4f2b3230 100644 --- a/src/splat.ts +++ b/src/splat.ts @@ -57,9 +57,7 @@ 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 vec4 selectedSplatColor; uniform bool selectedSplatRingsToggle; uniform float selectedSplatRingsSize; uniform bool boundingRingToggle; @@ -104,8 +102,7 @@ void main(void) } else { if ((vertexState & uint(1)) == uint(1)) { // selected - c = mix(color.xyz, selectedSplatColor.xyz, selectedSplatLerpStrenght); - //c = selectedSplatColor.xyz; + c = mix(color.xyz, selectedSplatColor.xyz, selectedSplatColor.w); alpha = B; if (selectedSplatRingsToggle){ if (A < 4.0 - selectedSplatRingsSize / 3.0) { @@ -121,7 +118,6 @@ void main(void) alpha = B; if (boundingRingToggle){ if (A < 4.0 - boundingRingSize / 3.0) { - //alpha = max(0.05, B); alpha = B; } else { alpha = 0.6; diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index 2931922f..9a0da20c 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -79,7 +79,8 @@ class ControlPanel extends Panel { const selectedSplatColorPicker = new ColorPicker({ class: 'control-element-expand', - value: [1.0,1.0,0.0] + channels: 4, + value: [1.0,1.0,0.0,0.5] }); selectedSplatColor.append(selectedSplatColorLabel); @@ -116,32 +117,13 @@ class ControlPanel extends Panel { const centerPointColorPicker = new ColorPicker({ class: 'control-element-expand', - value: [0.0,0.0,1.0] + channels: 4, + value: [0.0,0.0,1.0,0.5] }); centerPointColor.append(centerPointColorLabel); centerPointColor.append(centerPointColorPicker); - // alpha of center points - const centerPointAlpha = new Container({ - class: 'control-parent' - }); - - const centerPointAlphaLabel = new Label({ - class: 'control-label', - text: 'Center Point Alpha' - }); - - const centerPointAlphaSlider = new SliderInput({ - class: 'control-element-expand', - precision: 2, - min: 0, - max: 0.5, - value: 0.5 - }); - - centerPointAlpha.append(centerPointAlphaLabel); - centerPointAlpha.append(centerPointAlphaSlider); // highlight color of center points const selectedCenterPointColor = new Container({ @@ -155,52 +137,12 @@ class ControlPanel extends Panel { const selectedCenterPointColorPicker = new ColorPicker({ class: 'control-element-expand', - value: [1.0,1.0,0.0] + channels: 4, + value: [1.0,1.0,0.0,0.5] }); selectedCenterPointColor.append(selectedCenterPointColorLabel); selectedCenterPointColor.append(selectedCenterPointColorPicker); - - // alpha of highlighted center points - const selectedCenterPointAlpha = new Container({ - class: 'control-parent' - }); - - const selectedCenterPointAlphaLabel = new Label({ - class: 'control-label', - text: 'Highlight Point Alpha' - }); - - const selectedCenterPointAlphaSlider = new SliderInput({ - class: 'control-element-expand', - precision: 2, - min: 0, - max: 0.5, - value: 0.5 - }); - - selectedCenterPointAlpha.append(selectedCenterPointAlphaLabel); - selectedCenterPointAlpha.append(selectedCenterPointAlphaSlider); - - const selectedSplatLerpStrenght = new Container({ - class: 'control-parent' - }); - - const selectedSplatLerpStrenghtLabel = new Label({ - class: 'control-label', - text: 'Highlight Color Interpolation' - }); - - const selectedSplatLerpStrenghtSlider = new SliderInput({ - class: 'control-element-expand', - precision: 2, - min: 0, - max: 1.0, - value: 0.5 - }); - - selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtLabel); - selectedSplatLerpStrenght.append(selectedSplatLerpStrenghtSlider); // toggle bounding rings const boundingRingToggle = new Container({ @@ -304,11 +246,8 @@ class ControlPanel extends Panel { cameraPanel.append(splatSize); cameraPanel.append(splatDisplayToggle); cameraPanel.append(centerPointColor); - cameraPanel.append(centerPointAlpha); cameraPanel.append(selectedCenterPointColor); - cameraPanel.append(selectedCenterPointAlpha); cameraPanel.append(selectedSplatColor); - cameraPanel.append(selectedSplatLerpStrenght); cameraPanel.append(boundingRingToggle); cameraPanel.append(boundingRingSize); cameraPanel.append(selectedSplatRingsToggle); @@ -787,20 +726,6 @@ class ControlPanel extends Panel { events.fire('selectedSplatColor', value); }); - - events.on('selectedSplatLerpStrenght', (value: number) => { - selectedSplatLerpStrenghtSlider.value = value; - }); - - events.function('selectedSplatLerpStrenght', () => { - return selectedSplatLerpStrenghtSlider.value; - }); - - selectedSplatLerpStrenghtSlider.on('change', (value: number) => { - events.fire('selectedSplatLerpStrenght', value); - }); - - events.on('boundingRingToggle', (value: boolean) => { boundingRingToggleCb.value = value; }); @@ -866,19 +791,6 @@ class ControlPanel extends Panel { }); - events.on('centerPointAlpha', (value: number) => { - centerPointAlphaSlider.value = value; - }); - - events.function('centerPointAlpha', () => { - return centerPointAlphaSlider.value; - }); - - centerPointAlphaSlider.on('change', (value: number) => { - events.fire('centerPointAlpha', value); - }); - - events.on('splatDisplayToggle', (value: boolean) => { splatDisplayToggleCb.value = value; }); @@ -905,19 +817,6 @@ class ControlPanel extends Panel { }); - events.on('selectedCenterPointAlpha', (value: number) => { - selectedCenterPointAlphaSlider.value = value; - }); - - events.function('selectedCenterPointAlpha', () => { - return selectedCenterPointAlphaSlider.value; - }); - - selectedCenterPointAlphaSlider.on('change', (value: number) => { - events.fire('selectedCenterPointAlpha', value); - }); - - focusButton.on('click', () => { events.fire('camera.focus'); }); From f9f431b71a2d26bdd4776ba53b95d22a826695e9 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Mon, 10 Jun 2024 15:40:46 +0200 Subject: [PATCH 11/18] simplify keyboard alpha/interpolation toggles --- src/main.ts | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/main.ts b/src/main.ts index 370141a5..1f342f25 100644 --- a/src/main.ts +++ b/src/main.ts @@ -123,45 +123,42 @@ const initShortcuts = (events: Events) => { } }); - let centerPointAlphaSave = 0.5; + let centerPointColorSave = [0.0,0.0,1.0,0.5]; events.on('centerPointColor', (colors: number[]) => { if (colors[3] !== 0) { - centerPointAlphaSave = colors[3]; + centerPointColorSave = colors; } }); shortcuts.register(['J', 'j'], { func: () => { - let currentColorValue = events.invoke('centerPointColor') - events.fire('centerPointColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],centerPointAlphaSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); + events.fire('centerPointColor', events.invoke('centerPointColor')[3] === 0 ? centerPointColorSave : [0,0,0,0]); } }); - let selectedCenterPointAlphaSave = 0.5; + let selectedCenterPointColorSave = [1.0,1.0,0,0.5]; events.on('selectedCenterPointColor', (colors: number[]) => { if (colors[3] !== 0) { - selectedCenterPointAlphaSave = colors[3]; + selectedCenterPointColorSave = colors; } }); shortcuts.register(['L', 'l'], { func: () => { - let currentColorValue = events.invoke('selectedCenterPointColor') - events.fire('selectedCenterPointColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],selectedCenterPointAlphaSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); + events.fire('selectedCenterPointColor', events.invoke('selectedCenterPointColor')[3] === 0 ? selectedCenterPointColorSave : [0,0,0,0]); } }); - let selectedSplatLerpStrenghtSave = 0.5; + let selectedSplatColorSave = [1.0,1.0,0,0.5]; events.on('selectedSplatColor', (colors: number[]) => { if (colors[3] !== 0) { - selectedSplatLerpStrenghtSave = colors[3]; + selectedSplatColorSave = colors; } }); shortcuts.register(['K', 'k'], { func: () => { - let currentColorValue = events.invoke('selectedSplatColor') - events.fire('selectedSplatColor', currentColorValue[3] === 0 ? [currentColorValue[0],currentColorValue[1],currentColorValue[2],selectedSplatLerpStrenghtSave] : [currentColorValue[0],currentColorValue[1],currentColorValue[2],0]); + events.fire('selectedSplatColor', events.invoke('selectedSplatColor')[3] === 0 ? selectedSplatColorSave : [0,0,0,0]); } }); From 0d1e28e68d86cb37f13d1fad3f7bbbf4840fdc1a Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 11 Jun 2024 16:35:44 +0200 Subject: [PATCH 12/18] move added options to options panel as requested --- src/ui/control-panel.ts | 320 ++++++++++++++++++++-------------------- 1 file changed, 160 insertions(+), 160 deletions(-) diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index 9a0da20c..dadb957f 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -67,158 +67,6 @@ class ControlPanel extends Panel { splatSize.append(splatSizeLabel); splatSize.append(splatSizeSlider); - // highlighting color of selected splats (splat and ring) - const selectedSplatColor = new Container({ - class: 'control-parent' - }); - - const selectedSplatColorLabel = new Label({ - class: 'control-label', - text: 'Highlight Splat Color' - }); - - const selectedSplatColorPicker = new ColorPicker({ - class: 'control-element-expand', - channels: 4, - value: [1.0,1.0,0.0,0.5] - }); - - selectedSplatColor.append(selectedSplatColorLabel); - selectedSplatColor.append(selectedSplatColorPicker); - - // toggle splats - const splatDisplayToggle = new Container({ - class: 'control-parent' - }); - - const splatDisplayToggleLabel = new Label({ - class: 'control-label', - text: 'Show Splats' - }); - - const splatDisplayToggleCb = new BooleanInput({ - class: 'control-element', - value: true - }); - - splatDisplayToggle.append(splatDisplayToggleLabel); - splatDisplayToggle.append(splatDisplayToggleCb); - - - // color of center points - const centerPointColor = new Container({ - class: 'control-parent' - }); - - const centerPointColorLabel = new Label({ - class: 'control-label', - text: 'Center Point Color' - }); - - const centerPointColorPicker = new ColorPicker({ - class: 'control-element-expand', - channels: 4, - value: [0.0,0.0,1.0,0.5] - }); - - centerPointColor.append(centerPointColorLabel); - centerPointColor.append(centerPointColorPicker); - - - // highlight color of center points - const selectedCenterPointColor = new Container({ - class: 'control-parent' - }); - - const selectedCenterPointColorLabel = new Label({ - class: 'control-label', - text: 'Highlight Point Color' - }); - - const selectedCenterPointColorPicker = new ColorPicker({ - class: 'control-element-expand', - channels: 4, - value: [1.0,1.0,0.0,0.5] - }); - - selectedCenterPointColor.append(selectedCenterPointColorLabel); - selectedCenterPointColor.append(selectedCenterPointColorPicker); - - // toggle bounding rings - const boundingRingToggle = new Container({ - class: 'control-parent' - }); - - const boundingRingToggleLabel = new Label({ - class: 'control-label', - text: 'Bounding Rings' - }); - - const boundingRingToggleCb = new BooleanInput({ - class: 'control-element', - }); - - boundingRingToggle.append(boundingRingToggleLabel); - boundingRingToggle.append(boundingRingToggleCb); - - // bounding ring thickness - const boundingRingSize = new Container({ - class: 'control-parent' - }); - - const boundingRingSizeLabel = new Label({ - class: 'control-label', - text: 'Bounding Ring Size' - }); - - const boundingRingSizeSlider = new SliderInput({ - class: 'control-element-expand', - precision: 2, - min: 0, - max: 1, - value: 0.5 - }); - - boundingRingSize.append(boundingRingSizeLabel); - boundingRingSize.append(boundingRingSizeSlider); - - const selectedSplatRingsToggle = new Container({ - class: 'control-parent' - }); - - const selectedSplatRingsToggleLabel = new Label({ - class: 'control-label', - text: 'Highlight Splat Rings' - }); - - const selectedSplatRingsToggleCb = new BooleanInput({ - class: 'control-element', - }); - - selectedSplatRingsToggle.append(selectedSplatRingsToggleLabel); - selectedSplatRingsToggle.append(selectedSplatRingsToggleCb); - - // bounding ring thickness - const selectedSplatRingsSize = new Container({ - class: 'control-parent' - }); - - const selectedSplatRingsSizeLabel = new Label({ - class: 'control-label', - text: 'Highlight Ring Size' - }); - - const selectedSplatRingsSizeSlider = new SliderInput({ - class: 'control-element-expand', - precision: 2, - min: 0, - max: 1, - value: 0.5 - }); - - selectedSplatRingsSize.append(selectedSplatRingsSizeLabel); - selectedSplatRingsSize.append(selectedSplatRingsSizeSlider); - // show grid const showGrid = new Container({ class: 'control-parent' @@ -244,14 +92,6 @@ class ControlPanel extends Panel { cameraPanel.append(mode); cameraPanel.append(splatSize); - cameraPanel.append(splatDisplayToggle); - cameraPanel.append(centerPointColor); - cameraPanel.append(selectedCenterPointColor); - cameraPanel.append(selectedSplatColor); - cameraPanel.append(boundingRingToggle); - cameraPanel.append(boundingRingSize); - cameraPanel.append(selectedSplatRingsToggle); - cameraPanel.append(selectedSplatRingsSize); cameraPanel.append(showGrid); cameraPanel.append(focusButton); @@ -593,7 +433,167 @@ class ControlPanel extends Panel { allData.append(allDataLabel); allData.append(allDataToggle); + // highlighting color of selected splats (splat and ring) + const selectedSplatColor = new Container({ + class: 'control-parent' + }); + + const selectedSplatColorLabel = new Label({ + class: 'control-label', + text: 'Highlight Splat Color' + }); + + const selectedSplatColorPicker = new ColorPicker({ + class: 'control-element-expand', + channels: 4, + value: [1.0,1.0,0.0,0.5] + }); + + selectedSplatColor.append(selectedSplatColorLabel); + selectedSplatColor.append(selectedSplatColorPicker); + + // toggle splats + const splatDisplayToggle = new Container({ + class: 'control-parent' + }); + + const splatDisplayToggleLabel = new Label({ + class: 'control-label', + text: 'Show Splats' + }); + + const splatDisplayToggleCb = new BooleanInput({ + class: 'control-element', + value: true + }); + + splatDisplayToggle.append(splatDisplayToggleLabel); + splatDisplayToggle.append(splatDisplayToggleCb); + + + // color of center points + const centerPointColor = new Container({ + class: 'control-parent' + }); + + const centerPointColorLabel = new Label({ + class: 'control-label', + text: 'Center Point Color' + }); + + const centerPointColorPicker = new ColorPicker({ + class: 'control-element-expand', + channels: 4, + value: [0.0,0.0,1.0,0.5] + }); + + centerPointColor.append(centerPointColorLabel); + centerPointColor.append(centerPointColorPicker); + + + // highlight color of center points + const selectedCenterPointColor = new Container({ + class: 'control-parent' + }); + + const selectedCenterPointColorLabel = new Label({ + class: 'control-label', + text: 'Highlight Point Color' + }); + + const selectedCenterPointColorPicker = new ColorPicker({ + class: 'control-element-expand', + channels: 4, + value: [1.0,1.0,0.0,0.5] + }); + + selectedCenterPointColor.append(selectedCenterPointColorLabel); + selectedCenterPointColor.append(selectedCenterPointColorPicker); + + // toggle bounding rings + const boundingRingToggle = new Container({ + class: 'control-parent' + }); + + const boundingRingToggleLabel = new Label({ + class: 'control-label', + text: 'Bounding Rings' + }); + + const boundingRingToggleCb = new BooleanInput({ + class: 'control-element', + }); + + boundingRingToggle.append(boundingRingToggleLabel); + boundingRingToggle.append(boundingRingToggleCb); + + // bounding ring thickness + const boundingRingSize = new Container({ + class: 'control-parent' + }); + + const boundingRingSizeLabel = new Label({ + class: 'control-label', + text: 'Bounding Ring Size' + }); + + const boundingRingSizeSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + boundingRingSize.append(boundingRingSizeLabel); + boundingRingSize.append(boundingRingSizeSlider); + + const selectedSplatRingsToggle = new Container({ + class: 'control-parent' + }); + + const selectedSplatRingsToggleLabel = new Label({ + class: 'control-label', + text: 'Highlight Splat Rings' + }); + + const selectedSplatRingsToggleCb = new BooleanInput({ + class: 'control-element', + }); + + selectedSplatRingsToggle.append(selectedSplatRingsToggleLabel); + selectedSplatRingsToggle.append(selectedSplatRingsToggleCb); + + // bounding ring thickness + const selectedSplatRingsSize = new Container({ + class: 'control-parent' + }); + + const selectedSplatRingsSizeLabel = new Label({ + class: 'control-label', + text: 'Highlight Ring Size' + }); + + const selectedSplatRingsSizeSlider = new SliderInput({ + class: 'control-element-expand', + precision: 2, + min: 0, + max: 1, + value: 0.5 + }); + + selectedSplatRingsSize.append(selectedSplatRingsSizeLabel); + selectedSplatRingsSize.append(selectedSplatRingsSizeSlider); + optionsPanel.append(allData); + optionsPanel.append(splatDisplayToggle); + optionsPanel.append(centerPointColor); + optionsPanel.append(selectedCenterPointColor); + optionsPanel.append(selectedSplatColor); + optionsPanel.append(boundingRingToggle); + optionsPanel.append(boundingRingSize); + optionsPanel.append(selectedSplatRingsToggle); + optionsPanel.append(selectedSplatRingsSize); // append this.content.append(cameraPanel); From d062cc89880522e14e63980672ec020cba25a1b5 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 11 Jun 2024 16:38:23 +0200 Subject: [PATCH 13/18] move checkbox for loading data closer to button --- src/ui/control-panel.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index dadb957f..27dbc96e 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -470,7 +470,6 @@ class ControlPanel extends Panel { splatDisplayToggle.append(splatDisplayToggleLabel); splatDisplayToggle.append(splatDisplayToggleCb); - // color of center points const centerPointColor = new Container({ class: 'control-parent' @@ -490,7 +489,6 @@ class ControlPanel extends Panel { centerPointColor.append(centerPointColorLabel); centerPointColor.append(centerPointColorPicker); - // highlight color of center points const selectedCenterPointColor = new Container({ class: 'control-parent' @@ -548,6 +546,7 @@ class ControlPanel extends Panel { boundingRingSize.append(boundingRingSizeLabel); boundingRingSize.append(boundingRingSizeSlider); + // toggle bounding rings for selected splats const selectedSplatRingsToggle = new Container({ class: 'control-parent' }); @@ -585,7 +584,6 @@ class ControlPanel extends Panel { selectedSplatRingsSize.append(selectedSplatRingsSizeLabel); selectedSplatRingsSize.append(selectedSplatRingsSizeSlider); - optionsPanel.append(allData); optionsPanel.append(splatDisplayToggle); optionsPanel.append(centerPointColor); optionsPanel.append(selectedCenterPointColor); @@ -594,6 +592,7 @@ class ControlPanel extends Panel { optionsPanel.append(boundingRingSize); optionsPanel.append(selectedSplatRingsToggle); optionsPanel.append(selectedSplatRingsSize); + optionsPanel.append(allData); // append this.content.append(cameraPanel); From 610c3571a49d4686691a543bd35be1dcb97c7093 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Wed, 12 Jun 2024 15:26:02 +0200 Subject: [PATCH 14/18] use const for center point color array --- src/editor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor.ts b/src/editor.ts index a43f3e31..02599d0f 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -144,7 +144,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S scene.forceRender = true; }); - let centerPointColors = [ + const centerPointColors = [ [0, 0, 0, 0.25], [0, 0, 1.0, 0.5], [1.0, 1.0, 0.0, 0.5] From 4f63e0ef59b2435411674bbde908ca580201c222 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Wed, 12 Jun 2024 15:27:32 +0200 Subject: [PATCH 15/18] remove commented code --- src/splat-debug.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/splat-debug.ts b/src/splat-debug.ts index 5f68dcee..8f16eecf 100644 --- a/src/splat-debug.ts +++ b/src/splat-debug.ts @@ -49,7 +49,6 @@ class SplatDebug { splatData: GSplatData; meshInstance: MeshInstance; size = 2; - // color = [0.0, 0.0, 1.0] constructor(scene: Scene, root: Entity, splatData: GSplatData) { const device = scene.graphicsDevice; @@ -84,7 +83,6 @@ class SplatDebug { this.meshInstance = new MeshInstance(mesh, material, root); this.splatSize = this.size; - // this.centerPointColor = this.color; } destroy() { From 07182f05e4e1f0b423738fea404cf6da240fdca3 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Wed, 12 Jun 2024 16:25:46 +0200 Subject: [PATCH 16/18] remove obsolete camera mode string from event --- src/editor.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/editor.ts b/src/editor.ts index 02599d0f..cbf144ad 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -108,7 +108,7 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S lastExportCursor = editHistory.cursor; }); - events.on('camera.mode', (mode: string) => { + events.on('camera.mode', () => { scene.forceRender = true; }); From b384c05acbf87c53a36e65b61ef99099c6f10dc8 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Wed, 12 Jun 2024 16:48:06 +0200 Subject: [PATCH 17/18] fix spacing and indents --- src/main.ts | 14 +++++++------- src/splat.ts | 2 +- src/ui/control-panel.ts | 10 +--------- 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/main.ts b/src/main.ts index 77f357cc..19f8a55b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -83,7 +83,7 @@ const initShortcuts = (events: Events) => { 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) => { @@ -91,21 +91,21 @@ const initShortcuts = (events: Events) => { splatSizeSave = size; } }); - + // space toggles between 0 and size shortcuts.register([' '], { func: () => { events.fire('splatSize', events.invoke('splatSize') === 0 ? splatSizeSave : 0); } }); - + 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]); @@ -118,7 +118,7 @@ const initShortcuts = (events: Events) => { selectedCenterPointColorSave = colors; } }); - + shortcuts.register(['L', 'l'], { func: () => { events.fire('selectedCenterPointColor', events.invoke('selectedCenterPointColor')[3] === 0 ? selectedCenterPointColorSave : [0,0,0,0]); @@ -131,13 +131,13 @@ const initShortcuts = (events: Events) => { 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')); diff --git a/src/splat.ts b/src/splat.ts index de5560e7..c4e6fac2 100644 --- a/src/splat.ts +++ b/src/splat.ts @@ -68,7 +68,7 @@ uniform bool splatDisplayToggle; void main(void) { - if(splatDisplayToggle){ + if (splatDisplayToggle){ discard; } if ((vertexState & uint(4)) == uint(4)) { diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index f7bf6136..f9756a86 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -753,7 +753,6 @@ class ControlPanel extends Panel { events.fire('splatSize', value); }); - events.on('selectedSplatColor', (value: number[]) => { selectedSplatColorPicker.value = value; }); @@ -778,7 +777,6 @@ class ControlPanel extends Panel { events.fire('boundingRingToggle', value); }); - events.on('boundingRingSize', (value: number) => { boundingRingSizeSlider.value = value; }); @@ -791,7 +789,6 @@ class ControlPanel extends Panel { events.fire('boundingRingSize', value); }); - events.on('selectedSplatRingsToggle', (value: boolean) => { selectedSplatRingsToggleCb.value = value; }); @@ -804,7 +801,6 @@ class ControlPanel extends Panel { events.fire('selectedSplatRingsToggle', value); }); - events.on('selectedSplatRingsSize', (value: number) => { selectedSplatRingsSizeSlider.value = value; }); @@ -817,7 +813,6 @@ class ControlPanel extends Panel { events.fire('selectedSplatRingsSize', value); }); - events.on('centerPointColor', (value: number[]) => { centerPointColorPicker.value = value; }); @@ -830,7 +825,6 @@ class ControlPanel extends Panel { events.fire('centerPointColor', value); }); - events.on('splatDisplayToggle', (value: boolean) => { splatDisplayToggleCb.value = value; }); @@ -843,7 +837,6 @@ class ControlPanel extends Panel { events.fire('splatDisplayToggle', value); }); - events.on('selectedCenterPointColor', (value: number[]) => { selectedCenterPointColorPicker.value = value; }); @@ -856,7 +849,6 @@ class ControlPanel extends Panel { events.fire('selectedCenterPointColor', value); }); - focusButton.on('click', () => { events.fire('camera.focus'); }); @@ -911,7 +903,7 @@ class ControlPanel extends Panel { events.on('splat.count', (count: number) => { selectionPanel.headerText = `SELECTION${count === 0 ? '' : ' (' + count.toString() + ')'}`; - }); + }); } } From afc0b56d78030a11035d48f20057dae17e31fab3 Mon Sep 17 00:00:00 2001 From: 7Jaws Date: Tue, 18 Jun 2024 18:46:34 +0200 Subject: [PATCH 18/18] fix highlight toggle making boundary rings black boundary rings will keep color even if splat highlighting is toggled off accidentally introduced this bug when cleaning up keyboard shortcuts --- src/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.ts b/src/main.ts index 19f8a55b..e567a4cd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -134,7 +134,7 @@ const initShortcuts = (events: Events) => { shortcuts.register(['K', 'k'], { func: () => { - events.fire('selectedSplatColor', events.invoke('selectedSplatColor')[3] === 0 ? selectedSplatColorSave : [0,0,0,0]); + events.fire('selectedSplatColor', events.invoke('selectedSplatColor')[3] === 0 ? selectedSplatColorSave : [selectedSplatColorSave[0],selectedSplatColorSave[1],selectedSplatColorSave[2],0]); } });