Skip to content

Feature: optimize map rendering#37

Open
Fur4nk wants to merge 8 commits intocalesthio:masterfrom
Fur4nk:feature/optimize-map-rendering
Open

Feature: optimize map rendering#37
Fur4nk wants to merge 8 commits intocalesthio:masterfrom
Fur4nk:feature/optimize-map-rendering

Conversation

@Fur4nk
Copy link

@Fur4nk Fur4nk commented Mar 18, 2026

Summary

This PR introduces significant browser performance optimizations for the Crucix dashboard, focusing on resource management and user control. Key changes include:

  • On-demand 3D Engine: Deferring the loading of three.js and globe.gl until the 3D mode is manually activated.
  • WebGL Lifecycle Management: Implementing pauseAnimation() when switching to Flat mode to eliminate idle GPU/CPU usage.
  • Persistent Low Performance Mode: A new "PERF" toggle (saved in localStorage) that disables expensive CSS backdrop-filter effects, halts purely aesthetic animations, and simplifies globe features
    (reduced star field, thinner atmosphere).
  • Improved Ticker Accessibility: In Low Perf mode, tickers switch from auto-scrolling to manual scrollable lists with custom themed scrollbars for Chromium/Firefox.
  • Symbology Fixes: Removed priority-based culling; all markers now remain visible at all zoom levels on both projections.

Why

The previous implementation caused high CPU/GPU load, particularly in Firefox, due to the constant background rendering of the 3D globe and the intensive use of CSS blur filters. This led to excessive fan
noise and poor responsiveness on mid-range hardware. Users also reported "missing" data points at world-view zoom due to priority-based filtering.

Scope

  • Focused bug fix
  • Small UX improvement
  • New source
  • Dashboard change
  • Docs/config change

Validation

  • Manual testing of the "PERF" toggle: verified backdrop-filter removal and animation halt via Browser DevTools.
  • Verified WebGL loop suspension in Flat mode using chrome://tracing and Firefox Performance tab.
  • Confirmed localStorage persistence across page reloads.
  • Visual verification of custom scrollbars on Chromium (Edge/Chrome) and Firefox.
  • Zoomed out to world-view on both projections to confirm all markers (Air, Thermal, OSINT, etc.) remain visible.

Screenshots

  • New "PERF" toggle in the top-right status bar.
  • Low Performance Mode active: clean panels (no blur), static/scrollable news lists.
  • 3D Globe with simplified atmosphere and optimized star field.

Config and Docs

  • No new environment variables
  • .env.example updated if needed
  • README.md updated if behavior changed

Source Additions

N/A

Checklist

  • This PR stays within one bugfix or one feature family
  • I kept unrelated changes out of the diff
Screenshot From 2026-03-18 12-01-56 Screenshot From 2026-03-18 12-00-37 Screenshot From 2026-03-18 11-59-26

@Fur4nk Fur4nk requested a review from calesthio as a code owner March 18, 2026 11:10
@calesthio
Copy link
Owner

calesthio commented Mar 18, 2026

I like the direction here, but I found three correctness issues in the current head:

  1. toggleFlights() still assumes globe exists. Because this PR defers globe initialization, clicking the flight toggle while still in the default flat view can hit globe.arcsData(...) / globe.pointsData(...) on null.

  2. Low-perf mode is not actually sticky for globe arc animation. togglePerfMode() disables dash animation, but onGlobeZoom() re-enables it whenever the camera gets close enough. That means a low-perf user can zoom back into one of the expensive animation paths the feature is supposed to suppress.

  3. The globe load-failure path is unsafe. initGlobe() can catch a script-load/init failure and leave globe unset, but toggleMapMode() still unconditionally calls globe.resumeAnimation() afterward. If CDN loading fails, switching to globe mode will still throw.

The performance goal is valid, but I don’t think this is merge-ready until those null/error paths are closed.

@Fur4nk Fur4nk force-pushed the feature/optimize-map-rendering branch 2 times, most recently from 786d91c to b7a853e Compare March 19, 2026 10:34
Fur4nk added 8 commits March 19, 2026 11:41
…urces

- Add 'Low Performance Mode' (LOW PERF) toggle with localStorage persistence
- Remove expensive backdrop-blur filters and disable purely aesthetic CSS animations in LOW PERF
- Enable manual scrolling for tickers in LOW PERF by disabling auto-animation and removing duplicates
- Optimize 3D globe by pausing WebGL loop when in Flat mode to zero out idle CPU/GPU usage
- Simplify globe features (reduced star field, thinner atmosphere, no bump map)
- Defer Three.js and Globe.gl loading until manually activated
- Disable arc animations by default (enabled only when zoomed in)
- Ensure all map markers remain visible at all zoom levels on both Flat and Globe projections
@Fur4nk Fur4nk force-pushed the feature/optimize-map-rendering branch from b7a853e to 47871d7 Compare March 19, 2026 11:24
@Fur4nk
Copy link
Author

Fur4nk commented Mar 19, 2026

You were right. I hadn’t tested the related paths thoroughly enough...

I went back through the branch and fixed each of the problems:

  • toggleFlights() no longer assumes the globe exists, so toggling flights while still in flat mode or before globe init is safe
  • low-perf mode is now sticky for globe arc behavior, including zoom changes, and I also made sure auto-rotate does not resume in low-perf after user interaction
  • the globe load-failure path is now guarded properly, so switching to globe mode won’t call resumeAnimation() if globe initialization failed

While retesting, I also cleaned up a related issue in the lazy globe bootstrap path to avoid duplicate Three.js loads.

I also rebased the branch onto current master. A few related changes had already moved upstream in the meantime, so I cleaned up the overlaps during the rebase and kept only the remaining branch-specific
pieces.

Sorry as well for the branch churn. I realized I had been committing with my work Git identity, so I had to rewrite the branch history to correct the author/email before pushing the updated branch. That part
is on me.

@calesthio
Copy link
Owner

I haven't been able to get to this yet because work has been busy, but I definitely plan to review it over the weekend.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants