Światło przez szkło
Szary promień, jak stara strona, wpada do szklanego pryzmatu i wychodzi tęczą. Pryzmat możesz obracać: przeciągnij go kursorem albo palcem w bok.
Każdy kolor skręca inaczej
Szkło spowalnia fiolet bardziej niż czerwień, więc każda barwa łamie się pod innym kątem. Kąty liczę prawem Snella dla ośmiu długości fali, a rozszczepienie jest celowo większe niż w zwykłym szkle, żeby było je widać.
Szkło, piksel po pikselu
Z bliska widać, co liczy karta graficzna: odbicie od ścianki, załamanie do środka i drugie na wyjściu, osobno dla czerwieni, zieleni i niebieskiego. Stąd tęczowe krawędzie.
Z powrotem w jeden
Drugi, odwrócony pryzmat wyrasta z podłogi i składa barwy z powrotem w jeden promień. W prawdziwym świecie wyszedłby biały, tutaj wychodzi limonkowy.
Nowe światło
Limonkowy promień pisze na podłodze to, co robię ze stronami. To samo światło, lepiej poukładane.
Jak to działa
Bieg promieni liczy przeglądarka, szkło i światło karta graficzna. Nic nie jest pobierane poza jednym skryptem.
- Optyka w kodzie. Dla każdej z ośmiu barw liczę bieg promienia przez oba pryzmaty prawem Snella, ze współczynnikiem załamania ze wzoru Cauchy'ego i całkowitym odbiciem wewnętrznym. Wynik to kilkadziesiąt odcinków światła.
- Szkło bez modelu 3D. Pryzmat to pięć płaszczyzn. Dla każdego piksela karta graficzna liczy odbicie Fresnela i załamanie przez szkło, osobno dla trzech kolorów, z odbiciami wewnątrz.
- Światło w powietrzu i na podłodze. Promienie świecą w pyle zawieszonym w powietrzu, a sąsiednie barwy zachodzą na siebie w ciągłe pasmo widma. Nisko nad podłogą rozlewają barwę, błyszcząca posadzka odbija wiązki i szkło, a na końcu limonkowy promień pisze świecący napis.
- Szybko w praktyce. Scena stoi, gdy jej nie widać, sama obniża rozdzielczość na wolnej karcie graficznej, a przy ograniczonym ruchu przeskakuje między ujęciami.
Więcej pokazów
To jeden z kilku pokazów w laboratorium. Strony firm robię lekkie i bez takich scen, z gwarancją 90+ w PageSpeed na telefonie.
Zobacz swoją nową stronę, zanim zapłacisz
Przygotuję bezpłatny podgląd na podstawie obecnej strony. Płacisz dopiero, gdy go zaakceptujesz.
Wolisz porozmawiać? Umów krótką rozmowę.