Alle Bereiche

Bereich 04 · 11 Arbeitsproben

3D & Grafik

Fluid-Simulation, Raymarching, eine Million Partikel, ein Schwarzes Loch mit echter Lichtkrümmung. Alles selbst geschrieben, alles live gerechnet.

04

Holographic AR HUD

3D-Roboter mit Targeting-Brackets, konzentrische Ringe, Live-Telemetrie. Iron-Man-Jarvis.

3D RobotCyan/MagentaBrackets
25

Particle Galaxy Morph

Tausende Canvas-Partikel morphen von der Spiralgalaxie zu Name, Skills und Symbolen. Maus stößt Partikel ab, Klick/Scroll wechselt die Formation.

Canvas 2D4k PartikelMorph
26

Liquid Chrome Ferrofluid

Flüssiges Chrom in einem einzigen WebGL2-Fragment-Shader: Metaballs mit Ferrofluid-Spitzen folgen träge der Maus, darüber große Difference-Typo.

GLSLMetaballsLiquid Chrome
30

Orrery — Sonnensystem

Skills als mechanisches Sonnensystem: jede Disziplin ein Planet auf seiner Bahn, Technologien als Monde, Projekte im Asteroidengürtel. Klick einen Planeten für Details — Canvas, Echtzeit-Orbits, pseudo-3D.

CanvasOrbital-MechanikInteractive
31

WebGL Fluid

Echte GPU-Strömung (Stable-Fluids / Navier-Stokes) in WebGL2. Maus/Finger malt Farbe ins Feld, das real wegströmt. Im Leerlauf schreibt sich „Tobias Ludwig“ aus dem Fluid.

WebGL2Navier-StokesGPGPU
32

Audio Visualizer

Prozeduraler Synth im Browser (Web Audio) + FFT-Analyse treiben ein radiales Spektrum und reaktive Partikel. Beat-Detection, optionaler Mikrofon-Input.

Web AudioFFTBeat-Detection
33

3D Connection Globe

Rotierender Punkt-Globus mit leuchtenden Arcs von Königswinter zu 22 Städten weltweit. Reisende Licht-Pulse, Pins, Drag-Rotation. Three.js / R3F.

Three.jsR3FArcs
36

Raymarched Universe

Demoscene-Raymarcher: volumetrischer Mandelbox-Nebel per Sphere-Tracing, weiche Schatten, AO, Glow, Fog. Scroll-Flug, Quality-Slider. Tief drin: „TL“.

RaymarchingSDFWebGL2
37

1M GPU-Partikel

Bis zu einer Million Partikel via WebGL2 Transform-Feedback durch ein Curl-Noise-Feld. Formen Name & Skills, Maus = Gravitationsbrunnen, Klick = Schwarzes Loch.

Transform-Feedback1M PartikelCurl-Noise
38

Schwarzes Loch

Raymarched Schwarzschild-Schwarzes-Loch mit echter Lichtkrümmung: gelinster Einstein-Ring, Akkretionsscheibe, Doppler-Beaming, Rotverschiebung. Easter-Egg am Horizont.

GeodätenLensingWebGL2
40

WebGPU Compute

Echte WebGPU Compute-Shader: Boids-Schwarm & Flowfield mit bis zu 16k Agenten. Robuste Fallback-Kette WebGPU → WebGL2 → Canvas2D.

WebGPUComputeWGSL

Nächster Bereich

Scroll & Kino

Seiten, die sich beim Scrollen erzählen