Interaktywna kula ziemska z cieniami CSS i Mapami Google

Paul Irish

Niedawno przeczytałem wiadomość na stronie Webmonkey, że propozycja Adobe dotycząca cieniowania CSS, która pozwoli wprowadzić do sieci wysokiej jakości efekty filmowe za pomocą nowych narzędzi CSS, została zaakceptowana przez W3C. Jeśli jeszcze go nie widziałaś, obejrzyj film.

Najnowsza wersja przeglądarki Google Chrome Canary obsługuje shadery CSS, więc postanowiłem je wypróbować.

W tym eksperymencie użyłem niestandardowego shadera wierzchołkowego (spherify.vs) i shadera fragmentu (spherify.fs), aby utworzyć globus 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));
}

Tutaj stosujemy shader wierzchołkowy (spherify.vs), który będzie działać na siatce zawierającej 50 wierszy i 50 kolumn (50 50 border-box). Możesz przeczytać kod źródłowy shadera wierzchołkowego: spherify.vs. Jest on napisany w języku GLSL, ale prawdopodobnie i tak będziesz w stanie go zrozumieć.

Funkcja mix() zapewnia podstawowe funkcje manipulacji kolorem, takie jak mieszanie i kompozycja alfa w shaderze fragmentów.

Możemy zmienić promień, oś i obrót w prosto w kodzie CSS. W tym przykładzie ustawiamy wartość sphereRadius: 0.5, która odpowiada oryginalnemu rozmiarowi kuli.

Ciesz się wersją demonstracyjną.

Poniżej znajdziesz film pokazujący ten efekt. Jeśli masz włączone shadery, możesz od razu zagrać w prawdziwą grę.

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

Obsługa w przeglądarkach: shadery CSS

Jest to funkcja nowatorska, dlatego jest dostępna tylko w najnowszej wersji Google Chrome Canary i WebKit nightly. Aby w pełni wykorzystać możliwości tego narzędzia, musisz ustawić kilka suwaków.

Czynności w Chrome Canary

  1. Wpisz about:flags na pasku nawigacji przeglądarki
  2. Znajdź opcję „Enable CSS Shaders” (Włącz shadery CSS). Włącz
  3. Ponownie uruchom przeglądarkę.

kroki w wersji WebKit nightly,

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