🛸 Neon-Tunnel

Der Trick ist die inverse Radius-Transformation: t = 1/r bildet den Bildschirm so ab, dass Werte nahe der Mitte (kleines r) sehr große t-Werte ergeben, was große Tiefe simuliert, während Werte am Rand (großes r) kleine t-Werte ergeben, was die nahe Wand simuliert. Das gleichmäßige Fortschreiten von t mit der Zeit lässt alle Tiefenebenen gleichzeitig auf den Betrachter zu scrollen, was eine überzeugende Vorwärtsflug-Perspektive erzeugt — ganz ohne Kamera, Matrizen oder jegliche Geometrie.

Eine Kosinus-Palette erzeugt Farbe, indem sie a + b · cos(2π(c · t + d)) pro Farbkanal auswertet, wobei a, b, c, d vec3-Konstanten sind. Da der Kosinus stetig und zwischen −1 und 1 beschränkt ist, ergibt sich immer eine weiche, zyklische Farbkurve ohne abrupte Sprünge. Die drei eingebauten Paletten unterscheiden sich nur in ihren vier Konstantenvektoren: Neon Pink-Cyan nutzt gleiche Amplituden für einen psychedelischen Regenbogen, Green Matrix verschiebt die Amplitude Richtung Grün, und Sunset neigt zu warmen Rot- und Orangetönen.

Twist fügt dem Polarwinkel eine tiefenabhängige Rotation hinzu: a = Winkel + t × twist. Da t wächst, je näher man der Mitte kommt, werden tiefere Teile des Tunnels stärker gedreht als flachere Teile, wodurch die Gitterlinien spiralförmig statt gerade verlaufen. Bei twist = 0 sind die Streifen perfekt radial; bei twist ≈ 1,5 bilden sie eine sanfte Helix; jenseits von 2,5 wird der Korridor zu einer engen Korkenzieherform, die bei hoher Geschwindigkeit ziemlich desorientierend sein kann.

Die Boost-Schaltfläche setzt die Fluggeschwindigkeit vorübergehend auf das 2,5-fache des aktuellen Reglerwerts (gedeckelt bei 10) für genau 1,2 Sekunden und stellt dann die ursprüngliche Geschwindigkeit wieder her. Es handelt sich um ein einfaches setTimeout in der JavaScript-Steuerungsebene — die Shader-Uniform uSpeed wird jeden Frame direkt geschrieben, es gibt also kein Easing oder Interpolieren; Anstieg und Rückkehr erfolgen sofort. Wenn du eine anhaltend hohe Geschwindigkeit möchtest, ziehe einfach den Flug-Geschwindigkeit-Regler nach oben.

Sie verwendet Three.js als dünnen WebGL-Wrapper. Three.js übernimmt die Kontexterzeugung, ein bildschirmfüllendes PlaneGeometry-Quad und das ShaderMaterial, das die benutzerdefinierten GLSL-Vertex- und Fragment-Shader hostet. Der Vertex-Shader ist trivial (er gibt lediglich Clip-Space-Positionen durch); die gesamte visuelle Logik steckt im Fragment-Shader. Es sind keine Three.js-Geometrien, Lichter oder Post-Processing-Durchläufe beteiligt — Three.js wird rein der Bequemlichkeit halber genutzt, um die WebGL-Canvas und Uniforms zu verwalten.