root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: sharp globe rendering - HiDPI pixel ratio + NASA 4K texture

Browse source 
- Set renderer pixel ratio to window.devicePixelRatio for crisp
  rendering on Retina/HiDPI displays (was defaulting to 1)
- Upgraded Earth texture from low-res three-globe example (~2K)
  to NASA Black Marble 3600x1800 for sharp detail when zooming
- Added pointResolution(6) for cleaner point geometry

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-06 09:46:18 +01:00
parent 8c2d75380d
commit a9f81d66fd
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/plugins/radio/RadioTab.tsx
View file

@ -180,7 +180,7 @@ export default function RadioTab({ data }: { data: any }) {
const initAccent = initStyle.getPropertyValue('--accent').trim() || '#e67e22'; const initAccent = initStyle.getPropertyValue('--accent').trim() || '#e67e22';
const globe = new Globe(containerRef.current) const globe = new Globe(containerRef.current)
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg') .globeImageUrl('//eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg')
.backgroundColor('rgba(0,0,0,0)') .backgroundColor('rgba(0,0,0,0)')
.atmosphereColor(`rgba(${initRgb}, 0.25)`) .atmosphereColor(`rgba(${initRgb}, 0.25)`)
.atmosphereAltitude(0.12) .atmosphereAltitude(0.12)
@ -191,6 +191,7 @@ export default function RadioTab({ data }: { data: any }) {
.pointColor(() => `rgba(${initRgb}, 0.85)`) .pointColor(() => `rgba(${initRgb}, 0.85)`)
.pointRadius((d: any) => Math.max(0.12, Math.min(0.45, 0.06 + (d.size ?? 1) * 0.005))) .pointRadius((d: any) => Math.max(0.12, Math.min(0.45, 0.06 + (d.size ?? 1) * 0.005)))
.pointAltitude(0.003) .pointAltitude(0.003)
.pointResolution(6)
.pointLabel((d: any) => .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">` + `<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>` `<b>${d.title}</b><br/><span style="color:#949ba4;font-size:11px">${d.country}</span></div>`
@ -199,6 +200,9 @@ export default function RadioTab({ data }: { data: any }) {
.width(containerRef.current.clientWidth) .width(containerRef.current.clientWidth)
.height(containerRef.current.clientHeight); .height(containerRef.current.clientHeight);
// Sharp rendering on HiDPI/Retina displays
globe.renderer().setPixelRatio(window.devicePixelRatio);
// Start-Position: Europa // Start-Position: Europa
globe.pointOfView({ lat: 48, lng: 10, altitude: 2.0 }); globe.pointOfView({ lat: 48, lng: 10, altitude: 2.0 });