WebGL Visualization, Data Processing & Project Gateway
This application serves as an immersive entry point to my development portfolio.
It combines real-time 3D rendering with a custom image-processing pipeline to create a live Earth visualisation that also acts as a gateway to deployed projects.
1. Core Visualization Engine
Three.js & Custom Shaders: Built in vanilla JavaScript using custom GLSL shaders for atmospheric glow, day/night blending, city lights, and cloud rendering.
Material & Lighting Design: The globe combines layered textures, directional lighting, and shader-based blending to create a more cinematic and data-driven Earth model.
2. Live Data & Processing Pipeline
Satellite Imagery Workflow: Cloud imagery is generated from NASA GIBS satellite tiles, stitched server-side into a world map, then processed into a transparent cloud overlay for the globe.
Self-Hosted Asset Delivery: Instead of depending directly on a third-party image URL in the browser, the processed texture is generated locally and served from my own environment for greater reliability and control.
3. Responsive UX & Exploration
Adaptive Controls: Switches between desktop Orbit Controls and a simplified mobile presentation depending on device context and orientation.
Interactive Project Nodes: The orbiting satellites act as navigation markers linking directly to live working projects and deployed applications.