wip

Author: hasparus

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

@@ -144,6 +144,8 @@ class MapEngine implements MapHandle {
   }
   private pointerTrail: PointerTrailEntry[] = []
   private pointerTrailBuffer = new Float32Array(POINTER_TRAIL_CAPACITY * 4)
+  private lastPointerSample: { x: number; y: number; time: number } | null =
+    null
   private destroyed = false
 
   constructor(options: InternalOptions) {
@@ -271,21 +273,35 @@ class MapEngine implements MapHandle {
   }
 
   private pushPointerTrail(px: number, py: number, time: number) {
-    const last = this.pointerTrail[this.pointerTrail.length - 1]
-    if (last) {
-      const dx = last.x - px
-      const dy = last.y - py
+    const lastSample = this.lastPointerSample
+    if (lastSample) {
+      const dx = px - lastSample.x
+      const dy = py - lastSample.y
       const distanceSq = dx * dx + dy * dy
-      if (
-        distanceSq <
-        POINTER_TRAIL_MIN_DISTANCE * POINTER_TRAIL_MIN_DISTANCE
-      ) {
-        last.x = px
-        last.y = py
-        last.time = time
+      if (distanceSq < 0.25) {
+        this.insertPointerPoint(px, py, time)
+        this.lastPointerSample = { x: px, y: py, time }
         return
       }
+      const distance = Math.sqrt(distanceSq)
+      const dt = Math.max(time - lastSample.time, 1)
+      const subdivisions = Math.min(
+        4,
+        Math.max(0, Math.ceil(distance / POINTER_TRAIL_MIN_DISTANCE) - 1),
+      )
+      for (let i = 1; i <= subdivisions; i++) {
+        const t = i / (subdivisions + 1)
+        const interpTime = lastSample.time + dt * t
+        const interpX = lastSample.x + dx * t
+        const interpY = lastSample.y + dy * t
+        this.insertPointerPoint(interpX, interpY, interpTime)
+      }
     }
+    this.insertPointerPoint(px, py, time)
+    this.lastPointerSample = { x: px, y: py, time }
+  }
+
+  private insertPointerPoint(px: number, py: number, time: number) {
     if (this.pointerTrail.length >= POINTER_TRAIL_CAPACITY) {
       this.pointerTrail.shift()
     }
@@ -351,6 +367,8 @@ class MapEngine implements MapHandle {
         pointerPosition[1],
         performance.now(),
       )
+    } else {
+      this.lastPointerSample = null
     }
     if (!this.pointer.active || event.pointerId !== this.pointer.id) return
     const scale = this.pixelRatio
@@ -386,12 +404,14 @@ class MapEngine implements MapHandle {
   private handlePointerUp = (event: PointerEvent) => {
     if (event.type === "pointerleave" || event.type === "pointercancel") {
       this.hoverPointer.hasValue = false
+      this.lastPointerSample = null
     }
     if (!this.pointer.active || event.pointerId !== this.pointer.id) return
     this.pointer.active = false
     this.canvas.releasePointerCapture(event.pointerId)
     this.canvas.style.cursor = "default"
     this.pointer.lastMoveTime = 0
+    this.lastPointerSample = null
   }
 
   private handleDebugClick =

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

@@ -85,11 +85,33 @@ void main() {
   if (uv.y < 0.0 || uv.y > 1.0) {
     discard;
   }
-  vec2 delta = abs(fragPx - center);
-  if (delta.x > 0.5 * uSquare || delta.y > 0.5 * uSquare) {
-    discard;
-  }
   float markerType = markerTypeAtCellCenterPx(center);
+  float pointerHalo = 0.0;
+  float pointerTrail = 0.0;
+  for (int i = 0; i < 8; i++) {
+    if (i >= uPointerTrailCount) {
+      break;
+    }
+    vec4 entry = uPointerTrail[i];
+    vec2 trailPos = entry.xy;
+    float age = clamp(entry.z, 0.0, 1.0);
+    float fade = 1.0 - age;
+    float centerDist = length(center - trailPos);
+    float centerInfluence = clamp(1.0 - centerDist / (uCell * 8.0), 0.0, 1.0);
+    pointerTrail = max(pointerTrail, fade * centerInfluence);
+    if (markerType > 0.5) {
+      float haloRadius = 0.5 * uSquare + 3.5 * uCell;
+      float haloDist = length(fragPx - trailPos);
+      float haloInfluence = clamp(1.0 - haloDist / haloRadius, 0.0, 1.0);
+      pointerHalo = max(pointerHalo, fade * haloInfluence * haloInfluence * 0.35);
+    }
+  }
+  if (uPointerActive > 0 && markerType > 0.5) {
+    float haloRadius = 0.5 * uSquare + 2.5 * uCell;
+    float haloDist = length(fragPx - uPointerCenter);
+    float haloFactor = clamp(1.0 - haloDist / haloRadius, 0.0, 1.0);
+    pointerHalo = max(pointerHalo, haloFactor * 0.6);
+  }
   vec2 landUV = vec2(uv.x, 1.0 - uv.y);
   float seaCoverage = sampleCoverage(landUV);
   float landCoverage = 1.0 - seaCoverage;
@@ -102,35 +124,22 @@ void main() {
   } else if (markerType > 0.5) {
     color = uMarkerColor;
   }
-  float pointerHalo = 0.0;
-  if (uPointerActive > 0 && markerType > 0.5) {
-    vec2 pointerDelta = abs(center - uPointerCenter);
-    if (pointerDelta.x < 0.5 * uCell && pointerDelta.y < 0.5 * uCell) {
-      float haloRadius = 0.5 * uSquare + 0.75 * uCell;
-      float haloDist = length(fragPx - uPointerCenter);
-      float haloFactor = clamp(1.0 - haloDist / haloRadius, 0.0, 1.0);
-      pointerHalo = haloFactor * haloFactor;
-    }
+  float halfSquare = 0.5 * uSquare;
+  if (pointerTrail > 0.0 && markerType <= 0.5) {
+    float shrink = clamp(1.0 - pointerTrail * 0.12, 0.9, 1.0);
+    halfSquare *= shrink;
   }
-  float pointerTrail = 0.0;
-  for (int i = 0; i < 8; i++) {
-    if (i >= uPointerTrailCount) {
-      break;
-    }
-    vec4 entry = uPointerTrail[i];
-    vec2 trailPos = entry.xy;
-    float age = clamp(entry.z, 0.0, 1.0);
-    float fade = 1.0 - age;
-    float dist = length(center - trailPos);
-    float influence = max(0.0, 1.0 - dist / (uCell * 3.0));
-    pointerTrail = max(pointerTrail, fade * influence);
+  vec2 delta = abs(fragPx - center);
+  if (delta.x > halfSquare || delta.y > halfSquare) {
+    discard;
   }
-  if (pointerTrail > 0.0) {
-    color = mix(color, vec3(1.0), pointerTrail * 0.3);
+  float alpha = 1.0;
+  if (pointerTrail > 0.0 && markerType <= 0.5) {
+    alpha = clamp(1.0 - pointerTrail * 0.08, 0.7, 1.0);
   }
   if (pointerHalo > 0.0) {
     color = mix(color, vec3(1.0), pointerHalo * 0.7);
   }
-  outColor = vec4(color, 1.0);
+  outColor = vec4(color, alpha);
 }
 `