From 911abe8afebb306cd1e5ef9b37a12df64de3a266 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Sun, 17 Dec 2023 23:09:49 -0500 Subject: [PATCH 1/6] fix: :bug: add missing default config values I was unable to run a dev server without these set. It might be a windows vs linux issue, but it looked like it was just missing defaults. --- public/config.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/config.json b/public/config.json index b24e03b..acc10d9 100644 --- a/public/config.json +++ b/public/config.json @@ -1,4 +1,6 @@ { + "baseUrl": "", + "tleUrl": "/data/attributed-TLE.json", "propergateInterval": 1000, "pushHistory": false, "logLevel": "info", From 5cfe87fa21fcf69ec9190fd5e107e628f34eca74 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Sun, 17 Dec 2023 23:10:55 -0500 Subject: [PATCH 2/6] feat: :sparkles: vscode shortcut to launch the dev server Purely for convienence with no impact to anyone who prefers the command line. I am open to just adding this file to the ignore list instead. --- .vscode/tasks.json | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 .vscode/tasks.json diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..0a5e529 --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,17 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "type": "npm", + "script": "dev", + "problemMatcher": [], + "label": "npm: dev", + "detail": "vite --host", + "isBackground": true, + "icon": { + "id": "symbol-method", + "color": "terminal.ansiBlue" + } + } + ] +} \ No newline at end of file From 978108e522c2ec36ad4dfa0ff002dcea24d30989 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Sun, 17 Dec 2023 23:13:19 -0500 Subject: [PATCH 3/6] fix: :bug: fix dot shader making black squares When depthWrite is enabled then transparent edges of the dot shader still block the dots in back. --- public/shaders/dot2-fragment.glsl | 7 ++----- src/viewer/Satellites.ts | 16 +++++++++++----- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/public/shaders/dot2-fragment.glsl b/public/shaders/dot2-fragment.glsl index d66573f..424c7fd 100644 --- a/public/shaders/dot2-fragment.glsl +++ b/public/shaders/dot2-fragment.glsl @@ -4,10 +4,7 @@ uniform sampler2D pointTexture; varying vec4 vColor; void main() { vec2 ptCoord = gl_PointCoord * 2.0 - vec2(1.0, 1.0); - float r = 1.0 - min(abs(length(ptCoord)), 1.0); - float alpha = pow(r + 0.1, 3.0); - alpha = min(alpha, 1.0); - + float r = 0.48 - min(abs(length(ptCoord)), 1.0); + float alpha = (2.0 * r + 0.4); gl_FragColor = vec4(vColor.rgb, vColor.a * alpha); - // gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord ); } \ No newline at end of file diff --git a/src/viewer/Satellites.ts b/src/viewer/Satellites.ts index 3d565a9..9c06ce8 100644 --- a/src/viewer/Satellites.ts +++ b/src/viewer/Satellites.ts @@ -1,13 +1,15 @@ -import { SatelliteGroup } from '@satellite-viewer/SatelliteGroup'; +import SatelliteGroup from '@satellite-viewer/SatelliteGroup'; import { Points, BufferGeometry, Float32BufferAttribute, - AdditiveBlending, TextureLoader, Color, ShaderMaterial, Object3D, + OneMinusSrcAlphaFactor, + SrcAlphaFactor, + CustomBlending, } from '../utils/three'; import SceneComponent from './interfaces/SceneComponent'; import SatelliteStore from './SatelliteStore'; @@ -274,12 +276,16 @@ class Satellites implements SceneComponent, SelectableSatellite { color: { value: new Color( 0xffffff ) }, pointTexture: { value: texture } }, - clipping: true, + clipping: false, vertexShader: shader.vertex, fragmentShader: shader.fragment, - blending: AdditiveBlending, + blending: CustomBlending, + blendSrcAlpha: SrcAlphaFactor, + blendDstAlpha: OneMinusSrcAlphaFactor, + transparent: true, + alphaTest: 0.5, depthTest: true, - transparent: true + depthWrite: false, }); geometry.center(); From 996d3604baa6b6a20853f52130522ceb03104348 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Sun, 17 Dec 2023 23:15:15 -0500 Subject: [PATCH 4/6] fix: :adhesive_bandage: enable antialias on webgl context Unless you are implementing custom antialiasing or frame buffers in Webgl 2.0 it is almost always best to leave the built in antialiasing on. --- src/viewer/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/viewer/index.ts b/src/viewer/index.ts index f23ad2f..b573a17 100644 --- a/src/viewer/index.ts +++ b/src/viewer/index.ts @@ -175,7 +175,7 @@ class Viewer { this.scene = new SatelliteOrbitScene(); this.camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 ); - this.renderer = new WebGLRenderer({ antialias: false }); + this.renderer = new WebGLRenderer({ antialias: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); document From 1551d9324dbe6c8d7000c03293b3f2d60fdea509 Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Tue, 19 Dec 2023 14:21:00 -0500 Subject: [PATCH 5/6] refactor: :recycle: split complex function --- src/viewer/Satellites.ts | 92 ++++++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 42 deletions(-) diff --git a/src/viewer/Satellites.ts b/src/viewer/Satellites.ts index 9c06ce8..1e82d77 100644 --- a/src/viewer/Satellites.ts +++ b/src/viewer/Satellites.ts @@ -78,59 +78,67 @@ class Satellites implements SceneComponent, SelectableSatellite { } if (this.satPos && this.satPos.length > 0) { - if (this.geometry && this.geometry.attributes) { - if (!this.satelliteStore) { - return; - } + if (this.geometry?.attributes) { const satellites = this.satelliteStore.satData; const satCount = satellites.length; - // update satellite positions - if (this.geometry.attributes.position) { - const vertices: Float32Array = new Float32Array(); - vertices.fill(0, 0, this.satelliteStore.satData.length * 3); - this.geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3)); - - // deal with NaN - for (let i = 0; i < this.satPos.length; i++) { - if (isNaN(this.satPos[i])) { - this.satPos[i] = 0; - } - } - - this.geometry.setAttribute('position', new Float32BufferAttribute(this.satPos, 3 ) ); + this.updateSatellitesGeometry(); + this.updateSatellitesMaterial(satCount, satellites); + } + } - this.geometry.computeBoundingBox(); - this.geometry.computeBoundingSphere(); - } + this.debugRaycastSelection(); + } - // update point colours - if (this.geometry.attributes.color && this.currentColorScheme) { - // Adjust if the satellite count adjusts - if (this.satelliteColors.length === 0 || (satCount * 4 !== this.satelliteColors.length)) { - this.satelliteColors = new Array(this.satelliteStore.satData.length * 4); - this.satelliteColors.fill(1, 0, this.satelliteColors.length); - } + /** + * update point colours + */ + private updateSatellitesMaterial (satCount: number, satellites: Record[]) { + if (this.geometry?.attributes.color && this.currentColorScheme && this.satelliteStore) { + // Adjust if the satellite count adjusts + if (this.satelliteColors.length === 0 || (satCount * 4 !== this.satelliteColors.length)) { + this.satelliteColors = new Array(this.satelliteStore.satData.length * 4); + this.satelliteColors.fill(1, 0, this.satelliteColors.length); + } - for (let i = 0; i < satellites.length; i++) { - let color = this.currentColorScheme?.getSatelliteColor(satellites[i], this.satelliteGroup)?.color; // || [0, 0, 0]; - if (!color) { - console.log('no color', satellites[i].id); - color = [0, 0, 0]; - } - const idx = i * 4; - this.satelliteColors[idx] = color[0]; - this.satelliteColors[idx + 1] = color[1]; - this.satelliteColors[idx + 2] = color[2]; - this.satelliteColors[idx + 3] = color[3]; - } - this.geometry.setAttribute('color', new Float32BufferAttribute(this.satelliteColors, 4)); + for (let i = 0; i < satellites.length; i++) { + let color = this.currentColorScheme?.getSatelliteColor(satellites[i], this.satelliteGroup)?.color; // || [0, 0, 0]; + if (!color) { + console.log('no color', satellites[i].id); + color = [0, 0, 0]; } + const idx = i * 4; + this.satelliteColors[idx] = color[0]; + this.satelliteColors[idx + 1] = color[1]; + this.satelliteColors[idx + 2] = color[2]; + this.satelliteColors[idx + 3] = color[3]; } + this.geometry.setAttribute('color', new Float32BufferAttribute(this.satelliteColors, 4)); } + } - this.debugRaycastSelection(); + /** + * Updates the satellites positions in the geometry. + */ + private updateSatellitesGeometry () { + if (this.geometry?.attributes.position && this.satelliteStore) { + const vertices: Float32Array = new Float32Array(); + vertices.fill(0, 0, this.satelliteStore.satData.length * 3); + this.geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3)); + + // deal with NaN + for (let i = 0; i < this.satPos.length; i++) { + if (isNaN(this.satPos[i])) { + this.satPos[i] = 0; + } + } + + this.geometry.setAttribute('position', new Float32BufferAttribute(this.satPos, 3)); + + this.geometry.computeBoundingBox(); + this.geometry.computeBoundingSphere(); + } } onMessage (message: any) { From 51d90e08293b4712c557b06373aa69194002bbbd Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Tue, 19 Dec 2023 14:24:50 -0500 Subject: [PATCH 6/6] fix: :rotating_light: fix lint error with undefined check --- src/viewer/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/viewer/index.ts b/src/viewer/index.ts index b573a17..bd5552e 100644 --- a/src/viewer/index.ts +++ b/src/viewer/index.ts @@ -326,7 +326,9 @@ class Viewer { this.orbits?.setSelectedSatellite(satelliteIdx); } - setSelectedSatelliteGroup (satelliteGroup: SatelliteGroup | undefined) { + setSelectedSatelliteGroup (satelliteGroup?: SatelliteGroup) { + if (!satelliteGroup) return; + this.satelliteGroups?.selectGroup(satelliteGroup); this.orbits?.setSatelliteGroup(satelliteGroup); this.satellites?.setSatelliteGroup(satelliteGroup);