The application was developed using SvelteKit and Three.js, with custom GLSL shaders to render a 3D globe featuring real-time atmospheric lighting and a day/night simulation. Emission data was pulled from a Google Sheets API, processed via a custom Node.js pipeline, and visualized using shader-driven overlays on the globe.
We used d3-geo for geographic projections, Turf.js for spatial analysis, and Delaunator for mesh triangulation. Interactivity included GSAP-powered animations, device orientation tracking via FullTilt, and an AR mode displaying local GHG output using a dedicated scene layer.
Webgl Shader development
AR implementation
Data visualisation
Animation systems
SvelteKit
Three.js
D3.js
WebGL/GLSL
GSAP
The augmented reality component was built using a custom WebGL implementation with Three.js, rather than pre-built AR frameworks. This approach was necessary due to limited WebXR support on iOS, where sensor access is restricted. A custom setup allowed direct use of deviceorientation data and consistent functionality across platforms.
The main challenge was WebKit’s handling of motion sensors, which required a custom permission workflow with retry logic to ensure stable orientation access. To handle variations in sensor output between iOS versions, a quaternion-based abstraction layer was implemented to normalize data and maintain accuracy.
For precise geospatial positioning, a custom distance and bearing calculation system was developed, using geometry instancing to efficiently render multiple data points relative to the user’s physical location.
