Fix: Crisp radio station dots with zoom-scaling

Replace sprite-based markers (objectsData + SpriteMaterial with
soft 64x64 gradient texture → blurry at zoom) with optimized
point meshes:

- pointResolution(24): smooth 24-sided circles (no hexagons)
- pointAltitude(0.001): nearly flat on surface (no cylinder effect)
- sqrt-based zoom scaling: dots shrink when zooming in, grow when
  zooming out → visually consistent at all zoom levels
- Removed three.js Sprite/SpriteMaterial/CanvasTexture imports

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/plugins/radio/RadioTab.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import Globe from 'globe.gl';
-import { CanvasTexture, Sprite, SpriteMaterial } from 'three';
 
 // ── Types ──
 interface RadioPlace {
@@ -63,29 +62,9 @@ const THEMES = [
   { id: 'cherry', color: '#e74c6f', label: 'Cherry' },
 ];
 
-function createMarkerTexture(color: string): CanvasTexture | null {
+// ── Zoom scaling constants ──
-  const canvas = document.createElement('canvas');
+const BASE_ALT = 2.0;
-  canvas.width = 64;
+const BASE_RADIUS = 0.18;
-  canvas.height = 64;
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return null;
-
-  const gradient = ctx.createRadialGradient(32, 32, 3, 32, 32, 32);
-  gradient.addColorStop(0, 'rgba(255,255,255,1)');
-  gradient.addColorStop(0.35, color);
-  gradient.addColorStop(0.7, color.replace('rgb(', 'rgba(').replace(')', ',0.42)'));
-  gradient.addColorStop(1, 'rgba(0,0,0,0)');
-
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, 64, 64);
-
-  return new CanvasTexture(canvas);
-}
-
-function markerScale(size: number): number {
-  return Math.max(0.55, Math.min(1.75, 0.42 + size * 0.035));
-}
 
 // ── Component ──
 export default function RadioTab({ data }: { data: any }) {
@@ -179,21 +158,9 @@ export default function RadioTab({ data }: { data: any }) {
     if (globeRef.current && containerRef.current) {
       const style = getComputedStyle(containerRef.current.parentElement!);
       const accentRgb = style.getPropertyValue('--accent-rgb').trim();
-      const spriteTexture = createMarkerTexture(`rgb(${accentRgb})`);
+      globeRef.current
-      globeRef.current.atmosphereColor(`rgb(${accentRgb})`);
+        .pointColor(() => `rgba(${accentRgb}, 0.85)`)
-      globeRef.current.objectsData(places);
+        .atmosphereColor(`rgba(${accentRgb}, 0.25)`);
-      globeRef.current.objectThreeObject((d: any) => {
-        const material = new SpriteMaterial({
-          map: spriteTexture ?? undefined,
-          color: `rgb(${accentRgb})`,
-          transparent: true,
-          depthWrite: false,
-        });
-        const sprite = new Sprite(material);
-        const scale = markerScale(d.size ?? 1);
-        sprite.scale.set(scale, scale, 1);
-        return sprite;
-      });
     }
   }, [theme]);
 
@@ -231,41 +198,32 @@ export default function RadioTab({ data }: { data: any }) {
     if (!containerRef.current || places.length === 0) return;
 
     if (globeRef.current) {
-      globeRef.current.objectsData(places);
+      globeRef.current.pointsData(places);
       return;
     }
 
     // Read accent color from theme
     const initStyle = getComputedStyle(containerRef.current.parentElement!);
     const initRgb = initStyle.getPropertyValue('--accent-rgb').trim() || '230, 126, 34';
-    const markerTexture = createMarkerTexture(`rgb(${initRgb})`);
+
     const globe = new Globe(containerRef.current)
       .backgroundColor('rgba(0,0,0,0)')
-      .atmosphereColor(`rgb(${initRgb})`)
+      .atmosphereColor(`rgba(${initRgb}, 0.25)`)
       .atmosphereAltitude(0.12)
       .globeImageUrl('/nasa-blue-marble.jpg')
-      .objectsData(places)
+      .pointsData(places)
-      .objectLat((d: any) => d.geo[1])
+      // Radio Garden geo format: [lng, lat]
-      .objectLng((d: any) => d.geo[0])
+      .pointLat((d: any) => d.geo[1])
-      .objectAltitude(0.0012)
+      .pointLng((d: any) => d.geo[0])
-      .objectFacesSurface(false)
+      .pointColor(() => `rgba(${initRgb}, 0.85)`)
-      .objectLabel((d: any) =>
+      .pointRadius(BASE_RADIUS)
+      .pointAltitude(0.001)
+      .pointResolution(24)
+      .pointLabel((d: any) =>
         `<div style="font-family:system-ui;font-size:13px;color:#fff;background:rgba(30,31,34,0.92);padding:6px 10px;border-radius:6px;border:1px solid rgba(${initRgb},0.3);pointer-events:none">` +
         `<b>${d.title}</b><br/><span style="color:#949ba4;font-size:11px">${d.country}</span></div>`
       )
-      .objectThreeObject((d: any) => {
+      .onPointClick((d: any) => handlePointClickRef.current?.(d))
-        const material = new SpriteMaterial({
-          map: markerTexture ?? undefined,
-          color: `rgb(${initRgb})`,
-          transparent: true,
-          depthWrite: false,
-        });
-        const sprite = new Sprite(material);
-        const scale = markerScale(d.size ?? 1);
-        sprite.scale.set(scale, scale, 1);
-        return sprite;
-      })
-      .onObjectClick((d: any) => handlePointClickRef.current?.(d))
       .width(containerRef.current.clientWidth)
       .height(containerRef.current.clientHeight);
 
@@ -273,7 +231,7 @@ export default function RadioTab({ data }: { data: any }) {
     globe.renderer().setPixelRatio(window.devicePixelRatio);
 
     // Start-Position: Europa
-    globe.pointOfView({ lat: 48, lng: 10, altitude: 2.0 });
+    globe.pointOfView({ lat: 48, lng: 10, altitude: BASE_ALT });
 
     // Auto-Rotation
     const controls = globe.controls() as any;
@@ -282,6 +240,20 @@ export default function RadioTab({ data }: { data: any }) {
       controls.autoRotateSpeed = 0.3;
     }
 
+    // ── Zoom-based dot scaling ──
+    // Dots scale with sqrt(altitude) so they stay visually consistent:
+    // zoomed out (alt 2.0) → radius 0.18°, zoomed in (alt 0.4) → ~0.08°
+    let lastAlt = BASE_ALT;
+    const onControlsChange = () => {
+      const pov = globe.pointOfView();
+      const alt = pov.altitude;
+      if (Math.abs(alt - lastAlt) / lastAlt < 0.05) return;
+      lastAlt = alt;
+      const scale = Math.sqrt(alt / BASE_ALT);
+      globe.pointRadius(() => BASE_RADIUS * Math.max(0.15, Math.min(2.5, scale)));
+    };
+    controls.addEventListener('change', onControlsChange);
+
     globeRef.current = globe;
 
     // Pause rotation on any globe interaction (drag, scroll, touch)
@@ -301,6 +273,7 @@ export default function RadioTab({ data }: { data: any }) {
     window.addEventListener('resize', onResize);
 
     return () => {
+      controls.removeEventListener('change', onControlsChange);
       el.removeEventListener('mousedown', onInteract);
       el.removeEventListener('touchstart', onInteract);
       el.removeEventListener('wheel', onInteract);