🌐 Morfująca sfera
Organiczna sfera morfująca dzięki przesunięciu wierzchołków szumem simplex 3D, opalizująca i błyszcząca.
O Morfującej sferze
Morfująca sfera to generatywne dzieło sztuki działające w czasie rzeczywistym w całości w Twojej przeglądarce dzięki WebGL. W każdej klatce niestandardowy shader wierzchołków GLSL przesuwa każdy z około 40 000 wierzchołków sfery wzdłuż jej normalnej za pomocą fraktalnego ruchu Browna (fBm) — czterech nałożonych na siebie oktaw trójwymiarowego szumu simplex, obliczanych przy stopniowo podwajanych częstotliwościach. Efektem jest powierzchnia, która oddycha, pulsuje i wije się z organiczną złożonością, nigdy się nie powtarzając. Drugi przebieg zniekształcenia dziedziny (domain warping) podaje wynik szumu z powrotem jako nową współrzędną wejściową, wprowadzając charakterystyczne samopodobne zawirowania widoczne we wszystkich motywach kolorystycznych.
🔬 Co przedstawia
Proceduralne przesunięcie wierzchołków przez zniekształcony dziedzinowo szum simplex fBm na ikosferze o wysokiej rozdzielczości (poziom szczegółowości 6). Zaburzone normalne są obliczane dla każdego wierzchołka za pomocą różnic skończonych, co daje dokładne cieniowanie na dynamicznie odkształcanej powierzchni. Shader fragmentów z paletą kosinusową mapuje wartość przesunięcia i czas na kolor, tworząc palety opalizującą, magmową, ocean i candy.
🎮 Jak korzystać
Przeciągnij, by obracać, przewiń, by zoomować. Noise scale (Skala szumu) (0,5–6) kontroluje liczbę wybrzuszeń — wysokie wartości dają drobne pomarszczenia, niskie dają szerokie fale. Amplitude (Amplituda) (0–1) ustala, jak daleko przesuwane są wierzchołki; przy 1,0 powierzchnia niemal podwaja swój promień w szczytach. Morph speed (Prędkość morfowania) (0–2) napędza tempo przesuwania się czasu w przestrzeni szumu. Naciśnij Pulse!, by chwilowo zwiększyć amplitudę i uzyskać dramatyczny wybuch ekspansji.
💡 Czy wiesz, że?
Zniekształcenie dziedziny (domain warping) spopularyzował Inigo Quilez w 2003 roku jako sposób tworzenia tekstur terenu i chmur, które wyglądają na naprawdę fraktalne, a nie tylko szumiące. W swojej istocie jest to tylko jedno wywołanie funkcji szumu, którego wynik steruje współrzędną podawaną do drugiego wywołania szumu — dwie linijki GLSL, które dodają ogromne organiczne bogactwo. Technika ta jest dziś fundamentem proceduralnej grafiki czasu rzeczywistego w grach i produkcjach demoscenowych.
Najczęściej zadawane pytania
Jaki rodzaj szumu napędza morfowanie?
Symulacja wykorzystuje trójwymiarowy szum simplex (implementacja Ashima Arts / Stefana Gustavsona), złożony w fBm z 4 oktawami, lakunarnością 2,0 i zyskiem (gain) 0,5. Szum simplex wybrano zamiast klasycznego szumu Perlina, ponieważ ma mniej artefaktów kierunkowych w 3D i jest nieco tańszy obliczeniowo w GLSL — co ma znaczenie, gdy jest wykonywany raz na wierzchołek w każdej klatce dla ok. 40 000 wierzchołków.
Co dokładnie zmienia suwak Noise scale?
Mnoży pozycję wierzchołka, zanim zostanie przekazana do funkcji szumu, co efektywnie przybliża lub oddala widok pola szumu. Niska skala (np. 0,5) próbkuje niewielki obszar przestrzeni szumu, więc powierzchnia wygląda gładko i bulwiasto. Wysoka skala (np. 6,0) próbkuje szeroki obszar, ujawniając drobne detale i tworząc gęsto pomarszczoną, koralowatą fakturę.
Dlaczego przycisk Pulse wywołuje tak dramatyczny efekt?
Pulse tymczasowo zwiększa uniform amplitudy względem jej bieżącej wartości o maksymalnie +0,65, wykorzystując sinusoidalną obwiednię rozłożoną na 1,2 sekundy. Ponieważ amplituda jest ograniczona do 1,0, a przy amplitudzie 1,0 powierzchnia może przesunąć się na zewnątrz niemal o pełny promień, sfera na chwilę nadyma się, zanim wróci do pierwotnego kształtu — wizualnie przypomina to falę uderzeniową rozchodzącą się ze środka.
Czy mogę zatrzymać animację?
Ustaw Morph speed na 0,0. Uniform czasu przestaje się zwiększać, więc pole szumu jest próbkowane w stałej współrzędnej, blokując powierzchnię w kształcie, jaki miała w tym momencie. Nadal możesz obracać widok i zoomować, by obejrzeć zamrożoną geometrię. Zwiększ amplitudę podczas zamrożenia, by wyolbrzymić przesunięcie bez ruchu.
Czy działa na urządzeniach mobilnych?
Tak — symulacja używa standardowego kontekstu WebGL 1.0 z pojedynczym wywołaniem rysowania, co działa w każdej nowoczesnej przeglądarce mobilnej. Na słabszych urządzeniach warto utrzymać skalę szumu poniżej 3,0, a prędkość morfowania poniżej 1,0, aby zachować płynną liczbę klatek na sekundę, ponieważ każda klatka oblicza funkcję fBm zniekształconą dziedzinowo około 120 000 razy w shaderze wierzchołków.