Merge pull request #23 from thkruz/master

Improve Dot Shader
ajmas · Dec 19, 2023 · b7e013e · b7e013e
2 parents 662b419 + 51d90e0
commit b7e013e
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 53 deletions.
diff --git a/.vscode/tasks.json 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"
+			}
+		}
+	]
+}
diff --git a/public/config.json b/public/config.json
@@ -1,4 +1,6 @@
 {
+  "baseUrl": "",
+  "tleUrl": "/data/attributed-TLE.json",
   "propergateInterval": 1000,
   "pushHistory": false,
   "logLevel": "info",

diff --git 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 );
 }
diff --git a/src/viewer/Satellites.ts b/src/viewer/Satellites.ts
@@ -3,11 +3,13 @@ import {
   Points,
   BufferGeometry,
   Float32BufferAttribute,
-  AdditiveBlending,
   TextureLoader,
   Color,
   ShaderMaterial,
   Object3D,
+  OneMinusSrcAlphaFactor,
+  SrcAlphaFactor,
+  CustomBlending,
 } from '../utils/three';
 import SceneComponent from './interfaces/SceneComponent';
 import SatelliteStore from './SatelliteStore';
@@ -76,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<string, any>[]) {
+    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) {
@@ -274,12 +284,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();

diff --git 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
@@ -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);