The Interactive 3D Globe is a masterclass in WebGL performance and aesthetic precision. It replaces the "heavy" look of traditional satellite imagery with a sophisticated, lightweight Dot-Matrix Landmass Shader. By mapping a high-resolution 2D map texture to a 3D spherical coordinate system, the engine procedurally generates landmasses as an array of glowing data points.

This component isn't just a background; it’s a storytelling tool. It features a custom Arc Projection Engine that calculates the shortest distance between two GPS coordinates using Quadratic Bezier Curves, creating elegant, soaring flight paths that animate with a fading "comet" trail.

✨ Key Highlights

• Dot-Grid Vector landmasses: continents are rendered using a custom GLSL fragment shader. Adjust the Dot Density and Dot Size to create anything from a solid geometric look to a lightweight, futuristic data-cloud.

• GPS-Accurate Mapping: Place markers exactly where they belong. Input raw Latitude and Longitude coordinates ($lat, lng$), and the engine's spherical projection logic translates them into precise 3D points on the sphere.

• Dynamic Connection Arcs: Link your global offices or shipping routes. Arcs are generated using 3D Bezier math, soaring above the surface based on your custom Arc Altitude and animating at a speed you define.

• Volumetric Atmosphere: Includes a secondary atmosphere shell with a Fresnel-based glow shader. This creates a soft, cinematic "halo" around the globe that reacts to the camera's perspective.

• Scroll-Sync & Inertia Drag: The globe lives in your page's flow. It can spin as the user scrolls, or be manually rotated with a high-friction "grab and flick" interaction that feels physical and weighted.

• Hybrid HTML Labeling: Location labels aren't just pixels; they are HTML elements that "float" above the pins. Our projection logic hides labels when they move behind the globe's horizon, ensuring a clean, professional look.

⚙️ Complete Design Control

• Optics & Glow: Control the Atmosphere Intensity and color. Fine-tune the Ocean Hex color or set it to "transparent" to let your website's background textures show through the planet.

• Marker Aesthetics: Customize the "Pin Core" and the "Pin Pulse"—animated radar rings that expand from each location to draw the eye.

• Motion Physics: Define the Auto-Spin speed for ambient motion and the Scroll-Spin multiplier to sync the planet's rotation with the user's reading progress.

• Arc Styling: Adjust the Arc Width, Tail Length, and Color to create thick, bold connections or thin, elegant threads of light.