PL 
EnglishDomyślny
Українська🌊 Interaktywny ocean
GLSL: piana, odbicie księżyca, efekt Fresnela. Presety — cisza, sztorm, zmarszczki, tsunami. Kliknij, by rzucić kamień.
Piękna powierzchnia oceanu renderowana za pomocą shaderów GLSL z pianą, odbiciami światła księżyca, efektem Fresnela i rozpraszaniem podpowierzchniowym. Presety dla spokojnego morza, sztormu, zmarszczek i tsunami — kliknij, by rzucić kamieniem.
🔬 Co pokazuje
Fale Gerstnera z wieloma składowymi częstotliwości. Równania Fresnela sterują równowagą odbicia i załamania. Piana pojawia się tam, gdzie stromizna fali przekracza próg.
🎮 Jak korzystać
Wybierz preset (cisza, sztorm, zmarszczki, tsunami). Kliknij na wodę, by wywołać zmarszczki uderzenia. Obserwuj, jak zmieniają się odbicia światła księżyca wraz z ruchem fal.
💡 Czy wiedziałeś?
Efekt Fresnela oznacza, że widzisz więcej odbicia pod płaskim kątem, a więcej załamania patrząc prosto w dół — dlatego odległa woda wygląda jak lustro, a bliska jest przezroczysta.
O Interaktywnym oceanie
Ta symulacja renderuje w czasie rzeczywistym powierzchnię oceanu cieniowaną przez GPU, wykorzystując sumę fal Gerstnera. Każda fala Gerstnera przesuwa wierzchołki zarówno pionowo, jak i poziomo, dzięki czemu grzbiety stają się ostrzejsze, a doliny szersze, naśladując sposób, w jaki cząstki prawdziwej wody poruszają się po kołowych orbitach. Nałożone są cztery zachodzące na siebie fale o różnej długości, kierunku i prędkości, przy czym głębokowodna relacja dyspersji c = sqrt(9,8 / k), gdzie k = 2π / długość fali, ustala prędkość fazową każdej fali.
Panel sterowania pozwala dostosować amplitudę (stromiznę), prędkość fal, kierunek wiatru (który przekierowuje dominujące fale), mętność (dodatkowe, chaotyczne zmarszczki wysokiej częstotliwości), głębię koloru i rozdzielczość siatki. Kliknięcie na wodę wywołuje rozszerzającą się, zanikającą zmarszczkę i plusk. Takie techniki napędzają renderowanie wody w grach, filmach i wizualizacjach oceanograficznych, gdzie przekonujące powierzchnie muszą powstawać znacznie szybciej, niż pozwala na to pełny solver płynów.
Najczęściej zadawane pytania
Co pokazuje ta symulacja?
Pokazuje oświetloną światłem księżyca powierzchnię oceanu animowaną w czasie rzeczywistym za pomocą WebGL i Three.js. Wysokość wody pochodzi z kilku połączonych fal Gerstnera, a shader GLSL dodaje pianę na stromych grzbietach, obwódkę odbicia Fresnela, odblaski światła księżyca i podpowierzchniowy odcień rozpraszania.
Czym jest fala Gerstnera?
Fala Gerstnera (lub trochoidalna) to klasyczny model, w którym punkty powierzchni zataczają kołowe orbity, przemieszczając się zarówno poziomo, jak i pionowo. Daje to ostre szczyty i płaskie doliny, które wyglądają znacznie bardziej jak prawdziwe fale niż zwykłe przemieszczenie sinusoidalne, dlatego jest szeroko stosowana w renderowaniu wody w czasie rzeczywistym.
Co robią elementy sterujące?
Amplituda ustala stromiznę fal, Prędkość skaluje tempo poruszania się grzbietów, a Wiatr (kier.) obraca dominujący kierunek fal w stopniach. Mętność dodaje drobne, chaotyczne zmarszczki, Głębia koloru zmienia odcień wody od głębokiej do płytkiej, a Rozdzielczość zmienia podział siatki użytej dla powierzchni.
Jakie jest kluczowe równanie stojące za falami?
Każda fala Gerstnera wykorzystuje głębokowodną relację dyspersji, w której prędkość fazowa c równa się pierwiastkowi kwadratowemu z g podzielonego przez liczbę falową k, gdzie k równa się 2π podzielonemu przez długość fali, a g przyjmuje się jako 9,8. Faza to k razy iloczyn skalarny kierunku i pozycji, minus c razy prędkość razy czas.
Dlaczego na grzbietach pojawiają się białe grzywy i piana?
Shader porównuje pionowe przesunięcie każdego wierzchołka z progiem bliskim amplitudzie fali. Tam, gdzie grzbiet wznosi się stromo powyżej tego progu, wartość piany rośnie, a shader fragmentów miesza niemal biały kolor piany. Przybliża to sposób, w jaki prawdziwe fale załamują się i napowietrzają, gdy ich stromizna staje się zbyt duża.
Czym jest efekt Fresnela widoczny na wodzie?
Efekt Fresnela opisuje, jak refleksyjność rośnie, gdy kąt patrzenia zbliża się do stycznego. Shader podnosi jedynkę minus iloczyn skalarny normalnej powierzchni i kierunku patrzenia do potęgi, więc odległa woda pod płaskim kątem wygląda jak lustro, a woda oglądana z góry wygląda ciemniej i bardziej przezroczyście.
Co się dzieje, gdy klikam wodę?
Kliknięcie wysyła promień na płaską płaszczyznę na poziomie wody, by znaleźć punkt uderzenia, a następnie rejestruje impuls zmarszczki i tworzy kilkanaście cząstek plusku. Zmarszczka to promieniście rozszerzająca się fala sinusoidalna, która zanika zarówno z odległością, jak i czasem, więc zaburzenie rozchodzi się na zewnątrz i zanika, jak kamień wrzucony do stawu.
Jak dokładne jest to fizycznie?
To wizualnie wierne przybliżenie, a nie prawdziwa symulacja płynów. Model Gerstnera i głębokowodna relacja dyspersji są fizycznie uzasadnione, ale człony chaotycznej mętności, zanik zmarszczek i piana to artystyczne heurystyki. Oddaje wygląd i ruch oceanu bez rozwiązywania pełnych równań Naviera-Stokesa.
Co robią presety?
Cisza wykorzystuje niską amplitudę, powolną prędkość i lekką mętność dla łagodnego morza. Sztorm gwałtownie zwiększa amplitudę, prędkość i wzburzenie. Zmarszczki ustawiają niemal płaską powierzchnię i rozrzucają wiele małych uderzeń. Tsunami wykorzystuje bardzo dużą amplitudę z pojedynczą ogromną zmarszczką wystrzeloną z jednej krawędzi siatki.
Gdzie te techniki są używane w rzeczywistości?
Renderowanie oparte na sumie fal Gerstnera napędza oceany w grach wideo i efektach specjalnych filmów, gdzie realistyczna woda jest potrzebna w każdej klatce. Podobne metody widma falowego wspierają inżynierię morską, symulatory statków i wizualizacje oceanograficzne, oferując wiarygodne powierzchnie przy prędkościach interaktywnych bez kosztu pełnego solvera mechaniki płynów.
GLSL: piana, odbicie księżyca, efekt Fresnela. Presety — cisza, sztorm, zmarszczki, tsunami. Kliknij, by rzucić kamień.
3D · Renderer Three.js / WebGL · cel 60 FPS · działa w całości po stronie klienta, bez instalacji