Czarna dziura w shaderze fragmentów
Jak hero tej strony zagina drogę światła każdego piksela wokół dziury w czasie rzeczywistym i co trzeba było zrobić, żeby działało płynnie na laptopie.
Pomysł
Większość czarnych dziur na stronach to filmy. Ta jest rysowana na żywo: każdy piksel hero to promień światła śledzony wstecz od kamery, zaginany wokół dziury i barwiony tym, w co trafi po drodze, dyskiem gazu albo ciemnością za nim.
Zaginanie światła dla każdego piksela
Shader fragmentów prowadzi każdy promień krokami przez zakrzywioną przestrzeń wokół dziury Schwarzschilda. Blisko dziury promień ją okrąża, dlatego widać tył dysku wygięty nad górą i cienki pierścień światła tuż przy cieniu. Promienie, które wpadną, zostają czarne. Te, które przetną dysk, zbierają jego światło, jaśniejsze po stronie, która zbliża się do kamery.
Poświata w dwóch rozmiarach
Surowy render wygląda ostro. Światło jest rozmywane dwa razy, wąsko i szeroko, i dodawane z powrotem. Wąskie rozmycie daje dyskowi blask, szerokie mgiełkę, przez którą dziura wydaje się ogromna, a nie mała.
Płynność
Taki shader kosztuje czas w każdej klatce, więc kilka rzeczy trzyma koszt w ryzach:
- Canvas startuje dopiero, gdy ma się pojawić na ekranie.
- Renderuje w niższej rozdzielczości niż ekran i sam ją obniża, gdy klatki przychodzą za wolno.
- Pod canvasem leży kadr z tego samego shadera, więc strona nie czeka na WebGL, a kadr zostaje, gdy WebGL nie działa albo kontekst zostanie utracony.
Przelot
Przewijanie przesuwa kamerę wzdłuż pierścienia zamiast strony, a potem oddaje miejsce kolejnej sekcji. Z włączonym ograniczeniem ruchu albo bez JavaScriptu przelot jest pomijany i strona czyta się po prostu z góry na dół.
