Zegarek z kodu
Nie ma tu ani jednego modelu 3D ani zdjęcia. Koperta, tarcza i wskazówki to wzory liczone przez kartę graficzną dla każdego piksela. Wskazówki pokazują Twoją godzinę.
Stal i światło
Odbicia to studio fotograficzne zapisane wzorem: softbox z lewej, pas światła z prawej i limonkowa kontra od dołu. Przeciągnij zegarek, żeby go obrócić.
Rozkład na warstwy
Szkło, bezel, wskazówki i tarcza unoszą się po kolei, dekiel z okienkiem i wahnik zjeżdżają w dół. Koperta zostaje na miejscu, a w środku czeka mechanizm.
Mechanizm od tyłu
Odwracam zegarek. Dekiel i wahnik odjeżdżają na boki, mostki z paskami genewskimi unoszą się nad przekładnią: bęben, koło środkowe, trzecie, sekundowe i wychwyt, każde na swojej wysokości.
Serce zegarka
Balans waha się trzy razy na sekundę, a spirala oddycha razem z nim. Przy każdym wahnięciu kotwica zwalnia koło wychwytowe o pół zęba: sześć tyknięć na sekundę, a koło sekundowe robi obrót w minutę.
Złożony z powrotem
Jeden shader, około 200 linii wzorów. Wszystko wraca na miejsce, a sekundnik płynie dalej.
Jak to działa
Zamiast trójkątów: dla każdego piksela promień z kamery krok po kroku zbliża się do najbliższej powierzchni.
- Funkcje odległości. Każda część zegarka to wzór, który mówi, jak daleko jest do jej powierzchni: walec z zaokrągleniem, pudełko, koło zębate z zębami powtórzonymi po okręgu. Całość to ich suma i różnice, a każda warstwa liczy się dopiero wtedy, gdy promień jest blisko jej obrysu.
- Policzona przekładnia. Odległość osi to promień koła plus promień zębnika sąsiada, a obroty wynikają z liczby zębów: wychwyt ma 15, koło sekundowe 84 na zębniku z 7 listków, trzecie 72, środkowe 80. Kąty wszystkich kół liczę z jednego licznika tyknięć.
- Raymarching. Promień idzie do przodu o tę odległość, aż dotknie powierzchni, najwyżej 160 kroków. Z tych samych wzorów wychodzi normalna do oświetlenia i cień w zagłębieniach.
- Szkło bez kroków. Szkło nad tarczą to krążek liczony analitycznie: odbicie studia według prawa Fresnela, mocniejsze, gdy patrzysz pod kątem.
- Prawdziwa godzina. Wskazówki biorą czas z Twojego komputera, nic nie jest wysyłane. Przy ograniczonym ruchu w systemie sekundnik przeskakuje co sekundę, a obrót zastępują przeskoki między ujęciami.
- Szybko w praktyce. Scena liczy się w zmniejszonej rozdzielczości i sama ją obniża, gdy klatka trwa za długo. Stoi, gdy jej nie widać, a bez WebGL2 zostaje zwykły obraz.
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ę.