跪拜 Guibai
← All articles
Frontend · GIS · AI Programming

A Typhoon Tracker Gets a 3D Globe and a Blender-Built Storm Model

By LukeSuperCoder ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Placing a custom 3D model on a Mapbox Globe with smooth path interpolation and synchronized multi-element playback is a practical WebGIS pattern that applies to any moving-asset visualization—storm tracking, flight paths, or fleet monitoring. The Blender-to-Mapbox pipeline and the hard-won fixes for origin drift, cache poisoning, and model invisibility save real engineering hours for anyone attempting the same integration.

Summary

A 3D upgrade to an existing open-source typhoon tracker replaces the flat map with a Mapbox Globe projection and a custom GLB cloud system model built in Blender. The model moves along interpolated historical and forecast paths, synchronized with wind circles, a HUD, and camera controls through a single playback engine. Three camera modes—free, follow, and a four-stage presentation sequence—let users observe the storm's scale and direction from spatial perspectives a 2D map cannot provide. The project also implements three performance tiers, a 2D fallback when the model fails to load, and a layered update strategy that throttles wind circles and camera moves independently from the model's position. The write-up details the Blender-to-Mapbox asset pipeline: cleaning and centering a Sketchfab model, applying transforms, managing vertical structure for low-angle viewing, merging materials, and hitting a sub-1.5 MB GLB with Draco compression. On the Mapbox side, it covers GeoJSON-driven model layers, the reasoning behind 28,000x scale and 120 km elevation offsets, longitude interpolation across the antimeridian, and cache-busting with URL version parameters.

Takeaways
All visual elements—model, wind circles, HUD, camera—consume a single TrackState from a unified playback engine to prevent desynchronization.
Mapbox's native model layer accepts a GeoJSON Point with a modelUri property, avoiding the coordinate-system overhead of a Three.js custom layer.
A Blender model's origin must sit exactly at the typhoon center and be moved to world origin (0,0,0) before export, or the model will orbit an offset point on the globe.
Applying Rotation & Scale in Blender bakes the visual state into the GLB; skipping it causes unexpected stacking of web-side model-rotation and model-scale values.
The GLB is a visual symbol, not a meteorological simulation—horizontal scale is exaggerated to ~28,000x and the model is elevated 120 km to keep rain and lightning above the terrain.
Longitude interpolation must handle the 180°/-180° antimeridian by choosing the shortest rotation direction, or the model will spin the long way around the globe.
Follow mode calculates a movement bearing from position deltas, falls back to API-reported direction when displacement is too small, and uses shortest-angle lerp to avoid 358° camera spins.
Presentation mode splits playback progress into four fixed shots (global, medium, close-up, pull-back) without a keyframe system, producing natural cinematic transitions.
Camera updates are throttled to ~220ms while the model moves every frame; both read the same state but update at different rates to avoid jitter and GPU pressure.
GLB load failure triggers a fallback to a DOM-based 2D eye marker—the 3D model is an enhancement layer, not a single point of failure for the typhoon data.
Three layers of caching (browser HTTP, Service Worker, Mapbox Worker) mean a replaced GLB file often won't appear until a URL version parameter is changed.
A model that loads successfully can still be invisible due to tiny scale, subsurface height, near-transparent materials, layer occlusion, or stale [0,0] coordinates.
Conclusions

Separating the GLB's visual scale from the wind circles' real kilometer radii is a clean design decision that avoids the trap of trying to make a 3D model physically accurate at the cost of legibility.

The insistence that 3D rendering must not become a prerequisite for business correctness—paths, forecasts, and warnings still work when the model fails—is a production-hardening principle that many flashy WebGL demos ignore.

Using a URL version parameter as a deliberate cache-busting mechanism across three independent cache layers is a small, high-leverage practice that prevents hours of 'why is my new model not showing' debugging.

The four-stage presentation camera—global, medium, close-up, pull-back—achieves cinematic pacing with four hardcoded shot objects and no keyframe system, a refreshingly low-complexity alternative to animation libraries for data-driven storytelling.

Concepts & terms
Mapbox model layer
A native Mapbox GL JS layer type that renders a 3D glTF or GLB model at a GeoJSON Point location, handling globe projection, lighting, and occlusion without a separate Three.js scene.
Draco compression
A mesh compression library from Google that dramatically reduces the file size of 3D geometry in glTF/GLB files, at the cost of client-side decompression time.
TrackState
A single state object containing the current interpolated position, timestamp, intensity, and movement direction of the typhoon, consumed by all visual and data layers to guarantee synchronization.
Antimeridian interpolation
A technique for interpolating longitude values across the 180°/-180° line by choosing the shorter rotational direction, preventing a moving object from taking the long way around the globe.
From the discussion

Praise for the article's quality contrasts with a perceived lack of engagement, while a reply dismisses the complaint as overblown. A separate comment shares a personal globe-related project and VR app, adding a concrete example of similar work.

The article deserves more recognition than it's getting.
Low engagement on a good piece isn't a sign of decline; just seeing it is enough.
A globe visualization project with a Pico VR version exists as a parallel effort.
Featured comments
夜聆风 1 likes

Awesome. Such a good article and no one's liking it. The world's going downhill.

LukeSuperCoder

Haha, it's not that serious. Seeing it is fate enough [heart].

aspray

I made something globe-related too, https://mairastar.cn/ and also developed a Pico VR app.

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗