Improve the halo

Author: hasparus

src/app/(main)/community/events/map/engine.ts

@@ -110,6 +110,7 @@ class MapEngine implements MapHandle {
   private markerCount: number
   private markerCapacityWarned = false
   private readonly markerColor: Float32Array
+  private haloColor: Float32Array
   private readonly markerIntensity: Float32Array
   private readonly markerIntensityTarget: Float32Array
   private readonly markerIndexById: Map<string, number>
@@ -158,6 +159,7 @@ class MapEngine implements MapHandle {
     this.markerData = new Float32Array(MARKER_CAPACITY * 4)
     this.markerCount = this.packMarkers(this.markerPoints, this.markerData)
     this.markerColor = new Float32Array(options.theme.marker)
+    this.haloColor = new Float32Array(options.theme.halo)
     this.markerIntensity = new Float32Array(MARKER_CAPACITY)
     this.markerIntensityTarget = new Float32Array(MARKER_CAPACITY)
     this.markerIndexById = new Map()
@@ -197,6 +199,7 @@ class MapEngine implements MapHandle {
     this.seaColor.set(colors.sea)
     this.landColor.set(colors.land)
     this.markerColor.set(colors.marker)
+    this.haloColor.set(colors.halo)
   }
 
   setActiveMarker(id: string | null) {
@@ -647,6 +650,14 @@ class MapEngine implements MapHandle {
       this.markerColor[1],
       this.markerColor[2],
     )
+    setUniform3f(
+      gl,
+      this.dotsProgram,
+      "uHaloColor",
+      this.haloColor[0],
+      this.haloColor[1],
+      this.haloColor[2],
+    )
     setUniform1i(gl, this.dotsProgram, "uMarkerCount", this.markerCount)
     gl.activeTexture(gl.TEXTURE0)
     gl.bindTexture(gl.TEXTURE_2D, this.landTexture)

src/app/(main)/community/events/map/map-colors.tsx

@@ -4,18 +4,21 @@ export type MapColors = {
   sea: ColorVec3
   land: ColorVec3
   marker: ColorVec3
+  halo: ColorVec3
 }
 
 export const MAP_COLORS = {
   light: {
     sea: [0.9804, 0.9882, 0.9569], // neu-50
     land: [0.8627, 0.8706, 0.8275], // neu-300
     marker: [0.8824, 0.0039, 0.5961], // #E10198 = pri-base
+    halo: [1.0, 0.6, 0.8784], // hsl(318, 100%, 80%) = pri-light
   },
   dark: {
     sea: [0.0549, 0.0588, 0.0431], // neu-50
     land: [0.1647, 0.1804, 0.1373], // a shade darker than neu-800
     marker: [1, 0.6, 0.8745], // #FF99DF = pri-light
+    halo: [1.0, 0.8, 0.9373], // hsl(319, 100%, 90%) = pri-lighter
   },
 } satisfies Record<string, MapColors>
 

src/app/(main)/community/events/map/shaders.ts

@@ -31,6 +31,7 @@ uniform vec3 uSeaColor;
 uniform vec4 uMarkers[${MARKER_CAPACITY}];
 uniform int uMarkerCount;
 uniform vec3 uMarkerColor;
+uniform vec3 uHaloColor;
 
 vec2 markerCellCenter(vec4 marker, vec2 referencePx) {
   float periodX = uWorldSize.x * uZoom;
@@ -128,7 +129,7 @@ void main() {
       discard;
     }
     float haloAlpha = clamp(haloIntensity, 0.0, 1.0);
-    color = mix(uSeaColor, uMarkerColor, haloAlpha);
+    color = mix(uSeaColor, uHaloColor, haloAlpha);
     outColor = vec4(color, 1.0);
     return;
   }