Interaktywna kula ziemska z cieniami CSS i Mapami Google

Paul Ireland
Twitter Strona główna

Niedawno przeczytałem wiadomości na stronie Webmonkey, że usługa Adobe CSS Shaders, która pozwoli wprowadzić wysokiej jakości efekty filmowe do sieci dzięki nowym narzędziom CSS, została zaakceptowana przez W3C. Jeśli jeszcze nie wiesz, obejrzyj film.

Najnowsza wersja Google Chrome w wersji Canary dodała obsługę cieniowania CSS, więc postanowiliśmy z nimi poeksperymentować.

W tym eksperymencie udało mi się użyć niestandardowego programu do cieniowania wierzchołków (spherify.vs) i cieniowania fragmentów (spherify.fs), aby utworzyć kulę ziemską w Mapach Google.

<iframe
  class="globe"
  src="https://maps.google.com/?ie=UTF8&amp;amp;ll=14.597042,-15.625&amp;amp;spn=158.47027,316.054688&amp;amp;t=h&amp;amp;z=2&amp;amp;output=embed"
  scrolling="no"></iframe>

.globe {
  width: 550px;
  height: 550px;
  border: 0;
  -webkit-filter: contrast(1.4) custom(url(shaders/spherify.vs) mix(url(shaders/spherify.fs) multiply source-atop),
    50 50 border-box,
    amount 1,
    sphereRadius 0.5,
    sphereAxis -0.41 1 0.19,
    sphereRotation 43.5,
    ambientLight 0.15,
    lightPosition 1 0.87 0.25,
    lightColor 1 1 1 1,
    transform perspective(500));
}

Stosujemy tutaj program do cieniowania wierzchołków (spherify.vs), który będzie działać w siatce składającej się z 50 linii i 50 kolumn (50 50 border-box). Możesz bez problemu odczytać źródło cienia wierzchołków: spherify.vs. Jest on napisany w GLSL, ale prawdopodobnie możesz go wykonać.

Funkcja mix() udostępnia podstawowe funkcje do manipulowania kolorami, takie jak mieszanie i komponowanie alfa za pomocą cieniowania fragmentów.

Promień, oś i obrót elementu możesz zmienić bezpośrednio w CSS. W tym przykładzie ustawiamy wartość sphereRadius: 0.5, co daje oryginalny rozmiar sfery.

Baw się dobrze!

Poniżej znajdziesz film pokazujący efekt. Jeśli masz włączone cieniowanie, możesz pobawić się tym, co znajduje się poniżej.

Jeśli widzisz tylko płaskie Mapy Google, możesz je włączyć, wykonując poniższe instrukcje.

Obsługiwane przeglądarki: cieniowanie CSS

Ta funkcja jest obecnie nowoczesna, dlatego jest dostępna tylko w nocy w najnowszych wersjach Google Chrome Canary i WebKit. Aby w pełni wykorzystać możliwości funkcji, naciśnij kilka pokrętków.

Instrukcje dotyczące Chrome Canary

  1. Na pasku nawigacyjnym przeglądarki wpisz about:flags.
  2. Znajdź opcję „Włącz CSS Shaders”. Włącz
  3. Uruchom ponownie przeglądarkę

Nocne kroki WebKit

  1. Pobierz i zainstaluj WebKit Nightly na Mac OS X
  2. Otwórz panel ustawień przeglądarki. Otwórz kartę Zaawansowane i zaznacz, aby na pasku menu wyświetlić menu Programowanie > Włącz WebGL.
  3. Na pasku menu przeglądarki wybierz Programowanie.