Goldene Tiefseequallen

Erstelle eine interaktive Quallen-Webseite mit Three.js. Vor einem Ozeanhintergrund, der in der Mitte hell und an den Rändern tiefblau ist, sollen 6–10 goldene, durchscheinende Quallen langsam rotieren und aufwärts pulsieren. Mindestens drei müssen jederzeit sichtbar bleiben, und jede Qualle, die den oberen Rand überschreitet, tritt unten wieder ein. Jede Qualle hat orangefarbene und cremeweiße radiale Streifen, Punkte, ein inneres Leuchten und einen klaren durchscheinenden Rand; die gerüschten Mundarme sind durch den Schirm sichtbar. Wenn sich der Schirm zusammenzieht, wölbt sich sein Rand sichtbar nach außen.

Jede Qualle besteht aus einer inneren und einer äußeren Schirmschicht, einem weichen Saum, 20 haarfeinen Tentakeln und 4 gerüschten Mundarmen. Der Schirm zieht sich regelmäßig zusammen; Saum, Tentakel und Mundarme folgen dabei einem stabilen Verlet-Federphysiksystem — verwende keine vorab aufgezeichneten Animationen. Alle Bewegungen laufen über eine einheitliche Physikuhr; begrenze große Frame-Intervalle und verwende genügend Substeps, damit die Simulation bei langen Laufzeiten nicht auseinanderläuft oder aus ihrer Position driftet.

Füge dem Hintergrund sanfte Kaustiken, simulierte volumetrische Lichtvorhänge und funkelndes Plankton hinzu, gerendert mit weichem Bloom und ACES Tone Mapping für eine Tiefsee-Lichtstimmung. Behandle die Sortierung transparenter Ebenen und Anti-Aliasing korrekt, damit die Tentakel durchgehend und scharf bleiben. Wenn sich die Maus einer Qualle nähert, beschleunigt sich ihr Puls, ihr Leuchten wird intensiver und ihre Tentakel erhalten einen leichten Impuls. Unterstütze das Drehen der Ansicht per Mausziehen und das Zoomen per Mausrad; Ansichtsabstand und Neigungswinkel sollen begrenzt sein. Ersetze die goldenen Quallen durch 15–20 blaugrün leuchtende tropische Fische. Behalte die Verlet-Federphysik für die Bewegung von Schwanz und Flossen bei und lass den Schwarm langsam durch die Szene kreisen, während er Kollisionen vermeidet. Verwende WebGL2 mit prozeduralen Modellen und Materialien. Kein WebGPU, keine externen Modelle, kein Audio, kein Bedienfeld und kein Wechsel zwischen mehreren Szenen. Liefere eine direkt ausführbare statische Webseite mit lokal gebündelten Abhängigkeiten. Folge dem visuellen und physikalischen Ansatz von Aurelia und bewahre Namensnennungen sowie Lizenzhinweise für allen verwendeten Code und alle Algorithmen bei; wenn du das Originalwerk oder Dave Hoskins' Kaustik-Algorithmus wiederverwendest, behalte den jeweiligen Lizenzhinweis bei.

Erstelle eine interaktive Quallen-Webseite mit Three.js. Vor einem Ozeanhintergrund, der in der Mitte hell und an den Rändern tiefblau ist, sollen 6–10 goldene, durchscheinende Quallen langsam rotieren und aufwärts pulsieren. Mindestens drei müssen jederzeit sichtbar bleiben, und jede Qualle, die den oberen Rand überschreitet, tritt unten wieder ein. Jede Qualle hat orangefarbene und cremeweiße radiale Streifen, Punkte, ein inneres Leuchten und einen klaren durchscheinenden Rand; die gerüschten Mundarme sind durch den Schirm sichtbar. Wenn sich der Schirm zusammenzieht, wölbt sich sein Rand sichtbar nach außen.

Jede Qualle besteht aus einer inneren und einer äußeren Schirmschicht, einem weichen Saum, 20 haarfeinen Tentakeln und 4 gerüschten Mundarmen. Der Schirm zieht sich regelmäßig zusammen; Saum, Tentakel und Mundarme folgen dabei einem stabilen Verlet-Federphysiksystem — verwende keine vorab aufgezeichneten Animationen. Alle Bewegungen laufen über eine einheitliche Physikuhr; begrenze große Frame-Intervalle und verwende genügend Substeps, damit die Simulation bei langen Laufzeiten nicht auseinanderläuft oder aus ihrer Position driftet.

Füge dem Hintergrund sanfte Kaustiken, simulierte volumetrische Lichtvorhänge und funkelndes Plankton hinzu, gerendert mit weichem Bloom und ACES Tone Mapping für eine Tiefsee-Lichtstimmung. Behandle die Sortierung transparenter Ebenen und Anti-Aliasing korrekt, damit die Tentakel durchgehend und scharf bleiben. Wenn sich die Maus einer Qualle nähert, beschleunigt sich ihr Puls, ihr Leuchten wird intensiver und ihre Tentakel erhalten einen leichten Impuls. Unterstütze das Drehen der Ansicht per Mausziehen und das Zoomen per Mausrad; Ansichtsabstand und Neigungswinkel sollen begrenzt sein. Mache jede Qualle anklickbar. Pausiere beim Klicken ihre Bewegung und zeige eine Infokarte mit dem Artnamen, der Tiefe ihres Lebensraums und zwei kurzen, allgemein verständlichen Fakten. Verwende WebGL2 mit prozeduralen Modellen und Materialien. Kein WebGPU, keine externen Modelle, kein Audio, kein Bedienfeld und kein Wechsel zwischen mehreren Szenen. Liefere eine direkt ausführbare statische Webseite mit lokal gebündelten Abhängigkeiten. Folge dem visuellen und physikalischen Ansatz von Aurelia und bewahre Namensnennungen sowie Lizenzhinweise für allen verwendeten Code und alle Algorithmen bei; wenn du das Originalwerk oder Dave Hoskins' Kaustik-Algorithmus wiederverwendest, behalte den jeweiligen Lizenzhinweis bei.