feat(map): improved quality of star glow

package.json

@@ -41,6 +41,7 @@
 		"@types/d3-hsv": "^0.1.7",
 		"@types/d3-interpolate": "^3.0.4",
 		"@types/d3-path": "^3.1.0",
+		"@types/d3-scale": "^4.0.8",
 		"@types/d3-selection": "^3.0.11",
 		"@types/d3-shape": "^3.1.6",
 		"@types/d3-zoom": "^3.0.8",
@@ -87,6 +88,7 @@
 		"d3-hsv": "^0.1.0",
 		"d3-interpolate": "^3.0.1",
 		"d3-path": "^3.1.0",
+		"d3-scale": "^4.0.2",
 		"d3-selection": "^3.0.0",
 		"d3-shape": "^3.2.0",
 		"d3-zoom": "^3.0.0",

src/renderer/src/lib/map/solarSystemMap/SolarSystemMap.svelte

@@ -37,6 +37,7 @@
 		isPlanetarySystemPrimaryBody,
 		isStar,
 		PLANET_RING_PATTERN,
+		STAR_GRADIENT_STEPS,
 	} from './utils/planets';
 	import { getPathKitShadowPath } from './utils/shadows';
 
@@ -178,19 +179,6 @@
 		<filter id="glow" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
 			<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
 		</filter>
-		<filter
-			id="starGlow"
-			filterUnits="objectBoundingBox"
-			x="-500%"
-			y="-500%"
-			width="1100%"
-			height="1100%"
-		>
-			<feGaussianBlur
-				in="SourceGraphic"
-				stdDeviation={10 / $mapSettings.systemMapOrbitDistanceExponent}
-			/>
-		</filter>
 		<Icons />
 	</defs>
 	<g bind:this={g}>
@@ -261,15 +249,25 @@
 		{#each planets as planet (planet.id)}
 			{@const coordinate = getPlanetCoordinate(planet, planets, $mapSettings)}
 			{#if isStar(planet)}
-				<Glow enabled filterId="starGlow" let:filter>
-					<circle
-						fill={filter !== '' ? getStarGlowColor(planet, colors) : getPlanetColor(planet, colors)}
-						r={getPlanetRadius(planet, $mapSettings)}
-						cx={coordinate.x}
-						cy={coordinate.y}
-						{filter}
-					/>
-				</Glow>
+				<defs>
+					<radialGradient id="star-gradient-{planet.id}">
+						{#each STAR_GRADIENT_STEPS as step}
+							<stop stop-color={getStarGlowColor(planet, colors)} {...step} />
+						{/each}
+					</radialGradient>
+				</defs>
+				<circle
+					fill="url(#star-gradient-{planet.id})"
+					r={getPlanetRadius(planet, $mapSettings) * 4}
+					cx={coordinate.x}
+					cy={coordinate.y}
+				/>
+				<circle
+					fill={getPlanetColor(planet, colors)}
+					r={getPlanetRadius(planet, $mapSettings)}
+					cx={coordinate.x}
+					cy={coordinate.y}
+				/>
 			{:else}
 				{@const radius = getPlanetRadius(planet, $mapSettings)}
 				<circle

src/renderer/src/lib/map/solarSystemMap/utils/planets.ts

@@ -1,3 +1,5 @@
+import { scalePow } from 'd3-scale';
+
 import type { Planet } from '../../../GameState';
 import type { MapSettings } from '../../../settings';
 
@@ -87,3 +89,30 @@ export const PLANET_RING_PATTERN = (
 		array.slice(0, index).reduce((total, [curWidth]) => total + curWidth, 0) + 1 + width / 2;
 	return { width, opacity, radiusMultiplier };
 });
+
+function getStarGradientSteps({
+	startOffset,
+	startOpacity,
+	numSteps,
+	exponent,
+}: {
+	startOffset: number;
+	startOpacity: number;
+	numSteps: number;
+	exponent: number;
+}): { offset: string; 'stop-opacity': number }[] {
+	const results: ReturnType<typeof getStarGradientSteps> = [];
+	const scale = scalePow([0, 100 - startOffset], [startOpacity, 0]).exponent(exponent);
+	for (let i = 0; i <= numSteps; i++) {
+		const offset = startOffset + (i / numSteps) * (100 - startOffset);
+		results.push({ offset: `${offset}%`, 'stop-opacity': scale(offset - startOffset) });
+	}
+	console.log(results);
+	return results;
+}
+export const STAR_GRADIENT_STEPS = getStarGradientSteps({
+	startOffset: 25,
+	startOpacity: 0.32,
+	numSteps: 32,
+	exponent: 0.25,
+});