Startseite▸Generative Kunst & algorithmische Muster▸Morphende Kugel

🌐 Morphende Kugel

Eine organische Kugel, die sich fortlaufend durch 3D-Simplex-Rauschen-Vertexverschiebung verformt. Passe Frequenz, Amplitude, Geschwindigkeit und Farbpalette in Echtzeit an.

Generative Kunst & algorithmische Muster3DLeicht60 FPS

Über diese Simulation

Die Morphende Kugel ist ein generatives Kunstwerk in Echtzeit, das vollständig in deinem Browser mittels WebGL läuft. In jedem Frame verschiebt ein maßgeschneiderter GLSL-Vertex-Shader jeden der ~40.000 Vertices der Kugel entlang seiner nach außen weisenden Normalen mithilfe fraktaler Brownscher Bewegung (fBm) — vier übereinandergelegte Oktaven von 3D-Simplex-Rauschen, ausgewertet bei fortlaufend verdoppelten Frequenzen. Das Ergebnis ist eine Oberfläche, die atmet, pulsiert und sich mit organischer Komplexität windet, ohne sich je zu wiederholen. Ein zweiter Durchgang von Domain Warping speist die Rauschausgabe als neue Eingabekoordinate zurück und erzeugt so die charakteristischen selbstähnlichen Wirbel, die du bei allen Farbthemen siehst.

🔬 Was gezeigt wird

Prozedurale Vertexverschiebung durch domain-verzerrtes fBm-Simplex-Rauschen auf einer hochauflösenden Ikosphäre (Detailstufe 6). Gestörte Normalen werden pro Vertex mittels finiter Differenzen berechnet, was ein präzises Shading auf einer dynamisch verformten Oberfläche liefert. Ein Cosinus-Palette-Fragment-Shader bildet Verschiebungswert und Zeit auf Farbe ab und erzeugt die schillernden, magma-, ozean- und candy-artigen Paletten.

🎮 Bedienung

Ziehen zum Orbitieren, scrollen zum Zoomen. Noise scale (0,5–6) steuert, wie viele Beulen erscheinen — hohe Werte ergeben feine Krisel, niedrige Werte breite Schwellungen. Amplitude (0–1) legt fest, wie weit Vertices verschoben werden; bei 1,0 verdoppelt sich der Radius der Oberfläche an den Spitzen fast. Morphgeschwindigkeit (0–2) bestimmt, wie schnell die Zeit durch den Rauschraum voranschreitet. Drücke Pulse!, um die Amplitude kurz für einen dramatischen Expansionsschub ansteigen zu lassen.

💡 Wusstest du schon?

Domain Warping wurde 2003 von Inigo Quilez populär gemacht als Methode, um Terrain- und Wolkentexturen zu erzeugen, die wirklich fraktal statt nur verrauscht aussehen. Im Kern ist es nur ein Rauschaufruf, dessen Ausgabe die Koordinate steuert, die in einen zweiten Rauschaufruf eingespeist wird — zwei Zeilen GLSL, die enorme organische Fülle hinzufügen. Die Technik ist heute ein Eckpfeiler der prozeduralen Echtzeitgrafik in Spielen und Demoszene-Produktionen.

Häufig gestellte Fragen

Welche Art von Rauschen treibt die Verformung an?

Die Simulation verwendet 3D-Simplex-Rauschen (Implementierung von Ashima Arts / Stefan Gustavson), zusammengesetzt zu fBm mit 4 Oktaven, einer Lacunarity von 2,0 und einem Gain von 0,5. Simplex-Rauschen wurde gegenüber klassischem Perlin-Rauschen gewählt, weil es in 3D weniger richtungsabhängige Artefakte aufweist und in GLSL etwas günstiger zu berechnen ist — wichtig, wenn es einmal pro Vertex und Frame über ~40.000 Vertices läuft.

Was verändert der Regler „Noise scale“ eigentlich?

Er multipliziert die Vertexposition, bevor sie an die Rauschfunktion übergeben wird, und zoomt so effektiv in das Rauschfeld hinein oder heraus. Ein niedriger Wert (z. B. 0,5) tastet einen winzigen Bereich des Rauschraums ab, sodass die Oberfläche glatt und blasenartig wirkt. Ein hoher Wert (z. B. 6,0) tastet einen weiten Bereich ab, löst feine Details auf und erzeugt eine dicht zerknitterte, korallenartige Textur.

Warum bewirkt der Pulse-Button einen so dramatischen Effekt?

Pulse erhöht die Amplitude vorübergehend um bis zu +0,65 über ihrem aktuellen Wert, mithilfe einer sinusförmigen Hüllkurve über 1,2 Sekunden. Da die Amplitude auf 1,0 begrenzt ist und bei Amplitude 1,0 die Oberfläche fast um ihren vollen Radius nach außen verschoben werden kann, bläht sich die Kugel kurz auf, bevor sie zurückschnellt — optisch ähnlich einer vom Zentrum ausgehenden Schockwelle.

Kann ich die Animation einfrieren?

Setze Morphgeschwindigkeit auf 0,0. Die Zeit-Uniform hört auf voranzuschreiten, sodass das Rauschfeld an einer festen Koordinate abgetastet wird und die Oberfläche in der Form einfriert, die sie in diesem Moment hatte. Du kannst weiterhin orbitieren und zoomen, um die eingefrorene Geometrie zu betrachten. Erhöhe die Amplitude im eingefrorenen Zustand, um die Verschiebung ohne Bewegung zu übertreiben.

Läuft es auf Mobilgeräten?

Ja — die Simulation nutzt einen Standard-WebGL-1.0-Kontext mit einem einzigen Draw-Call, der in jedem modernen Smartphone-Browser läuft. Auf leistungsschwächeren Geräten solltest du die Noise Scale unter 3,0 und die Morphgeschwindigkeit unter 1,0 halten, um flüssige Bildraten zu erhalten, da jeder Frame die domain-verzerrte fBm-Funktion im Vertex-Shader etwa 120.000-mal auswertet.

⚙ Unter der Haube

Eine organische Kugel, die sich mit 3D-Simplex-Rauschen-Vertexverschiebung verformt, schillernd und glänzend.

Three.jsGLSLWebGLRauschenVertex-Shader

3D · Three.js / WebGL-Renderer · 60 FPS Zielwert · läuft vollständig clientseitig, keine Installation nötig