● In Progress Three.js WebGL GLSL Live Data

Data Drift

2024 – ongoing · Berlin

Open live experience ↗

Concept

Humans continuously adapt to invisible environmental conditions. Over time, exposure does not produce visible collapse — but gradual desensitization. Data Drift places the viewer inside a responsive atmospheric organism driven by real-time urban air quality data.

The tragedy is not destruction. The tragedy is normalization.

Urban air pollution is treated not as a crisis event but as a permanent condition of metropolitan life. The organism does not resist pollution. It adapts. Responsiveness slowly decreases as exposure accumulates. When pollution decreases, recovery occurs — but gradually. The system never fully loses sensitivity.

Is the system stable — or has it simply stopped responding?

System Logic

Each pollutant affects a different behavioral layer of the organism simultaneously:

  • NO₂ → membrane tension
  • PM2.5 → particle density
  • PM10 → vibration field
  • CO → light temperature

Three continuous processes operate in parallel: baseline respiration (constant atmospheric movement representing vitality), immediate pollution response (real-time data modifies behavior), and adaptive memory accumulation (exposure builds over time, gradually reducing sensitivity).

The viewer is located inside the organism. There are no data interfaces or numerical displays — only spatial behavior communicates the system state.

Process Log

Shader rebuild + pollution-driven lighting

Rewrote vertex shader geometry: wider fold spacing, elongated anisotropy, removed basin displacement system that caused a visible seam. Added nano detail layer; removed hard smoothstep cutoffs from macro/mid layers. Fixed inverted pole jitter bug — starburst artefact significantly reduced.

Rebuilt lighting as pollution-driven: clean air = open/milky; heavy pollution = dark/tense. Added peak glow, recession vignette, iridescent edge sheen. Switched colour palette to Jupiter atmosphere reference with spatially varying warm/cool geography.

Working: fold structure covers full sphere, colour palette is spatially variable (warm/cool slopes, teal/umber valleys, iridescence at edges), ambient brightness responds to real pollution data.

Next: resolve remaining wave artefact, re-enable particles, calibrate adaptation system for Berlin's clean air levels.

Live data integration

Reorganised project into modular folder structure. Connected real OpenWeatherMap API via .env. Confirmed live PM2.5, PM10, NO₂, CO data from Berlin fetching correctly in the browser.

Next: continue visual response to data.

Technical

Built with Three.js and custom GLSL shaders. The main membrane shader operates at the boundary between biological membrane and natural phenomena — storms, river currents, dunes. The shader avoids sci-fi energy cores and generic WebGL organic animation; restraint and subtlety are essential to the concept.

Visual references: Blade Runner 2049, Dune (2021), Stalker, Perfect Days, Taste of Cherry. Spatial aesthetic: ice caves, glaciers, Hubble images, membrane structures, subsurface patterns.

Three.js v0.182 Custom GLSL Vite OpenWeatherMap API JavaScript